PlatformIO_Esp32C3Boilerplate/data/www/components/uptime-card.js

class UptimeCard extends HTMLElement {
  constructor() {
    super();
    this.timer = null;
  }

  connectedCallback() {
    this.innerHTML = `
      <style>
        :host{display:block}section{height:100%;box-sizing:border-box}.liveValue{font-size:34px;font-weight:700;line-height:1.15;margin-top:10px}.state{display:inline-flex;align-items:center;gap:6px;margin-top:6px}.dot{width:9px;height:9px;border-radius:50%;background:#b3261e}.dot.on{background:#188038}
      </style>
      <section>
        <h3>Live uptime</h3>
        <div class="muted">Auto refresh</div>
        <div class="liveValue"><span id="seconds">--</span>s</div>
        <div class="muted state"><span id="dot" class="dot"></span><span id="state">Disconnected</span></div>
      </section>`;
    window.addEventListener('app:login', event => this.start(event.detail.token));
    window.addEventListener('app:logout', () => {
      this.stop();
      this.setState('Disconnected', false);
      this.querySelector('#seconds').textContent = '--';
    });
    window.addEventListener('beforeunload', () => this.stop());
    if (window.App && window.App.token()) this.start(window.App.token());
  }

  disconnectedCallback() {
    this.stop();
  }

  setState(text, connected) {
    this.querySelector('#state').textContent = text;
    this.querySelector('#dot').classList.toggle('on', !!connected);
  }

  start(token) {
    this.stop();
    if (!token) {
      this.setState('Unavailable', false);
      return;
    }
    this.setState('Loading', false);
    const load = async () => {
      try {
        const text = await window.App.serverReq('GET', '/api/uptime');
        const json = JSON.parse(text);
        if (!json.success) {
          this.setState('Unavailable', false);
          return;
        }
        this.querySelector('#seconds').textContent = json.uptimeSeconds;
        this.setState('Connected', true);
      } catch (error) {
        this.setState('Retrying', false);
      }
    };
    load();
    this.timer = setInterval(load, 5000);
  }

  stop() {
    if (this.timer) clearInterval(this.timer);
    this.timer = null;
  }
}

customElements.define('uptime-card', UptimeCard);