src/assets/HestiaClasses.js

@@ -1,40 +1,25 @@
 export class State {
     constructor() {
-        this.igniter = {
-            on: false,
-            topic: 'hestia/status/igniter',
-            publisher: 'front',
-            power: (communicator) => {
-                // This *should* toggle the state, asks if state is true, if it is set it false, otherwise set it true
-                this.igniter.on ? this.igniter.on = false : this.igniter.on = true;
-                communicator.send('hestia/status/igniter', JSON.stringify(this));
-            }
+        this.publisher = 'front';
+        return this;
     };
 
-        this.exhaust = {
+    init(config) {
+        config.mqtt.subscriptions.forEach(sub => {
+            this[sub.name] = {
                 on: false,
-            topic: 'hestia/status/exhaust',
+                topic: sub.topic,
                 publisher: 'front',
                 power: (communicator) => {
                     // This *should* toggle the state, asks if state is true, if it is set it false, otherwise set it true
-                this.exhaust.on ? this.exhaust.on = false : this.exhaust.on = true;
-                communicator.send('hestia/status/exhaust', JSON.stringify(this));
-            }
-        };
-
-        this.auger = {
-            on: false,
-            feedRate: 500,
-            topic: 'hestia/status/auger',
-            publisher: 'front',
-            power: (communicator) => {
-                // This *should* toggle the state, asks if state is true, if it is set it false, otherwise set it true
-                this.auger.on ? this.auger.on = false : this.auger.on = true;
-                communicator.send('hestia/status/auger', JSON.stringify(this));
+                    this[sub.name].on ? this[sub.name].on = false : this[sub.name].on = true;
+                    communicator.send(sub.topic, JSON.stringify(this));
                 }
             };
+            console.log(`${sub.name} initialized.`)
+        });
         console.log(`State initialized.`)
-    };
+    }
 };
 
 export class Communicator {
@@ -55,10 +40,11 @@ export class Communicator {
         client.on('connect', () => {
             console.log('Connected to MQTT broker');
             // Subscribe to status topics
-            state.forEach(element => {
-                client.subscribe(element.topic, (err) => {
+            config.mqtt.subscriptions.forEach(sub => {
+                client.subscribe(sub.topic, (err) => {
                     if (!err) {
-                        console.log(`Subscribed to ${element.topic}`);
+                        console.log(`Subscribed to ${sub.topic}`);
+                        state[sub.name].topic = sub.topic;
                     }
                 });
             });

src/assets/hestia.js

@@ -5,7 +5,21 @@ const config = {
     "mqtt": {
         "address": "wss://mqtt.3411.one",
         "username": "hestia",
-        "password": "hestia"
+        "password": "hestia",
+        "subscriptions": [
+            {
+                "name": "igniter",
+                "topic": "hestia/status/igniter"
+            },
+            {
+                "name": "exhaust",
+                "topic": "hestia/status/exhaust"
+            },
+            {
+                "name": "auger",
+                "topic": "hestia/status/auger"
+            }
+        ]
     }
 };
 

src/index.html

@@ -76,9 +76,10 @@
             <img src="./assets/dancing_jesus.gif" class="img-fluid mx-auto rounded-lg shadow-lg" alt="Dancing Jesus">
         </div>
 
-        <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 class="controls-container bg-gray-800 p-6 rounded-lg shadow-lg hidden" id="quitContainer">
+            <form action="/" method="POST">
+                <input class="btn bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded w-full" type="submit" id="quit" value="Quit!!" name="quit">
+            </form>
         </div>
     </div>
 </body>