Add pof and vac places

src/assets/HestiaClasses.js

@@ -36,6 +36,30 @@ export class State {
                 communicator.send(config.mqtt.topics.auger, JSON.stringify(this.auger));
             }
         };
+
+        this.pof = {
+            on: false,
+            name: "pof",
+            topic: config.mqtt.topics.pof,
+            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.pof.on ? this.pof.on = false : this.pof.on = true;
+                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

@@ -7,14 +7,18 @@ const config = {
         "topics": {
             "igniter": "hestia/status/igniter",
             "exhaust": "hestia/status/exhaust",
-            "auger": "hestia/status/auger"
+            "auger": "hestia/status/auger",
+            "pof": "hestia/status/pof",
+            "vacuum": "hestia/status/vacuum"
         }
     },
     "states": {
         "elements": [
             "igniter",
             "exhaust",
-            "auger"
+            "auger",
+            "pof",
+            "vacuum"
         ]
     }
 };
@@ -25,6 +29,8 @@ 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");
     let statusString;
 
     statusString = '';
@@ -38,6 +44,15 @@ export function refreshState(doc, state) {
     statusString = '';
     if (state.auger.on) statusString = "On"; else statusString = "Off";
     augerStatus.innerHTML = statusString;
+
+    statusString = '';
+    if (state.pof.on) statusString = "On"; else statusString = "Off";
+    pofStatus.innerHTML = statusString;
+
+    statusString = '';
+    if (state.vacuum.on) statusString = "On"; else statusString = "Off";
+    vacuumStatus.innerHTML = statusString;
+    
     console.log('State refreshed.');
 }
 

src/index.html

@@ -43,6 +43,16 @@
                         <td class="py-2 px-4">Auger</td>
                         <td class="py-2 px-4" id="auger-status">Placeholder</td>
                     </tr>
+                    <!-- PoF -->
+                    <tr>
+                        <td class="py-2 px-4">PoF</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">