From 77d7f662edd24c2d3a770b0bb1fd0b2579553fc8 Mon Sep 17 00:00:00 2001
From: Tero Marttila <terom@fixme.fi>
Date: Thu, 26 Dec 2024 20:52:41 +0200
Subject: [PATCH] web: refresh leds status

---
 web/src/components/ArtNetView.vue |  1 -
 web/src/components/LedsView.vue   | 28 ++++++++++++++++++++++------
 web/src/services/api.service.js   |  4 ++--
 web/src/services/leds.service.js  |  5 +++++
 web/src/store.js                  | 11 +++++++++++
 5 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/web/src/components/ArtNetView.vue b/web/src/components/ArtNetView.vue
index aa059257..4c4d0b2a 100644
--- a/web/src/components/ArtNetView.vue
+++ b/web/src/components/ArtNetView.vue
@@ -75,7 +75,6 @@
         </table>
       </template>
 
-
       <template v-if="outputs">
         <table class="outputs">
         <caption>
diff --git a/web/src/components/LedsView.vue b/web/src/components/LedsView.vue
index d1f964f1..b21901d7 100644
--- a/web/src/components/LedsView.vue
+++ b/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;
     },
diff --git a/web/src/services/api.service.js b/web/src/services/api.service.js
index 8b6f6e11..b29ad304 100644
--- a/web/src/services/api.service.js
+++ b/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) {
diff --git a/web/src/services/leds.service.js b/web/src/services/leds.service.js
index e35343a0..34a9d4eb 100644
--- a/web/src/services/leds.service.js
+++ b/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;
+    }
   }
   
\ No newline at end of file
diff --git a/web/src/store.js b/web/src/store.js
index f09c8c1c..f035c8f8 100644
--- a/web/src/store.js
+++ b/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;