Various improvements for usability and consistency and inclusion of PWA handling.

data/www/components/uptime-card.js

@@ -1,7 +1,7 @@
 class UptimeCard extends HTMLElement {
   constructor() {
     super();
-    this.source = null;
+    this.timer = null;
   }
 
   connectedCallback() {
@@ -11,11 +11,16 @@ class UptimeCard extends HTMLElement {
       </style>
       <section>
         <h3>Live uptime</h3>
-        <div class="muted">Server-Sent Events</div>
+        <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());
   }
@@ -31,28 +36,32 @@ class UptimeCard extends HTMLElement {
 
   start(token) {
     this.stop();
-    if (!token || !window.EventSource) {
+    if (!token) {
       this.setState('Unavailable', false);
       return;
     }
-    this.setState('Connecting', false);
-    this.source = new EventSource('/api/uptime/events?token=' + encodeURIComponent(token));
-    this.source.addEventListener('open', () => this.setState('Connected', true));
-    this.source.addEventListener('uptime', event => {
+    this.setState('Loading', false);
+    const load = async () => {
       try {
-        const json = JSON.parse(event.data);
+        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('Invalid event', false);
+        this.setState('Retrying', false);
       }
-    });
-    this.source.addEventListener('error', () => this.setState('Reconnecting', false));
+    };
+    load();
+    this.timer = setInterval(load, 5000);
   }
 
   stop() {
-    if (this.source) this.source.close();
-    this.source = null;
+    if (this.timer) clearInterval(this.timer);
+    this.timer = null;
   }
 }