From 2f34a0ca4e0ef6cbea22721812db156ec2fdff24 Mon Sep 17 00:00:00 2001
From: Manuel Weiser <manuel.weiser@me.com>
Date: Sun, 16 Feb 2025 10:26:36 +0100
Subject: [PATCH] feat: update HTML structure and add version display in the
 navbar

---
 html/header.html   |  3 ++-
 html/index.html    | 37 ++++++++++++++++++++++++++++++++++++-
 html/rfid.html     | 37 ++++++++++++++++++++++++++++++++++++-
 html/spoolman.html | 37 ++++++++++++++++++++++++++++++++++++-
 html/style.css     |  7 +++++++
 html/waage.html    | 37 ++++++++++++++++++++++++++++++++++++-
 html/wifi.html     | 37 ++++++++++++++++++++++++++++++++++++-
 src/website.cpp    | 40 ++++++++++++++++++++--------------------
 8 files changed, 209 insertions(+), 26 deletions(-)
diff --git a/html/header.html b/html/header.html
index 6a4e2ac..01e7489 100644
--- a/html/header.html
+++ b/html/header.html
@@ -12,7 +12,7 @@
         <div style="display: flex; align-items: center; gap: 2rem;">
             <img src="/logo.png" alt="FilaMan Logo" class="logo">
             <div class="logo-text">
-                <h1>FilaMan</h1>
+                <h1>FilaMan<span class="version">v1.0.2</span></h1>
                 <h4>Filament Management Tool</h4>
             </div>
         </div>
@@ -32,3 +32,4 @@
             <div class="ram-status" id="ramStatus"></div>
         </div>
     </div>
+
diff --git a/html/index.html b/html/index.html
index 5d9aaef..31a8dab 100644
--- a/html/index.html
+++ b/html/index.html
@@ -1,4 +1,39 @@
-{{header}}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FilaMan - Filament Management Tool</title>
+    <link rel="icon" type="image/png" href="/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="navbar">
+        <div style="display: flex; align-items: center; gap: 2rem;">
+            <img src="/logo.png" alt="FilaMan Logo" class="logo">
+            <div class="logo-text">
+                <h1>FilaMan<span class="version">v1.0.2</span></h1>
+                <h4>Filament Management Tool</h4>
+            </div>
+        </div>
+        <nav style="display: flex; gap: 1rem;">
+            <a href="/">Start</a>
+            <a href="/waage">Scale</a>
+            <a href="/spoolman">Spoolman/Bambu</a>
+            <a href="/about">About</a>
+        </nav>
+        <div class="status-container">
+            <div class="status-item">
+                <span class="status-dot" id="bambuDot"></span>B
+            </div>
+            <div class="status-item">
+                <span class="status-dot" id="spoolmanDot"></span>S
+            </div>
+            <div class="ram-status" id="ramStatus"></div>
+        </div>
+    </div>
+
+
 
     <div class="container">
         <h1>FilaMan</h1>
diff --git a/html/rfid.html b/html/rfid.html
index 23e57bc..051e7e5 100644
--- a/html/rfid.html
+++ b/html/rfid.html
@@ -1,4 +1,39 @@
-{{header}}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FilaMan - Filament Management Tool</title>
+    <link rel="icon" type="image/png" href="/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="navbar">
+        <div style="display: flex; align-items: center; gap: 2rem;">
+            <img src="/logo.png" alt="FilaMan Logo" class="logo">
+            <div class="logo-text">
+                <h1>FilaMan<span class="version">v1.0.2</span></h1>
+                <h4>Filament Management Tool</h4>
+            </div>
+        </div>
+        <nav style="display: flex; gap: 1rem;">
+            <a href="/">Start</a>
+            <a href="/waage">Scale</a>
+            <a href="/spoolman">Spoolman/Bambu</a>
+            <a href="/about">About</a>
+        </nav>
+        <div class="status-container">
+            <div class="status-item">
+                <span class="status-dot" id="bambuDot"></span>B
+            </div>
+            <div class="status-item">
+                <span class="status-dot" id="spoolmanDot"></span>S
+            </div>
+            <div class="ram-status" id="ramStatus"></div>
+        </div>
+    </div>
+
+
 <div class="connection-status hidden">
     <div class="spinner"></div>
     <span>Connection lost. Trying to reconnect...</span>
