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",
|
||||
"description": "A starter kit for building PWAs!",
|
||||
"main": "index.js",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "tsc && vite build",
|
||||
"coverage": "vitest --coverage",
|
||||
"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-server": "vite --open",
|
||||
"dev-server": "light-server -s src",
|
||||
"dev-task": "vite",
|
||||
"lint": "eslint src/**/*.ts",
|
||||
"start": "npm run dev",
|
||||
"start-remote": "vite --host",
|
||||
"test": "vitest"
|
||||
"test": "mocha"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
|
|
@ -21,7 +22,9 @@
|
|||
"@fluentui/web-components": "^2.5.16",
|
||||
"@vaadin/router": "^1.7.5",
|
||||
"idb": "^7.1.1",
|
||||
"light-server": "^2.9.1",
|
||||
"lit": "^3.1.0",
|
||||
"ts-to-jsdoc": "^1.5.0",
|
||||
"workbox-build": "^7.0.0",
|
||||
"workbox-core": "^7.0.0",
|
||||
"workbox-precaching": "^7.0.0"
|
||||
|
|
@ -34,6 +37,7 @@
|
|||
"c8": "^8.0.1",
|
||||
"eslint": "^8.54.0",
|
||||
"jsdom": "^23.0.0",
|
||||
"mocha": "^10.2.0",
|
||||
"typescript": "^5.3.2",
|
||||
"vite": "^4.5.0",
|
||||
"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 {
|
||||
--font-family: sans-serif;
|
||||
--background-color: #181818;
|
||||
|
|
@ -18,19 +14,71 @@ body {
|
|||
|
||||
* {
|
||||
transition: all 0.25s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
fluent-design-system-provider,
|
||||
app-index {
|
||||
height: 100%;
|
||||
color: var(--foreground-color);
|
||||
@media(prefers-color-scheme: light) {
|
||||
header {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
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) {
|
||||
|
||||
html,
|
||||
body {
|
||||
background: #000000;
|
||||
background: #181818;
|
||||
}
|
||||
|
||||
fluent-design-system-provider {
|
||||
|
|
@ -68,7 +116,6 @@ app-index {
|
|||
--neutral-fill-stealth-active: rgba(255, 255, 255, 0.4);
|
||||
--neutral-stroke-divider-rest: rgba(255, 255, 255, 0.2);
|
||||
|
||||
--timer-background-default: #181818;
|
||||
--timer-background-red: #860101;
|
||||
--timer-background-green: #0C5E0C;
|
||||
--timer-background-yellow: #D2AD0F;
|
||||
|
|
@ -80,7 +127,7 @@ app-index {
|
|||
|
||||
html,
|
||||
body {
|
||||
background: #000000;
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
|
@ -112,7 +159,6 @@ app-index {
|
|||
--neutral-fill-stealth-active: rgba(0, 0, 0, 0.4);
|
||||
--neutral-fill-rest: #5d5d5d;
|
||||
--neutral-fill-input-active: #e5e5e5;
|
||||
--timer-background-default: #FFFFFF;
|
||||
--timer-background-red: #FF0909;
|
||||
--timer-background-green: #1cb91c;
|
||||
--timer-background-yellow: #F2C812;
|
||||
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 { customElement } from 'lit/decorators.js';
|
||||
import { Router } from '@vaadin/router';
|
||||
import { registerSW } from 'virtual:pwa-register';
|
||||
|
||||
|
|
@ -17,7 +16,6 @@ import './script/components/sidebar';
|
|||
import './script/components/timer-form';
|
||||
import './styles/global.css';
|
||||
|
||||
@customElement('app-index')
|
||||
export class AppIndex extends LitElement {
|
||||
static get styles() {
|
||||
return css `
|
||||
|
|
@ -69,6 +67,7 @@ export class AppIndex extends LitElement {
|
|||
super();
|
||||
}
|
||||
|
||||
/** @returns {void} */
|
||||
firstUpdated() {
|
||||
// this method is a lifecycle even in lit
|
||||
// for more info check out the lit docs https://lit.dev/docs/components/lifecycle/
|
||||
|
|
@ -78,16 +77,17 @@ export class AppIndex extends LitElement {
|
|||
router.setRoutes([
|
||||
// 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,
|
||||
children: [
|
||||
{ path: '', component: 'app-home' },
|
||||
],
|
||||
} as any,
|
||||
},
|
||||
]);
|
||||
registerSW({ immediate: true });
|
||||
}
|
||||
|
||||
/** @returns {any} */
|
||||
render() {
|
||||
return html `
|
||||
<div style="height: 100%;">
|
||||
|
|
@ -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 { property, customElement } from 'lit/decorators.js';
|
||||
import { durationString, IntervalTimer, className } from '../timer';
|
||||
import {durationString, IntervalTimer, className, Phase} from '../timer';
|
||||
import { TimerState } from '../timer-state';
|
||||
|
||||
@customElement('active-timer')
|
||||
export class ActiveTimer extends LitElement {
|
||||
@property({ type: Object }) timer!: IntervalTimer;
|
||||
@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() {
|
||||
return css`
|
||||
|
|
@ -95,7 +102,7 @@ export class ActiveTimer extends LitElement {
|
|||
|
||||
updated() {
|
||||
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() {
|
||||
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 {
|
||||
display: flex;
|
||||
|
|
@ -72,16 +49,6 @@ export class AppHeader extends LitElement {
|
|||
|
||||
render() {
|
||||
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
|
||||
?visible="${this.showSidebar}"
|
||||
.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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
--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()
|
||||
.then(async timerService => {
|
||||
this.timerService = timerService;
|
||||
this.loadTimers()
|
||||
this.loadTimers();
|
||||
});
|
||||
document.addEventListener('timersaved', () => {
|
||||
this.loadTimers()
|
||||
})
|
||||
this.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;
|
||||
}
|
||||
}
|
||||