web: refresh leds status

web/src/components/ArtNetView.vue

@@ -75,7 +75,6 @@
         </table>
       </template>
 
-
       <template v-if="outputs">
         <table class="outputs">
         <caption>

web/src/components/LedsView.vue

@@ -98,6 +98,7 @@
         <table class="limits">
           <caption>
             Limits
+            <button @click="loadStatus"><span :class="{spin: true, active: loadingStatus}">&#10227;</span></button>
           </caption>
           <thead>
             <tr>
@@ -146,6 +147,7 @@
 export default {
 data: () => ({
     loading: true,
+    loadingStatus: false,
     activeID: "leds1",
   }),
   created() {
@@ -157,19 +159,24 @@ data: () => ({
         return [...this.$store.state.leds.keys()];
       }
     },
+    activeLeds() {
+      if (this.$store.state.leds) {
+        return this.$store.state.leds.get(this.activeID);
+      }
+    },
     options() {
-      if (this.$store.state.leds && this.activeID) {
-        return this.$store.state.leds.get(this.activeID).options;
+      if (this.activeLeds) {
+        return this.activeLeds.options;
       }
     },
     artnet() {
-      if (this.$store.state.leds && this.activeID) {
-        return this.$store.state.leds.get(this.activeID).artnet;
+      if (this.activeLeds) {
+        return this.activeLeds.artnet;
       }
     },
     status() {
-      if (this.$store.state.leds && this.activeID) {
-        return this.$store.state.leds.get(this.activeID).status;
+      if (this.activeLeds) {
+        return this.activeLeds.status;
       }
     },
   },
@@ -220,6 +227,15 @@ data: () => ({
         this.loading = false;
       }
     },
+    async loadStatus() {
+      this.loadingStatus = true;
+
+      try {
+        await this.$store.dispatch('loadLedsStatus', this.activeID);
+      } finally {
+        this.loadingStatus = false;
+      }
+    },
     switchActive(id) {
       this.activeID = id;
     },

web/src/services/api.service.js

@@ -1,8 +1,8 @@
 import axios from 'axios'
 
 export default class APIService {
-  get(url) {
-    return axios.get(url);
+  get(url, params = {}) {
+    return axios.get(url, {params});
   }
 
   post(url, data) {

web/src/services/leds.service.js

@@ -8,5 +8,10 @@ export default class LedsService {
 
       return new Map(Object.entries(response.data));
     }
+    async getStatus(leds) {
+      const response = await this.apiService.get('/api/leds/status', { leds: leds });
+
+      return response.data;
+    }
   }
 

web/src/store.js

@@ -105,6 +105,11 @@ export default new Vuex.Store({
 
       commit('updateLeds', data);
     },
+    async loadLedsStatus({ commit }, id) {
+      const status = await ledsService.getStatus(id);
+
+      commit('updateLedsStatus', {id, status});
+    },
 
     /* VFS */
     async loadVFS({ commit }) {
@@ -180,6 +185,12 @@ export default new Vuex.Store({
     updateLeds(state, leds) {
       state.leds = leds;
     },
+    updateLedsStatus(state, {id, status}) {
+      // no reactive map support
+      let leds = new Map(state.leds);
+      leds.get(id).status = status;
+      state.leds = leds;
+    },
 
     updateArtNet(state, artnet) {
       state.artnet = artnet;