carteles2/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}
      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>