client for blocking

src/dashboard/App.svelte

@@ -1,17 +1,10 @@
 <script>
   import Router, { link } from 'svelte-spa-router'
 
-  import dj from 'dayjs'
-  import RelativeTime from 'dayjs/plugin/relativeTime'
-  import Duration from 'dayjs/plugin/duration'
-
   import Dev from './components/Dev.svelte'
   import Dashboard from './pages/Dashboard.svelte'
   import Limits from './pages/Limits.svelte'
 
-  dj.extend(Duration)
-  dj.extend(RelativeTime)
-
   const routes = {
     '/': Dashboard,
 

src/dashboard/components/RangeChooser.svelte

@@ -1,10 +1,11 @@
 <script>
+  import { onMount } from 'svelte'
   import dj from 'dayjs'
 
   import DateInput from './DateInput.svelte'
 
-  export let start
-  export let end
+  export let start = new Date()
+  export let end = new Date()
 
   function set(interval, amount = 1) {
     return () => {
@@ -19,7 +20,7 @@
   }
 
   // Init
-  set('week')()
+  onMount(() => set('day', 0)())
 </script>
 
 <style>

src/dashboard/components/Rules.svelte

@@ -1,7 +1,7 @@
 <script>
   import dj from 'dayjs'
 
-  import { getUsageForRules } from '../lib.js'
+  import { getUsageForRules } from '../../shared/lib.js'
 
   export let host = ''
   export let rules = []

src/dashboard/lib.js

@@ -1,53 +0,0 @@
-import { groupBy, orderBy, sum } from 'lodash'
-import dj from 'dayjs'
-
-import { Logs } from '../shared/db'
-
-export async function data({ start, end }) {
-  const logs = await getLogsBetweenDates({ start, end })
-  return groupBy(logs, 'host')
-}
-
-export async function getLogsBetweenDates({ start, end, host }) {
-  const where = {
-    $and: [{ timestamp: { $gt: start } }, { timestamp: { $lt: end } }],
-  }
-  if (host) where.host = host
-  return await Logs.find(where)
-}
-
-export function countInGroup(grouped) {
-  const counted = Object.entries(grouped).map(([key, data]) => {
-    const total = data.reduce((acc, cur) => acc + cur.seconds, 0)
-    const human = dj.duration(total, 'seconds').humanize()
-    return {
-      host: key,
-      total,
-      human,
-    }
-  })
-  return orderBy(counted, 'total', 'desc')
-}
-
-export function longPress(node, fn) {
-  let timeout
-  node.addEventListener('mousedown', () => (timeout = setTimeout(fn, 500)), false)
-  node.addEventListener('mouseup', () => clearTimeout(timeout), false)
-}
-
-export function getUsageForRules(host, rules) {
-  return rules.map(async ({ every, limit }) => {
-    const limitAsSeconds = dj.duration(...limit).asSeconds()
-    const everyAsSeconds = dj.duration(...every).asSeconds()
-
-    const logs = await getLogsBetweenDates({
-      start: dj().subtract(everyAsSeconds, 's').toDate(),
-      end: new Date(),
-      host,
-    })
-
-    // Calculate usage in percentage 0-100
-    const consumed = sum(logs.map((log) => log.seconds))
-    return (consumed / limitAsSeconds) * 100
-  })
-}

src/dashboard/pages/Dashboard.svelte

@@ -4,7 +4,7 @@
   import Chart from '../components/Chart.svelte'
   import RangeChooser from '../components/RangeChooser.svelte'
 
-  import { data, countInGroup } from '../lib'
+  import { data, countInGroup } from '../../shared/lib'
 
   let top = 15
   let full = 50

src/dashboard/pages/Limits.svelte

@@ -5,7 +5,7 @@
   import Rules from '../components/Rules.svelte'
 
   import { Limits } from '../../shared/db.js'
-  import { longPress } from '../lib'
+  import { longPress } from '../../shared/lib'
 
   let limits = null
   let limit = null