diff --git a/html/spoolman.html b/html/spoolman.html
index d5c19b6..46e044c 100644
--- a/html/spoolman.html
+++ b/html/spoolman.html
@@ -1,4 +1,39 @@
-{{header}}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FilaMan - Filament Management Tool</title>
+    <link rel="icon" type="image/png" href="/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="navbar">
+        <div style="display: flex; align-items: center; gap: 2rem;">
+            <img src="/logo.png" alt="FilaMan Logo" class="logo">
+            <div class="logo-text">
+                <h1>FilaMan<span class="version">v1.0.2</span></h1>
+                <h4>Filament Management Tool</h4>
+            </div>
+        </div>
+        <nav style="display: flex; gap: 1rem;">
+            <a href="/">Start</a>
+            <a href="/waage">Scale</a>
+            <a href="/spoolman">Spoolman/Bambu</a>
+            <a href="/about">About</a>
+        </nav>
+        <div class="status-container">
+            <div class="status-item">
+                <span class="status-dot" id="bambuDot"></span>B
+            </div>
+            <div class="status-item">
+                <span class="status-dot" id="spoolmanDot"></span>S
+            </div>
+            <div class="ram-status" id="ramStatus"></div>
+        </div>
+    </div>
+
+
     <script>
         window.onload = function() {
             if (spoolmanUrl && spoolmanUrl.trim() !== "") {
diff --git a/html/style.css b/html/style.css
index 891bdda..c69c48f 100644
--- a/html/style.css
+++ b/html/style.css
@@ -1006,4 +1006,11 @@ input[type="submit"]:disabled,
 
 .spool-button:hover {
     opacity: 0.8;
+}
+
+.version {
+    font-size: 0.4em;
+    color: #000;
+    vertical-align: middle;
+    margin-left: 0.5rem;
 }
\ No newline at end of file
diff --git a/html/waage.html b/html/waage.html
index 04d81df..7587fa7 100644
--- a/html/waage.html
+++ b/html/waage.html
@@ -1,4 +1,39 @@
-{{header}}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FilaMan - Filament Management Tool</title>
+    <link rel="icon" type="image/png" href="/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="navbar">
+        <div style="display: flex; align-items: center; gap: 2rem;">
+            <img src="/logo.png" alt="FilaMan Logo" class="logo">
+            <div class="logo-text">
+                <h1>FilaMan<span class="version">v1.0.2</span></h1>
+                <h4>Filament Management Tool</h4>
+            </div>
+        </div>
+        <nav style="display: flex; gap: 1rem;">
+            <a href="/">Start</a>
+            <a href="/waage">Scale</a>
+            <a href="/spoolman">Spoolman/Bambu</a>
+            <a href="/about">About</a>
+        </nav>
+        <div class="status-container">
+            <div class="status-item">
+                <span class="status-dot" id="bambuDot"></span>B
+            </div>
+            <div class="status-item">
+                <span class="status-dot" id="spoolmanDot"></span>S
+            </div>
+            <div class="ram-status" id="ramStatus"></div>
+        </div>
+    </div>
+
+
     <div class="content">
         <h1>Scale Configuration Page</h1>
         
diff --git a/html/wifi.html b/html/wifi.html
index cb8ac85..458672c 100644
--- a/html/wifi.html
+++ b/html/wifi.html
@@ -1,4 +1,39 @@
-{{header}}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FilaMan - Filament Management Tool</title>
+    <link rel="icon" type="image/png" href="/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="navbar">
+        <div style="display: flex; align-items: center; gap: 2rem;">
+            <img src="/logo.png" alt="FilaMan Logo" class="logo">
+            <div class="logo-text">
+                <h1>FilaMan<span class="version">v1.0.2</span></h1>
+                <h4>Filament Management Tool</h4>
+            </div>
+        </div>
+        <nav style="display: flex; gap: 1rem;">
+            <a href="/">Start</a>
+            <a href="/waage">Scale</a>
+            <a href="/spoolman">Spoolman/Bambu</a>
+            <a href="/about">About</a>
+        </nav>
+        <div class="status-container">
+            <div class="status-item">
+                <span class="status-dot" id="bambuDot"></span>B
+            </div>
+            <div class="status-item">
+                <span class="status-dot" id="spoolmanDot"></span>S
+            </div>
+            <div class="ram-status" id="ramStatus"></div>
+        </div>
+    </div>
+
+
     <div class="content">
         <h1>WiFi Configuration Page</h1>
         <form action="/setToken" method="post">
diff --git a/src/website.cpp b/src/website.cpp
index 3ff2bd9..7b86092 100644
--- a/src/website.cpp
+++ b/src/website.cpp
@@ -92,24 +92,16 @@ void onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventTyp
 
 // Funktion zum Laden und Ersetzen des Headers in einer HTML-Datei
 String loadHtmlWithHeader(const char* filename) {
-    if (!SPIFFS.exists(filename) || !SPIFFS.exists("/header.html")) {
+    Serial.println("Lade HTML-Datei: " + String(filename));
+    if (!SPIFFS.exists(filename)) {
         Serial.println("Fehler: Datei nicht gefunden!");
         return "Fehler: Datei nicht gefunden!";
     }
 
-    // Lade den Header
-    File headerFile = SPIFFS.open("/header.html", "r");
-    String header = headerFile.readString();
-    headerFile.close();
-
-    // Lade die Hauptdatei
     File file = SPIFFS.open(filename, "r");
     String html = file.readString();
     file.close();
 
-    // Ersetze den Platzhalter mit dem Header
-    html.replace("{{header}}", header);
-
     return html;
 }
 
@@ -169,25 +161,31 @@ void setupWebserver(AsyncWebServer &server) {
     Serial.print("Geladene Spoolman-URL: ");
     Serial.println(spoolmanUrl);
 
-    // Route für die Startseite
+    // Route für about
     server.on("/about", HTTP_GET, [](AsyncWebServerRequest *request){
-        Serial.println("Anfrage für / erhalten");
-        String html = loadHtmlWithHeader("/index.html");
-        request->send(200, "text/html", html);
+        Serial.println("Anfrage für /about erhalten");
+        AsyncWebServerResponse *response = request->beginResponse(SPIFFS, "/about.html.gz", "text/html");
+        response->addHeader("Content-Encoding", "gzip");
+        response->addHeader("Cache-Control", CACHE_CONTROL);
+        request->send(response);
     });
 
     // Route für Waage
     server.on("/waage", HTTP_GET, [](AsyncWebServerRequest *request){
         Serial.println("Anfrage für /waage erhalten");
-        String html = loadHtmlWithHeader("/waage.html");
-        request->send(200, "text/html", html);
+        AsyncWebServerResponse *response = request->beginResponse(SPIFFS, "/waage.html.gz", "text/html");
+        response->addHeader("Content-Encoding", "gzip");
+        response->addHeader("Cache-Control", CACHE_CONTROL);
+        request->send(response);
     });
 
     // Route für RFID
     server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
         Serial.println("Anfrage für /rfid erhalten");
-        String html = loadHtmlWithHeader("/rfid.html");
-        request->send(200, "text/html", html);
+        AsyncWebServerResponse *response = request->beginResponse(SPIFFS, "/rfid.html.gz", "text/html");
+        response->addHeader("Content-Encoding", "gzip");
+        response->addHeader("Cache-Control", CACHE_CONTROL);
+        request->send(response);
         Serial.println("RFID-Seite gesendet");
     });
 
@@ -211,8 +209,10 @@ void setupWebserver(AsyncWebServer &server) {
     // Route für WiFi
     server.on("/wifi", HTTP_GET, [](AsyncWebServerRequest *request){
         Serial.println("Anfrage für /wifi erhalten");
-        String html = loadHtmlWithHeader("/wifi.html");
-        request->send(200, "text/html", html);
+        AsyncWebServerResponse *response = request->beginResponse(SPIFFS, "/wifi.html.gz", "text/html");
+        response->addHeader("Content-Encoding", "gzip");
+        response->addHeader("Cache-Control", CACHE_CONTROL);
+        request->send(response);
     });
 
     // Route für Spoolman Setting
