quita el type=text de un textarea que no tiene que tenerlo
parent
a0f3a24c89
commit
598b9e27cd
@ -1,220 +1,229 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import html2canvas from 'html2canvas';
|
||||
import Organized from '$lib/form/Organized.svelte';
|
||||
import Colabs from './Colabs.svelte';
|
||||
import {
|
||||
title,
|
||||
heading,
|
||||
subtitle,
|
||||
content,
|
||||
date,
|
||||
time,
|
||||
weekday,
|
||||
address,
|
||||
city,
|
||||
canvas
|
||||
} from '$lib/stores/store';
|
||||
|
||||
/** @type {HTMLDivElement} */ let editor;
|
||||
|
||||
const handleSubmit = async () => {
|
||||
console.log('submit');
|
||||
};
|
||||
|
||||
const getContent = () => {
|
||||
if (!editor) {
|
||||
console.log('no hay editor');
|
||||
return;
|
||||
}
|
||||
if (editor && editor.firstChild !== null) {
|
||||
// @ts-ignore
|
||||
$content = editor.firstChild.innerHTML;
|
||||
}
|
||||
};
|
||||
const saveCanvas = async () => {
|
||||
if ($canvas !== undefined) {
|
||||
const img = await html2canvas($canvas, { scale: 2 });
|
||||
const image = img.toDataURL('image/png');
|
||||
const data = new FormData();
|
||||
data.append('image', image);
|
||||
data.append(
|
||||
'content',
|
||||
JSON.stringify({
|
||||
title: $title,
|
||||
heading: $heading,
|
||||
subtitle: $subtitle,
|
||||
content: $content,
|
||||
date: $date,
|
||||
time: $time,
|
||||
weekday: $weekday,
|
||||
address: $address,
|
||||
city: $city
|
||||
})
|
||||
);
|
||||
|
||||
const req = await fetch('/admin', {
|
||||
method: 'POST',
|
||||
body: data
|
||||
});
|
||||
console.log(req);
|
||||
}
|
||||
};
|
||||
|
||||
const downloadCanvas = async () => {
|
||||
if ($canvas !== undefined) {
|
||||
const res = await html2canvas($canvas, { scale: 2 });
|
||||
const image = res.toDataURL('image/png');
|
||||
const link = document.createElement('a');
|
||||
link.download = `${$date.split('-')[0]}-${$date.split('-')[1]}-${
|
||||
$date.split('-')[2].split('T')[0]
|
||||
}-${$city.replace(' ', '_')}-cartel.png`;
|
||||
link.href = image;
|
||||
link.click();
|
||||
}
|
||||
};
|
||||
|
||||
const quillOptions = {
|
||||
modules: {
|
||||
toolbar: [['bold', 'italic']]
|
||||
},
|
||||
theme: 'snow'
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
const { default: Quill } = await import('quill');
|
||||
|
||||
let quill = new Quill(editor, {
|
||||
modules: {
|
||||
toolbar: quillOptions
|
||||
},
|
||||
theme: 'snow',
|
||||
placeholder:
|
||||
'Participan:\nFernando Marín (DMD)\nPresenta:\nFernanda del Castillo (DMD Asturias)'
|
||||
});
|
||||
});
|
||||
import { onMount } from "svelte";
|
||||
import html2canvas from "html2canvas";
|
||||
import Organized from "$lib/form/Organized.svelte";
|
||||
import Colabs from "./Colabs.svelte";
|
||||
import {
|
||||
title,
|
||||
heading,
|
||||
subtitle,
|
||||
content,
|
||||
date,
|
||||
time,
|
||||
weekday,
|
||||
address,
|
||||
city,
|
||||
canvas,
|
||||
} from "$lib/stores/store";
|
||||
|
||||
/** @type {HTMLDivElement} */ let editor;
|
||||
|
||||
const handleSubmit = async () => {
|
||||
console.log("submit");
|
||||
};
|
||||
|
||||
const getContent = () => {
|
||||
if (!editor) {
|
||||
console.log("no hay editor");
|
||||
return;
|
||||
}
|
||||
if (editor && editor.firstChild !== null) {
|
||||
// @ts-ignore
|
||||
$content = editor.firstChild.innerHTML;
|
||||
}
|
||||
};
|
||||
const saveCanvas = async () => {
|
||||
if ($canvas !== undefined) {
|
||||
const img = await html2canvas($canvas, { scale: 2 });
|
||||
const image = img.toDataURL("image/png");
|
||||
const data = new FormData();
|
||||
data.append("image", image);
|
||||
data.append(
|
||||
"content",
|
||||
JSON.stringify({
|
||||
title: $title,
|
||||
heading: $heading,
|
||||
subtitle: $subtitle,
|
||||
content: $content,
|
||||
date: $date,
|
||||
time: $time,
|
||||
weekday: $weekday,
|
||||
address: $address,
|
||||
city: $city,
|
||||
})
|
||||
);
|
||||
|
||||
const req = await fetch("/admin", {
|
||||
method: "POST",
|
||||
body: data,
|
||||
});
|
||||
console.log(req);
|
||||
}
|
||||
};
|
||||
|
||||
const downloadCanvas = async () => {
|
||||
if ($canvas !== undefined) {
|
||||
const res = await html2canvas($canvas, { scale: 2 });
|
||||
const image = res.toDataURL("image/png");
|
||||
const link = document.createElement("a");
|
||||
link.download = `${$date.split("-")[0]}-${$date.split("-")[1]}-${
|
||||
$date.split("-")[2].split("T")[0]
|
||||
}-${$city.replace(" ", "_")}-cartel.png`;
|
||||
link.href = image;
|
||||
link.click();
|
||||
}
|
||||
};
|
||||
|
||||
const quillOptions = {
|
||||
modules: {
|
||||
toolbar: [["bold", "italic"]],
|
||||
},
|
||||
theme: "snow",
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
const { default: Quill } = await import("quill");
|
||||
|
||||
let quill = new Quill(editor, {
|
||||
modules: {
|
||||
toolbar: quillOptions,
|
||||
},
|
||||
theme: "snow",
|
||||
placeholder:
|
||||
"Participan:\nFernando Marín (DMD)\nPresenta:\nFernanda del Castillo (DMD Asturias)",
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<form on:submit|preventDefault={handleSubmit}>
|
||||
<div class="form-group">
|
||||
<label for="heading">Tipo de actividad</label>
|
||||
<input
|
||||
bind:value={$heading}
|
||||
type="text"
|
||||
name="heading"
|
||||
placeholder="Ej: Taller, charla, coloquio, debate, curso"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div clasS="form-group">
|
||||
<label for="title">Título</label>
|
||||
<input bind:value={$title} type="text" name="title" placeholder="Título" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="subtitle">Subtítulo</label>
|
||||
<input bind:value={$subtitle} type="text" name="subtitle" placeholder="Subtítulo" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="content">Contenido</label>
|
||||
<div id="editor" on:click={getContent}>
|
||||
<div on:click={getContent} on:keyup={getContent} bind:this={editor} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group when">
|
||||
<div class="daymonth">
|
||||
<label for="date">Fecha</label>
|
||||
<input bind:value={$date} type="date" name="date" />
|
||||
</div>
|
||||
<div class="time">
|
||||
<label for="time">Hora</label>
|
||||
<input bind:value={$time} type="time" name="time" />
|
||||
</div>
|
||||
<div class="dayname">
|
||||
<label for="weekday">Día de la semana</label>
|
||||
<input bind:value={$weekday} type="text" name="weekday" placeholder="Ej. Lunes" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="address">Dirección</label>
|
||||
<textarea
|
||||
bind:value={$address}
|
||||
type="text"
|
||||
name="address"
|
||||
placeholder="Ej. Calle del Abeto, 4"
|
||||
/>
|
||||
<label for="city">Ciudad</label>
|
||||
<input bind:value={$city} type="text" name="" placeholder="Ej. Cádiz" />
|
||||
</div>
|
||||
|
||||
<div class="form-group ">
|
||||
<label for="organizedBy">Organiza:</label>
|
||||
<Organized />
|
||||
<label for="colabs">Colabora:</label>
|
||||
<Colabs />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="heading">Tipo de actividad</label>
|
||||
<input
|
||||
bind:value={$heading}
|
||||
type="text"
|
||||
name="heading"
|
||||
placeholder="Ej: Taller, charla, coloquio, debate, curso"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div clasS="form-group">
|
||||
<label for="title">Título</label>
|
||||
<input bind:value={$title} type="text" name="title" placeholder="Título" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="subtitle">Subtítulo</label>
|
||||
<input
|
||||
bind:value={$subtitle}
|
||||
type="text"
|
||||
name="subtitle"
|
||||
placeholder="Subtítulo"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="content">Contenido</label>
|
||||
<div id="editor" on:click={getContent}>
|
||||
<div on:click={getContent} on:keyup={getContent} bind:this={editor} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group when">
|
||||
<div class="daymonth">
|
||||
<label for="date">Fecha</label>
|
||||
<input bind:value={$date} type="date" name="date" />
|
||||
</div>
|
||||
<div class="time">
|
||||
<label for="time">Hora</label>
|
||||
<input bind:value={$time} type="time" name="time" />
|
||||
</div>
|
||||
<div class="dayname">
|
||||
<label for="weekday">Día de la semana</label>
|
||||
<input
|
||||
bind:value={$weekday}
|
||||
type="text"
|
||||
name="weekday"
|
||||
placeholder="Ej. Lunes"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="address">Dirección</label>
|
||||
<textarea
|
||||
bind:value={$address}
|
||||
name="address"
|
||||
placeholder="Ej. Calle del Abeto, 4"
|
||||
/>
|
||||
<label for="city">Ciudad</label>
|
||||
<input bind:value={$city} type="text" name="" placeholder="Ej. Cádiz" />
|
||||
</div>
|
||||
|
||||
<div class="form-group ">
|
||||
<label for="organizedBy">Organiza:</label>
|
||||
<Organized />
|
||||
<label for="colabs">Colabora:</label>
|
||||
<Colabs />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<button on:click|preventDefault={downloadCanvas}>Descargar</button>
|
||||
<button on:click|preventDefault={saveCanvas}>Guardar</button>
|
||||
|
||||
<style>
|
||||
.form-group {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: 0.8rem;
|
||||
font-family: sans-serif;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: 0.8rem;
|
||||
font-family: sans-serif;
|
||||
padding: 0.5rem;
|
||||
min-height: 3rem;
|
||||
line-height: 1.3rem;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
font-family: monospace;
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
#editor {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 1rem;
|
||||
padding: 0.5rem;
|
||||
font-size: 1.1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-group.when {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-gap: 0.25rem;
|
||||
}
|
||||
.form-group {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: 0.8rem;
|
||||
font-family: sans-serif;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: 0.8rem;
|
||||
font-family: sans-serif;
|
||||
padding: 0.5rem;
|
||||
min-height: 3rem;
|
||||
line-height: 1.3rem;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
font-family: monospace;
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
#editor {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 1rem;
|
||||
padding: 0.5rem;
|
||||
font-size: 1.1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-group.when {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-gap: 0.25rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue