consolidate all views

src/dashboard/components/Chart.svelte

@@ -89,6 +89,8 @@
   onMount(render)
 </script>
 
+<svg bind:this={wrapper} preserveAspectRatio="xMidYMid meet" />
+
 <style>
   svg {
     width: 100%;
@@ -98,5 +100,3 @@
     font-family: monospace;
   }
 </style>
-
-<svg bind:this={wrapper} preserveAspectRatio="xMidYMid meet" />

src/dashboard/components/Dev.svelte

@@ -1,5 +1,5 @@
 <script>
-  import faker from 'faker'
+  import faker from 'faker/dist/faker.js'
   import day from 'dayjs'
   import { range, random } from 'lodash'
 
@@ -21,6 +21,8 @@
           await insertLog({ host, timestamp, seconds })
         }
       }
+    } catch (e) {
+      console.error(e)
     } finally {
       loading = false
     }
@@ -36,6 +38,11 @@
   }
 </script>
 
+<div class="p-2">
+  <button class="btn btn-sm" class:loading disabled={loading} on:click={fill}>Add Random Data</button>
+  <button class="btn btn-sm btn-error" class:loading disabled={loading} on:click={clear}>Delete data</button>
+</div>
+
 <style>
   div {
     position: absolute;
@@ -43,8 +50,3 @@
     right: 0;
   }
 </style>
-
-<div class="p-2">
-  <button class="btn btn-sm" class:loading disabled={loading} on:click={fill}>Add Random Data</button>
-  <button class="btn btn-sm btn-error" class:loading disabled={loading} on:click={clear}>Delete data</button>
-</div>

src/dashboard/components/FileUpload.svelte

@@ -0,0 +1,47 @@
+<script>
+  import { isEqual } from 'lodash'
+
+  let text = 'Select File'
+
+  export let value = undefined
+
+  let input
+  let error
+
+  function validate() {
+    if (!input || !input.files.length) return
+
+    const file = input.files[0]
+    text = file.name
+
+    const reader = new FileReader()
+    reader.onload = (data) => {
+      try {
+        error = false
+        const text = data.target.result
+        const parsed = JSON.parse(text)
+        value = parsed
+      } catch {
+        error = true
+        value = undefined
+      }
+    }
+    reader.readAsText(file)
+  }
+</script>
+
+<style>
+  label {
+    width: 18em;
+    max-width: 100%;
+    display: inline-block;
+  }
+  label input[type='file'] {
+    display: none;
+  }
+</style>
+
+<label class="btn">
+  {#if error}Invalid file{:else}{text}{/if}
+  <input bind:this={input} on:change={validate} class="input" accept="application/json" type="file" />
+</label>

src/dashboard/components/Footer.svelte

@@ -0,0 +1,15 @@
+<footer>
+  <a href="https://github.com/cupcakearmy/ora" target="_blank" rel="noreferrer">Source Code</a>
+  - v0.7
+  <br />
+  Made with ❤️ by
+  <a href="https://nicco.io" target="_blank" rel="noreferrer">🐘</a>
+</footer>
+
+<style>
+  footer {
+    margin-top: 3rem;
+    text-align: center;
+    font-family: monospace;
+  }
+</style>

src/dashboard/components/Options.svelte

@@ -0,0 +1,93 @@
+<script>
+  import { onMount } from 'svelte'
+  import browser from 'webextension-polyfill'
+  import { saveAs } from 'file-saver'
+  import dj from 'dayjs'
+
+  import FileUpload from './FileUpload.svelte'
+
+  import { dump as dumpDB, load as loadDB, clear as clearDB, validate } from '../../shared/db'
+  import { longPress } from '../../shared/lib'
+
+  const DEFAULT = {
+    retention: 90,
+  }
+
+  let settings = DEFAULT
+  let uploaded
+  let disabled = true
+
+  async function read() {
+    settings = {
+      ...DEFAULT,
+      ...(await browser.storage.local.get()),
+    }
+  }
+
+  function write() {
+    return browser.storage.local.set(settings)
+  }
+
+  async function reset() {
+    await browser.storage.local.clear()
+    await read()
+  }
+
+  async function dump() {
+    const data = await dumpDB()
+    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 clear() {
+    await clearDB()
+    alert('Done')
+  }
+
+  async function load() {
+    try {
+      await loadDB(uploaded)
+      alert('Imported')
+    } catch {
+      alert('Error importing')
+    }
+  }
+
+  $: {
+    disabled = !validate(uploaded)
+  }
+
+  onMount(read)
+</script>
+
+<h2 class="mt-8 text-2xl">Settings</h2>
+<form class="mt-2" on:submit|preventDefault={write}>
+  <div class="form-group">
+    <label class="form-label">
+      Retention
+      <small>(Days)</small>
+      <input
+        id="retention"
+        class="form-input"
+        type="number"
+        min="3"
+        max="365"
+        step="1"
+        bind:value={settings.retention}
+      />
+    </label>
+
+    <div class="mt-2">
+      <button type="reset" class="btn" on:click={reset}>Reset</button>
+      <button type="submit" class="btn btn-primary">Save</button>
+    </div>
+  </div>
+</form>
+<h2 class="mt-8 text-2xl">Your Data</h2>
+<div class="mt-2">
+  <FileUpload bind:value={uploaded} />
+  <button class="btn btn-primary" on:click={load} {disabled}>Import</button>
+  <button class="btn btn-primary" on:click={dump}>Export</button>
+  <button class="btn btn-error tooltip" data-tooltip="Hold to delete" use:longPress={clear}>Delete all data</button>
+</div>