progress

src/dashboard/views/YourData.svelte

@@ -0,0 +1,49 @@
+<script>
+  import { saveAs } from 'file-saver'
+  import dj from 'dayjs'
+
+  import FileUpload from '../components/FileUpload.svelte'
+
+  import { dump, load, clear } from '../../shared/db'
+  import { checkForErrors, DBValidator } from '../../shared/validation'
+  import { longPress } from '../../shared/lib'
+
+  let uploaded
+
+  async function exportDB() {
+    const data = await dump()
+    const blob = new Blob([JSON.stringify(data)], { type: 'application/json;charset=utf-8' })
+    const filename = `Ora [${dj().format('YYYY-MM-DD HH-mm-ss')}].json`
+    saveAs(blob, filename)
+  }
+
+  async function clearDB() {
+    await clear()
+    window.location.reload()
+  }
+
+  async function importDB() {
+    try {
+      await load(uploaded)
+      alert('Imported')
+    } catch {
+      alert('Error importing')
+    }
+  }
+
+  $: disabled = uploaded && !checkForErrors(DBValidator, uploaded)
+</script>
+
+<h2 class="mt-8 text-2xl">Your Data</h2>
+<div class="mt-2">
+  <FileUpload bind:value={uploaded} />
+  <button class="btn btn-primary" on:click={importDB} {disabled}>
+    {#if uploaded && disabled}
+      Invalid data
+    {:else}
+      Import
+    {/if}
+  </button>
+  <button class="btn btn-primary" on:click={exportDB}>Export</button>
+  <button class="btn btn-error tooltip" data-tooltip="Hold to delete" use:longPress={clearDB}>Delete all data</button>
+</div>