From 3a1003b0af1e8e6fd1415a79bc49b7b129d928e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20Ha=C3=9Fel?= <git@patrick-hassel.de>
Date: Tue, 7 Jan 2025 18:51:17 +0100
Subject: [PATCH] INDEX_HTML

---
 src/patrix/INDEX_HTML.cpp | 73 ++++++++++++++++++++++++++++++---------
 1 file changed, 56 insertions(+), 17 deletions(-)
diff --git a/src/patrix/INDEX_HTML.cpp b/src/patrix/INDEX_HTML.cpp
index 7cba36f..c54e6e5 100644
--- a/src/patrix/INDEX_HTML.cpp
+++ b/src/patrix/INDEX_HTML.cpp
@@ -1,29 +1,68 @@
 #include "INDEX_HTML.h"
 
-const char* INDEX_HTML = R"(<!DOCTYPE html>
+const char *INDEX_HTML = R"(<!DOCTYPE html>
 <html lang="de">
 <head>
+  <meta name="viewport" content="width=device-width, user-scalable=no">
   <title>TEST</title>
-  <script>
-      function connect() {
-          console.log("connecting");
-          const socket = new WebSocket('ws://10.0.0.119/ws');
-          socket.timeout = 1;
-          socket.addEventListener('open', _ => console.log('connected'));
-          socket.addEventListener('message', event => {
-              document.getElementById("content").innerText = JSON.stringify(JSON.parse(event.data), null, 2);
-          });
-          socket.addEventListener('close', _ => {
-              console.log('disconnected');
-              connect();
-          });
+  <style>
+      body {
+          font-size: 4vw;
       }
 
-      connect();
-  </script>
+      @media (min-width: 1200px) {
+          body {
+              font-size: 16px;
+          }
+      }
+  </style>
 </head>
 <body>
 <pre id="content"></pre>
+<pre id="time"></pre>
+<script>
+    const time = document.getElementById("time");
+    const content = document.getElementById("content");
+
+    let last = null;
+
+    function updateTime() {
+        if (last === null) {
+            time.innerText = "Noch keine Daten";
+            return;
+        }
+        const ageSeconds = Math.floor((Date.now() - last) / 1000);
+        if (ageSeconds === 0) {
+            time.innerText = "Gerade eben";
+        } else {
+            time.innerText = "Vor " + ageSeconds + " Sekunde" + (ageSeconds === 1 ? "" : "n");
+        }
+    }
+
+    function connect() {
+        console.log("connecting websocket...");
+        const host = location.host || "10.0.0.119";
+        const port = location.port || "80";
+        const socket = new WebSocket(`ws://${host}:${port}/ws`);
+        socket.timeout = 1;
+        socket.addEventListener('open', _ => console.log('websocket connected'));
+        socket.addEventListener('message', event => {
+            last = Date.now();
+            updateTime();
+            const parsed = JSON.parse(event.data);
+            console.log("websocket received", parsed);
+            content.innerText = JSON.stringify(parsed, null, 2);
+        });
+        socket.addEventListener('close', _ => {
+            console.log('websocket disconnected');
+            connect();
+        });
+    }
+
+    updateTime();
+    connect();
+    setInterval(updateTime, 1000);
+</script>
 </body>
 </html>
-)";
\ No newline at end of file
+)";
