FIX: pair status widget wired

stereum-dev · Oct 1, 2024 · 7438ebe · 7438ebe
1 parent 3feeff0
commit 7438ebe
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 10 deletions.
diff --git a/launcher/src/components/UI/control-page/components/widgets/PairStatusWidget.vue b/launcher/src/components/UI/control-page/components/widgets/PairStatusWidget.vue
@@ -2,27 +2,33 @@
   <div class="pair-state-parent w-full h-full flex flex-col justify-center items-center">
     <div class="index-line w-full h-1/2 flex justify-center items-center pl-2">
       <div class="icon-box w-1/4 h-full flex justify-center items-center">
-        <img class="w-7 h-7" src="/img/icon/service-icons/execution/Geth.png" alt="execution" />
+        <img class="w-7 h-7" :src="setupStore.selectedServicePairs?.executionService?.icon" alt="execution" />
       </div>
-      <div class="status-box w-3/4 h-full flex justify-center items-center uppercase text-xs text-green-500 font-semibold">
-        {{ (state = "online") }}
+      <div
+        class="status-box w-3/4 h-full flex justify-center items-center uppercase text-xs text-green-500 font-semibold"
+        :class="setupStore.selectedServicePairs?.executionService?.state == 'running' ? 'text-green-500' : 'text-red-500'"
+      >
+        {{ setupStore.selectedServicePairs?.executionService?.state == "running" ? "online" : "offline" }}
       </div>
     </div>
     <div class="index-line w-full h-1/2 flex justify-center items-center pl-2">
       <div class="icon-box w-1/4 h-full flex justify-center items-center">
-        <img class="w-7 h-7" src="/img/icon/service-icons/consensus/LightHouse.png" alt="execution" />
+        <img class="w-7 h-7" :src="setupStore.selectedServicePairs?.consensusService?.icon" alt="execution" />
       </div>
-      <div class="status-box w-3/4 h-full flex justify-center items-center uppercase text-xs text-red-500 font-semibold">
-        {{ (state = "offline") }}
+      <div
+        class="status-box w-3/4 h-full flex justify-center items-center uppercase text-xs font-semibold"
+        :class="setupStore.selectedServicePairs?.consensusService?.state == 'running' ? 'text-green-500' : 'text-red-500'"
+      >
+        {{ setupStore.selectedServicePairs?.consensusService?.state == "running" ? "online" : "offline" }}
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { useSetups } from "@/store/setups";
 
-const state = ref("");
+const setupStore = useSetups();
 </script>
 
 <style scoped></style>
diff --git a/launcher/src/components/UI/control-page/components/widgets/SelectServiceWidget.vue b/launcher/src/components/UI/control-page/components/widgets/SelectServiceWidget.vue
@@ -155,7 +155,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 import { useControlStore } from "@/store/theControl";
 import { useSetups } from "@/store/setups";
 // import { useServices } from "@/store/services";
@@ -225,6 +225,25 @@ const selectedPair = computed(() => {
   return servicePairs.value.length ? servicePairs.value[currentPairIndex.value] : null;
 });
 
+watch(
+  selectedPair,
+  (newPair) => {
+    setupStore.selectedServicePairs = newPair;
+    console.log("selectedServicePairs =====>", setupStore.selectedServicePairs);
+  },
+  { immediate: true }
+);
+
+watch(
+  servicePairs,
+  (newPairs) => {
+    if (currentPairIndex.value >= newPairs.length) {
+      currentPairIndex.value = 0; // Reset index if out of bounds
+    }
+  },
+  { immediate: true }
+);
+
 const formattedValidatorNo = computed(() => {
   return stakingStore.keys.length.toString().padStart(3, "0");
 });
@@ -238,7 +257,6 @@ const deopdownHandler = () => {
 const servicePicker = (arg) => {
   arg === "vld" ? (controlStore.pickeedService = "vld") : (controlStore.pickeedService = "exeCons");
   isOpen.value = !isOpen.value;
-  console.log("servicePairs =====>", servicePairs.value);
 };
 
 const filteredValidatorServices = computed(() => {

diff --git a/launcher/src/store/setups.js b/launcher/src/store/setups.js
@@ -6,6 +6,7 @@ export const useSetups = defineStore("setups", {
     allSetups: [],
     editSetups: [],
     stakingSetups: [],
+    selectedServicePairs: null,
 
     //Setup Node Page
     isConfigViewActive: false,