Merge pull request #38 from Birkemosen/PowerControl

Initial development of Power Control Panel

src/components/panels/PowerControlPanel.vue

@@ -0,0 +1,61 @@
+<style>
+</style>
+
+<template>
+    <div>
+        <v-card>
+            <v-toolbar flat dense>
+                <v-toolbar-title>
+                    <span class="subheading">
+                        <v-icon class="mdi mdi-power" left></v-icon>Power Control
+                    </span>
+                </v-toolbar-title>
+            </v-toolbar>
+
+            <v-card-text class="pb-0">
+                <div v-for="(device, index) in devices" v-bind:key="index">
+                    <v-divider class="my-2" v-if="index > 0"></v-divider>
+                    <v-row class="pl-2 pr-2 pb-2">
+                        <v-col class="col-auto py-0 vertical_align_center col-6">{{ device.name }}</v-col>
+                        <v-col class="col-auto py-0 vertical_align_center col-6">
+                            <v-btn
+                                :disabled="device.status === 1"
+                                v-on="device.status === 0 ? { click: () => setPower(index,1) } : {}"
+                            >On</v-btn>
+                            <v-btn
+                                :disabled="device.status === 0"
+                                v-on="device.status === 1 ? { click: () => setPower(index,0) } : {}"
+                            >Off</v-btn>
+                        </v-col>
+                    </v-row>
+                </div>
+            </v-card-text>
+        </v-card>
+    </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import Vue from "vue";
+
+export default {
+    components: {},
+
+    computed: {
+        ...mapState({
+            devices: (state) => state.power.devices,
+        }),
+    },
+    methods: {
+        setPower(index, value) {
+            let rpc = value === 1 ? "machine.gpio_power.on" : "machine.gpio_power.off";
+            let deviceId = this.devices[index].id;
+            Vue.prototype.$socket.sendObj(
+                rpc,
+                { [deviceId]: "" },
+                "responsePowerToggle"
+            );
+        },
+    },
+};
+</script>

src/components/panels/index.js

@@ -10,6 +10,7 @@ import Peripherie from "./PeripheriePanel";
 import WebcamPanel from "./WebcamPanel";
 import MiniconsolePanel from "./MiniconsolePanel";
 import Settings from "./Settings/";
+import PowerControlPanel from "./PowerControlPanel.vue";
 
 Vue.component('status-panel', StatusPanel);
 Vue.component('klippy-state-panel', KlippyStatePanel);
@@ -20,6 +21,7 @@ Vue.component('zoffset-panel', ZOffsetPanel);
 Vue.component('peripherie-panel', Peripherie);
 Vue.component('webcam-panel', WebcamPanel);
 Vue.component('miniconsole-panel', MiniconsolePanel);
+Vue.component('power-control-panel', PowerControlPanel);
 
 export default {
     Settings

src/pages/Dashboard.vue

@@ -12,6 +12,7 @@
             <tools-panel></tools-panel>
             <peripherie-panel class="mt-6" v-if="klippy_state === 'ready'"></peripherie-panel>
             <miniconsole-panel class="mt-6" v-if="klippy_state === 'ready' && showDashboardConsole"></miniconsole-panel>
+            <power-control-panel class="mt-6" v-if="powerDevicesCount > 0"></power-control-panel>
         </v-col>
     </v-row>
 </template>
@@ -31,7 +32,8 @@
                 klippy_state: state => state.printer.webhooks.state,
             }),
             ...mapGetters([
-                'showDashboardWebcam'
+                'showDashboardWebcam',
+                'powerDevicesCount'
             ])
         },
         /*created() {

src/store/actions.js

@@ -9,6 +9,7 @@ export default {
         commit('setConnected');
         Vue.prototype.$socket.sendObj('server.files.get_directory', { path: '/gcodes' }, 'getDirectoryRoot');
         Vue.prototype.$socket.sendObj('printer.info', {}, 'getKlipperInfo');
+        Vue.prototype.$socket.sendObj('machine.gpio_power.devices', {}, 'getPowerDevices');
     },
 
     socket_on_close ({ commit }, event) {
@@ -204,6 +205,28 @@ export default {
         commit('setHelpList', data);
     },
 
+    getPowerDevices({ commit }, data) {
+        if (data.error) {
+            if (data.error.code != -32601) {
+                Vue.$toast.error(data.error.message);
+            }
+        } else {
+            commit('setPowerDevices', data.devices);
+            
+            Vue.prototype.$socket.sendObj('machine.gpio_power.status', {}, 'getPowerDevicesStatus');
+        }
+    },
+
+    getPowerDevicesStatus({ commit }, data) {
+        if (data.error) {
+            if (data.error.code != -32601) {
+                Vue.$toast.error(data.error.message);
+            }
+        } else {
+            commit('setPowerDevicesStatus', data);
+        }
+    },
+
     setHeaterChartVisibility({ commit, dispatch }, data) {
         commit('setHeaterChartVisibility', data);
         dispatch('saveGuiSettings');
@@ -319,6 +342,10 @@ export default {
         commit('removeLoading', { name: 'bedMeshRemove' });
     },
 
+    responsePowerToggle({ commit }, data) {
+        commit('setPowerDevicesStatus', data);
+    },
+
     switchToDashboard() {
         router.push("/");
     },

src/store/getters.js

@@ -278,5 +278,13 @@ export default {
         }
 
         return extruder;
-    }
+    },
+
+    powerDevices: state => {
+        return state.power.devices;
+    },
+
+    powerDevicesCount: (state, getters) => {
+        return getters.powerDevices.length;
+    },
 }

src/store/index.js

@@ -126,6 +126,9 @@ export default new Vuex.Store({
         },
         object: [],
         temperaturChart: [],
+        power: {
+            devices: []
+        },
         helplist: [],
         filetree: [
             {

src/store/mutations.js

@@ -490,6 +490,19 @@ export default {
         }
     },
 
+    setPowerDevices(state, data) {
+        Vue.set(state.power, 'devices', data);
+    },
+
+    setPowerDevicesStatus(state, data) {
+        for (var key in data) {
+            let devIdx = state.power.devices.findIndex(device => device.id === key);
+            if (devIdx >= 0) {
+                Vue.set(state.power.devices[devIdx], 'status', data[key] === 'off' ? 0 : 1);
+            }
+        }
+    },
+
     setLoadingEmergencyStop(state, value) {
         state.socket.loadingEmergencyStop = value;
     },