brobert
/
carteles2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

quita el type=text de un textarea que no tiene que tenerlo

Browse Source
esther
Borja Robert 2 years ago
parent a0f3a24c89
commit 598b9e27cd
1 changed files with 218 additions and 209 deletions
Show Stats Download Patch File Download Diff File

427
src/lib/form/Form.svelte
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save