progress

src/dashboard/components/DurationInput.svelte

@@ -0,0 +1,14 @@
+<script>
+  export let value
+</script>
+
+{#if Array.isArray(value)}
+  <input type="number" class="form-input" placeholder="1" bind:value={value[0]} />
+  <select class="form-select" bind:value={value[1]}>
+    <option value="m">Minutes</option>
+    <option value="h">Hours</option>
+    <option value="d">Days</option>
+    <option value="w">Weeks</option>
+    <option value="M">Months</option>
+  </select>
+{/if}

src/dashboard/components/Footer.svelte

@@ -1,9 +1,10 @@
 <footer>
-  <a href="https://github.com/cupcakearmy/ora" target="_blank" rel="noreferrer">Source Code</a>
-  - v0.8
-  <br />
-  Made with ❤️ by
-  <a href="https://nicco.io" target="_blank" rel="noreferrer">🐘</a>
+  <small>
+    Made with ❤️ by
+    <a href="https://nicco.io" target="_blank" rel="noreferrer">🐘</a>
+    — v0.8 —
+    <a href="https://github.com/cupcakearmy/ora" target="_blank" rel="noreferrer">Source Code</a>
+  </small>
 </footer>
 
 <style>

src/dashboard/components/RangeChooser.svelte

@@ -19,17 +19,23 @@
     end = new Date()
   }
 
+  const intervals = [
+    { label: 'Year', set: set('year', 1) },
+    { label: 'Month', set: set('month', 1) },
+    { label: 'Week', set: set('week', 1) },
+    { label: '3 Days', set: set('day', 3) },
+    { label: 'Today', set: set('day', 0) },
+  ]
+
   // Init
   onMount(() => set('day', 0)())
 </script>
 
 <div class="flex items-center">
   <div class="btn-group">
-    <button class="btn btn-sm" on:click={all}>All</button>
-    <button class="btn btn-sm" on:click={set('month', 1)}>Month</button>
-    <button class="btn btn-sm" on:click={set('week', 1)}>Week</button>
-    <button class="btn btn-sm" on:click={set('day', 3)}>3 Days</button>
-    <button class="btn btn-sm" on:click={set('day', 0)}>Today</button>
+    {#each intervals as interval (interval.label)}
+      <button class="btn btn-sm" on:click={interval.set}>{interval.label}</button>
+    {/each}
   </div>
   <div class="spacer" />
   <div class="input-group">

src/dashboard/components/RulesEditor.svelte

@@ -3,11 +3,14 @@
   import { cloneDeep } from 'lodash'
 
   import { DB } from '../../shared/db'
+  import { checkForErrors, LimitValidator } from '../../shared/validation'
+  import DurationInput from './DurationInput.svelte'
 
   const dispatch = createEventDispatcher()
   const init = { limit: ['1', 'h'], every: [1, 'd'] }
 
   export let limit = null
+  export let error = null
   $: active = limit !== null
 
   function add() {
@@ -23,6 +26,11 @@
   }
 
   async function save() {
+    const errors = checkForErrors(LimitValidator, limit)
+    if (errors) {
+      error = errors
+      return
+    }
     await DB.limits.put(limit)
     dispatch('update')
     close()
@@ -45,25 +53,11 @@
           </label>
 
           <div class="form-label">Rules</div>
-          {#each limit.rules as { limit, every }, i}
+          {#each limit.rules as rule, i}
             <div class="input-group mb-3">
-              <input type="text" class="form-input" placeholder="1" bind:value={limit[0]} />
-              <select class="form-select" bind:value={limit[1]}>
-                <option value="m">Minutes</option>
-                <option value="h">Hours</option>
-                <option value="d">Days</option>
-                <option value="w">Weeks</option>
-                <option value="M">Months</option>
-              </select>
+              <DurationInput bind:value={rule.limit} />
               <span class="input-group-addon">every</span>
-              <input type="text" class="form-input" bind:value={every[0]} />
-              <select class="form-select" bind:value={every[1]}>
-                <option value="m">Minutes</option>
-                <option value="h">Hours</option>
-                <option value="d">Days</option>
-                <option value="w">Weeks</option>
-                <option value="M">Months</option>
-              </select>
+              <DurationInput bind:value={rule.every} />
               <button class="btn btn-error input-group-btn" on:click={del(i)}>X</button>
             </div>
           {/each}
@@ -73,6 +67,9 @@
     </div>
     <div class="modal-footer">
       <div>
+        {#if error}
+          <span class="text-error">{error}</span>
+        {/if}
         <button on:click={close} class="btn">Cancel</button>
         <button on:click={save} class="btn btn-primary">Save</button>
       </div>

src/dashboard/components/StorageQuota.svelte

@@ -0,0 +1,17 @@
+<script>
+  import pretty from 'pretty-bytes'
+  import { onMount } from 'svelte'
+
+  let usage = null
+
+  onMount(async () => {
+    const estimate = await window.navigator.storage.estimate()
+    usage = pretty(estimate.usage)
+  })
+</script>
+
+{#if usage === null}
+  <span class="loading" />
+{:else}
+  <span>Storage used: <span class="font-mono">{usage}</span></span>
+{/if}