progress

src/dashboard/views/YourData.svelte

@@ -4,17 +4,23 @@
 
   import FileUpload from '../components/FileUpload.svelte'
 
-  import { dump, load, clear } from '../../shared/db'
-  import { checkForErrors, DBValidator } from '../../shared/validation'
+  import { clear, DB } from '../../shared/db'
   import { longPress } from '../../shared/lib'
+  import { notify } from '../toasts'
 
-  let uploaded
+  let file
+  let loading = false
 
   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)
+    try {
+      loading = true
+      const blob = await DB.export()
+      const filename = `Ora [${dj().format('YYYY-MM-DD HH-mm-ss')}].json`
+      saveAs(blob, filename)
+      notify('Exported')
+    } finally {
+      loading = false
+    }
   }
 
   async function clearDB() {
@@ -24,26 +30,24 @@
 
   async function importDB() {
     try {
-      await load(uploaded)
-      alert('Imported')
-    } catch {
-      alert('Error importing')
+      loading = true
+      await clear()
+      await DB.import(file)
+      notify('Imported')
+    } catch (e) {
+      notify('Error importing', 'error')
+    } finally {
+      loading = false
     }
   }
-
-  $: 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}
+  <FileUpload bind:file />
+  <button class="btn btn-primary" class:loading on:click={importDB} disabled={!file}>Import</button>
+  <button class="btn btn-primary" class:loading on:click={exportDB}>Export</button>
+  <button class="btn btn-error tooltip" class:loading data-tooltip="Hold to delete" use:longPress={clearDB}>
+    Delete all data
   </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>