mirror of
https://github.com/cupcakearmy/ora.git
synced 2024-12-21 23:56:31 +00:00
consolidate all views
This commit is contained in:
parent
2d8b259f32
commit
743890e490
@ -2,7 +2,7 @@ import browser from 'webextension-polyfill'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
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'
|
||||
|
||||
browser.browserAction.onClicked.addListener(() => browser.tabs.create({ url: dashboard, active: true }))
|
||||
|
||||
@ -4,17 +4,36 @@
|
||||
import Dev from './components/Dev.svelte'
|
||||
import Dashboard from './pages/Dashboard.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'
|
||||
|
||||
const routes = {
|
||||
'/': Dashboard,
|
||||
|
||||
'/options': Options,
|
||||
'/limits': Limits,
|
||||
}
|
||||
</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>
|
||||
main {
|
||||
padding: 1em;
|
||||
@ -23,18 +42,3 @@
|
||||
max-width: 50em;
|
||||
}
|
||||
</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>
|
||||
|
||||
@ -89,6 +89,8 @@
|
||||
onMount(render)
|
||||
</script>
|
||||
|
||||
<svg bind:this={wrapper} preserveAspectRatio="xMidYMid meet" />
|
||||
|
||||
<style>
|
||||
svg {
|
||||
width: 100%;
|
||||
@ -98,5 +100,3 @@
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svg bind:this={wrapper} preserveAspectRatio="xMidYMid meet" />
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import faker from 'faker'
|
||||
import faker from 'faker/dist/faker.js'
|
||||
import day from 'dayjs'
|
||||
import { range, random } from 'lodash'
|
||||
|
||||
@ -21,6 +21,8 @@
|
||||
await insertLog({ host, timestamp, seconds })
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
} finally {
|
||||
loading = false
|
||||
}
|
||||
@ -36,6 +38,11 @@
|
||||
}
|
||||
</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>
|
||||
div {
|
||||
position: absolute;
|
||||
@ -43,8 +50,3 @@
|
||||
right: 0;
|
||||
}
|
||||
</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>
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
<script>
|
||||
// import manifest from '../../'
|
||||
</script>
|
||||
<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>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
@ -9,14 +13,3 @@
|
||||
font-family: monospace;
|
||||
}
|
||||
</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>
|
||||
93
src/dashboard/components/Options.svelte
Normal file
93
src/dashboard/components/Options.svelte
Normal 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>
|
||||
@ -3,16 +3,26 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<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>
|
||||
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"></div>
|
||||
<script src="./main.js"></script>
|
||||
<div id="root" />
|
||||
<script type="module" src="./main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -53,21 +53,6 @@
|
||||
onMount(calculate)
|
||||
</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">
|
||||
<h2 class="text-2xl">Dashboard</h2>
|
||||
<RangeChooser bind:start bind:end />
|
||||
@ -91,3 +76,18 @@
|
||||
{/each}
|
||||
</table>
|
||||
{/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>
|
||||
|
||||
@ -30,12 +30,6 @@
|
||||
onMount(load)
|
||||
</script>
|
||||
|
||||
<style>
|
||||
td {
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
|
||||
<RulesEditor bind:limit on:update={load} />
|
||||
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
@ -70,3 +64,9 @@
|
||||
{:else}
|
||||
<div class="loading loading-lg" />
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
td {
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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)
|
||||
@ -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>
|
||||
@ -1,3 +0,0 @@
|
||||
import App from './App.svelte'
|
||||
|
||||
new App({ target: window.document.getElementById('root') })
|
||||
Loading…
Reference in New Issue
Block a user