consolidate all views

This commit is contained in:
cupcakearmy 2021-11-22 01:36:18 +01:00
parent 2d8b259f32
commit 743890e490
No known key found for this signature in database
GPG Key ID: 3235314B4D31232F
15 changed files with 166 additions and 284 deletions

View File

@ -2,7 +2,7 @@ import browser from 'webextension-polyfill'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { dashboard } from '../shared/utils' import { dashboard } from '../shared/utils'
import { insertLog, normalizeTimestamp, Limits, DB } from '../shared/db' import { insertLog, normalizeTimestamp, DB } from '../shared/db'
import { getUsageForHost, percentagesToBool } from '../shared/lib' import { getUsageForHost, percentagesToBool } from '../shared/lib'
browser.browserAction.onClicked.addListener(() => browser.tabs.create({ url: dashboard, active: true })) browser.browserAction.onClicked.addListener(() => browser.tabs.create({ url: dashboard, active: true }))

View File

@ -4,17 +4,36 @@
import Dev from './components/Dev.svelte' import Dev from './components/Dev.svelte'
import Dashboard from './pages/Dashboard.svelte' import Dashboard from './pages/Dashboard.svelte'
import Limits from './pages/Limits.svelte' import Limits from './pages/Limits.svelte'
import Footer from '../shared/footer.svelte' import Footer from './components/Footer.svelte'
import Options from './components/Options.svelte'
import { isDev } from '../shared/utils' import { isDev } from '../shared/utils'
const routes = { const routes = {
'/': Dashboard, '/': Dashboard,
'/options': Options,
'/limits': Limits, '/limits': Limits,
} }
</script> </script>
{#if isDev}
<Dev />
{/if}
<main>
<div class="mb-8">
<!-- svelte-ignore a11y-missing-attribute -->
<a use:link={'/'}><button class="btn">Dashboard</button></a>
<!-- svelte-ignore a11y-missing-attribute -->
<a use:link={'/limits'}><button class="btn">Limits</button></a>
<!-- svelte-ignore a11y-missing-attribute -->
<a use:link={'/options'}><button class="btn">Options</button></a>
</div>
<Router {routes} />
<Footer />
</main>
<style> <style>
main { main {
padding: 1em; padding: 1em;
@ -23,18 +42,3 @@
max-width: 50em; max-width: 50em;
} }
</style> </style>
{#if isDev}
<Dev />
{/if}
<main>
<div class="mb-8">
<a href="../options/index.html"><button class="btn">Options</button></a>
<a use:link={'/'}><button class="btn">Dashboard</button></a>
<a use:link={'/limits'}><button class="btn">Limits</button></a>
</div>
<Router {routes} />
<Footer />
</main>

View File

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

View File

@ -1,5 +1,5 @@
<script> <script>
import faker from 'faker' import faker from 'faker/dist/faker.js'
import day from 'dayjs' import day from 'dayjs'
import { range, random } from 'lodash' import { range, random } from 'lodash'
@ -21,6 +21,8 @@
await insertLog({ host, timestamp, seconds }) await insertLog({ host, timestamp, seconds })
} }
} }
} catch (e) {
console.error(e)
} finally { } finally {
loading = false loading = false
} }
@ -36,6 +38,11 @@
} }
</script> </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> <style>
div { div {
position: absolute; position: absolute;
@ -43,8 +50,3 @@
right: 0; right: 0;
} }
</style> </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>

View File

@ -1,6 +1,10 @@
<script> <footer>
// import manifest from '../../' <a href="https://github.com/cupcakearmy/ora" target="_blank" rel="noreferrer">Source Code</a>
</script> - v0.7
<br />
Made with ❤️ by
<a href="https://nicco.io" target="_blank" rel="noreferrer">🐘</a>
</footer>
<style> <style>
footer { footer {
@ -9,14 +13,3 @@
font-family: monospace; font-family: monospace;
} }
</style> </style>
<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>

View File

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

View File

@ -3,16 +3,26 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link href="../../node_modules/spectre.css/dist/spectre.min.css" rel="stylesheet" /> <link href="../../node_modules/spectre.css/dist/spectre.min.css" rel="stylesheet" />
<link href="../../node_modules/tailwindcss/dist/tailwind.css" rel="stylesheet" /> <link href="../../node_modules/tailwindcss/dist/tailwind.min.css" rel="stylesheet" />
<style> <style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
}
#root { #root {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
} }
</style> </style>
<title>Ora</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root" />
<script src="./main.js"></script> <script type="module" src="./main.js"></script>
</body> </body>
</html> </html>

