carteles/src/lib/form/Form.svelte

<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)'
		});
	});
</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>
</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;
	}
</style>