wbrawner/interval-timer
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages 1 Wiki Activity Actions

Compare commits

merge into: wbrawner:main
Branches Tags
wbrawner:main
wbrawner:renovate/typescript-5.x-lockfile
wbrawner:shynet
wbrawner:cleanup-workflows
wbrawner:wbrawner-patch-1
wbrawner:js
wbrawner:remove-fluent-ui
wbrawner:dependabot-rebase
wbrawner:gh-pages
wbrawner:remove-angular
...
pull from: wbrawner:remove-fluent-ui
Branches Tags
wbrawner:renovate/typescript-5.x-lockfile
wbrawner:main
wbrawner:shynet
wbrawner:cleanup-workflows
wbrawner:wbrawner-patch-1
wbrawner:js
wbrawner:remove-fluent-ui
wbrawner:dependabot-rebase
wbrawner:gh-pages
wbrawner:remove-angular

1 commit
main ... remove-flu

Author SHA1 Message Date
William Brawner
bb21cffd6b
WIP: Remove fluent ui 2023-12-16 22:50:31 -07:00
8 changed files with 61 additions and 232 deletions
Show stats Expand all files Collapse all files

9
index.html
View file

@ -8,31 +8,24 @@
<base href="/" /> <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" <meta name="viewport"
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" /> 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="description" content="An interval timer" />
<meta name="theme-color" content="#000000" /> <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-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Trainterval" /> <meta name="apple-mobile-web-app-title" content="Trainterval" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <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" /> <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" /> <link rel="manifest" href="/manifest.json" />
<script type="module" src="/src/app-index.ts"></script> <script type="module" src="/src/app-index.ts"></script>
</head> </head>
<body> <body>
<!-- Our app-index web component. This component is defined in src/pages/app-index.ts--> <app-index></app-index>
<fluent-design-system-provider>
<app-index></app-index>
</fluent-design-system-provider>
<script> <script>
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {

125
package-lock.json generated
View file

@ -9,7 +9,6 @@
"version": "0.0.1", "version": "0.0.1",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@fluentui/web-components": "^2.5.16",
"@vaadin/router": "^1.7.5", "@vaadin/router": "^1.7.5",
"idb": "^8.0.0", "idb": "^8.0.0",
"lit": "^3.1.0", "lit": "^3.1.0",
@ -1982,18 +1981,6 @@
"node": "^12.22.0 || ^14.17.0 || >=16.0.0" "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
} }
}, },
"node_modules/@fluentui/web-components": {
"version": "2.5.16",
"resolved": "https://registry.npmjs.org/@fluentui/web-components/-/web-components-2.5.16.tgz",
"integrity": "sha512-Ur+DziCm2FtvQoRjx62DH069uTz/HTq0gk9uKmW8K7bmxCS7fYYpV9GFEnK7QdEbdRHyUINE3uFfLEcL6IY3Xg==",
"dependencies": {
"@microsoft/fast-colors": "^5.3.0",
"@microsoft/fast-element": "^1.11.1",
"@microsoft/fast-foundation": "^2.48.1",
"@microsoft/fast-web-utilities": "^5.4.0",
"tslib": "^2.1.0"
}
},
"node_modules/@humanwhocodes/config-array": { "node_modules/@humanwhocodes/config-array": {
"version": "0.11.13", "version": "0.11.13",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
@ -2113,40 +2100,6 @@
"@lit-labs/ssr-dom-shim": "^1.1.2-pre.0" "@lit-labs/ssr-dom-shim": "^1.1.2-pre.0"
} }
}, },
"node_modules/@microsoft/fast-colors": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@microsoft/fast-colors/-/fast-colors-5.3.1.tgz",
"integrity": "sha512-72RZXVfCbwQzvo5sXXkuLXLT7rMeYaSf5r/6ewQiv/trBtqpWRm4DEH2EilHw/iWTBKOXs1qZNQndgUMa5n4LA=="
},
"node_modules/@microsoft/fast-element": {
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/@microsoft/fast-element/-/fast-element-1.12.0.tgz",
"integrity": "sha512-gQutuDHPKNxUEcQ4pypZT4Wmrbapus+P9s3bR/SEOLsMbNqNoXigGImITygI5zhb+aA5rzflM6O8YWkmRbGkPA=="
},
"node_modules/@microsoft/fast-foundation": {
"version": "2.49.2",
"resolved": "https://registry.npmjs.org/@microsoft/fast-foundation/-/fast-foundation-2.49.2.tgz",
"integrity": "sha512-xA7WP/Td33SW0zkpHRH5LUDxyLOPnPQQXieRxc080uLWxoGXhVxo6Rz7b6qwiL+e2IadNCm7X7KcrgsUhJwvBg==",
"dependencies": {
"@microsoft/fast-element": "^1.12.0",
"@microsoft/fast-web-utilities": "^5.4.1",
"tabbable": "^5.2.0",
"tslib": "^1.13.0"
}
},
"node_modules/@microsoft/fast-foundation/node_modules/tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
},
"node_modules/@microsoft/fast-web-utilities": {
"version": "5.4.1",
"resolved": "https://registry.npmjs.org/@microsoft/fast-web-utilities/-/fast-web-utilities-5.4.1.tgz",
"integrity": "sha512-ReWYncndjV3c8D8iq9tp7NcFNc1vbVHvcBFPME2nNFKNbS1XCesYZGlIlf3ot5EmuOXPlrzUHOWzQ2vFpIkqDg==",
"dependencies": {
"exenv-es6": "^1.1.1"
}
},
"node_modules/@nodelib/fs.scandir": { "node_modules/@nodelib/fs.scandir": {
"version": "2.1.5", "version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@ -4141,11 +4094,6 @@
"url": "https://github.com/sponsors/isaacs" "url": "https://github.com/sponsors/isaacs"
} }
}, },
"node_modules/exenv-es6": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/exenv-es6/-/exenv-es6-1.1.1.tgz",
"integrity": "sha512-vlVu3N8d6yEMpMsEm+7sUBAI81aqYYuEvfK0jNqmdb/OPXzzH7QWDDnVjMvDSY47JdHEqx/dfC/q8WkfoTmpGQ=="
},
"node_modules/fast-deep-equal": { "node_modules/fast-deep-equal": {
"version": "3.1.3", "version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@ -6393,11 +6341,6 @@
"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==", "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
"dev": true "dev": true
}, },
"node_modules/tabbable": {
"version": "5.3.3",
"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz",
"integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA=="
},
"node_modules/temp-dir": { "node_modules/temp-dir": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz", "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
@ -6548,11 +6491,6 @@
"typescript": ">=4.2.0" "typescript": ">=4.2.0"
} }
}, },
"node_modules/tslib": {
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
},
"node_modules/type-check": { "node_modules/type-check": {
"version": "0.4.0", "version": "0.4.0",
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@ -8628,18 +8566,6 @@
"integrity": "sha512-qQfo2mxH5yVom1kacMtZZJFVdW+E70mqHMJvVg6WTLo+VBuQJ4TojZlfWBjK0ve5BdEeNAVxOsl/nvNMpJOaJA==", "integrity": "sha512-qQfo2mxH5yVom1kacMtZZJFVdW+E70mqHMJvVg6WTLo+VBuQJ4TojZlfWBjK0ve5BdEeNAVxOsl/nvNMpJOaJA==",
"dev": true "dev": true
}, },
"@fluentui/web-components": {
"version": "2.5.16",
"resolved": "https://registry.npmjs.org/@fluentui/web-components/-/web-components-2.5.16.tgz",
"integrity": "sha512-Ur+DziCm2FtvQoRjx62DH069uTz/HTq0gk9uKmW8K7bmxCS7fYYpV9GFEnK7QdEbdRHyUINE3uFfLEcL6IY3Xg==",
"requires": {
"@microsoft/fast-colors": "^5.3.0",
"@microsoft/fast-element": "^1.11.1",
"@microsoft/fast-foundation": "^2.48.1",
"@microsoft/fast-web-utilities": "^5.4.0",
"tslib": "^2.1.0"
}
},
"@humanwhocodes/config-array": { "@humanwhocodes/config-array": {
"version": "0.11.13", "version": "0.11.13",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
@ -8734,42 +8660,6 @@
"@lit-labs/ssr-dom-shim": "^1.1.2-pre.0" "@lit-labs/ssr-dom-shim": "^1.1.2-pre.0"
} }
}, },
"@microsoft/fast-colors": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@microsoft/fast-colors/-/fast-colors-5.3.1.tgz",
"integrity": "sha512-72RZXVfCbwQzvo5sXXkuLXLT7rMeYaSf5r/6ewQiv/trBtqpWRm4DEH2EilHw/iWTBKOXs1qZNQndgUMa5n4LA=="
},
"@microsoft/fast-element": {
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/@microsoft/fast-element/-/fast-element-1.12.0.tgz",
"integrity": "sha512-gQutuDHPKNxUEcQ4pypZT4Wmrbapus+P9s3bR/SEOLsMbNqNoXigGImITygI5zhb+aA5rzflM6O8YWkmRbGkPA=="
},
"@microsoft/fast-foundation": {
"version": "2.49.2",
"resolved": "https://registry.npmjs.org/@microsoft/fast-foundation/-/fast-foundation-2.49.2.tgz",
"integrity": "sha512-xA7WP/Td33SW0zkpHRH5LUDxyLOPnPQQXieRxc080uLWxoGXhVxo6Rz7b6qwiL+e2IadNCm7X7KcrgsUhJwvBg==",
"requires": {
"@microsoft/fast-element": "^1.12.0",
"@microsoft/fast-web-utilities": "^5.4.1",
"tabbable": "^5.2.0",
"tslib": "^1.13.0"
},
"dependencies": {
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
}
}
},
"@microsoft/fast-web-utilities": {
"version": "5.4.1",
"resolved": "https://registry.npmjs.org/@microsoft/fast-web-utilities/-/fast-web-utilities-5.4.1.tgz",
"integrity": "sha512-ReWYncndjV3c8D8iq9tp7NcFNc1vbVHvcBFPME2nNFKNbS1XCesYZGlIlf3ot5EmuOXPlrzUHOWzQ2vFpIkqDg==",
"requires": {
"exenv-es6": "^1.1.1"
}
},
"@nodelib/fs.scandir": { "@nodelib/fs.scandir": {
"version": "2.1.5", "version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@ -10128,11 +10018,6 @@
} }
} }
}, },
"exenv-es6": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/exenv-es6/-/exenv-es6-1.1.1.tgz",
"integrity": "sha512-vlVu3N8d6yEMpMsEm+7sUBAI81aqYYuEvfK0jNqmdb/OPXzzH7QWDDnVjMvDSY47JdHEqx/dfC/q8WkfoTmpGQ=="
},
"fast-deep-equal": { "fast-deep-equal": {
"version": "3.1.3", "version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@ -11764,11 +11649,6 @@
"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==", "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
"dev": true "dev": true
}, },
"tabbable": {
"version": "5.3.3",
"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz",
"integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA=="
},
"temp-dir": { "temp-dir": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz", "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
@ -11880,11 +11760,6 @@
"dev": true, "dev": true,
"requires": {} "requires": {}
}, },
"tslib": {
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
},
"type-check": { "type-check": {
"version": "0.4.0", "version": "0.4.0",
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",

5
package.json
View file

@ -6,9 +6,7 @@
"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", "dev": "vite --open",
"dev": "npx @azure/static-web-apps-cli start http://localhost:3000 --run \"npm run dev-server\"",
"dev-server": "vite --open",
"dev-task": "vite", "dev-task": "vite",
"lint": "eslint src/**/*.ts", "lint": "eslint src/**/*.ts",
"start": "npm run dev", "start": "npm run dev",
@ -18,7 +16,6 @@
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@fluentui/web-components": "^2.5.16",
"@vaadin/router": "^1.7.5", "@vaadin/router": "^1.7.5",
"idb": "^8.0.0", "idb": "^8.0.0",
"lit": "^3.1.0", "lit": "^3.1.0",

12
src/script/components/active-timer.ts
View file

@ -128,15 +128,15 @@ export class ActiveTimer extends LitElement {
<p class="phase">${this.timerState.phase}</p> <p class="phase">${this.timerState.phase}</p>
<p class="time">${durationString(this.timerState.timeRemaining)}</p> <p class="time">${durationString(this.timerState.timeRemaining)}</p>
<div class="controls"> <div class="controls">
<fluent-button appearance="stealth" @click=${this.goBack}> <button @click=${this.goBack}>
<back-icon></back-icon> <back-icon></back-icon>
</fluent-button> </button>
<fluent-button appearance="stealth" @click=${this.toggleActiveState}> <button @click=${this.toggleActiveState}>
${this.toggleIcon()} ${this.toggleIcon()}
</fluent-button> </button>
<fluent-button appearance="stealth" @click=${this.goForward}> <button @click=${this.goForward}>
<forward-icon></forward-icon> <forward-icon></forward-icon>
</fluent-button> </button>
</div> </div>
</div> </div>
<footer> <footer>

14
src/script/components/header.ts
View file

@ -32,10 +32,6 @@ export class AppHeader extends LitElement {
font-weight: bold; font-weight: bold;
} }
nav fluent-anchor {
margin-left: 10px;
}
#menu-button-block { #menu-button-block {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -49,12 +45,6 @@ export class AppHeader extends LitElement {
.spacer { .spacer {
width: 1em; width: 1em;
} }
@media(prefers-color-scheme: light) {
nav fluent-anchor::part(control) {
color: initial;
}
}
`; `;
} }
@ -74,9 +64,9 @@ export class AppHeader extends LitElement {
return html` return html`
<header> <header>
<div id="menu-button-block"> <div id="menu-button-block">
<fluent-button appearance="stealth" @click="${this.toggleSidebar}"> <button @click="${this.toggleSidebar}">
<navigation-icon></navigation-icon> <navigation-icon></navigation-icon>
</fluent-button> </button>
<div class="spacer"></div> <div class="spacer"></div>
<h1>${this.apptitle || 'Trainterval'}</h1> <h1>${this.apptitle || 'Trainterval'}</h1>
</div> </div>

42
src/script/components/sidebar.ts
View file

@ -19,10 +19,6 @@ export class AppSidebar extends LitElement {
header { header {
color: black; color: black;
} }
nav fluent-anchor::part(control) {
color: initial;
}
} }
.sidebar-content { .sidebar-content {
@ -44,11 +40,6 @@ export class AppSidebar extends LitElement {
padding: 1em; padding: 1em;
} }
fluent-listbox {
flex-grow: 1;
border: none;
}
.visible .sidebar-content { .visible .sidebar-content {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
@ -67,26 +58,9 @@ export class AppSidebar extends LitElement {
.visible .overlay { .visible .overlay {
display: block; display: block;
} }
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?: HTMLElement;
constructor() { constructor() {
super(); super();
} }
@ -117,23 +91,23 @@ export class AppSidebar extends LitElement {
<div class="overlay" @click="${this.toggleVisibility}"></div> <div class="overlay" @click="${this.toggleVisibility}"></div>
<div class="sidebar-content"> <div class="sidebar-content">
<h3>Trainterval</h3> <h3>Trainterval</h3>
<fluent-listbox> <ul>
${this.timers?.map(timer => { ${this.timers?.map(timer => {
return html` return html`
<fluent-option <li
@click=${() => this.selectTimer(timer.id!)} @click=${() => this.selectTimer(timer.id!)}
selected=${timer.id === this.selectedTimer} selected=${timer.id === this.selectedTimer}
value=${timer.name}> value=${timer.name}>
${timer.name}<br />${timer.description || ''} ${timer.name}<br />${timer.description || ''}
</fluent-option> </li>
`; `;
})} })}
</fluent-listbox> </ul>
<fluent-divider></fluent-divider> <hr />
<fluent-button appearance="stealth" @click="${this.newTimer}"> <button @click="${this.newTimer}">
<icon-add slot="start"></icon-add> <icon-add></icon-add>
New Timer New Timer
</fluent-button> </button>
</div> </div>
`; `;
} }

70
src/script/components/timer-form.ts
View file

@ -119,7 +119,6 @@ export class TimerFormDialog extends LitElement {
await this.timerService?.save(timer); await this.timerService?.save(timer);
this.saving = false; this.saving = false;
// TODO: Clear form // TODO: Clear form
this.toggleVisibility();
document.dispatchEvent(new TimerSavedEvent(id)) document.dispatchEvent(new TimerSavedEvent(id))
} }
@ -134,11 +133,10 @@ export class TimerFormDialog extends LitElement {
return null; return null;
} }
return html` return html`
<fluent-button <button
appearance="outline"
tabindex="0" tabindex="0"
@click=${this.delete} @click=${this.delete}
style="margin-top: 1em;">Delete</fluent-button> style="margin-top: 1em;">Delete</button>
`; `;
} }
@ -169,71 +167,69 @@ export class TimerFormDialog extends LitElement {
type="hidden" type="hidden"
name="id" name="id"
.value=${this.timer?.id?.toString() || ''} /> .value=${this.timer?.id?.toString() || ''} />
<fluent-text-field <label for="timer-name">Name</label>
<input
id="timer-name" id="timer-name"
appearance="outline" type="text"
placeholder="My Timer" placeholder="My Timer"
.value=${this.timer?.name || ''}>Name</fluent-text-field> .value=${this.timer?.name || ''}/ >
<fluent-text-area <label for="timer-description">Description</label>
<textarea
id="timer-description" id="timer-description"
appearance="outline"
placeholder="More details" placeholder="More details"
.value=${this.timer?.description || ''}>Description</fluent-text-area> .value=${this.timer?.description || ''}></textarea>
<fluent-text-field <label for="timer-warmup">Warm-up</label>
<input
id="timer-warmup" id="timer-warmup"
appearance="outline"
placeholder="05:00" placeholder="05:00"
pattern="${this.durationPattern}" pattern="${this.durationPattern}"
.value=${this.durationString(this.timer?.warmUp)}>Warm Up</fluent-text-field> .value=${this.durationString(this.timer?.warmUp)} />
<fluent-text-field <label for="timer-low">Low Intensity</label>
<input
id="timer-low" id="timer-low"
appearance="outline"
placeholder="00:30" placeholder="00:30"
pattern="${this.durationPattern}" pattern="${this.durationPattern}"
.value=${this.durationString(this.timer?.lowIntensity)}>Low Intensity</fluent-text-field> .value=${this.durationString(this.timer?.lowIntensity)}>
<fluent-text-field <label for="timer-hi">High Intensity</label>
<input
id="timer-hi" id="timer-hi"
appearance="outline"
placeholder="01:00" placeholder="01:00"
pattern="${this.durationPattern}" pattern="${this.durationPattern}"
.value=${this.durationString(this.timer?.highIntensity)}>High Intensity</fluent-text-field> .value=${this.durationString(this.timer?.highIntensity)}>
<fluent-text-field <label for="timer-rest">Rest</label>
<input
id="timer-rest" id="timer-rest"
appearance="outline"
placeholder="01:00" placeholder="01:00"
pattern="${this.durationPattern}" pattern="${this.durationPattern}"
.value=${this.durationString(this.timer?.rest)}>Rest</fluent-text-field> .value=${this.durationString(this.timer?.rest)}>
<fluent-text-field <label for="timer-cool">Cooldown</label>
<input
id="timer-cool" id="timer-cool"
appearance="outline"
placeholder="05:00" placeholder="05:00"
pattern="${this.durationPattern}" pattern="${this.durationPattern}"
.value=${this.durationString(this.timer?.coolDown)}>Cooldown</fluent-text-field> .value=${this.durationString(this.timer?.coolDown)}>
<fluent-text-field <label for="timer-sets">Sets</label>
<input
id="timer-sets" id="timer-sets"
appearance="outline"
placeholder="4" placeholder="4"
.value=${this.timer?.sets}>Sets</fluent-text-field> .value=${this.timer?.sets}>
<fluent-text-field <label for="timer-rounds">Rounds</label>
<input
id="timer-rounds" id="timer-rounds"
appearance="outline"
placeholder="2" placeholder="2"
.value=${this.timer?.rounds}>Rounds</fluent-text-field> .value=${this.timer?.rounds}>
<fluent-button <button
appearance="accent"
tabindex="0" tabindex="0"
@click=${this.save} @click=${this.save}
style="margin: 1em 0;">Save</fluent-button> style="margin: 1em 0;">Save</button>
<fluent-button appearance="outline" tabindex="0" @click=${this.toggleVisibility}>Cancel</fluent-button> <button tabindex="0" @click=${this.toggleVisibility}>Cancel</button>
${this.deleteButton()} ${this.deleteButton()}
</form> </form>
</div> </div>
`; `;
} }
return html` return html`
<fluent-dialog ?hidden=${!this.visible} trap-focus modal class=${this.timer?.id ? 'tall' : ''}>
${body} ${body}
</fluent-dialog>
`; `;
} }
} }