View File

@ -53,21 +53,6 @@
onMount(calculate) onMount(calculate)
</script> </script>
<style>
table td,
table th {
padding: 0.25rem 0.06rem;
}
table td.same {
opacity: 0.25;
}
table td :global(a:visited) {
color: inherit;
}
</style>
<div class="flex justify-between items-center mb-8"> <div class="flex justify-between items-center mb-8">
<h2 class="text-2xl">Dashboard</h2> <h2 class="text-2xl">Dashboard</h2>
<RangeChooser bind:start bind:end /> <RangeChooser bind:start bind:end />
@ -91,3 +76,18 @@
{/each} {/each}
</table> </table>
{/if} {/if}
<style>
table td,
table th {
padding: 0.25rem 0.06rem;
}
table td.same {
opacity: 0.25;
}
table td :global(a:visited) {
color: inherit;
}
</style>

View File

@ -30,12 +30,6 @@
onMount(load) onMount(load)
</script> </script>
<style>
td {
vertical-align: top;
}
</style>
<RulesEditor bind:limit on:update={load} /> <RulesEditor bind:limit on:update={load} />
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
@ -70,3 +64,9 @@
{:else} {:else}
<div class="loading loading-lg" /> <div class="loading loading-lg" />
{/if} {/if}
<style>
td {
vertical-align: top;
}
</style>

View File

@ -1,109 +0,0 @@
<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 Footer from '../shared/footer.svelte'
import { dashboard, isDev } from '../shared/utils'
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>
<style>
main {
padding: 1em;
margin: auto;
width: 100%;
max-width: 50em;
}
</style>
<main>
<a href={dashboard} target={isDev ? '' : '_blank'}><button class="btn">Dashboard</button></a>
<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>
<Footer />
</main>

View File

@ -1,38 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href="../../node_modules/spectre.css/dist/spectre.min.css" rel="stylesheet" />
<link href="./main.css" rel="stylesheet" />
</head>
<body>
<main>
<h1>Ora</h1>
<p>Ora helps you track down time consuming websites</p>
<a href="../dashboard/index.html" target="_blank"><button class="btn btn-primary btn-lg">Go to the Dashboard</button></a>
<br />
<br />
<br />
<form id="form">
<h4>Settings</h4>
<div class="form-group">
<label class="form-label">
Frequency <small>(Minutes)</small>
<input id="frequency" class="form-input" type="number" min="3" step="1" />
</label>
<label class="form-label">
Retention <small>(Days)</small>
<input id="retention" class="form-input" type="number" min="3" max="365" step="1" />
</label>
<button id="reset" type="submit" class="btn">Reset</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</main>
<div id="root"></div>
<script src="./main.js"></script>
</body>
</html>

View File

@ -1,42 +0,0 @@
import browser from 'webextension-polyfill'
const DEFAULT = {
frequency: 3,
retention: 90,
}
async function load() {
try {
return await browser.storage.local.get()
} catch {
return DEFAULT
}
}
async function save(settings) {
return browser.storage.local.set(settings)
}
function init() {
const frequency = window.document.getElementById('frequency')
const retention = window.document.getElementById('retention')
const reset = window.document.getElementById('reset')
const form = window.document.getElementById('form')
form.addEventListener('submit', (e) => {
e.preventDefault()
save({ frequency: frequency.value, retention: retention.value })
})
reset.addEventListener('click', async () => {
await browser.storage.local.clear()
window.location.reload()
})
load().then((saved) => {
frequency.value = saved.frequency
retention.value = saved.retention
})
}
window.document.addEventListener('DOMContentLoaded', init)

View File

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href="../../node_modules/spectre.css/dist/spectre.min.css" rel="stylesheet" />
<link href="../../node_modules/tailwindcss/dist/tailwind.min.css" rel="stylesheet" />
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
}
#root {
width: 100vw;
height: 100vh;
}
</style>
<title>Ora</title>
</head>
<body>
<div id="root" />
<script src="./main.js"></script>
</body>
</html>

View File

@ -1,3 +0,0 @@
import App from './App.svelte'
new App({ target: window.document.getElementById('root') })