WIP: Convert to javascript
46
index.html
|
|
@ -1,46 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<script defer data-domain="interval-timer.wbrawner.com" src="https://plausible.wbrawner.com/js/plausible.js"></script>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<title>Trainterval</title>
|
|
||||||
|
|
||||||
<base href="/" />
|
|
||||||
|
|
||||||
<!-- This meta viewport ensures the webpage's dimensions change according to the device it's on. This is called Responsive Web Design.-->
|
|
||||||
<meta name="viewport"
|
|
||||||
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
|
|
||||||
<meta name="description" content="An interval timer" />
|
|
||||||
<meta name="theme-color" content="#000000" />
|
|
||||||
|
|
||||||
<!-- These meta tags are Apple-specific, and set the web application to run in full-screen mode with a black status bar. Learn more at https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html-->
|
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
||||||
<meta name="apple-mobile-web-app-title" content="Trainterval" />
|
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
|
||||||
|
|
||||||
<!-- Imports an icon to represent the document. -->
|
|
||||||
<link rel="icon" href="/assets/icons/24x24-icon.png" type="image/x-icon" />
|
|
||||||
|
|
||||||
<!-- Imports the manifest to represent the web application. A web app must have a manifest to be a PWA. -->
|
|
||||||
<link rel="manifest" href="/manifest.json" />
|
|
||||||
|
|
||||||
<script type="module" src="/src/app-index.ts"></script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<!-- Our app-index web component. This component is defined in src/pages/app-index.ts-->
|
|
||||||
<fluent-design-system-provider>
|
|
||||||
<app-index></app-index>
|
|
||||||
</fluent-design-system-provider>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
if ('serviceWorker' in navigator) {
|
|
||||||
navigator.serviceWorker.register(
|
|
||||||
import.meta.env.MODE === 'production' ? '/sw.js' : '/sw.js?dev-sw'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
12
js/index.js
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
function toggleSidebar() {
|
||||||
|
const sidebar = document.getElementById('sidebar')
|
||||||
|
if (sidebar.className === 'visible') {
|
||||||
|
sidebar.className = ''
|
||||||
|
} else {
|
||||||
|
sidebar.className = 'visible'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function newTimer() {
|
||||||
|
console.warn('newTimer not yet implemented')
|
||||||
|
}
|
||||||
10115
package-lock.json
generated
|
|
@ -3,17 +3,18 @@
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"description": "A starter kit for building PWAs!",
|
"description": "A starter kit for building PWAs!",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "tsc && vite build",
|
"build": "tsc && vite build",
|
||||||
"coverage": "vitest --coverage",
|
"coverage": "vitest --coverage",
|
||||||
"deploy": " npx @azure/static-web-apps-cli login --no-use-keychain && npx @azure/static-web-apps-cli deploy",
|
"deploy": " npx @azure/static-web-apps-cli login --no-use-keychain && npx @azure/static-web-apps-cli deploy",
|
||||||
"dev": "npx @azure/static-web-apps-cli start http://localhost:3000 --run \"npm run dev-server\"",
|
"dev": "npx @azure/static-web-apps-cli start http://localhost:3000 --run \"npm run dev-server\"",
|
||||||
"dev-server": "vite --open",
|
"dev-server": "light-server -s src",
|
||||||
"dev-task": "vite",
|
"dev-task": "vite",
|
||||||
"lint": "eslint src/**/*.ts",
|
"lint": "eslint src/**/*.ts",
|
||||||
"start": "npm run dev",
|
"start": "npm run dev",
|
||||||
"start-remote": "vite --host",
|
"start-remote": "vite --host",
|
||||||
"test": "vitest"
|
"test": "mocha"
|
||||||
},
|
},
|
||||||
"author": "",
|
"author": "",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
|
|
@ -21,7 +22,9 @@
|
||||||
"@fluentui/web-components": "^2.5.16",
|
"@fluentui/web-components": "^2.5.16",
|
||||||
"@vaadin/router": "^1.7.5",
|
"@vaadin/router": "^1.7.5",
|
||||||
"idb": "^7.1.1",
|
"idb": "^7.1.1",
|
||||||
|
"light-server": "^2.9.1",
|
||||||
"lit": "^3.1.0",
|
"lit": "^3.1.0",
|
||||||
|
"ts-to-jsdoc": "^1.5.0",
|
||||||
"workbox-build": "^7.0.0",
|
"workbox-build": "^7.0.0",
|
||||||
"workbox-core": "^7.0.0",
|
"workbox-core": "^7.0.0",
|
||||||
"workbox-precaching": "^7.0.0"
|
"workbox-precaching": "^7.0.0"
|
||||||
|
|
@ -34,6 +37,7 @@
|
||||||
"c8": "^8.0.1",
|
"c8": "^8.0.1",
|
||||||
"eslint": "^8.54.0",
|
"eslint": "^8.54.0",
|
||||||
"jsdom": "^23.0.0",
|
"jsdom": "^23.0.0",
|
||||||
|
"mocha": "^10.2.0",
|
||||||
"typescript": "^5.3.2",
|
"typescript": "^5.3.2",
|
||||||
"vite": "^4.5.0",
|
"vite": "^4.5.0",
|
||||||
"vite-plugin-pwa": "^0.17.2",
|
"vite-plugin-pwa": "^0.17.2",
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 5 KiB After Width: | Height: | Size: 5 KiB |
|
Before Width: | Height: | Size: 138 KiB After Width: | Height: | Size: 138 KiB |
|
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.1 KiB |
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 5.5 KiB |
|
Before Width: | Height: | Size: 6 KiB After Width: | Height: | Size: 6 KiB |
|
Before Width: | Height: | Size: 203 KiB After Width: | Height: | Size: 203 KiB |
|
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 57 KiB |
|
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 7.1 KiB After Width: | Height: | Size: 7.1 KiB |
|
Before Width: | Height: | Size: 7.4 KiB After Width: | Height: | Size: 7.4 KiB |
|
Before Width: | Height: | Size: 7.4 KiB After Width: | Height: | Size: 7.4 KiB |
|
Before Width: | Height: | Size: 7.8 KiB After Width: | Height: | Size: 7.8 KiB |
|
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 8.4 KiB |
|
Before Width: | Height: | Size: 769 B After Width: | Height: | Size: 769 B |
|
Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 9.1 KiB |
|
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 9.4 KiB |
|
Before Width: | Height: | Size: 9.7 KiB After Width: | Height: | Size: 9.7 KiB |
|
Before Width: | Height: | Size: 9.8 KiB After Width: | Height: | Size: 9.8 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 963 B After Width: | Height: | Size: 963 B |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 211 KiB After Width: | Height: | Size: 211 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 8.1 KiB After Width: | Height: | Size: 8.1 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 2 KiB After Width: | Height: | Size: 2 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 3 KiB After Width: | Height: | Size: 3 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 3 KiB After Width: | Height: | Size: 3 KiB |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 4 KiB After Width: | Height: | Size: 4 KiB |
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 7 KiB After Width: | Height: | Size: 7 KiB |
|
Before Width: | Height: | Size: 9.5 KiB After Width: | Height: | Size: 9.5 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 51 KiB After Width: | Height: | Size: 51 KiB |
|
|
@ -1,7 +1,3 @@
|
||||||
/*
|
|
||||||
This file is used for all of your global styles and CSS variables.
|
|
||||||
Check here https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties for more info on using CSS variables.
|
|
||||||
*/
|
|
||||||
:root {
|
:root {
|
||||||
--font-family: sans-serif;
|
--font-family: sans-serif;
|
||||||
--background-color: #181818;
|
--background-color: #181818;
|
||||||
|
|
@ -18,19 +14,71 @@ body {
|
||||||
|
|
||||||
* {
|
* {
|
||||||
transition: all 0.25s ease;
|
transition: all 0.25s ease;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
fluent-design-system-provider,
|
@media(prefers-color-scheme: light) {
|
||||||
app-index {
|
header {
|
||||||
height: 100%;
|
color: black;
|
||||||
color: var(--foreground-color);
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
background: var(--app-color-primary);
|
||||||
|
color: white;
|
||||||
|
height: 4em;
|
||||||
|
padding: 0 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-content {
|
||||||
|
position: absolute;
|
||||||
|
width: 20em;
|
||||||
|
height: 100vh;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 999;
|
||||||
|
background: var(--background-color);
|
||||||
|
transform: translate3d(-100%, 0, 0);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visible .sidebar-content {
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 998;
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visible .overlay {
|
||||||
|
display: block;
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
background: #000000;
|
background: #181818;
|
||||||
}
|
}
|
||||||
|
|
||||||
fluent-design-system-provider {
|
fluent-design-system-provider {
|
||||||
|
|
@ -68,7 +116,6 @@ app-index {
|
||||||
--neutral-fill-stealth-active: rgba(255, 255, 255, 0.4);
|
--neutral-fill-stealth-active: rgba(255, 255, 255, 0.4);
|
||||||
--neutral-stroke-divider-rest: rgba(255, 255, 255, 0.2);
|
--neutral-stroke-divider-rest: rgba(255, 255, 255, 0.2);
|
||||||
|
|
||||||
--timer-background-default: #181818;
|
|
||||||
--timer-background-red: #860101;
|
--timer-background-red: #860101;
|
||||||
--timer-background-green: #0C5E0C;
|
--timer-background-green: #0C5E0C;
|
||||||
--timer-background-yellow: #D2AD0F;
|
--timer-background-yellow: #D2AD0F;
|
||||||
|
|
@ -80,7 +127,7 @@ app-index {
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
background: #000000;
|
background: white;
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -112,10 +159,9 @@ app-index {
|
||||||
--neutral-fill-stealth-active: rgba(0, 0, 0, 0.4);
|
--neutral-fill-stealth-active: rgba(0, 0, 0, 0.4);
|
||||||
--neutral-fill-rest: #5d5d5d;
|
--neutral-fill-rest: #5d5d5d;
|
||||||
--neutral-fill-input-active: #e5e5e5;
|
--neutral-fill-input-active: #e5e5e5;
|
||||||
--timer-background-default: #FFFFFF;
|
|
||||||
--timer-background-red: #FF0909;
|
--timer-background-red: #FF0909;
|
||||||
--timer-background-green: #1cb91c;
|
--timer-background-green: #1cb91c;
|
||||||
--timer-background-yellow: #F2C812;
|
--timer-background-yellow: #F2C812;
|
||||||
--timer-background-blue: #0091ff;
|
--timer-background-blue: #0091ff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
37
src/index.html
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<script defer data-domain="interval-timer.wbrawner.com" src="https://plausible.wbrawner.com/js/plausible.js"></script>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Trainterval</title>
|
||||||
|
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
|
||||||
|
<meta name="description" content="An interval timer" />
|
||||||
|
<meta name="theme-color" content="#000000" />
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||||
|
<meta name="apple-mobile-web-app-title" content="Trainterval" />
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
||||||
|
<link rel="icon" href="/assets/icons/24x24-icon.png" type="image/x-icon" />
|
||||||
|
<link rel="manifest" href="/manifest.json" />
|
||||||
|
<link rel="stylesheet" href="/css/style.css" />
|
||||||
|
<script type="importmap">
|
||||||
|
{
|
||||||
|
"imports": {
|
||||||
|
"@vaadin/router": "./node_modules/@vaadin/router",
|
||||||
|
"lit": "./node_modules/lit"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script type="module" src="/script/app-index.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<app-index></app-index>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
if ('serviceWorker' in navigator) {
|
||||||
|
navigator.serviceWorker.register('./js/sw.js')
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
import { LitElement, css, html } from 'lit';
|
import { LitElement, css, html } from 'lit';
|
||||||
import { customElement } from 'lit/decorators.js';
|
|
||||||
import { Router } from '@vaadin/router';
|
import { Router } from '@vaadin/router';
|
||||||
import { registerSW } from 'virtual:pwa-register';
|
import { registerSW } from 'virtual:pwa-register';
|
||||||
|
|
||||||
|
|
@ -17,10 +16,9 @@ import './script/components/sidebar';
|
||||||
import './script/components/timer-form';
|
import './script/components/timer-form';
|
||||||
import './styles/global.css';
|
import './styles/global.css';
|
||||||
|
|
||||||
@customElement('app-index')
|
|
||||||
export class AppIndex extends LitElement {
|
export class AppIndex extends LitElement {
|
||||||
static get styles() {
|
static get styles() {
|
||||||
return css`
|
return css `
|
||||||
main {
|
main {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -69,6 +67,7 @@ export class AppIndex extends LitElement {
|
||||||
super();
|
super();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** @returns {void} */
|
||||||
firstUpdated() {
|
firstUpdated() {
|
||||||
// this method is a lifecycle even in lit
|
// this method is a lifecycle even in lit
|
||||||
// for more info check out the lit docs https://lit.dev/docs/components/lifecycle/
|
// for more info check out the lit docs https://lit.dev/docs/components/lifecycle/
|
||||||
|
|
@ -78,18 +77,19 @@ export class AppIndex extends LitElement {
|
||||||
router.setRoutes([
|
router.setRoutes([
|
||||||
// temporarily cast to any because of a Type bug with the router
|
// temporarily cast to any because of a Type bug with the router
|
||||||
{
|
{
|
||||||
path: (import.meta as any).env.BASE_URL,
|
path: import.meta.env.BASE_URL,
|
||||||
animate: true,
|
animate: true,
|
||||||
children: [
|
children: [
|
||||||
{ path: '', component: 'app-home' },
|
{ path: '', component: 'app-home' },
|
||||||
],
|
],
|
||||||
} as any,
|
},
|
||||||
]);
|
]);
|
||||||
registerSW({ immediate: true });
|
registerSW({ immediate: true });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** @returns {any} */
|
||||||
render() {
|
render() {
|
||||||
return html`
|
return html `
|
||||||
<div style="height: 100%;">
|
<div style="height: 100%;">
|
||||||
<main>
|
<main>
|
||||||
<div id="routerOutlet"></div>
|
<div id="routerOutlet"></div>
|
||||||
|
|
@ -98,3 +98,5 @@ export class AppIndex extends LitElement {
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
window.customElements.define('app-index', AppIndex)
|
||||||
181
src/script/components/active-timer.js
Normal file
|
|
@ -0,0 +1,181 @@
|
||||||
|
import { LitElement, css, html } from 'lit';
|
||||||
|
import { property, customElement } from 'lit/decorators.js';
|
||||||
|
import { durationString, className, Phase } from '../timer';
|
||||||
|
import { TimerState } from '../timer-state';
|
||||||
|
|
||||||
|
/** @extends LitElement */
|
||||||
|
@customElement('active-timer')
|
||||||
|
export class ActiveTimer extends LitElement {
|
||||||
|
/** */
|
||||||
|
@property({ type: Object })
|
||||||
|
timer = undefined;
|
||||||
|
/** */
|
||||||
|
@property({ type: Object })
|
||||||
|
timerState = undefined;
|
||||||
|
/**
|
||||||
|
* @default new Map([
|
||||||
|
* [Phase.WARM_UP, new Audio('assets/audio/warm.mp3')],
|
||||||
|
* [Phase.LOW_INTENSITY, new Audio('assets/audio/low.mp3')],
|
||||||
|
* [Phase.HIGH_INTENSITY, new Audio('assets/audio/high.mp3')],
|
||||||
|
* [Phase.REST, new Audio('assets/audio/rest.mp3')],
|
||||||
|
* [Phase.COOLDOWN, new Audio('assets/audio/cool.mp3')],
|
||||||
|
* ])
|
||||||
|
*/
|
||||||
|
sounds = new Map([
|
||||||
|
[Phase.WARM_UP, new Audio('assets/audio/warm.mp3')],
|
||||||
|
[Phase.LOW_INTENSITY, new Audio('assets/audio/low.mp3')],
|
||||||
|
[Phase.HIGH_INTENSITY, new Audio('assets/audio/high.mp3')],
|
||||||
|
[Phase.REST, new Audio('assets/audio/rest.mp3')],
|
||||||
|
[Phase.COOLDOWN, new Audio('assets/audio/cool.mp3')],
|
||||||
|
]);
|
||||||
|
|
||||||
|
/** @static */
|
||||||
|
static get styles() {
|
||||||
|
return css `
|
||||||
|
* {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timer-wrapper {
|
||||||
|
padding: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
transition: all 0.25s ease;
|
||||||
|
padding: 1em;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 1em;
|
||||||
|
background-color: var(--timer-background-default);
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timer.lowintensity {
|
||||||
|
background-color: var(--timer-background-red);
|
||||||
|
}
|
||||||
|
|
||||||
|
.timer.highintensity {
|
||||||
|
background-color: #0C5E0C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timer.rest {
|
||||||
|
background-color: #D2AD0F;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timer.cooldown {
|
||||||
|
background-color: #005CA3;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
font-size: 5em;
|
||||||
|
font-family: Cascadia, "Roboto Mono", Menlo, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
document.addEventListener('keyup', (event) => {
|
||||||
|
if (event.target !== document.body || event.altKey || event.shiftKey || event.metaKey) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
switch (event.key) {
|
||||||
|
case 'ArrowRight':
|
||||||
|
this.goForward();
|
||||||
|
break;
|
||||||
|
case 'ArrowLeft':
|
||||||
|
this.goBack();
|
||||||
|
break;
|
||||||
|
case ' ':
|
||||||
|
this.toggleActiveState();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @returns {void} */
|
||||||
|
updated() {
|
||||||
|
if (!this.timerState || this.timerState.timer !== this.timer) {
|
||||||
|
this.timerState = new TimerState(this.timer, () => this.requestUpdate());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @returns {void} */
|
||||||
|
toggleActiveState() {
|
||||||
|
this.timerState.toggle();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @returns {void} */
|
||||||
|
goBack() {
|
||||||
|
this.timerState.goBack();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @returns {void} */
|
||||||
|
goForward() {
|
||||||
|
this.timerState.goForward();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @private
|
||||||
|
* @returns {any}
|
||||||
|
*/
|
||||||
|
toggleIcon() {
|
||||||
|
if (this.timerState.active()) {
|
||||||
|
return html `<pause-icon></pause-icon>`;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return html `<play-icon></play-icon>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @returns {any} */
|
||||||
|
render() {
|
||||||
|
if (!this.timerState)
|
||||||
|
return;
|
||||||
|
return html `
|
||||||
|
<div class="timer-wrapper">
|
||||||
|
<div class="timer ${className(this.timerState.phase)}">
|
||||||
|
<div class="main">
|
||||||
|
<p class="phase">${this.timerState.phase}</p>
|
||||||
|
<p class="time">${durationString(this.timerState.timeRemaining)}</p>
|
||||||
|
<div class="controls">
|
||||||
|
<fluent-button appearance="stealth" @click=${this.goBack}>
|
||||||
|
<back-icon></back-icon>
|
||||||
|
</fluent-button>
|
||||||
|
<fluent-button appearance="stealth" @click=${this.toggleActiveState}>
|
||||||
|
${this.toggleIcon()}
|
||||||
|
</fluent-button>
|
||||||
|
<fluent-button appearance="stealth" @click=${this.goForward}>
|
||||||
|
<forward-icon></forward-icon>
|
||||||
|
</fluent-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<labeled-counter label="Set" .value=${this.timerState.set.toString()}></labeled-counter>
|
||||||
|
<labeled-counter label="Round" .value=${this.timerState.round.toString()}></labeled-counter>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,12 +1,19 @@
|
||||||
import { LitElement, css, html } from 'lit';
|
import { LitElement, css, html } from 'lit';
|
||||||
import { property, customElement } from 'lit/decorators.js';
|
import { property, customElement } from 'lit/decorators.js';
|
||||||
import { durationString, IntervalTimer, className } from '../timer';
|
import {durationString, IntervalTimer, className, Phase} from '../timer';
|
||||||
import { TimerState } from '../timer-state';
|
import { TimerState } from '../timer-state';
|
||||||
|
|
||||||
@customElement('active-timer')
|
@customElement('active-timer')
|
||||||
export class ActiveTimer extends LitElement {
|
export class ActiveTimer extends LitElement {
|
||||||
@property({ type: Object }) timer!: IntervalTimer;
|
@property({ type: Object }) timer!: IntervalTimer;
|
||||||
@property({ type: Object }) timerState!: TimerState;
|
@property({ type: Object }) timerState!: TimerState;
|
||||||
|
private sounds = new Map([
|
||||||
|
[Phase.WARM_UP, new Audio('assets/audio/warm.mp3')],
|
||||||
|
[Phase.LOW_INTENSITY, new Audio('assets/audio/low.mp3')],
|
||||||
|
[Phase.HIGH_INTENSITY, new Audio('assets/audio/high.mp3')],
|
||||||
|
[Phase.REST, new Audio('assets/audio/rest.mp3')],
|
||||||
|
[Phase.COOLDOWN, new Audio('assets/audio/cool.mp3')],
|
||||||
|
]);
|
||||||
|
|
||||||
static get styles() {
|
static get styles() {
|
||||||
return css`
|
return css`
|
||||||
|
|
@ -95,7 +102,7 @@ export class ActiveTimer extends LitElement {
|
||||||
|
|
||||||
updated() {
|
updated() {
|
||||||
if (!this.timerState || this.timerState.timer !== this.timer) {
|
if (!this.timerState || this.timerState.timer !== this.timer) {
|
||||||
this.timerState = new TimerState(this.timer, () => this.requestUpdate());
|
this.timerState = new TimerState(this.timer, () => this.requestUpdate(), this.sounds);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
48
src/script/components/counter.js
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
import { LitElement, css, html } from 'lit';
|
||||||
|
import { property, customElement } from 'lit/decorators.js';
|
||||||
|
|
||||||
|
/** @extends LitElement */
|
||||||
|
@customElement('labeled-counter')
|
||||||
|
export class Counter extends LitElement {
|
||||||
|
/** */
|
||||||
|
@property({ type: String })
|
||||||
|
label = undefined;
|
||||||
|
/** */
|
||||||
|
@property({ type: String })
|
||||||
|
value = undefined;
|
||||||
|
|
||||||
|
/** @static */
|
||||||
|
static get styles() {
|
||||||
|
return css `
|
||||||
|
.label {
|
||||||
|
font-size: calc();
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label, .value {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-size: 2em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @returns {any} */
|
||||||
|
render() {
|
||||||
|
return html `
|
||||||
|
<div class="counter">
|
||||||
|
<p class="label">${this.label}</p>
|
||||||
|
<p class="value">${this.value}</p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
71
src/script/components/header.js
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
import { LitElement, css, html } from 'lit';
|
||||||
|
import { property, customElement } from 'lit/decorators.js';
|
||||||
|
|
||||||
|
/** @extends LitElement */
|
||||||
|
@customElement('app-header')
|
||||||
|
export class AppHeader extends LitElement {
|
||||||
|
/** */
|
||||||
|
@property({ type: String })
|
||||||
|
apptitle = undefined;
|
||||||
|
/** */
|
||||||
|
@property({ type: Array })
|
||||||
|
timers = undefined;
|
||||||
|
/** */
|
||||||
|
@property({ type: Number })
|
||||||
|
selectedTimer = undefined;
|
||||||
|
/** @default false */
|
||||||
|
@property({ type: Boolean })
|
||||||
|
showSidebar = false;
|
||||||
|
|
||||||
|
/** @static */
|
||||||
|
static get styles() {
|
||||||
|
return css `
|
||||||
|
|
||||||
|
|
||||||
|
#menu-button-block {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu-button-block img {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spacer {
|
||||||
|
width: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(prefers-color-scheme: light) {
|
||||||
|
nav fluent-anchor::part(control) {
|
||||||
|
color: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @returns {void} */
|
||||||
|
toggleSidebar() {
|
||||||
|
this.showSidebar = !this.showSidebar;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @returns {void} */
|
||||||
|
closeSidebar() {
|
||||||
|
this.showSidebar = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @returns {any} */
|
||||||
|
render() {
|
||||||
|
return html `
|
||||||
|
<app-sidebar
|
||||||
|
?visible="${this.showSidebar}"
|
||||||
|
.timers=${this.timers}
|
||||||
|
.selectedTimer=${this.selectedTimer}
|
||||||
|
@closesidebar="${this.closeSidebar}"></app-sidebar>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -11,30 +11,7 @@ export class AppHeader extends LitElement {
|
||||||
|
|
||||||
static get styles() {
|
static get styles() {
|
||||||
return css`
|
return css`
|
||||||
* {
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
background: var(--app-color-primary);
|
|
||||||
color: white;
|
|
||||||
height: 4em;
|
|
||||||
padding: 0 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
header h1 {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav fluent-anchor {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#menu-button-block {
|
#menu-button-block {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -72,16 +49,6 @@ export class AppHeader extends LitElement {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return html`
|
return html`
|
||||||
<header>
|
|
||||||
<div id="menu-button-block">
|
|
||||||
<fluent-button appearance="stealth" @click="${this.toggleSidebar}">
|
|
||||||
<navigation-icon></navigation-icon>
|
|
||||||
</fluent-button>
|
|
||||||
<div class="spacer"></div>
|
|
||||||
<h1>${this.apptitle || 'Trainterval'}</h1>
|
|
||||||
</div>
|
|
||||||
<slot name="actions"></slot>
|
|
||||||
</header>
|
|
||||||
<app-sidebar
|
<app-sidebar
|
||||||
?visible="${this.showSidebar}"
|
?visible="${this.showSidebar}"
|
||||||
.timers=${this.timers}
|
.timers=${this.timers}
|
||||||
|
|
|
||||||
23
src/script/components/icons/icon-add.js
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { css, html, LitElement } from 'lit';
|
||||||
|
import { customElement } from 'lit/decorators.js';
|
||||||
|
|
||||||
|
// manually in-lining the svg until vite supports it
|
||||||
|
/** @extends LitElement */
|
||||||
|
@customElement('icon-add')
|
||||||
|
export class AddIcon extends LitElement {
|
||||||
|
/** @static */
|
||||||
|
static get styles() {
|
||||||
|
return css `
|
||||||
|
svg {
|
||||||
|
display: block;
|
||||||
|
color: var(--foreground-color);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
/** @returns {any} */
|
||||||
|
render() {
|
||||||
|
return html `
|
||||||
|
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2.5a.5.5 0 00-1 0V9H2.5a.5.5 0 000 1H9v6.5a.5.5 0 001 0V10h6.5a.5.5 0 000-1H10V2.5z"/></svg>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
25
src/script/components/icons/icon-back.js
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { css, html, LitElement } from 'lit';
|
||||||
|
import { customElement } from 'lit/decorators.js';
|
||||||
|
|
||||||
|
// manually in-lining the svg until vite supports it
|
||||||
|
/** @extends LitElement */
|
||||||
|
@customElement('back-icon')
|
||||||
|
export class BackIcon extends LitElement {
|
||||||
|
/** @static */
|
||||||
|
static get styles() {
|
||||||
|
return css `
|
||||||
|
svg {
|
||||||
|
display: block;
|
||||||
|
color: var(--foreground-color);
|
||||||
|
height: 2em;
|
||||||
|
width: 2em;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
/** @returns {any} */
|
||||||
|
render() {
|
||||||
|
return html `
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 100 100" width="100pt" height="100pt"><defs><clipPath id="_clipPath_hST7dVCHzucXN2usmbRVwXvGcw614fxw"><rect width="100" height="100"/></clipPath></defs><g clip-path="url(#_clipPath_hST7dVCHzucXN2usmbRVwXvGcw614fxw)"><path d=" M 0 0 L 20 0 L 20 100 L 0 100 L 0 0 Z M 100 100 L 20 60 L 20 40 L 100 0 L 100 100 Z " fill-rule="evenodd"/></g></svg>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
25
src/script/components/icons/icon-forward.js
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { css, html, LitElement } from 'lit';
|
||||||
|
import { customElement } from 'lit/decorators.js';
|
||||||
|
|
||||||
|
// manually in-lining the svg until vite supports it
|
||||||
|
/** @extends LitElement */
|
||||||
|
@customElement('forward-icon')
|
||||||
|
export class ForwardIcon extends LitElement {
|
||||||
|
/** @static */
|
||||||
|
static get styles() {
|
||||||
|
return css `
|
||||||
|
svg {
|
||||||
|
display: block;
|
||||||
|
color: var(--foreground-color);
|
||||||
|
height: 2em;
|
||||||
|
width: 2em;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
/** @returns {any} */
|
||||||
|
render() {
|
||||||
|
return html `
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 100 100" width="100pt" height="100pt"><defs><clipPath id="_clipPath_KOVDpZBFpo30t6zkDMhJtopDGxIcWA0l"><rect width="100" height="100"/></clipPath></defs><g clip-path="url(#_clipPath_KOVDpZBFpo30t6zkDMhJtopDGxIcWA0l)"><path d=" M 80 0 L 100 0 L 100 100 L 80 100 L 80 0 Z M 0 100 L 80 60 L 80 40 L 0 0 L 0 100 Z " fill-rule="evenodd"/></g></svg>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
23
src/script/components/icons/icon-navigation.js
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { css, html, LitElement } from 'lit';
|
||||||
|
import { customElement } from 'lit/decorators.js';
|
||||||
|
|
||||||
|
// manually in-lining the svg until vite supports it
|
||||||
|
/** @extends LitElement */
|
||||||
|
@customElement('navigation-icon')
|
||||||
|
export class NavigationIcon extends LitElement {
|
||||||
|
/** @static */
|
||||||
|
static get styles() {
|
||||||
|
return css `
|
||||||
|
svg {
|
||||||
|
display: block;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
/** @returns {any} */
|
||||||
|
render() {
|
||||||
|
return html `
|
||||||
|
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M2 4.5c0-.28.22-.5.5-.5h15a.5.5 0 010 1h-15a.5.5 0 01-.5-.5zm0 5c0-.28.22-.5.5-.5h15a.5.5 0 010 1h-15a.5.5 0 01-.5-.5zm.5 4.5a.5.5 0 000 1h15a.5.5 0 000-1h-15z"/></svg>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
25
src/script/components/icons/icon-pause.js
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { css, html, LitElement } from 'lit';
|
||||||
|
import { customElement } from 'lit/decorators.js';
|
||||||
|
|
||||||
|
// manually in-lining the svg until vite supports it
|
||||||
|
/** @extends LitElement */
|
||||||
|
@customElement('pause-icon')
|
||||||
|
export class PauseIcon extends LitElement {
|
||||||
|
/** @static */
|
||||||
|
static get styles() {
|
||||||
|
return css `
|
||||||
|
svg {
|
||||||
|
display: block;
|
||||||
|
color: var(--foreground-color);
|
||||||
|
height: 2em;
|
||||||
|
width: 2em;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
/** @returns {any} */
|
||||||
|
render() {
|
||||||
|
return html `
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 100 100" width="100pt" height="100pt"><defs><clipPath id="_clipPath_gghKfkXt3RrkXOpdD3Nb2uh99Yv5EXhC"><rect width="100" height="100"/></clipPath></defs><g clip-path="url(#_clipPath_gghKfkXt3RrkXOpdD3Nb2uh99Yv5EXhC)"><rect x="67" y="0" width="33" height="100""/><rect x="0" y="0" width="33" height="100"/></g></svg>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
25
src/script/components/icons/icon-play.js
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { css, html, LitElement } from 'lit';
|
||||||
|
import { customElement } from 'lit/decorators.js';
|
||||||
|
|
||||||
|
// manually in-lining the svg until vite supports it
|
||||||
|
/** @extends LitElement */
|
||||||
|
@customElement('play-icon')
|
||||||
|
export class PlayIcon extends LitElement {
|
||||||
|
/** @static */
|
||||||
|
static get styles() {
|
||||||
|
return css `
|
||||||
|
svg {
|
||||||
|
display: block;
|
||||||
|
color: var(--foreground-color);
|
||||||
|
height: 2em;
|
||||||
|
width: 2em;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
/** @returns {any} */
|
||||||
|
render() {
|
||||||
|
return html `
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 100 100" width="100pt" height="100pt"><defs><clipPath id="_clipPath_Vk8cYX7uFNrhKajyPVlEqY6YHDbpwGFw"><rect width="100" height="100"/></clipPath></defs><g clip-path="url(#_clipPath_Vk8cYX7uFNrhKajyPVlEqY6YHDbpwGFw)"><polygon points="100,50,0,100,0,0"/></g></svg>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
137
src/script/components/sidebar.js
Normal file
|
|
@ -0,0 +1,137 @@
|
||||||
|
import { LitElement, css, html } from 'lit';
|
||||||
|
import { property, customElement, query } from 'lit/decorators.js';
|
||||||
|
import { SelectTimerEvent } from '../select-timer-event';
|
||||||
|
|
||||||
|
/** @extends LitElement */
|
||||||
|
@customElement('app-sidebar')
|
||||||
|
export class AppSidebar extends LitElement {
|
||||||
|
/** @default false */
|
||||||
|
@property({ type: Boolean })
|
||||||
|
visible = false;
|
||||||
|
/** @default [] */
|
||||||
|
@property({ type: Array })
|
||||||
|
timers = [];
|
||||||
|
/** */
|
||||||
|
@property({ type: Number })
|
||||||
|
selectedTimer = undefined;
|
||||||
|
|
||||||
|
/** @static */
|
||||||
|
static get styles() {
|
||||||
|
return css `
|
||||||
|
* {
|
||||||
|
transition: all 0.25s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(prefers-color-scheme: light) {
|
||||||
|
header {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav fluent-anchor::part(control) {
|
||||||
|
color: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-content {
|
||||||
|
position: absolute;
|
||||||
|
width: 20em;
|
||||||
|
height: 100vh;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 999;
|
||||||
|
background: var(--background-color);
|
||||||
|
transform: translate3d(-100%, 0, 0);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
fluent-listbox {
|
||||||
|
flex-grow: 1;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
fluent-option {
|
||||||
|
--design-unit: 6;
|
||||||
|
}
|
||||||
|
|
||||||
|
fluent-button {
|
||||||
|
--design-unit: 6;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
fluent-button::part(control) {
|
||||||
|
justify-content: start;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** */
|
||||||
|
@query('fluent-button')
|
||||||
|
fButton = undefined;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @private
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
toggleVisibility() {
|
||||||
|
this.dispatchEvent(new CustomEvent('closesidebar'));
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @private
|
||||||
|
* @param {number} timerId
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
selectTimer(timerId) {
|
||||||
|
this.dispatchEvent(new SelectTimerEvent(timerId));
|
||||||
|
this.toggleVisibility();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @private
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
newTimer() {
|
||||||
|
this.dispatchEvent(new CustomEvent('newtimer', {
|
||||||
|
bubbles: true,
|
||||||
|
composed: true
|
||||||
|
}));
|
||||||
|
this.toggleVisibility();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @returns {any} */
|
||||||
|
render() {
|
||||||
|
return html `
|
||||||
|
<div class="sidebar ${this.visible ? 'visible' : ''}">
|
||||||
|
<div class="overlay" @click="${this.toggleVisibility}"></div>
|
||||||
|
<div class="sidebar-content">
|
||||||
|
<h3>Trainterval</h3>
|
||||||
|
<fluent-listbox>
|
||||||
|
${this.timers?.map(timer => {
|
||||||
|
return html `
|
||||||
|
<fluent-option
|
||||||
|
@click=${() => this.selectTimer(timer.id)}
|
||||||
|
selected=${timer.id === this.selectedTimer}
|
||||||
|
value=${timer.name}>
|
||||||
|
${timer.name}<br />${timer.description || ''}
|
||||||
|
</fluent-option>
|
||||||
|
`;
|
||||||
|
})}
|
||||||
|
</fluent-listbox>
|
||||||
|
<fluent-divider></fluent-divider>
|
||||||
|
<fluent-button appearance="stealth" @click="${this.newTimer}">
|
||||||
|
<icon-add slot="start"></icon-add>
|
||||||
|
New Timer
|
||||||
|
</fluent-button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -49,25 +49,6 @@ export class AppSidebar extends LitElement {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.visible .sidebar-content {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlay {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 998;
|
|
||||||
background: rgba(0, 0, 0, 0.6);
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.visible .overlay {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
fluent-option {
|
fluent-option {
|
||||||
--design-unit: 6;
|
--design-unit: 6;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
280
src/script/components/timer-form.js
Normal file
|
|
@ -0,0 +1,280 @@
|
||||||
|
import { LitElement, css, html } from 'lit';
|
||||||
|
import { property, customElement, query } from 'lit/decorators.js';
|
||||||
|
import { durationString, IntervalTimer, parseDuration } from '../timer';
|
||||||
|
import { TimerSavedEvent } from '../timer-saved-event';
|
||||||
|
|
||||||
|
/** @extends LitElement */
|
||||||
|
@customElement('timer-form-dialog')
|
||||||
|
export class TimerFormDialog extends LitElement {
|
||||||
|
/** @default false */
|
||||||
|
@property({ type: Boolean })
|
||||||
|
visible = false;
|
||||||
|
/** @default false */
|
||||||
|
@property({ type: Boolean })
|
||||||
|
saving = false;
|
||||||
|
/** */
|
||||||
|
@property({ type: Object })
|
||||||
|
timer = undefined;
|
||||||
|
/** */
|
||||||
|
@property({ type: Object })
|
||||||
|
timerService = undefined;
|
||||||
|
/** @private
|
||||||
|
* @default '[0-5]?[0-9]+(:[0-5][0-9]){0,2}'
|
||||||
|
*/
|
||||||
|
durationPattern = '[0-5]?[0-9]+(:[0-5][0-9]){0,2}';
|
||||||
|
|
||||||
|
/** @static */
|
||||||
|
static get styles() {
|
||||||
|
return css `
|
||||||
|
.dialog {
|
||||||
|
display: flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
flex-direction: column;
|
||||||
|
height: var(--dialog-height);
|
||||||
|
width: var(--dialog-width);
|
||||||
|
max-height: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: 0;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow-y: auto;
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
::part(control) {
|
||||||
|
--dialog-height: 764px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
max-height: 100vh;
|
||||||
|
max-width: 100vw;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
document.addEventListener('keyup', (event) => {
|
||||||
|
if (event.target !== document.body) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
switch (event.key) {
|
||||||
|
case 'Escape':
|
||||||
|
this.toggleVisibility();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** */
|
||||||
|
@query('#timer-id')
|
||||||
|
timerId = undefined;
|
||||||
|
|
||||||
|
/** */
|
||||||
|
@query('#timer-name')
|
||||||
|
timerName = undefined;
|
||||||
|
|
||||||
|
/** */
|
||||||
|
@query('#timer-description')
|
||||||
|
timerDescription = undefined;
|
||||||
|
|
||||||
|
/** */
|
||||||
|
@query('#timer-warmup')
|
||||||
|
timerWarmUp = undefined;
|
||||||
|
|
||||||
|
/** */
|
||||||
|
@query('#timer-low')
|
||||||
|
timerLowIntensity = undefined;
|
||||||
|
|
||||||
|
/** */
|
||||||
|
@query('#timer-hi')
|
||||||
|
timerHighIntensity = undefined;
|
||||||
|
|
||||||
|
/** */
|
||||||
|
@query('#timer-rest')
|
||||||
|
timerRest = undefined;
|
||||||
|
|
||||||
|
/** */
|
||||||
|
@query('#timer-cool')
|
||||||
|
timerCooldown = undefined;
|
||||||
|
|
||||||
|
/** */
|
||||||
|
@query('#timer-sets')
|
||||||
|
timerSets = undefined;
|
||||||
|
|
||||||
|
/** */
|
||||||
|
@query('#timer-rounds')
|
||||||
|
timerRounds = undefined;
|
||||||
|
|
||||||
|
/** @private
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
toggleVisibility() {
|
||||||
|
this.dispatchEvent(new CustomEvent('close'));
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @private
|
||||||
|
* @returns {Promise<void>}
|
||||||
|
*/
|
||||||
|
async save() {
|
||||||
|
const id = this.timerId?.value || '';
|
||||||
|
const name = this.timerName?.value;
|
||||||
|
if (!name) {
|
||||||
|
// TODO: Show errors in form
|
||||||
|
alert('Name is required');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const timer = new IntervalTimer(name);
|
||||||
|
timer.id = Number.parseInt(id);
|
||||||
|
timer.description = this.timerDescription?.value;
|
||||||
|
timer.warmUp = parseDuration(this.timerWarmUp?.value);
|
||||||
|
timer.lowIntensity = parseDuration(this.timerLowIntensity?.value);
|
||||||
|
timer.highIntensity = parseDuration(this.timerHighIntensity?.value);
|
||||||
|
timer.rest = parseDuration(this.timerRest?.value);
|
||||||
|
timer.coolDown = parseDuration(this.timerCooldown?.value);
|
||||||
|
timer.sets = Number.parseInt(this.timerSets?.value || '0') || 1;
|
||||||
|
timer.rounds = Number.parseInt(this.timerRounds?.value || '0') || 1;
|
||||||
|
this.saving = true;
|
||||||
|
await this.timerService?.save(timer);
|
||||||
|
this.saving = false;
|
||||||
|
// TODO: Clear form
|
||||||
|
this.toggleVisibility();
|
||||||
|
document.dispatchEvent(new TimerSavedEvent(id));
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @private
|
||||||
|
* @returns {Promise<void>}
|
||||||
|
*/
|
||||||
|
async delete() {
|
||||||
|
const id = Number.parseInt(this.timerId?.value || '');
|
||||||
|
await this.timerService?.delete(id);
|
||||||
|
this.toggleVisibility();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @private
|
||||||
|
* @returns {any}
|
||||||
|
*/
|
||||||
|
deleteButton() {
|
||||||
|
if (!this.timer?.id) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return html `
|
||||||
|
<fluent-button
|
||||||
|
appearance="outline"
|
||||||
|
tabindex="0"
|
||||||
|
@click=${this.delete}
|
||||||
|
style="margin-top: 1em;">Delete</fluent-button>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @private
|
||||||
|
* @param {number | undefined} duration
|
||||||
|
* @returns {any}
|
||||||
|
*/
|
||||||
|
durationString(duration) {
|
||||||
|
if (!duration) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return durationString(duration);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @returns {any} */
|
||||||
|
render() {
|
||||||
|
let body;
|
||||||
|
if (this.saving) {
|
||||||
|
return html `
|
||||||
|
<div class="dialog">
|
||||||
|
<p>Saving...</p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
const title = this.timer?.id ? 'Edit Timer' : 'New Timer';
|
||||||
|
body = html `
|
||||||
|
<div class="dialog ${this.timer?.id ? 'tall' : ''}">
|
||||||
|
<h2>${title}</h2>
|
||||||
|
<form @submit=${this.save}>
|
||||||
|
<input
|
||||||
|
id="timer-id"
|
||||||
|
type="hidden"
|
||||||
|
name="id"
|
||||||
|
.value=${this.timer?.id?.toString() || ''} />
|
||||||
|
<fluent-text-field
|
||||||
|
id="timer-name"
|
||||||
|
appearance="outline"
|
||||||
|
placeholder="My Timer"
|
||||||
|
.value=${this.timer?.name || ''}>Name</fluent-text-field>
|
||||||
|
<fluent-text-area
|
||||||
|
id="timer-description"
|
||||||
|
appearance="outline"
|
||||||
|
placeholder="More details"
|
||||||
|
.value=${this.timer?.description || ''}>Description</fluent-text-area>
|
||||||
|
<fluent-text-field
|
||||||
|
id="timer-warmup"
|
||||||
|
appearance="outline"
|
||||||
|
placeholder="05:00"
|
||||||
|
pattern="${this.durationPattern}"
|
||||||
|
.value=${this.durationString(this.timer?.warmUp)}>Warm Up</fluent-text-field>
|
||||||
|
<fluent-text-field
|
||||||
|
id="timer-low"
|
||||||
|
appearance="outline"
|
||||||
|
placeholder="00:30"
|
||||||
|
pattern="${this.durationPattern}"
|
||||||
|
.value=${this.durationString(this.timer?.lowIntensity)}>Low Intensity</fluent-text-field>
|
||||||
|
<fluent-text-field
|
||||||
|
id="timer-hi"
|
||||||
|
appearance="outline"
|
||||||
|
placeholder="01:00"
|
||||||
|
pattern="${this.durationPattern}"
|
||||||
|
.value=${this.durationString(this.timer?.highIntensity)}>High Intensity</fluent-text-field>
|
||||||
|
<fluent-text-field
|
||||||
|
id="timer-rest"
|
||||||
|
appearance="outline"
|
||||||
|
placeholder="01:00"
|
||||||
|
pattern="${this.durationPattern}"
|
||||||
|
.value=${this.durationString(this.timer?.rest)}>Rest</fluent-text-field>
|
||||||
|
<fluent-text-field
|
||||||
|
id="timer-cool"
|
||||||
|
appearance="outline"
|
||||||
|
placeholder="05:00"
|
||||||
|
pattern="${this.durationPattern}"
|
||||||
|
.value=${this.durationString(this.timer?.coolDown)}>Cooldown</fluent-text-field>
|
||||||
|
<fluent-text-field
|
||||||
|
id="timer-sets"
|
||||||
|
appearance="outline"
|
||||||
|
placeholder="4"
|
||||||
|
.value=${this.timer?.sets}>Sets</fluent-text-field>
|
||||||
|
<fluent-text-field
|
||||||
|
id="timer-rounds"
|
||||||
|
appearance="outline"
|
||||||
|
placeholder="2"
|
||||||
|
.value=${this.timer?.rounds}>Rounds</fluent-text-field>
|
||||||
|
<fluent-button
|
||||||
|
appearance="accent"
|
||||||
|
tabindex="0"
|
||||||
|
@click=${this.save}
|
||||||
|
style="margin: 1em 0;">Save</fluent-button>
|
||||||
|
<fluent-button appearance="outline" tabindex="0" @click=${this.toggleVisibility}>Cancel</fluent-button>
|
||||||
|
${this.deleteButton()}
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
return html `
|
||||||
|
<fluent-dialog ?hidden=${!this.visible} trap-focus modal class=${this.timer?.id ? 'tall' : ''}>
|
||||||
|
${body}
|
||||||
|
</fluent-dialog>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -44,11 +44,11 @@ export class AppHome extends LitElement {
|
||||||
timerServiceSingleton()
|
timerServiceSingleton()
|
||||||
.then(async timerService => {
|
.then(async timerService => {
|
||||||
this.timerService = timerService;
|
this.timerService = timerService;
|
||||||
this.loadTimers()
|
this.loadTimers();
|
||||||
});
|
});
|
||||||
document.addEventListener('timersaved', () => {
|
document.addEventListener('timersaved', () => {
|
||||||
this.loadTimers()
|
this.loadTimers();
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
private async loadTimers() {
|
private async loadTimers() {
|
||||||
|
|
|
||||||
13
src/script/select-timer-event.js
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
/** @extends Event */
|
||||||
|
export class SelectTimerEvent extends Event {
|
||||||
|
/** */
|
||||||
|
timerId = undefined;
|
||||||
|
|
||||||
|
constructor(timerId) {
|
||||||
|
super('selecttimer', {
|
||||||
|
bubbles: true,
|
||||||
|
composed: true
|
||||||
|
});
|
||||||
|
this.timerId = timerId;
|
||||||
|
}
|
||||||
|
}
|
||||||
13
src/script/timer-saved-event.js
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
/** @extends Event */
|
||||||
|
export class TimerSavedEvent extends Event {
|
||||||
|
/** */
|
||||||
|
timerId = undefined;
|
||||||
|
|
||||||
|
constructor(timerId) {
|
||||||
|
super('timersaved', {
|
||||||
|
bubbles: true,
|
||||||
|
composed: true
|
||||||
|
});
|
||||||
|
this.timerId = timerId ? Number.parseInt(timerId) : undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||