Update Language JSON for Internationalization in Preparation for Ista…

…nbul Devconect Release (#1531) * update the alert box tooltip * update the lang JSON serviceButton comp. added * update language json service layout comp. added * update language json client btns comp. added * update language json client layer added * update lang json server detail comp. added * fix the multi lang in node page * updated the change box comp * update language json drower box comp. client layout comp. general menu comp. server detail comp. * update language json network detail comp. added server details comp. added changes section comp. added side bar sections comp. added
stereum-dev · Nov 6, 2023 · c3aaba2 · c3aaba2
1 parent a6d36fb
commit c3aaba2
Show file tree

Hide file tree

Showing 16 changed files with 235 additions and 55 deletions.
diff --git a/launcher/src/components/UI/edit-page/components/changes/ChangesBox.vue b/launcher/src/components/UI/edit-page/components/changes/ChangesBox.vue
@@ -11,7 +11,7 @@
           class="w-full h-10 border border-gray-500 shadow-md shadow-black p-1 rounded-md grid grid-cols-6 hover:border-gray-300 cursor-pointer"
           :class="contentBgColor(item)"
           @click="removeChange(item)"
-          @mouseenter="footerStore.cursorLocation = `Click here to cancel this change`"
+          @mouseenter="footerStore.cursorLocation = `${clickToCancel}`"
         >
           <div class="col-start-1 col-span-1 w-full self-center flex justify-center items-center">
             <img class="w-6" :src="item.contentIcon" alt="icon" />
@@ -38,6 +38,12 @@ import { useFooter } from "@/store/theFooter";
 import { useNodeManage } from "@/store/nodeManage";
 import { computed } from "vue";
 
+import i18n from "@/includes/i18n";
+
+const t = i18n.global.t;
+
+const clickToCancel = t("changesBox.clickToCancel");
+
 const footerStore = useFooter();
 const emit = defineEmits(["remove-change"]);
 

diff --git a/launcher/src/components/UI/edit-page/components/drawer/DrawerBox.vue b/launcher/src/components/UI/edit-page/components/drawer/DrawerBox.vue
@@ -17,7 +17,7 @@ import { useServices } from '@/store/services';
           draggable="true"
           @dragstart="dragStart($event, service)"
           @dblclick="addServices(service)"
-          @mouseenter="footerStore.cursorLocation = `${service.name} service`"
+          @mouseenter="footerStore.cursorLocation = `${service.name} ${serv}`"
         >
           <img :src="service.sIcon" alt="Client Icon" class="w-14 mx-auto" />
           <p
@@ -44,6 +44,11 @@ import { useServices } from '@/store/services';
 import DrawerFilter from "./DrawerFilter.vue";
 import { useServices } from "@/store/services";
 import { useFooter } from "@/store/theFooter";
+import i18n from "@/includes/i18n";
+
+const t = i18n.global.t;
+
+const serv = t("serviceLay.srvice");
 
 const footerStore = useFooter();
 const props = defineProps({

diff --git a/launcher/src/components/UI/edit-page/components/edit/ClientLayout.vue b/launcher/src/components/UI/edit-page/components/edit/ClientLayout.vue
@@ -5,7 +5,7 @@ import { computed, ref } from 'vue';
     :class="{ 'opacity-25': client.displayPluginMenu }"
     @pointerdown.prevent.stop
     @mousedown.prevent.stop
-    @mouseenter="footerStore.cursorLocation = `click to edit the service`"
+    @mouseenter="footerStore.cursorLocation = `${clkEdit}`"
     @mouseleave="footerStore.cursorLocation = ''"
   >
     <div class="flex flex-col justify-center items-center gap-2">
@@ -41,6 +41,12 @@ import { computed, ref } from 'vue';
 import { computed } from "vue";
 import { useFooter } from "@/store/theFooter";
 
+import i18n from "@/includes/i18n";
+
+const t = i18n.global.t;
+
+const clkEdit = t("editClientLay.clkEdit");
+
 const footerStore = useFooter();
 
 // Props

diff --git a/launcher/src/components/UI/edit-page/components/edit/GeneralMenu.vue b/launcher/src/components/UI/edit-page/components/edit/GeneralMenu.vue
@@ -7,31 +7,31 @@
         src="/img/icon/manage-node-icons/connection.png"
         alt="Trash Icon"
         @click="modifyService"
-        @mouseenter="footerStore.cursorLocation = `modify ${item.name} connection`"
+        @mouseenter="footerStore.cursorLocation = `${modify} ${item.name} ${connection}`"
         @mouseleave="footerStore.cursorLocation = ''"
       />
       <img
         class="w-7 border border-gray-700 bg-gray-900 rounded-md hover:bg-gray-500 p-1 cursor-pointer active:scale-90 transition duration-200"
         src="/img/icon/manage-node-icons/switch-client.png"
         alt="Trash Icon"
         @click="switchClient"
-        @mouseenter="footerStore.cursorLocation = `switch client`"
+        @mouseenter="footerStore.cursorLocation = `${switchClientTooltip}`"
         @mouseleave="footerStore.cursorLocation = ''"
       />
       <img
         class="w-7 border border-gray-700 bg-gray-900 rounded-md hover:bg-gray-500 p-1 cursor-pointer active:scale-90 transition duration-200"
         src="/img/icon/manage-node-icons/trash.png"
         alt="Trash Icon"
         @click="deleteService"
-        @mouseenter="footerStore.cursorLocation = `delete ${item.name} service`"
+        @mouseenter="footerStore.cursorLocation = `${deleteServiceTooltip} ${item.name} ${service}`"
         @mouseleave="footerStore.cursorLocation = ''"
       />
       <img
         class="w-7 border border-gray-700 bg-gray-900 rounded-md hover:bg-gray-500 p-1 cursor-pointer active:scale-90 transition duration-200"
         src="/img/icon/manage-node-icons/info.png"
         alt="Trash Icon"
         @click="infoModal"
-        @mouseenter="footerStore.cursorLocation = `info ${item.name} service`"
+        @mouseenter="footerStore.cursorLocation = `${info} ${item.name} ${service}`"
         @mouseleave="footerStore.cursorLocation = ''"
       />
     </div>
@@ -40,6 +40,16 @@
 
 <script setup>
 import { useFooter } from "@/store/theFooter";
+import i18n from "@/includes/i18n";
+
+const t = i18n.global.t;
+
+const modify = t("generalMenu.modify");
+const connection = t("generalMenu.connection");
+const switchClientTooltip = t("generalMenu.switchClient");
+const deleteServiceTooltip = t("generalMenu.delete");
+const service = t("generalMenu.service");
+const info = t("generalMenu.info");
 
 const footerStore = useFooter();
 const props = defineProps({

diff --git a/launcher/src/components/UI/edit-page/components/edit/NetworkDetails.vue b/launcher/src/components/UI/edit-page/components/edit/NetworkDetails.vue
@@ -3,10 +3,12 @@ import { useNodeManage } from '@/store/nodeManage';
   <div
     class="col-start-7 col-span-3 flex flex-col justify-between items-center bg-[#151618] border h-full border-gray-600 rounded-md px-2 py-1"
     style="cursor: default"
-    @mouseenter="footerStore.cursorLocation = `Current Network is ${network.name}`"
+    @mouseenter="footerStore.cursorLocation = `${currIs} ${network.name}`"
     @mouseleave="footerStore.cursorLocation = ''"
   >
-    <div class="w-full self-start text-xs font-semibold text-teal-700">Current Network</div>
+    <div class="w-full self-start text-xs font-semibold text-teal-700">
+      {{ $t("networkDetails.currentNet") }}
+    </div>
     <div class="w-full flex justify-center items-center">
       <img v-if="network.icon" :src="network.icon" alt="Networks" class="w-5 mr-1" />
       <span class="text-md text-gray-300 text-left overflow-hidden whitespace-pre">{{ network.name }}</span>
@@ -17,6 +19,11 @@ import { useNodeManage } from '@/store/nodeManage';
 import { useNodeManage } from "@/store/nodeManage";
 import { watchEffect, ref } from "vue";
 import { useFooter } from "@/store/theFooter";
+import i18n from "@/includes/i18n";
+
+const t = i18n.global.t;
+
+const currIs = t("networkDetails.currIs");
 
 const footerStore = useFooter();
 const manageStore = useNodeManage();

diff --git a/launcher/src/components/UI/edit-page/components/edit/ServerDetails.vue b/launcher/src/components/UI/edit-page/components/edit/ServerDetails.vue
@@ -5,7 +5,7 @@
   >
     <div
       class="w-full flex justify-center items-center px-2 h-[25px]"
-      @mouseenter="footerStore.cursorLocation = `server name`"
+      @mouseenter="footerStore.cursorLocation = `${machineName}`"
       @mouseleave="footerStore.cursorLocation = ''"
     >
       <span class="text-md font-semibold ml-1 text-yellow-500 overflow-hidden whitespace-pre text-center">{{
@@ -15,7 +15,7 @@
     <div
       v-if="controlStore.ipAddress"
       class="w-full flex justify-center items-center px-2 h-[25px]"
-      @mouseenter="footerStore.cursorLocation = `server ip`"
+      @mouseenter="footerStore.cursorLocation = `${machineIp}`"
       @mouseleave="footerStore.cursorLocation = ''"
     >
       <span class="text-xs text-left text-gray-100 overflow-hidden whitespace-pre ml-[5px]">IP :</span>
@@ -28,6 +28,12 @@ import { useControlStore } from "@/store/theControl";
 import { onMounted } from "vue";
 import ControlService from "@/store/ControlService";
 import { useFooter } from "@/store/theFooter";
+import i18n from "@/includes/i18n";
+
+const t = i18n.global.t;
+
+const machineName = t("serverDetails.machineName");
+const machineIp = t("serverDetails.machineIp");
 
 const controlStore = useControlStore();
 const footerStore = useFooter();

diff --git a/launcher/src/components/UI/edit-page/sections/ChangesSection.vue b/launcher/src/components/UI/edit-page/sections/ChangesSection.vue
@@ -17,7 +17,7 @@
         v-else-if="editStore.confirmChanges.length"
         class="w-full h-[34px] rounded-full bg-[#264744] hover:bg-[#325e5a] px-2 text-gray-200 active:scale-95 shadow-md shadow-zinc-800 active:shadow-none transition-all duration-200 ease-in-out uppercase text-sm"
         @click="confirmChanges"
-        @mouseenter="footerStore.cursorLocation = `Click here to confirm change(s)`"
+        @mouseenter="footerStore.cursorLocation = `${clkConfirm}`"
       >
         {{ $t("changeConfirm.confirm") }}
       </button>
@@ -36,6 +36,11 @@
 import { useNodeManage } from "@/store/nodeManage";
 import ChangesBox from "../components/changes/ChangesBox";
 import { useFooter } from "@/store/theFooter";
+import i18n from "@/includes/i18n";
+
+const t = i18n.global.t;
+
+const clkConfirm = t("changeSect.clkConfirm");
 
 const footerStore = useFooter();
 const emit = defineEmits(["remove-change", "confirm-changes"]);

diff --git a/launcher/src/components/UI/edit-page/sections/SidebarSection.vue b/launcher/src/components/UI/edit-page/sections/SidebarSection.vue
@@ -4,7 +4,7 @@
       <div
         class="col-span-1 row-start-1 row-end-2 p-1 rounded-md text-gray-700 focus:outline-nones transition-colors duration-200 hover:bg-[#23272a] flex justify-center items-center"
         @click="hoverRouter"
-        @mouseenter="footerStore.cursorLocation = `To the Node Page`"
+        @mouseenter="footerStore.cursorLocation = `${toNode}`"
         @mouseleave="footerStore.cursorLocation = ''"
       >
         <img class="w-8" src="/img/icon/node-icons/edit-node.png" alt="Manage Icon" />
@@ -17,13 +17,13 @@
           @mouseleave="routerHovered = false"
         >
           <img class="w-6 mr-1" src="/img/icon/node-icons/edit-node.png" alt="Manage Icon" />
-          <span class="text-sm text-gray-200 font-semibold">Back To Node</span>
+          <span class="text-sm text-gray-200 font-semibold">{{ $t("sidebarSect.toNode") }}</span>
         </router-link>
       </Transition>
       <button
         class="col-span-1 row-start-2 row-end-3 p-1 rounded-md text-gray-700 focus:outline-nones transition-colors duration-200 hover:bg-[#23272a] flex justify-center items-center"
         @click="hoverNetwork"
-        @mouseenter="footerStore.cursorLocation = `Switch Network`"
+        @mouseenter="footerStore.cursorLocation = `${setchNet}`"
         @mouseleave="footerStore.cursorLocation = ''"
       >
         <img class="w-6" src="/img/icon/manage-node-icons/change-network.png" alt="Network" />
@@ -36,14 +36,14 @@
           @click="networkModal"
         >
           <img class="w-4 mr-1" src="/img/icon/manage-node-icons/change-network.png" alt="Network Icon" />
-          <span class="text-sm text-gray-200 font-semibold">Switch Network</span>
+          <span class="text-sm text-gray-200 font-semibold">{{ setchNet }}</span>
         </button>
       </Transition>
 
       <button
         class="row-start-3 row-end-4 p-1 rounded-md text-gray-700 focus:outline-nones transition-colors duration-200 hover:bg-[#23272a] flex justify-center items-center"
         @click="hoverNuke"
-        @mouseenter="footerStore.cursorLocation = `Nuke the Node`"
+        @mouseenter="footerStore.cursorLocation = `${nukTheNud}`"
         @mouseleave="footerStore.cursorLocation = ''"
       >
         <img class="w-6" src="/img/icon/manage-node-icons/nuke.png" alt="Export Icon" />
@@ -56,7 +56,7 @@
           @click="nukeNode"
         >
           <img class="w-4" src="/img/icon/manage-node-icons/nuke.png" alt="Export Icon" />
-          <span class="text-xs text-gray-200 font-semibold">Nuke Node</span>
+          <span class="text-xs text-gray-200 font-semibold">{{ $t("sidebarSect.nukNod") }}</span>
         </button>
       </Transition>
     </div>
@@ -65,6 +65,13 @@
 <script setup>
 import { ref } from "vue";
 import { useFooter } from "@/store/theFooter";
+import i18n from "@/includes/i18n";
+
+const t = i18n.global.t;
+
+const toNode = t("sidebarSect.toNode");
+const setchNet = t("sidebarSect.setchNet");
+const nukTheNud = t("sidebarSect.nukTheNud");
 
 const routerHovered = ref(false);
 const networkHovered = ref(false);

diff --git a/launcher/src/components/UI/node-page/components/alert/NodeAlert.vue b/launcher/src/components/UI/node-page/components/alert/NodeAlert.vue
@@ -14,7 +14,9 @@
         <div
           class="status-icon"
           :class="{
-            active: stereumUpdate.current !== stereumUpdate.version || updatedNewUpdates.length > 0,
+            active:
+              stereumUpdate.current !== stereumUpdate.version ||
+              updatedNewUpdates.length > 0,
           }"
         >
           <img src="/img/icon/control/SETTINGS.png" alt="green" />
@@ -216,7 +218,9 @@ export default {
     },
     updatedNewUpdates() {
       const updatedUpdates = this.newUpdates.map((update) => {
-        const matchingService = this.installedServices.find((service) => service.name === update.name);
+        const matchingService = this.installedServices.find(
+          (service) => service.name === update.name
+        );
         if (matchingService) {
           return {
             ...update,
@@ -281,7 +285,9 @@ export default {
       }
     },
     expertHandler(el) {
-      let selectedObject = this.installedServices.find((obj) => obj.config.serviceID === el);
+      let selectedObject = this.installedServices.find(
+        (obj) => obj.config.serviceID === el
+      );
       selectedObject.expertOptionsModal = true;
       return selectedObject;
     },
@@ -300,11 +306,15 @@ export default {
           }
           if (!validator.yaml)
             try {
-              validator.yaml = await ControlService.getServiceYAML(validator.config.serviceID);
+              validator.yaml = await ControlService.getServiceYAML(
+                validator.config.serviceID
+              );
             } catch (e) {
               console.log("couldn't get service yaml");
             }
-          const patternIndex = validator.expertOptions.findIndex((o) => o.title === "Default Fee Recipient");
+          const patternIndex = validator.expertOptions.findIndex(
+            (o) => o.title === "Default Fee Recipient"
+          );
           if (patternIndex === -1 || !validator.yaml) {
             continue;
           }
@@ -326,7 +336,8 @@ export default {
           }
         }
         const notSetAddresses = addresses.filter(
-          (validator) => validator.address === "0x0000000000000000000000000000000000000000"
+          (validator) =>
+            validator.address === "0x0000000000000000000000000000000000000000"
         );
         this.notSetAddresses = notSetAddresses;
       }