From 6ba4c4016696f2494e85be4da16d9f5fb72fa2bd Mon Sep 17 00:00:00 2001
From: Marcel Peterkau <marcel@peterkau.de>
Date: Thu, 17 Feb 2022 09:17:16 +0100
Subject: [PATCH] more WebUI-Progress

---
 Software/ChainLube/assets/Logo.svg |   6 +-
 Software/ChainLube/data/index.htm  | 106 +++++++++++++++++------------
 Software/ChainLube/src/webui.cpp   |   3 +
 3 files changed, 68 insertions(+), 47 deletions(-)
diff --git a/Software/ChainLube/assets/Logo.svg b/Software/ChainLube/assets/Logo.svg
index 3e6cfcd..adadb5d 100644
--- a/Software/ChainLube/assets/Logo.svg
+++ b/Software/ChainLube/assets/Logo.svg
@@ -14,9 +14,9 @@
    viewBox="0 0 512 512"
    sodipodi:docname="Logo.svg"
    inkscape:version="1.0.2-2 (e86c870879, 2021-01-15)"
-   inkscape:export-filename="E:\Rehoiler_SMD\Rehoiler SMD\Software\ChainLube\data\static\img\logo.png"
-   inkscape:export-xdpi="29.021828"
-   inkscape:export-ydpi="29.021828">
+   inkscape:export-filename="C:\Users\Souko Hiabuto\Downloads\logo.png"
+   inkscape:export-xdpi="96.000008"
+   inkscape:export-ydpi="96.000008">
   <metadata
      id="metadata839">
     <rdf:RDF>
diff --git a/Software/ChainLube/data/index.htm b/Software/ChainLube/data/index.htm
index d039231..59d055c 100644
--- a/Software/ChainLube/data/index.htm
+++ b/Software/ChainLube/data/index.htm
@@ -6,66 +6,77 @@
   <title>KTM CAN Chain Oiler</title>
   <meta http-equiv="content-type" content="text/html;charset=UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="/static/css/bootstrap.min.css">
-  <link rel="stylesheet" href="/static/css/custom.css">
-  <script src="/static/js/jquery.min.js"></script>
-  <script src="/static/js/bootstrap.min.js"></script>
-  <link rel="apple-touch-icon" sizes="180x180" href="/static/img/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="/static/img/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="/static/img/favicon-16x16.png">
-  <link rel="manifest" href="/static/img/site.webmanifest">
+  <link rel="stylesheet" href="static/css/bootstrap.min.css">
+  <link rel="stylesheet" href="static/css/custom.css">
+  <script src="static/js/jquery.min.js"></script>
+  <script src="static/js/bootstrap.min.js"></script>
+  <link rel="apple-touch-icon" sizes="180x180" href="static/img/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="static/img/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="static/img/favicon-16x16.png">
+  <link rel="manifest" href="static/img/site.webmanifest">
 </head>
 
 <body>
-  <div class="container">
 
-    <nav class="navbar navbar-default">
-      <!-- Brand and toggle get grouped for better mobile display -->
-      <div class="navbar-header">
-        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
-          <span class="sr-only">Toggle navigation</span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-        </button>
-        <a class="navbar-brand" href="#">
-          <img src="/static/img/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
-          KTM CAN ChainLube
-        </a>
-      </div>
-      <!-- Collection of nav links, forms, and other content for toggling -->
-      <div id="navbarCollapse" class="collapse navbar-collapse">
-        <ul class="nav navbar-nav">
-          <li class="active"><a data-toggle="tab" href="#tab_home">Home</a></li>
-          <li><a data-toggle="tab" href="#tab_source">Wegstrecke</a></li>
-          <li><a data-toggle="tab" href="#tab_lube">Schmierung</a></li>
-          <li><a data-toggle="tab" href="#tab_tank">Öltank</a></li>
-          <li><a data-toggle="tab" href="#tab_maintenance">Wartung</a></li>
-          <li><a data-toggle="tab" href="#tab_sysinfo">Systeminfo</a></li>
-        </ul>
+  <nav class="navbar navbar-expand-md navbar-default fixed-top">
+    <div class="navbar-header">
+      <a class="navbar-brand" href="#">
+        <img src="static/img/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
+        KTM CAN ChainLube
+      </a>
+      <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+    </div>
 
