mosaic-widgets/src/TeaSense.ts

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() {
    try {
      const response = await fetch('TEASENSE_URI');

      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);
    } catch (error) {
      console.log(error);
    }

    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;
  }
}