Add indicator for feed rate, remove vac

src/assets/HestiaClasses.js

@@ -48,18 +48,6 @@ export class State {
                 communicator.send(config.mqtt.topics.pof, JSON.stringify(this.pof));
             }
         };
-
-        this.vacuum = {
-            on: false,
-            name: "vacuum",
-            topic: config.mqtt.topics.vacuum,
-            publisher: 'backend',
-            power: (communicator) => {
-                // This *should* toggle the state, asks if state is true, if it is set it false, otherwise set it true
-                this.vacuum.on ? this.vacuum.on = false : this.vacuum.on = true;
-                communicator.send(config.mqtt.topics.vacuum, JSON.stringify(this.vacuum));
-            }
-        };
         console.log(`State initialized.`)
     };
 };

src/assets/hestia.js

@@ -10,7 +10,6 @@ const config = {
             "exhaust": "hestia/status/exhaust",
             "auger": "hestia/status/auger",
             "pof": "hestia/status/pof",
-            "vacuum": "hestia/status/vacuum"
         }
     },
     "states": {
@@ -19,42 +18,64 @@ const config = {
             "exhaust",
             "auger",
             "pof",
-            "vacuum"
         ]
+    },
+    "feedRates": {
+        "low": 500,
+        "medium-low": 625,
+        "medium": 750,
+        "medium-high": 875,
+        "high": 1000,
+        "reverse": {
+            "500": "Low",
+            "625": "Medium-Low",
+            "750": "Medium",
+            "875": "Medium-High",
+            "1000": "High",
+        }
     }
 };
+
+// Create a new state and communicator
 const psState = new State(config);
 const comms = new Communicator(psState);
 
+// Grab elements from the DOM
 const setFeedRateButton = document.getElementById("set-feed-rate");
-
-export function refreshState(doc, state) {
 const igniterStatus = doc.getElementById("igniter-status");
 const exhaustStatus = doc.getElementById("exhaust-status");
 const augerStatus = doc.getElementById("auger-status");
 const pofStatus = doc.getElementById("pof-status");
-    const vacuumStatus = doc.getElementById("vacuum-status");
+const feedRateStatus = document.getElementById("feed-rate-status");
-    let statusString;
 
-    statusString = '';
+export function refreshState(doc, state) {
+    let statusString = new String('Loading...');
+
+    // Igniter
     if (state.igniter.on) statusString = "On"; else statusString = "Off";
     igniterStatus.innerHTML = statusString;
 
-    statusString = '';
+    // Exhaust
+    statusString = 'Loading...';
     if (state.exhaust.on) statusString = "On"; else statusString = "Off";
     exhaustStatus.innerHTML = statusString;
 
-    statusString = '';
+    // Auger
+    statusString = 'Loading...';
     if (state.auger.on) statusString = "On"; else statusString = "Off";
     augerStatus.innerHTML = statusString;
 
-    statusString = '';
+    // Proof of Fire
+    statusString = 'Loading...';
     if (state.pof.on) statusString = "On"; else statusString = "Off";
     pofStatus.innerHTML = statusString;
 
-    statusString = '';
+    // This is needlessly complicated but it matches the other status updates
-    if (state.vacuum.on) statusString = "On"; else statusString = "Off";
+    statusString = 'Loading...';
-    vacuumStatus.innerHTML = statusString;
+    const { feedRate } = state.auger;
+    if (config.feedRates.reverse[feedRate]) statusString = config.feedRates.reverse[feedRate];
+    else statusString = feedRate;
+    feedRateStatus.innerHTML = statusString;
     
     console.log('State refreshed.');
 }
@@ -72,6 +93,7 @@ export function shutdown() {
     comms.shutdown();
 }
 
+// Run stuff once the page loads
 window.onload = function() {
     comms.init(psState, config);
     refreshState(window.document, psState);

src/index.html

@@ -45,16 +45,16 @@
                         <td class="py-2 px-4">Auger</td>
                         <td class="py-2 px-4" id="auger-status">Placeholder</td>
                     </tr>
+                    <!-- Feed Rate -->
+                    <tr class="border-b border-gray-700">
+                        <td class="py-2 px-4">Feed Rate</td>
+                        <td class="py-2 px-4" id="feed-rate-status">Placeholder</td>
+                    </tr>
                     <!-- PoF -->
                     <tr class="border-b border-gray-700">
                         <td class="py-2 px-4">Proof of Fire</td>
                         <td class="py-2 px-4" id="pof-status">Placeholder</td>
                     </tr>
-                    <!-- Vacuum -->
-                    <tr>
-                        <td class="py-2 px-4">Vacuum</td>
-                        <td class="py-2 px-4" id="vacuum-status">Placeholder</td>
-                    </tr>
                 </tbody>
             </table>
             <div class="button-container flex">
@@ -67,10 +67,10 @@
                 <input class="btn bg-gray-700 hover:bg-purple-600 text-white py-2 w-full rounded mx-auto" type="submit" id="auger-toggle-btn" value="Toggle Auger" name="augerToggle" onclick="togglePower('auger')">
             </div>
             <div class="button-container flex mt-4">
-                <input class="btn bg-gray-700 hover:bg-purple-600 text-white py-2 w-full rounded mx-auto" type="submit" id="start-btn" value="Startup" name="startButton" onclick="startup()">
+                <input class="btn bg-gray-700 hover:bg-purple-600 text-white py-2 w-full rounded mx-auto" type="submit" id="start-btn" value="[Disabled]" name="startButton" onclick="">
             </div>
             <div class="button-container flex mt-4">
-                <input class="btn bg-gray-700 hover:bg-purple-600 text-white py-2 w-full rounded mx-auto" type="submit" id="stop-btn" value="Shutdown" name="stopButton" onclick="shutdown()">
+                <input class="btn bg-gray-700 hover:bg-purple-600 text-white py-2 w-full rounded mx-auto" type="submit" id="stop-btn" value="[Disabled]" name="stopButton" onclick="">
             </div>
             <!-- Set feed rates -->
             <div class="form-group mt-4">
@@ -94,7 +94,6 @@
 
         <div class="controls-container bg-gray-800 p-6 rounded-lg shadow-lg" id="quitContainer">
             <input class="btn bg-green-200 hover:bg-green-400 text-black font-bold py-2 px-4 rounded w-full" type="submit" id="reload" value="Refresh State" name="refresh">
-            <input class="btn bg-red-600 hover:bg-red-700 text-white py-2 font-bold rounded w-full mt-4" type="submit" id="quit" value="Quit!!" name="quit">
         </div>
     </div>
 </body>