FIX: client pairs widget wired

stereum-dev · Oct 2, 2024 · fe73844 · fe73844
1 parent 7438ebe
commit fe73844
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 14 deletions.
diff --git a/launcher/src/components/UI/control-page/components/widgets/ClientPairWidget.vue b/launcher/src/components/UI/control-page/components/widgets/ClientPairWidget.vue
@@ -2,18 +2,48 @@
   <div class="pair-parent w-full h-full flex-col flex justify-start items-center">
     <div class="widget-name w-full h-1/4 flex justify-center items-center text-gray-200 uppercase font-semibold text-xs">CLIENT PAIR</div>
     <div class="widget-box w-full h-3/4 justify-center items-center flex flex-col">
-      <div class="index-line w-full h-1/2 flex justify-center items-center pl-2">
+      <div
+        class="index-line w-full h-1/2 flex justify-center items-center pl-2"
+        @mouseenter="
+          footerStore.cursorLocation = `${t('controlPage.clientPairIndexIs', {
+            index: setupStore.currentPairIndex,
+          })}`
+        "
+        @mouseleave="footerStore.cursorLocation = ''"
+      >
         <span class="w-1/2 h-full flex justify-start items-center font-mono text-gray-200 uppercase text-xs">index</span>
-        <span class="w-1/2 h-full flex justify-center items-center font-semibold text-gray-200 uppercase text-xs">7</span>
+        <span class="w-1/2 h-full flex justify-center items-center font-semibold text-gray-200 uppercase text-xs">{{
+          setupStore.currentPairIndex
+        }}</span>
       </div>
-      <div class="index-line w-full h-1/2 flex justify-center items-center pl-2">
+      <div
+        class="index-line w-full h-1/2 flex justify-center items-center pl-2"
+        @mouseenter="
+          footerStore.cursorLocation = `${t('controlPage.totalClientPairs', {
+            total: setupStore.clientPairsLength,
+          })}`
+        "
+        @mouseleave="footerStore.cursorLocation = ''"
+      >
         <span class="w-1/2 h-full flex justify-start items-center font-mono text-gray-200 uppercase text-xs">total</span>
-        <span class="w-1/2 h-full flex justify-center items-center font-semibold text-gray-200 uppercase text-xs">12</span>
+        <span class="w-1/2 h-full flex justify-center items-center font-semibold text-gray-200 uppercase text-xs">{{
+          setupStore.clientPairsLength
+        }}</span>
       </div>
     </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { useSetups } from "@/store/setups";
+import { useFooter } from "@/store/theFooter";
+
+import i18n from "@/includes/i18n";
+
+const t = i18n.global.t;
+
+const setupStore = useSetups();
+const footerStore = useFooter();
+</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
@@ -209,36 +209,44 @@ const servicePairs = computed(() => {
   return pairs;
 });
 
-const currentPairIndex = ref(0);
-
 const prevPair = () => {
   if (!servicePairs.value.length) return;
-  currentPairIndex.value = (currentPairIndex.value - 1 + servicePairs.value.length) % servicePairs.value.length;
+  setupStore.currentPairIndex = (setupStore.currentPairIndex - 1 + servicePairs.value.length) % servicePairs.value.length;
 };
 
 const nextPair = () => {
   if (!servicePairs.value.length) return;
-  currentPairIndex.value = (currentPairIndex.value + 1) % servicePairs.value.length;
+  setupStore.currentPairIndex = (setupStore.currentPairIndex + 1) % servicePairs.value.length;
 };
 
 const selectedPair = computed(() => {
-  return servicePairs.value.length ? servicePairs.value[currentPairIndex.value] : null;
+  return servicePairs.value.length ? servicePairs.value[setupStore.currentPairIndex] : 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
+    if (setupStore.currentPairIndex >= newPairs.length) {
+      setupStore.currentPairIndex = 0; // Reset index if out of bounds
+    }
+  },
+  { immediate: true }
+);
+
+watch(
+  () => servicePairs.value.length,
+  (newLength) => {
+    setupStore.clientPairsLength = newLength;
+    if (setupStore.currentPairIndex >= newLength) {
+      setupStore.currentPairIndex = 0;
     }
   },
   { immediate: true }

diff --git a/launcher/src/languages/en.json b/launcher/src/languages/en.json
@@ -153,7 +153,9 @@
     "ramUsageIs": "RAM Usage is {usage} MB",
     "ramTotalis": "Total RAM is {total} MB",
     "receiveDataIs": "Receiving Data is {data} KB/s",
-    "transmitDataIs": "Transmitting Data is {data} KB/s"
+    "transmitDataIs": "Transmitting Data is {data} KB/s",
+    "clientPairIndexIs": "Client Pair Index is {index}",
+    "totalClientPairs": "Total Client Pairs is {total}"
   },
   "taskManager": {
     "clickDisplay": "Click on tasks to display"

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