60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
|
import { LitElement, html, css } from 'lit';
|
||
|
|
import { customElement } from 'lit/decorators.js';
|
||
|
|
import { isBefore } from 'date-fns';
|
||
|
|
|
||
|
|
@customElement('tea-sense')
|
||
|
|
export class TeaSense extends LitElement {
|
||
|
|
temp = 0.0;
|
||
|
|
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
this.pullTempFromBackend();
|
||
|
|
}
|
||
|
|
|
||
|
|
async pullTempFromBackend() {
|
||
|
|
const response = await fetch('https://sensors.mooreforge.com/api/teasense');
|
||
|
|
const data = await response.json();
|
||
|
|
const result = data
|
||
|
|
.reduce((accum: any, datum: any) => (((accum && isBefore(new Date(accum?.timestamp), new Date(datum?.timestamp))) || !accum) ? datum : accum));
|
||
|
|
|
||
|
|
this.setTemp(result.value);
|
||
|
|
|
||
|
|
setTimeout(() => this.pullTempFromBackend(), 5000);
|
||
|
|
}
|
||
|
|
|
||
|
|
setTemp(newTemp: number) {
|
||
|
|
this.temp = newTemp;
|
||
|
|
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 class="gauge-label">TeaSense</div>
|
||
|
|
<div class="gauge-label">Temperature (in C)</div>
|
||
|
|
<div>${this.temp}</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
declare global {
|
||
|
|
interface HTMLElementTagNameMap {
|
||
|
|
'tea-sense': TeaSense;
|
||
|
|
}
|
||
|
|
}
|