16
src/script/pages/app-home.ts
View file

@ -12,6 +12,9 @@ export class AppHome extends LitElement {
@property({ type: Number }) editTimer?: number; @property({ type: Number }) editTimer?: number;
private timerService?: TimerService; private timerService?: TimerService;
@query('dialog')
dialog: HTMLElement | null | undefined;
static get styles() { static get styles() {
return css` return css`
main { main {
@ -64,6 +67,7 @@ export class AppHome extends LitElement {
if (!this.selectedTimer) { if (!this.selectedTimer) {
this.selectedTimer = this.timers[0]?.id; this.selectedTimer = this.timers[0]?.id;
} }
dialog.close()
} }
private editButton() { private editButton() {
@ -71,7 +75,7 @@ export class AppHome extends LitElement {
return null; return null;
} }
return html` return html`
<fluent-button appearance="stealth" slot="actions" @click=${() => this.editTimer = this.selectedTimer}>Edit</fluent-button> <button @click=${() => this.editTimer = this.selectedTimer}>Edit</button>
`; `;
} }
@ -87,11 +91,10 @@ export class AppHome extends LitElement {
<div class="timer-wrapper"> <div class="timer-wrapper">
<p> <p>
Create a timer to begin<br /> Create a timer to begin<br />
<fluent-button <button
appearance="stealth"
@click=${() => this.editTimer = -1}> @click=${() => this.editTimer = -1}>
New Timer New Timer
</fluent-button> </button>
</p> </p>
</div> </div>
`; `;
@ -107,12 +110,13 @@ export class AppHome extends LitElement {
@selecttimer=${(e: SelectTimerEvent) => this.selectedTimer = e.timerId}> @selecttimer=${(e: SelectTimerEvent) => this.selectedTimer = e.timerId}>
${this.editButton()} ${this.editButton()}
</app-header> </app-header>
${body} <dialog>
<timer-form-dialog <timer-form-dialog
?visible=${this.editTimer !== undefined}
.timerService=${this.timerService} .timerService=${this.timerService}
.timer=${this.editTimer === timer?.id ? timer : null} .timer=${this.editTimer === timer?.id ? timer : null}
@close=${this.closeEditor}></timer-form-dialog> @close=${this.closeEditor}></timer-form-dialog>
</dialog>
${body}
</main> </main>
`; `;
} }