Some features and stuff

lyssieth · Jan 5, 2024 · 5e1c5ec · 5e1c5ec
1 parent bf7d029
commit 5e1c5ec
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 104 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -3,45 +3,10 @@
   import ExportBlock from "./lib/ExportBlock.svelte";
   import Questionnaire from "./lib/Questionnaire.svelte";
   import ScrollButton from "./lib/ScrollButton.svelte";
-  import { state } from "./lib/store";
-  import { type Template } from "./lib/template";
-
-  let changed: boolean = false;
-
-  function onTemplateChange(template: Template) {
-    if ($state.current && changed) {
-      const current = $state.current;
-      const confirm = window.confirm(
-        "You have unsaved changes. Are you sure you want to change templates?"
-      );
-
-      if (!confirm) {
-        const el = document.getElementById(
-          "templateSelect"
-        ) as HTMLSelectElement;
-
-        el.value = current.name;
-
-        return;
-      }
-    }
-
-    $state.current = template;
-    changed = false;
-
-    // can't trust the urls of other people sadly. sorry ;;
-    if (template.author instanceof Object) {
-      if (
-        template.author.name !== "lys" &&
-        template.author.url !== "https://lys.ee/contact"
-      ) {
-        $state.current.author = template.author.name;
-      }
-    }
-  }
+  import { changed } from "./lib/store";
 
   window.addEventListener("beforeunload", (e) => {
-    if (changed) {
+    if ($changed) {
       const confirm = "Are you sure you want to leave?";
       e.preventDefault();
       e.returnValue = confirm;
@@ -76,12 +41,8 @@
   <hr />
 
   <div id="questionnaire">
-    <Controls {onTemplateChange} />
-    {#if $state.current}
-      <Questionnaire bind:changed current="{$state.current}" />
-    {:else}
-      <p>There is currently no template selected. Select one above.</p>
-    {/if}
+    <Controls />
+    <Questionnaire />
   </div>
 
   <hr />

diff --git a/src/lib/Controls.svelte b/src/lib/Controls.svelte
@@ -1,20 +1,41 @@
 <script lang="ts">
-  import {
-    DEFAULT_TEMPLATES,
-    getTemplate,
-    savedTemplates,
-    type Template
-  } from "./template";
-
-  export let onTemplateChange: (template: Template) => void;
+  import { changed, current } from "./store";
+  import { DEFAULT_TEMPLATES, getTemplate, savedTemplates } from "./template";
 
   function onChange(evt: Event) {
     const el = evt.target as HTMLSelectElement;
 
     const template = getTemplate(el.value);
 
     if (template) {
-      onTemplateChange(template);
+      if ($current && $changed) {
+        const confirm = window.confirm(
+          "You have unsaved changes. Are you sure you want to change templates?"
+        );
+
+        if (!confirm) {
+          const el = document.getElementById(
+            "templateSelect"
+          ) as HTMLSelectElement;
+
+          el.value = $current.name;
+
+          return;
+        }
+      }
+
+      $current = template;
+      $changed = false;
+
+      // can't trust the urls of other people sadly. sorry ;;
+      if (template.author instanceof Object) {
+        if (
+          template.author.name !== "lys" &&
+          template.author.url !== "https://lys.ee/contact"
+        ) {
+          $current.author = template.author.name;
+        }
+      }
     } else {
       // TODO: Error modal
       console.error(`Template ${el.value} not found`);
@@ -24,6 +45,25 @@
 
     el.blur();
   }
+
+  function exportAsJson() {
+    if ($current) {
+      const data = JSON.stringify($current, null, 2);
+
+      const blob = new Blob([data], { type: "application/json" });
+      const url = URL.createObjectURL(blob);
+
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `${$current.name}.json`;
+
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    } else {
+      alert("No template is currently selected.");
+    }
+  }
 </script>
 
 <div class="controls">
@@ -41,6 +81,9 @@
       {/each}
     </select>
   </label>
+  <button on:click="{exportAsJson}" class="small"
+    >Export template as JSON</button
+  >
 </div>
 
 <style lang="scss">
@@ -58,4 +101,8 @@
       border: 1px solid darken(#f9f9f9, 10%);
     }
   }
+
+  .small {
+    font-size: 0.8em;
+  }
 </style>
diff --git a/src/lib/ExportBlock.svelte b/src/lib/ExportBlock.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { state } from "./store";
+  import { current } from "./store";
   import { exportQuestions } from "./util";
 
   let exportBlock: HTMLTextAreaElement;
 
-  state.subscribe(() => {
+  current.subscribe(() => {
     if (exportBlock) exportBlock.value = "";
   });
 </script>
@@ -24,7 +24,7 @@
     rows="10"
     id="export"
     readonly
-    placeholder="{$state.current == null
+    placeholder="{$current == null
       ? 'No template is selected, so this is pointless :3'
       : 'Hit the button to refresh me!'}"
   ></textarea><br />
@@ -34,13 +34,16 @@
     on:click="{() => {
       exportQuestions(exportBlock);
     }}"
-    disabled="{$state.current == null}">Refresh</button
+    disabled="{$current == null}">Refresh</button
   >
   <button
     on:click="{() => {
-      navigator.clipboard.writeText(exportBlock.value);
-    }}"
-    disabled="{exportBlock && exportBlock.value.length <= 0}"
-    >Copy to Clipboard</button
+      if (exportBlock && exportBlock.value.length > 0) {
+        navigator.clipboard.writeText(exportBlock.value);
+        alert('Copied to clipboard!');
+      } else {
+        alert('Nothing to copy!');
+      }
+    }}">Copy to Clipboard</button
   >
 </div>
