81 lines
2.0 KiB
TypeScript
81 lines
2.0 KiB
TypeScript
/*
|
|
This is the Lit.dev code for generating the timepiece.
|
|
Copyright (C) 2024 William Moore.
|
|
|
|
This program is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU Affero General Public License as
|
|
published by the Free Software Foundation, either version 3 of the
|
|
License, or (at your option) any later version.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU Affero General Public License for more details.
|
|
|
|
You should have received a copy of the GNU Affero General Public License
|
|
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
*/
|
|
import { LitElement, css, html } from 'lit';
|
|
import { customElement } from 'lit/decorators.js';
|
|
import { format } from 'date-fns-tz';
|
|
|
|
@customElement('wmoore-timepiece')
|
|
export class Timepiece extends LitElement {
|
|
time = '';
|
|
|
|
constructor() {
|
|
super();
|
|
this.reloadTime();
|
|
}
|
|
|
|
|
|
async reloadTime() {
|
|
const date = new Date();
|
|
const hours = date.getUTCHours();
|
|
const minutes = date.getUTCMinutes();
|
|
const seconds = date.getUTCSeconds();
|
|
|
|
let beats = (hours * 3600 + 60 * minutes + seconds) / 86.4;
|
|
|
|
beats = Math.round(beats * 100) / 100;
|
|
|
|
this.setData(`${format(date, 'yyyy-MM-dd', {timeZone: 'UTC'})}@${beats.toFixed(2)}`);
|
|
|
|
setTimeout(() => this.reloadTime(), 100);
|
|
}
|
|
|
|
setData(time: string) {
|
|
this.time = time;
|
|
this.requestUpdate();
|
|
}
|
|
|
|
static override styles = [
|
|
css`
|
|
.gauge-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-content: space-between;
|
|
text-align: center;
|
|
}
|
|
|
|
.gauge-label {
|
|
font-weight: bold;
|
|
}
|
|
`
|
|
]
|
|
override render() {
|
|
return html`
|
|
<div class="gauge-body">
|
|
<div>⧖${this.time}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'wmoore-timepiece': Timepiece;
|
|
}
|
|
}
|