64 lines
1.3 KiB
TypeScript
64 lines
1.3 KiB
TypeScript
|
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;
|
||
|
|
}
|
||
|
|
}
|