Change hiding of PowerControlPanel to Dashboard.vue. Update power buttons state from moonraker response.

src/components/panels/PowerControlPanel.vue

@@ -2,7 +2,7 @@
 </style>
 
 <template>
-    <div v-if="devices.length > 0">
+    <div>
         <v-card>
             <v-toolbar flat dense>
                 <v-toolbar-title>
@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import { mapGetters, mapState } from "vuex";
+import { mapState } from "vuex";
 import Vue from "vue";
 
 export default {
@@ -45,21 +45,15 @@ export default {
         ...mapState({
             devices: (state) => state.power.devices,
         }),
-        ...mapGetters(["powerDevices"]),
-        powerDevicesCount() {
-            return this.powerDevices.length;
-        },
     },
     methods: {
         setPower(index, value) {
-            let rpc = value == 1 ? "post_power_on" : "post_power_off";
+            let rpc = value === 1 ? "post_power_on" : "post_power_off";
-            this.devices[index].status = value;
             let deviceId = this.devices[index].id;
-            this.$store.commit("setPowerDevice", this.devices);
             Vue.prototype.$socket.sendObj(
                 rpc,
                 { [deviceId]: "" },
-                "voidMutation"
+                "responsePowerToggle"
             );
         },
     },

src/pages/Dashboard.vue

@@ -12,7 +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"></power-control-panel>
+            <power-control-panel class="mt-6" v-if="powerDevicesCount > 0"></power-control-panel>
         </v-col>
     </v-row>
 </template>
@@ -32,7 +32,8 @@
                 klippy_state: state => state.printer.webhooks.state,
             }),
             ...mapGetters([
-                'showDashboardWebcam'
+                'showDashboardWebcam',
+                'powerDevicesCount'
             ])
         },
         /*created() {

src/store/actions.js

@@ -10,7 +10,6 @@ export default {
         Vue.prototype.$socket.sendObj('get_directory', { path: '/gcodes' }, 'getDirectoryRoot');
         Vue.prototype.$socket.sendObj('get_printer_info', {}, 'getKlipperInfo');
         Vue.prototype.$socket.sendObj('get_power_devices', {}, 'getPowerDevices');
-        Vue.prototype.$socket.sendObj('get_power_status', {}, 'getPowerDevicesStatus');
     },
 
     socket_on_close ({ commit }, event) {
@@ -203,15 +202,21 @@ export default {
 
     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('get_power_status', {}, 'getPowerDevicesStatus');
         }
     },
 
     getPowerDevicesStatus({ commit }, data) {
         if (data.error) {
+            if (data.error.code != -32601) {
                 Vue.$toast.error(data.error.message);
+            }
         } else {
             commit('setPowerDevicesStatus', data);
         }
@@ -332,6 +337,10 @@ export default {
         commit('removeLoading', { name: 'bedMeshRemove' });
     },
 
+    responsePowerToggle({ commit }, data) {
+        commit('setPowerDevicesStatus', data);
+    },
+
     switchToDashboard() {
         router.push("/");
     },

src/store/getters.js

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