From 77564060e2212669fbf00646fbdaf9373564f814 Mon Sep 17 00:00:00 2001
From: cupcakearmy <hi@nicco.io>
Date: Sun, 20 Sep 2020 22:24:57 +0200
Subject: [PATCH] client for blocking

---
 ROADMAP.md                                   |  3 +-
 manifest.json                                |  2 +-
 package.json                                 |  4 +-
 src/background/index.js                      |  8 +++-
 src/client/index.js                          | 44 ++++++++++++++++++++
 src/dashboard/App.svelte                     |  7 ----
 src/dashboard/components/RangeChooser.svelte |  7 ++--
 src/dashboard/components/Rules.svelte        |  2 +-
 src/dashboard/pages/Dashboard.svelte         |  2 +-
 src/dashboard/pages/Limits.svelte            |  2 +-
 src/shared/db.js                             |  9 +++-
 src/{dashboard => shared}/lib.js             | 13 +++++-
 12 files changed, 81 insertions(+), 22 deletions(-)
 create mode 100644 src/client/index.js
 rename src/{dashboard => shared}/lib.js (80%)

diff --git a/ROADMAP.md b/ROADMAP.md
index 0d16a64..b4e51d4 100644
--- a/ROADMAP.md
+++ b/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
diff --git a/manifest.json b/manifest.json
index 69e32f2..f213101 100644
--- a/manifest.json
+++ b/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"]
diff --git a/package.json b/package.json
index a77da5b..80b3379 100644
--- a/package.json
+++ b/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",
diff --git a/src/background/index.js b/src/background/index.js
index 967cc3c..e094312 100644
--- a/src/background/index.js
+++ b/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))
+})
diff --git a/src/client/index.js b/src/client/index.js
new file mode 100644
index 0000000..0b0b91f
--- /dev/null
+++ b/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()
diff --git a/src/dashboard/App.svelte b/src/dashboard/App.svelte
index bb31f96..fd1fe41 100644
--- a/src/dashboard/App.svelte
+++ b/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,
 
diff --git a/src/dashboard/components/RangeChooser.svelte b/src/dashboard/components/RangeChooser.svelte
index f853084..6fa21ed 100644
--- a/src/dashboard/components/RangeChooser.svelte
+++ b/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>
diff --git a/src/dashboard/components/Rules.svelte b/src/dashboard/components/Rules.svelte
index 4cf25b3..cff3677 100644
--- a/src/dashboard/components/Rules.svelte
+++ b/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 = []
diff --git a/src/dashboard/pages/Dashboard.svelte b/src/dashboard/pages/Dashboard.svelte
index 34e0ce7..e509e05 100644
--- a/src/dashboard/pages/Dashboard.svelte
+++ b/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
diff --git a/src/dashboard/pages/Limits.svelte b/src/dashboard/pages/Limits.svelte
index 09e9296..909d5df 100644
--- a/src/dashboard/pages/Limits.svelte
+++ b/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
diff --git a/src/shared/db.js b/src/shared/db.js
index c5a26c8..c88bcad 100644
--- a/src/shared/db.js
+++ b/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)
diff --git a/src/dashboard/lib.js b/src/shared/lib.js
similarity index 80%
rename from src/dashboard/lib.js
rename to src/shared/lib.js
index d9907ee..195ea17 100644
--- a/src/dashboard/lib.js
+++ b/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
+}