diff --git a/src/lib/Questionnaire.svelte b/src/lib/Questionnaire.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
   import Section from "./Section.svelte";
-  import type { Template, TemplateSection } from "./template";
+  import { changed, current } from "./store";
+  import type { TemplateSection } from "./template";
 
-  export let current: Template;
-  export let changed: boolean;
-
-  $: template = current;
+  $: template = $current;
 
   let sectionMap: Map<string, boolean> = new Map();
 
@@ -17,45 +15,49 @@
     sectionMap.set(section.title, hasValue);
 
     if (anyHasValue()) {
-      changed = true;
+      $changed = true;
     }
   }
 </script>
 
-{#key template}
-  <h2 class="template-title">{template.name}</h2>
-  {#if template.author}
-    <!-- check if it's an Author type -->
-    {#if template.author instanceof Object}
-      <h5 class="template-author">
-        by <a
-          href="{template.author.url}"
-          title="A link to the author of the template."
-          >{template.author.name}</a
-        >
-      </h5>
-    {:else}
-      <h5 class="template-author">by {template.author}</h5>
-    {/if}
-  {/if}
-  <p class="template-description">
-    {template.description}
-  </p>
-  <hr />
-  {#if template.sections.length > 0}
-    {#each template.sections as section, i}
-      <Section {section} {sectionChanged} />
-      {#if i !== template.sections.length - 1}
-        <hr />
+{#if template == null}
+  <p>No template is currently selected. Please remain calm and select one:3</p>
+{:else}
+  {#key template}
+    <h2 class="template-title">{template.name}</h2>
+    {#if template.author}
+      <!-- check if it's an Author type -->
+      {#if template.author instanceof Object}
+        <h5 class="template-author">
+          by <a
+            href="{template.author.url}"
+            title="A link to the author of the template."
+            >{template.author.name}</a
+          >
+        </h5>
+      {:else}
+        <h5 class="template-author">by {template.author}</h5>
       {/if}
-    {/each}
-  {:else}
-    <p>
-      There are no sections in this template. You can add more once I implement
-      this feature.
+    {/if}
+    <p class="template-description">
+      {template.description}
     </p>
-  {/if}
-{/key}
+    <hr />
+    {#if template.sections.length > 0}
+      {#each template.sections as section, i}
+        <Section {section} {sectionChanged} />
+        {#if i !== template.sections.length - 1}
+          <hr />
+        {/if}
+      {/each}
+    {:else}
+      <p>
+        There are no sections in this template. You can add more once I
+        implement this feature.
+      </p>
+    {/if}
+  {/key}
+{/if}
 
 <style lang="scss">
   .template-title {

diff --git a/src/lib/store.ts b/src/lib/store.ts
@@ -1,8 +1,8 @@
 import { writable } from "svelte/store";
 import { type Template } from "./template";
 
-export const state = writable({
-  current: null
-} as {
-  current: null | Template;
-});
+export const current = writable(null as Template | null);
+export const changed = writable(false);
+export const permissionGranted = writable(
+  localStorage.getItem("permissionGranted") === "true"
+);
diff --git a/src/lib/util.ts b/src/lib/util.ts
@@ -36,7 +36,7 @@ export function exportQuestions(exportBlock: HTMLTextAreaElement) {
     .join("\n\n");
 
   if (exportText.trim().length > 0) {
-    exportBlock.value = exportText;
+    exportBlock.value = exportText.trim();
   } else {
     exportBlock.value = "";
   }