-      </div>
-    </nav>
+    <!-- Collection of nav links, forms, and other content for toggling -->
+    <div id="navbarCollapse" class="collapse navbar-collapse">
+      <ul class="nav navbar-nav">
+        <li class="active"><a data-toggle="tab" href="#tab_home">Home</a></li>
+        <li><a data-toggle="tab" href="#tab_source">Wegstrecke</a></li>
+        <li><a data-toggle="tab" href="#tab_lube">Schmierung</a></li>
+        <li><a data-toggle="tab" href="#tab_tank">Öltank</a></li>
+        <li><a data-toggle="tab" href="#tab_maintenance">Wartung</a></li>
+        <li><a data-toggle="tab" href="#tab_sysinfo">Systeminfo</a></li>
+      </ul>
+
+    </div>
+  </nav>
+
+  <main role="main" class="container">
 
     <!-- Tabs Content -->
     <div class="tab-content">
       <!-- Div Tab Home-->
       <div id="tab_home" class="tab-pane fade in active">
-        <h3>HOME</h3>
+        <div class="col text-center">
+          <div class="jumbotron">
+
+            <img src="static/img/logo.png" width="120" height="120" class="img-fluid" alt="">
+            <h3>KTM CAN Chain Lube</h3>
+          </div>
+
+        </div>
         <p>
-        <h4>Tankinhalt</h4>
+        <h4>Tankinhalt verbleibend</h4>
         <div class="progress">
           <div class="progress-bar" role="progressbar" aria-valuenow="%TANK_REMAIN_CAPACITY%" aria-valuemin="0"
             aria-valuemax="100" style="width: %TANK_REMAIN_CAPACITY%&#37;">
             %TANK_REMAIN_CAPACITY%&#37;
           </div>
         </div>
+        <h4>aktueller Modus</h4>
+        <input class="form-control" type="text" placeholder="%SYSTEM_STATUS%" readonly>
         </p>
       </div>
       <!-- Div Tab Home-->
       <!-- Div Tab Source Settings-->
       <div id="tab_source" class="tab-pane fade">
-        <h3>Quelle Wegstrecke</h3>
+        <h3>Erfassung Wegstrecke</h3>
+        <hr>
         <p>
         <form action="source-settings" method="POST" class="form-horizontal">
           <div class="form-group">
@@ -182,6 +193,7 @@
       <!-- Div Tab Lube -->
       <div id="tab_lube" class="tab-pane fade">
         <h3>Schmierung</h3>
+        <hr>
         <p>
 
         </p>
@@ -190,6 +202,7 @@
       <!-- Div Tab Maintenance -->
       <div id="tab_maintenance" class="tab-pane fade">
         <h3>Wartung</h3>
+        <hr>
         <p>
         <form class="form-horizontal">
           <div class="form-group">
@@ -213,6 +226,7 @@
       <!-- Div Tank Settings-->
       <div id="tab_tank" class="tab-pane fade">
         <h3>Öltank</h3>
+        <hr>
         <p>
         <form class="form-horizontal">
           <div class="form-group">
@@ -253,7 +267,9 @@
       <!-- Div Tank Settings-->
       <!-- Div Tab SystemInfo -->
       <div id="tab_sysinfo" class="tab-pane fade">
-        <h3>Einstellungen</h3>
+        <h3>Systeminfo</h3>
+        <hr>
+        <h4>Einstellungen</h4>
         <p>
         <table class="table">
           <tbody>
@@ -324,7 +340,7 @@
           </tbody>
         </table>
         </p>
-        <h3>Betriebsdaten</h3>
+        <h4>Betriebsdaten</h4>
         <p>
         <table class="table">
           <tbody>
@@ -354,16 +370,18 @@
       <!-- Div Tab SystemInfo -->
     </div>
     <!-- Tabs Content -->
-  </div>
+  </main>
 
   <!-- Footer -->
   <footer class="navbar-default navbar-fixed-bottom">
     <div class="container-fluid">
       <!-- Copyright -->
-      © 2022 Copyright:
-      <a class="text-reset fw-bold" href="https://eventronics.de/">Marcel Peterkau</a>
+      <div class="col text-center">
+        © 2022 Copyright:
+        <a class="text-reset fw-bold" href="https://eventronics.de/">Marcel Peterkau</a>
+      </div>
+      <!-- Copyright -->
     </div>
-    <!-- Copyright -->
   </footer>
   <!-- Footer -->
 
diff --git a/Software/ChainLube/src/webui.cpp b/Software/ChainLube/src/webui.cpp
index df4d3c0..f1b0836 100644
--- a/Software/ChainLube/src/webui.cpp
+++ b/Software/ChainLube/src/webui.cpp
@@ -104,6 +104,9 @@ String processor(const String &var)
     return temp;
   }
 
+  if (var == "SYSTEM_STATUS")
+    return String(globals.systemStatustxt);
+
   if (var == "PLACEHOLDER")
     return "placeholder";
 
