client for blocking

ROADMAP.md

@@ -2,11 +2,10 @@
 
 ## Current
 
-- d3 graph
+- Max time for website -> block.
 
 ## Backlog
 
-- Max time for website -> block
 - Dark mode support
   - Options
   - Dashboard

manifest.json

@@ -29,7 +29,7 @@
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
-      "js": []
+      "js": ["./src/client/index.js"]
     }
   ],
   "web_accessible_resources": ["./icons/stopwatch.svg", "./icons/stopwatch-inv.svg"]

package.json

@@ -2,9 +2,9 @@
   "name": "ora",
   "private": true,
   "scripts": {
+    "clean": "rm -rf dist .cache",
     "dev": "parcel watch --no-hmr manifest.json src/dashboard/index.html",
-    "build": "parcel build --no-content-hash --no-source-maps manifest.json src/dashboard/index.html",
-    "launch": "web-ext run -s dist"
+    "build": "parcel build --no-content-hash --no-source-maps manifest.json src/dashboard/index.html"
   },
   "browserslist": [
     "last 2 chrome versions",

src/background/index.js

@@ -1,7 +1,8 @@
 import browser from 'webextension-polyfill'
 
 import { dashboard } from '../shared/utils'
-import { insertLog, normalizeTimestamp } from '../shared/db'
+import { insertLog, normalizeTimestamp, Limits } from '../shared/db'
+import { getUsageForHost, percentagesToBool } from '../shared/lib'
 
 browser.browserAction.onClicked.addListener(() => browser.tabs.create({ url: dashboard, active: true }))
 
@@ -37,3 +38,8 @@ async function getAllTabs() {
 setInterval(() => {
   getAllTabs()
 }, frequency)
+
+browser.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
+  // await Limits.
+  return getUsageForHost(message).then((percentages) => percentagesToBool(percentages))
+})

src/client/index.js

@@ -0,0 +1,44 @@
+import browser from 'webextension-polyfill'
+
+let wrapper
+
+function init() {
+  wrapper = window.document.createElement('div')
+  Object.assign(wrapper.style, {
+    display: 'none',
+    position: 'fixed',
+    top: '0',
+    left: '0',
+    width: '100vw',
+    height: '100vh',
+    backgroundColor: '#ffffff',
+    zIndex: '999999999',
+  })
+  wrapper.classList.add('ora--wrapper')
+  wrapper.classList.add('hidden')
+
+  const inner = window.document.createElement('div')
+  Object.assign(inner.style, {
+    fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif`,
+    margin: '3em auto',
+    width: '100%',
+    maxWidth: '20em',
+  })
+  inner.innerHTML = `
+    <h1>Overtime ⏱</h1>
+    <p>You have no time left on this website 🥺</p>
+  `
+  wrapper.appendChild(inner)
+  window.document.body.appendChild(wrapper)
+}
+
+async function check() {
+  if (window.document.hidden) return
+  console.log('Checking')
+  const isBlocked = await browser.runtime.sendMessage(window.location.host)
+  wrapper.style.display = isBlocked ? 'initial' : 'none'
+}
+
+init()
+setInterval(check, 5000)
+check()

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/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

src/shared/db.js

@@ -1,5 +1,10 @@
 import NeDB from 'nedb-promises'
-import day from 'dayjs'
+import dj from 'dayjs'
+import RelativeTime from 'dayjs/plugin/relativeTime'
+import Duration from 'dayjs/plugin/duration'
+
+dj.extend(Duration)
+dj.extend(RelativeTime)
 
 export const Logs = NeDB.create({
   filename: 'logs.db',
@@ -17,7 +22,7 @@ export function clear() {
 
 export function normalizeTimestamp(timestamp) {
   // Normalize every dato to 15 minutes
-  const t = day(timestamp)
+  const t = dj(timestamp)
   const min = t.minute()
   return t
     .millisecond(0)

src/shared/lib.js

@@ -1,7 +1,7 @@
 import { groupBy, orderBy, sum } from 'lodash'
 import dj from 'dayjs'
 
-import { Logs } from '../shared/db'
+import { Limits, Logs } from './db.js'
 
 export async function data({ start, end }) {
   const logs = await getLogsBetweenDates({ start, end })
@@ -51,3 +51,14 @@ export function getUsageForRules(host, rules) {
     return (consumed / limitAsSeconds) * 100
   })
 }
+
+export async function getUsageForHost(host) {
+  const limit = await Limits.findOne({ host })
+  return await Promise.all(getUsageForRules(host, limit.rules))
+}
+
+export function percentagesToBool(percentages) {
+  const blocked = percentages.map((p) => p >= 100).includes(true)
+  console.log(percentages, blocked)
+  return blocked
+}