From 598b9e27cdf25fedf4153ef2b4ff072263cb8d07 Mon Sep 17 00:00:00 2001
From: Borja Robert <borja@brobert.net>
Date: Mon, 23 Jan 2023 23:26:47 +0100
Subject: [PATCH] quita el type=text de un textarea que no tiene que tenerlo

---
 src/lib/form/Form.svelte | 427 ++++++++++++++++++++-------------------
 1 file changed, 218 insertions(+), 209 deletions(-)

diff --git a/src/lib/form/Form.svelte b/src/lib/form/Form.svelte
index 7d3a374..10e422b 100644
--- a/src/lib/form/Form.svelte
+++ b/src/lib/form/Form.svelte
@@ -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>