From 4830d735ca83f6555941182e295f317ff7ea48f0 Mon Sep 17 00:00:00 2001
From: mabasian <54101509+mabasian@users.noreply.github.com>
Date: Wed, 7 Aug 2024 14:01:43 +0200
Subject: [PATCH] FIX: release bugs (#1981)

* FIX: Settings via Alert on Control Page

* FIX: setup selectable on control

* FIX: Volume Selection in Settings
---
 .../components/edit/setups/SetupDropdown.vue  |   6 +-
 .../UI/node-page/sections/ExpertWindow.vue    | 245 +++++-------------
 .../setting-page/components/VolumeSlider.vue  |  32 ++-
 .../UI/the-control/ControlDashboard.vue       |  63 +----
 .../UI/the-control/ControlScreen.vue          | 116 +++------
 5 files changed, 140 insertions(+), 322 deletions(-)

diff --git a/launcher/src/components/UI/edit-page/components/edit/setups/SetupDropdown.vue b/launcher/src/components/UI/edit-page/components/edit/setups/SetupDropdown.vue
index e34d77a5b..afb8e09c8 100644
--- a/launcher/src/components/UI/edit-page/components/edit/setups/SetupDropdown.vue
+++ b/launcher/src/components/UI/edit-page/components/edit/setups/SetupDropdown.vue
@@ -200,7 +200,11 @@ const noValidatorHandler = (setup) => {
 };
 
 const toggleDropdown = () => {
-  isOpen.value = !isOpen.value;
+  if (setupsList.value.length > 1 && route.path === "/control") {
+    isOpen.value = !isOpen.value;
+  } else if (setupsList.value.length > 0 && route.path !== "/control") {
+    isOpen.value = !isOpen.value;
+  }
 };
 
 const selectRename = () => {
diff --git a/launcher/src/components/UI/node-page/sections/ExpertWindow.vue b/launcher/src/components/UI/node-page/sections/ExpertWindow.vue
index 693fc83ff..3c1a7dc40 100755
--- a/launcher/src/components/UI/node-page/sections/ExpertWindow.vue
+++ b/launcher/src/components/UI/node-page/sections/ExpertWindow.vue
@@ -12,9 +12,7 @@
       role="dialog"
       aria-modal="true"
     >
-      <div
-        class="flex flex-col justify-start items-start w-full border-b pb-1 border-gray-600"
-      >
+      <div class="flex flex-col justify-start items-start w-full border-b pb-1 border-gray-600">
         <span class="text-xl text-gray-200 font-bold uppercase">{{ item.name }}</span>
         <p class="text-sm text-gray-200 capitalize">
           {{ item.category }}
@@ -22,65 +20,38 @@
         </p>
         <span class="text-sm text-gray-200">ID: {{ item.config.serviceID }}</span>
       </div>
-      <div
-        class="w-full h-[30px] space-y-2 mt-2"
-        :class="{ shorterRowBox: isExpertModeActive }"
-      >
+      <div class="w-full h-[30px] space-y-2 mt-2" :class="{ shorterRowBox: isExpertModeActive }">
         <!-- expert mode row -->
         <div
-          v-if="
-            !ssvExpertModeActive && !ssvDkgExpertModeActive && !prometheusExpertModeActive
-          "
+          v-if="!ssvExpertModeActive && !ssvDkgExpertModeActive && !prometheusExpertModeActive"
           class="dataTitleBox w-full h-10 bg-[#242529] rounded-xl shadow-2xl text-gray-300"
           @click="openExpertMode"
         >
-          <img
-            class="titleIcon"
-            src="/img/icon/service-setting-icons/crown.png"
-            alt="icon"
-          />
+          <img class="titleIcon" src="/img/icon/service-setting-icons/crown.png" alt="icon" />
 
-          <span
-            class="col-start-2 col-span-4 row-start-1 row-span-2 justify-start items-center flex w-full h-full"
+          <span class="col-start-2 col-span-4 row-start-1 row-span-2 justify-start items-center flex w-full h-full"
             >Expert Mode</span
           >
           <div
             class="arrow-box col-start-12 col-span-1 row-start-1 row-span-2 justify-end items-center flex w-full h-full"
           >
-            <img
-              v-if="isExpertModeActive"
-              src="/img/icon/task-manager-icons/up.png"
-              alt=""
-            />
+            <img v-if="isExpertModeActive" src="/img/icon/task-manager-icons/up.png" alt="" />
             <img v-else src="/img/icon/task-manager-icons/down.png" alt="" />
           </div>
         </div>
         <div
-          v-if="
-            item.service === 'SSVNetworkService' &&
-            !isExpertModeActive &&
-            !prometheusExpertModeActive
-          "
+          v-if="item.service === 'SSVNetworkService' && !isExpertModeActive && !prometheusExpertModeActive"
           class="dataTitleBox w-full h-10 bg-[#242529] rounded-xl shadow-2xl text-gray-300"
           @click="openSSVExpertMode"
         >
-          <img
-            class="titleIcon"
-            src="/img/icon/service-setting-icons/ssv-config.png"
-            alt="icon"
-          />
-          <span
-            class="col-start-2 col-span-4 row-start-1 row-span-2 justify-start items-center flex w-full h-full"
+          <img class="titleIcon" src="/img/icon/service-setting-icons/ssv-config.png" alt="icon" />
+          <span class="col-start-2 col-span-4 row-start-1 row-span-2 justify-start items-center flex w-full h-full"
             >SSV Configuration</span
           >
           <div
             class="arrow-box col-start-12 col-span-1 row-start-1 row-span-2 justify-end items-center flex w-full h-full"
           >
-            <img
-              v-if="ssvExpertModeActive"
-              src="/img/icon/task-manager-icons/up.png"
-              alt=""
-            />
+            <img v-if="ssvExpertModeActive" src="/img/icon/task-manager-icons/up.png" alt="" />
             <img v-else src="/img/icon/task-manager-icons/down.png" alt="" />
           </div>
         </div>
@@ -95,23 +66,14 @@
           class="dataTitleBox w-full h-10 bg-[#242529] rounded-xl shadow-2xl text-gray-300"
           @click="openSSVDKGExpertMode"
         >
-          <img
-            class="titleIcon"
-            src="/img/icon/service-setting-icons/ssv-config.png"
-            alt="icon"
-          />
-          <span
-            class="col-start-2 col-span-4 row-start-1 row-span-2 justify-start items-center flex w-full h-full"
+          <img class="titleIcon" src="/img/icon/service-setting-icons/ssv-config.png" alt="icon" />
+          <span class="col-start-2 col-span-4 row-start-1 row-span-2 justify-start items-center flex w-full h-full"
             >SSV DKG Configuration</span
           >
           <div
             class="arrow-box col-start-12 col-span-1 row-start-1 row-span-2 justify-end items-center flex w-full h-full"
           >
-            <img
-              v-if="ssvDkgExpertModeActive"
-              src="/img/icon/task-manager-icons/up.png"
-              alt=""
-            />
+            <img v-if="ssvDkgExpertModeActive" src="/img/icon/task-manager-icons/up.png" alt="" />
             <img v-else src="/img/icon/task-manager-icons/down.png" alt="" />
           </div>
         </div>
@@ -121,18 +83,13 @@
           class="dataTitleBox w-full h-10 bg-[#242529] rounded-xl shadow-2xl text-gray-300"
           @click="openPrometheusExpertMode"
         >
-          <span
-            class="col-start-2 col-span-4 row-start-1 row-span-2 justify-start items-center flex w-full h-full"
+          <span class="col-start-2 col-span-4 row-start-1 row-span-2 justify-start items-center flex w-full h-full"
             >Prometheus Configuration</span
           >
           <div
             class="arrow-box col-start-12 col-span-1 row-start-1 row-span-2 justify-end items-center flex w-full h-full"
           >
-            <img
-              v-if="prometheusExpertModeActive"
-              src="/img/icon/task-manager-icons/up.png"
-              alt=""
-            />
+            <img v-if="prometheusExpertModeActive" src="/img/icon/task-manager-icons/up.png" alt="" />
             <img v-else src="/img/icon/task-manager-icons/down.png" alt="" />
           </div>
         </div>
@@ -148,57 +105,38 @@
           }
         -->
         <div
-          v-for="(option, index) in item.expertOptions.filter(
-            (option) => option.type === 'select'
-          )"
+          v-for="(option, index) in item.expertOptions.filter((option) => option.type === 'select')"
           :key="index"
           class="selectBox w-full h-10 bg-[#242529] rounded-xl shadow-2xl text-gray-300"
           :class="{
             invisible:
-              isExpertModeActive ||
-              ssvExpertModeActive ||
-              ssvDkgExpertModeActive ||
-              prometheusExpertModeActive,
+              isExpertModeActive || ssvExpertModeActive || ssvDkgExpertModeActive || prometheusExpertModeActive,
           }"
         >
           <img class="titleIcon" :src="option.icon" alt="icon" />
-          <span
-            class="col-start-2 col-span-4 row-start-1 row-span-2 justify-start items-center flex w-full h-full"
-            >{{ option.title }}</span
-          >
+          <span class="col-start-2 col-span-4 row-start-1 row-span-2 justify-start items-center flex w-full h-full">{{
+            option.title
+          }}</span>
 
-          <select
-            id="value"
-            v-model="option.changeValue"
-            class="toggleTextInput"
-            @change="somethingIsChanged(option)"
-          >
-            <option v-for="(rate, idx) in option.value" :key="idx" :value="rate">
-              {{ rate }} {{ option.unit }}
-            </option>
+          <select id="value" v-model="option.changeValue" class="toggleTextInput" @change="somethingIsChanged(option)">
+            <option v-for="(rate, idx) in option.value" :key="idx" :value="rate">{{ rate }} {{ option.unit }}</option>
           </select>
         </div>
 
         <!-- Fee recipient -->
         <div
-          v-for="(option, index) in item.expertOptions.filter(
-            (option) => option.type === 'text'
-          )"
+          v-for="(option, index) in item.expertOptions.filter((option) => option.type === 'text')"
           :key="index"
           class="toggleTextBox w-full h-10 bg-[#242529] rounded-xl shadow-2xl text-gray-300"
           :class="{
             invisible:
-              isExpertModeActive ||
-              ssvExpertModeActive ||
-              ssvDkgExpertModeActive ||
-              prometheusExpertModeActive,
+              isExpertModeActive || ssvExpertModeActive || ssvDkgExpertModeActive || prometheusExpertModeActive,
           }"
         >
           <img class="titleIcon" :src="option.icon" alt="icon" />
-          <span
-            class="col-start-2 col-span-4 row-start-1 row-span-2 justify-start items-center flex w-full h-full"
-            >{{ option.title }}</span
-          >
+          <span class="col-start-2 col-span-4 row-start-1 row-span-2 justify-start items-center flex w-full h-full">{{
+            option.title
+          }}</span>
           <!-- <Transition name="slide-up">
             <img
               v-if="option.buttonState"
@@ -215,12 +153,7 @@
               @click="buttonOn(option)"
             />
           </Transition> -->
-          <input
-            v-model="option.changeValue"
-            class="toggleTextInput"
-            type="text"
-            @input="somethingIsChanged(option)"
-          />
+          <input v-model="option.changeValue" class="toggleTextInput" type="text" @input="somethingIsChanged(option)" />
         </div>
 
         <!--
@@ -233,24 +166,17 @@
         -->
         <!-- toggle btn -->
         <div
-          v-for="(option, index) in item.expertOptions.filter(
-            (option) => option.type === 'action'
-          )"
+          v-for="(option, index) in item.expertOptions.filter((option) => option.type === 'action')"
           :key="index"
           class="actionBox w-full h-10 bg-[#242529] rounded-xl shadow-2xl text-gray-300"
           :class="{
             invisible:
-              isExpertModeActive ||
-              ssvExpertModeActive ||
-              ssvDkgExpertModeActive ||
-              prometheusExpertModeActive,
+              isExpertModeActive || ssvExpertModeActive || ssvDkgExpertModeActive || prometheusExpertModeActive,
           }"
         >
           <img class="titleIcon justify-self-center" :src="option.icon" alt="icon" />
           <span class="actionBoxTitle">{{ option.title }}</span>
-          <div
-            class="w-full flex justify-end items-center col-start-12 col-span-1 row-start-1 row-span-1"
-          >
+          <div class="w-full flex justify-end items-center col-start-12 col-span-1 row-start-1 row-span-1">
             <label class="relative inline-flex items-center cursor-pointer">
               <input
                 v-model="option.changeValue"
@@ -269,27 +195,19 @@
         </div>
         <!-- toggle btn -->
         <div
-          v-for="(option, index) in item.expertOptions.filter(
-            (option) => option.type === 'toggle'
-          )"
+          v-for="(option, index) in item.expertOptions.filter((option) => option.type === 'toggle')"
           :key="index"
           class="actionBox w-full h-10 bg-[#242529] rounded-xl shadow-2xl text-gray-300"
           :class="{
             invisible:
-              isExpertModeActive ||
-              ssvExpertModeActive ||
-              ssvDkgExpertModeActive ||
-              prometheusExpertModeActive,
+              isExpertModeActive || ssvExpertModeActive || ssvDkgExpertModeActive || prometheusExpertModeActive,
           }"
         >
           <img class="titleIcon" :src="option.icon" alt="icon" />
-          <span
-            class="col-start-2 col-span-4 row-start-1 row-span-2 justify-start items-center flex w-full h-full"
-            >{{ option.title }}</span
-          >
-          <div
-            class="col-start-12 col-span-1 row-start-1 row-span-1 w-full flex justify-end items-center"
-          >
+          <span class="col-start-2 col-span-4 row-start-1 row-span-2 justify-start items-center flex w-full h-full">{{
+            option.title
+          }}</span>
+          <div class="col-start-12 col-span-1 row-start-1 row-span-1 w-full flex justify-end items-center">
             <label class="relative inline-flex items-center cursor-pointer">
               <input
                 v-model="option.changeValue"
@@ -312,10 +230,7 @@
         class="expertTable"
         :class="{
           showExpertTable:
-            isExpertModeActive ||
-            ssvExpertModeActive ||
-            ssvDkgExpertModeActive ||
-            prometheusExpertModeActive,
+            isExpertModeActive || ssvExpertModeActive || ssvDkgExpertModeActive || prometheusExpertModeActive,
         }"
       >
         <div v-if="isExpertModeActive" class="expertMode">
@@ -455,8 +370,7 @@ export default {
   methods: {
     openDocs(docsUrl) {
       window.open(docsUrl, "_blank");
-      if (this.currentNetwork.network === "gnosis")
-        window.open("https://docs.gnosischain.com/node/", "_blank");
+      if (this.currentNetwork.network === "gnosis") window.open("https://docs.gnosischain.com/node/", "_blank");
     },
 
     somethingIsChanged(item) {
@@ -468,19 +382,13 @@ export default {
       this.item.yaml = await ControlService.getServiceYAML(this.item.config.serviceID);
 
       if (this.item.service === "SSVNetworkService") {
-        this.item.ssvConfig = await ControlService.readSSVNetworkConfig(
-          this.item.config.serviceID
-        );
+        this.item.ssvConfig = await ControlService.readSSVNetworkConfig(this.item.config.serviceID);
       }
       if (this.item.service === "SSVDKGService") {
-        this.item.ssvDkgConfig = await ControlService.readSSVDKGConfig(
-          this.item.config.serviceID
-        );
+        this.item.ssvDkgConfig = await ControlService.readSSVDKGConfig(this.item.config.serviceID);
       }
       if (this.item.service === "PrometheusService") {
-        this.item.prometheusConfig = await ControlService.readPrometheusConfig(
-          this.item.config.serviceID
-        );
+        this.item.prometheusConfig = await ControlService.readPrometheusConfig(this.item.config.serviceID);
         this.prometheusConfig = this.item.prometheusConfig;
       }
       this.item.expertOptions = this.item.expertOptions.map((option) => {
@@ -505,9 +413,7 @@ export default {
           case "toggle": {
             option.commands.forEach((command) => {
               if (this.item.yaml.includes(command)) {
-                let match = this.item.yaml.match(
-                  new RegExp(`${command}([=]?)([\\S*]+)?`)
-                );
+                let match = this.item.yaml.match(new RegExp(`${command}([=]?)([\\S*]+)?`));
                 if (match[1] == "=") {
                   option.changeValue = match[2] === "true" ? true : false;
                 } else {
@@ -540,10 +446,7 @@ export default {
             case "select": {
               option.commands.forEach((command) => {
                 if (option.changeValue && this.item.yaml.includes(command)) {
-                  this.item.yaml = this.item.yaml.replace(
-                    new RegExp(option.pattern[0]),
-                    `$1${option.changeValue}$3`
-                  );
+                  this.item.yaml = this.item.yaml.replace(new RegExp(option.pattern[0]), `$1${option.changeValue}$3`);
                 }
               });
               break;
@@ -552,9 +455,7 @@ export default {
             case "toggle": {
               option.commands.forEach((command) => {
                 if (this.item.yaml.includes(command)) {
-                  let match = this.item.yaml.match(
-                    new RegExp(`${command}([=]?)([\\S*]+)?`)
-                  );
+                  let match = this.item.yaml.match(new RegExp(`${command}([=]?)([\\S*]+)?`));
                   if (match[1] == "=") {
                     this.item.yaml = this.item.yaml.replace(
                       new RegExp(match[0]),
@@ -562,29 +463,18 @@ export default {
                     );
                   } else {
                     if (option.changeValue == false) {
-                      this.item.yaml = this.item.yaml.replace(
-                        new RegExp(`\n.*${command}.*`),
-                        ""
-                      );
+                      this.item.yaml = this.item.yaml.replace(new RegExp(`\n.*${command}.*`), "");
                     }
                   }
-                } else if (
-                  option.changeValue == true &&
-                  !this.item.yaml.includes(command)
-                ) {
+                } else if (option.changeValue == true && !this.item.yaml.includes(command)) {
                   const matchAllCommands = this.item.yaml.match(new RegExp(/--[\S]+/gm));
                   const lastCommand = matchAllCommands[matchAllCommands.length - 1];
-                  const matchSpaces = this.item.yaml.match(
-                    new RegExp(`(\\s*- )${lastCommand}`)
-                  );
+                  const matchSpaces = this.item.yaml.match(new RegExp(`(\\s*- )${lastCommand}`));
                   let spaces = " ";
                   if (matchSpaces) {
                     spaces = matchSpaces[1];
                   }
-                  this.item.yaml = this.item.yaml.replace(
-                    new RegExp(`${lastCommand}`),
-                    lastCommand + spaces + command
-                  );
+                  this.item.yaml = this.item.yaml.replace(new RegExp(`${lastCommand}`), lastCommand + spaces + command);
                 }
               });
               break;
@@ -594,14 +484,10 @@ export default {
               option.commands.forEach((command) => {
                 if (option.changeValue && this.item.yaml.includes(command)) {
                   if (option.needsPortForwarding) {
-                    const matchCurrentValue = this.item.yaml.match(
-                      new RegExp(`${command}([=]?)([\\S*]*)`)
-                    );
+                    const matchCurrentValue = this.item.yaml.match(new RegExp(`${command}([=]?)([\\S*]*)`));
                     const currentValue = matchCurrentValue[2];
                     const matchPortForwardings = this.item.yaml.match(
-                      new RegExp(
-                        /ports:([\s]*- \d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}:\d{1,5}:\d{1,5}(\/[tcpudp]*)?)*/gm
-                      )
+                      new RegExp(/ports:([\s]*- \d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}:\d{1,5}:\d{1,5}(\/[tcpudp]*)?)*/gm)
                     );
                     let portForwardings = matchPortForwardings[0].split("\n");
                     portForwardings.shift();
@@ -610,9 +496,7 @@ export default {
                         new RegExp(`:\\d{1,5}:${currentValue}(\\/[tcpudp]*)?`).test(pf)
                       );
                       const allreadyExists = portForwardings.filter((pf) =>
-                        new RegExp(`:\\d{1,5}:${option.changeValue}(\\/[tcpudp]*)?`).test(
-                          pf
-                        )
+                        new RegExp(`:\\d{1,5}:${option.changeValue}(\\/[tcpudp]*)?`).test(pf)
                       );
                       if (existingPortForwarding) {
                         const portObj = this.getPortObject(existingPortForwarding);
@@ -623,9 +507,7 @@ export default {
                             option.changeValue +
                             ":" +
                             option.changeValue +
-                            (portObj.servicePortProtocol
-                              ? "/" + portObj.servicePortProtocol
-                              : "")
+                            (portObj.servicePortProtocol ? "/" + portObj.servicePortProtocol : "")
                         );
                       } else if (allreadyExists.length === 0) {
                         const firstPortForwarding = portForwardings[0];
@@ -654,9 +536,7 @@ export default {
                   let matchAllCommands = this.item.yaml.match(new RegExp(/--[\S]+/gm));
                   if (matchAllCommands) {
                     const lastCommand = matchAllCommands[matchAllCommands.length - 1];
-                    const matchSpaces = this.item.yaml.match(
-                      new RegExp(`(\\s*- )${lastCommand}`)
-                    );
+                    const matchSpaces = this.item.yaml.match(new RegExp(`(\\s*- )${lastCommand}`));
                     let spaces = " ";
                     if (matchSpaces) {
                       spaces = matchSpaces[1];
@@ -664,9 +544,7 @@ export default {
 
                     this.item.yaml = this.item.yaml.replace(
                       new RegExp(`${lastCommand}`),
-                      `${lastCommand}${spaces}${command}${option.noEqualSign ? "" : "="}${
-                        option.changeValue
-                      }`
+                      `${lastCommand}${spaces}${command}${option.noEqualSign ? "" : "="}${option.changeValue}`
                     );
                   } else {
                     const matchENV = this.item.yaml.match(/env:([\s]+)/);
@@ -676,10 +554,7 @@ export default {
                     );
                   }
                 } else if (!option.changeValue && this.item.yaml.includes(command)) {
-                  this.item.yaml = this.item.yaml.replace(
-                    new RegExp(`\n.*${command}.*`),
-                    ""
-                  );
+                  this.item.yaml = this.item.yaml.replace(new RegExp(`\n.*${command}.*`), "");
                 }
               });
               break;
@@ -699,10 +574,7 @@ export default {
           serviceID: this.item.config.serviceID,
           config: this.item.ssvDkgConfig,
         });
-      if (
-        this.item.service === "PrometheusService" &&
-        this.item.prometheusConfig != this.prometheusConfig
-      ) {
+      if (this.item.service === "PrometheusService" && this.item.prometheusConfig != this.prometheusConfig) {
         if (!this.item.yaml.includes("overwrite: false")) {
           this.item.yaml = this.item.yaml.trim() + "\noverwrite: false";
         }
@@ -724,8 +596,7 @@ export default {
       const destinationIp = portSettings?.length >= 1 ? portSettings[0] : "";
       const destinationPort = portSettings?.length >= 2 ? portSettings[1] : "";
       const servicePort = servicePortSettings?.length >= 1 ? servicePortSettings[0] : "";
-      const servicePortProtocol =
-        servicePortSettings?.length >= 2 ? servicePortSettings[1] : "";
+      const servicePortProtocol = servicePortSettings?.length >= 2 ? servicePortSettings[1] : "";
 
       return { destinationIp, destinationPort, servicePort, servicePortProtocol };
     },
diff --git a/launcher/src/components/UI/setting-page/components/VolumeSlider.vue b/launcher/src/components/UI/setting-page/components/VolumeSlider.vue
index 57a288eab..f5a91b2a6 100644
--- a/launcher/src/components/UI/setting-page/components/VolumeSlider.vue
+++ b/launcher/src/components/UI/setting-page/components/VolumeSlider.vue
@@ -20,6 +20,7 @@
 import { ref, onMounted, onUnmounted } from "vue";
 import { useLangStore } from "@/store/languages";
 import { useSoundStore } from "@/store/sound";
+import ControlService from "@/store/ControlService";
 
 const soundStore = useSoundStore();
 const langStore = useLangStore();
@@ -27,11 +28,39 @@ const langStore = useLangStore();
 const sliderBar = ref(null);
 const volumePercentage = ref(95);
 
-const updateVolume = (clientX) => {
+const checkSettings = async () => {
+  try {
+    const savedConfig = await ControlService.readConfig();
+
+    if (savedConfig?.savedVolume?.volume) {
+      volumePercentage.value = savedConfig.savedVolume.volume;
+    } else {
+      volumePercentage.value = 95;
+    }
+  } catch (error) {
+    console.error("Failed to load saved settings:", error);
+  }
+};
+
+const updateSettings = async (vol) => {
+  try {
+    const prevConf = await ControlService.readConfig();
+    const conf = {
+      ...prevConf,
+      savedVolume: { volume: vol },
+    };
+    await ControlService.writeConfig(conf);
+  } catch (error) {
+    console.error("Failed to update settings:", error);
+  }
+};
+
+const updateVolume = async (clientX) => {
   const barRect = sliderBar.value.getBoundingClientRect();
   const newVolume = Math.max(0, Math.min(1, (clientX - barRect.left) / barRect.width));
   langStore.currentVolume = newVolume;
   volumePercentage.value = newVolume * 100;
+  await updateSettings(volumePercentage.value);
 };
 
 const playSoundEffect = async (base64Data) => {
@@ -72,6 +101,7 @@ const startDrag = () => {
 };
 
 onMounted(() => {
+  checkSettings();
   sliderBar.value.addEventListener("click", (event) => {
     updateVolume(event.clientX);
   });
diff --git a/launcher/src/components/UI/the-control/ControlDashboard.vue b/launcher/src/components/UI/the-control/ControlDashboard.vue
index f7493e9a0..ee0175660 100755
--- a/launcher/src/components/UI/the-control/ControlDashboard.vue
+++ b/launcher/src/components/UI/the-control/ControlDashboard.vue
@@ -4,89 +4,55 @@
       <machine-name />
     </div>
     <div class="node-serve">
-      <EpochSlot
-        @mouseenter="footerSetter('current EPOCH & current SLOT')"
-        @mouseleave="cursorLocation = ''"
-      />
+      <EpochSlot @mouseenter="footerSetter('current EPOCH & current SLOT')" @mouseleave="cursorLocation = ''" />
     </div>
     <div class="sandFull_cell">
-      <TheBalance
-        @mouseenter="footerSetter('Finalized EPOCH & Balance')"
-        @mouseleave="cursorLocation = ''"
-      />
+      <TheBalance @mouseenter="footerSetter('Finalized EPOCH & Balance')" @mouseleave="cursorLocation = ''" />
     </div>
     <dashboard-card class="hard-disk">
-      <the-hard
-        @mouseenter="cursorLocation = `${storVol}`"
-        @mouseleave="cursorLocation = ''"
-      />
+      <the-hard @mouseenter="cursorLocation = `${storVol}`" @mouseleave="cursorLocation = ''" />
     </dashboard-card>
     <dashboard-card class="storage"
-      ><the-storage
-        @mouseenter="cursorLocation = `${stor}`"
-        @mouseleave="cursorLocation = ''"
+      ><the-storage @mouseenter="cursorLocation = `${stor}`" @mouseleave="cursorLocation = ''"
     /></dashboard-card>
     <dashboard-card class="disk-speed"
-      ><disk-speed
-        @mouseenter="cursorLocation = `${diskSpeed}`"
-        @mouseleave="cursorLocation = ''"
+      ><disk-speed @mouseenter="cursorLocation = `${diskSpeed}`" @mouseleave="cursorLocation = ''"
     /></dashboard-card>
     <dashboard-card class="p2p">
       <peer-to-peer @mouseenter="footerSetter(p2p)" @mouseleave="cursorLocation = ''" />
       <!-- <newPeerToPeer /> -->
     </dashboard-card>
     <dashboard-card class="the-cpu">
-      <the-cpu
-        @mouseenter="cursorLocation = `${cpuUse}`"
-        @mouseleave="cursorLocation = ''"
-      />
+      <the-cpu @mouseenter="cursorLocation = `${cpuUse}`" @mouseleave="cursorLocation = ''" />
     </dashboard-card>
     <dashboard-card class="amsterdam">
       <amsterdam-component />
     </dashboard-card>
     <dashboard-card class="sync-status"
-      ><sync-status
-        @mouseenter="cursorLocation = `${syncInfo}`"
-        @mouseleave="cursorLocation = ''"
+      ><sync-status @mouseenter="cursorLocation = `${syncInfo}`" @mouseleave="cursorLocation = ''"
     /></dashboard-card>
     <dashboard-card class="validatorComment_cell">
       <the-staking />
     </dashboard-card>
     <dashboard-card class="the-ram">
-      <the-ram
-        @mouseenter="cursorLocation = `${ramUse}`"
-        @mouseleave="cursorLocation = ''"
+      <the-ram @mouseenter="cursorLocation = `${ramUse}`" @mouseleave="cursorLocation = ''"
     /></dashboard-card>
     <dashboard-card class="the-network"
-      ><the-network
-        @mouseenter="cursorLocation = `${netSpeed}`"
-        @mouseleave="cursorLocation = ''"
+      ><the-network @mouseenter="cursorLocation = `${netSpeed}`" @mouseleave="cursorLocation = ''"
     /></dashboard-card>
     <dashboard-card class="portlist_card">
-      <port-list
-        @mouseenter="cursorLocation = `${listPort}`"
-        @mouseleave="cursorLocation = ''"
-      />
+      <port-list @mouseenter="cursorLocation = `${listPort}`" @mouseleave="cursorLocation = ''" />
       <!-- <SubscribedSubnets /> -->
     </dashboard-card>
     <div class="half-card">
-      <rpc-endpoint
-        @mouseenter="cursorLocation = `RPC ${endPoint}`"
-        @mouseleave="cursorLocation = ''"
-      />
+      <rpc-endpoint @mouseenter="cursorLocation = `RPC ${endPoint}`" @mouseleave="cursorLocation = ''" />
     </div>
     <div class="half-card2">
-      <ws-endpoint
-        @mouseenter="cursorLocation = `WS ${endPoint}`"
-        @mouseleave="cursorLocation = ''"
-      />
+      <ws-endpoint @mouseenter="cursorLocation = `WS ${endPoint}`" @mouseleave="cursorLocation = ''" />
     </div>
 
     <div class="half-card3">
-      <data-api
-        @mouseenter="cursorLocation = `${data} API`"
-        @mouseleave="cursorLocation = ''"
-      />
+      <data-api @mouseenter="cursorLocation = `${data} API`" @mouseleave="cursorLocation = ''" />
     </div>
   </div>
 </template>
@@ -160,9 +126,6 @@ export default {
     }),
   },
 
-  mounted() {
-    console.log(this.ServerName);
-  },
   methods: {
     footerSetter(arg) {
       this.cursorLocation = this.nodataMessage === "" ? arg : this.nodataMessage;
diff --git a/launcher/src/components/UI/the-control/ControlScreen.vue b/launcher/src/components/UI/the-control/ControlScreen.vue
index 31d3d537c..8f731bf6c 100644
--- a/launcher/src/components/UI/the-control/ControlScreen.vue
+++ b/launcher/src/components/UI/the-control/ControlScreen.vue
@@ -16,9 +16,7 @@
                 v-for="(item, index) in selecteConfigServices"
                 :key="index"
                 class="plugins-row"
-                @mouseenter="
-                  footerStore.cursorLocation = `${item.name + ' / ' + item.category}`
-                "
+                @mouseenter="footerStore.cursorLocation = `${item.name + ' / ' + item.category}`"
                 @mouseleave="footerStore.cursorLocation = ''"
               >
                 <div
@@ -40,10 +38,7 @@
                 <div class="service-edit">
                   <div class="edit-box">
                     <div
-                      v-if="
-                        item.service !== 'ExternalExecutionService' &&
-                        item.service !== 'ExternalConsensusService'
-                      "
+                      v-if="item.service !== 'ExternalExecutionService' && item.service !== 'ExternalConsensusService'"
                       class="icon-bg"
                     >
                       <div class="power-icon">
@@ -53,12 +48,9 @@
                           src="/animation/loading/turning-circle.gif"
                           alt="icon"
                           @mouseenter="
-                            footerStore.cursorLocation = `${t(
-                              'controlScreenTooltips.isPending',
-                              {
-                                service: item.name,
-                              }
-                            )}`
+                            footerStore.cursorLocation = `${t('controlScreenTooltips.isPending', {
+                              service: item.name,
+                            })}`
                           "
                           @mouseleave="footerStore.cursorLocation = ''"
                         />
@@ -68,12 +60,9 @@
                           alt="icon"
                           @click.stop="stateHandler(item)"
                           @mouseenter="
-                            footerStore.cursorLocation = `${t(
-                              'controlScreenTooltips.turnoff',
-                              {
-                                service: item.name,
-                              }
-                            )}`
+                            footerStore.cursorLocation = `${t('controlScreenTooltips.turnoff', {
+                              service: item.name,
+                            })}`
                           "
                           @mouseleave="footerStore.cursorLocation = ''"
                         />
@@ -83,12 +72,9 @@
                           alt="icon"
                           @click.stop="stateHandler(item)"
                           @mouseenter="
-                            footerStore.cursorLocation = `${t(
-                              'controlScreenTooltips.restart',
-                              {
-                                service: item.name,
-                              }
-                            )}`
+                            footerStore.cursorLocation = `${t('controlScreenTooltips.restart', {
+                              service: item.name,
+                            })}`
                           "
                           @mouseleave="footerStore.cursorLocation = ''"
                         />
@@ -98,10 +84,7 @@
                           alt="icon"
                           @click.stop="stateHandler(item)"
                           @mouseenter="
-                            footerStore.cursorLocation = `${t(
-                              'controlScreenTooltips.turnon',
-                              { service: item.name }
-                            )}`
+                            footerStore.cursorLocation = `${t('controlScreenTooltips.turnon', { service: item.name })}`
                           "
                           @mouseleave="footerStore.cursorLocation = ''"
                         />
@@ -118,21 +101,11 @@
                         "
                         @mouseleave="footerStore.cursorLocation = ''"
                       >
-                        <img
-                          src="/img/icon/node-page-icons/service-command-open-logs.png"
-                          alt="icon"
-                        />
+                        <img src="/img/icon/node-page-icons/service-command-open-logs.png" alt="icon" />
                       </div>
                     </div>
                   </div>
                 </div>
-                <ExpertWindow
-                  v-if="isExpertWindowOpen"
-                  :item="expertModeClient"
-                  left-distance="left-[45px]"
-                  bg-opacity="opacity-25"
-                  @hide-modal="hideExpertMode(item)"
-                />
               </div>
             </div>
             <div class="arrow-down" @click="scrollDown">
@@ -144,10 +117,8 @@
       <div class="dashboard-container border-4 border-gray-500 bg-black rounded-md">
         <control-dashboard></control-dashboard>
       </div>
-      <div
-        class="absolute bottom-[8px] right-[8px] col-start-21 col-end-25 row-start-2 row-end-5 py-2"
-      >
-        <control-alert @expert-handler="expertModeHandlerAlert"></control-alert>
+      <div class="absolute bottom-[8px] right-[8px] col-start-21 col-end-25 row-start-2 row-end-5 py-2">
+        <control-alert @expert-handler="expertModeHandlerAlert" />
       </div>
     </div>
     <LogsSection
@@ -158,6 +129,12 @@
       @export-all-log="updateAndExportAllLogs"
       @export-customized-logs="updateAndExportAllLogs"
     />
+    <ExpertWindow
+      v-if="isExpertWindowOpen"
+      :item="expertModeClient"
+      bg-opacity="opacity-25"
+      @hide-modal="hideExpertMode(item)"
+    />
     <!-- End Control main layout -->
   </base-layout>
 </template>
@@ -209,9 +186,7 @@ const selecteConfigServices = computed(() => {
   let test = [];
   const selectedSetup = setupStore.selectedSetup;
   if (selectedSetup && selectedSetup.services) {
-    const selectedServiceIds = selectedSetup.services.map(
-      (service) => service.config.serviceID
-    );
+    const selectedServiceIds = selectedSetup.services.map((service) => service.config.serviceID);
     serviceStore.installedServices.forEach((service) => {
       if (
         (["execution", "validator", "consensus"].includes(service.category) &&
@@ -230,12 +205,8 @@ const selecteConfigServices = computed(() => {
 
 const missingServices = computed(() => {
   const selectedServices = selecteConfigServices.value;
-  const hasValidator = selectedServices.some(
-    (service) => service.category === "validator"
-  );
-  const hasConsensus = selectedServices.some(
-    (service) => service.category === "consensus"
-  );
+  const hasValidator = selectedServices.some((service) => service.category === "validator");
+  const hasConsensus = selectedServices.some((service) => service.category === "consensus");
 
   let missing = [];
   if (!hasValidator) missing.push("validator");
@@ -253,13 +224,8 @@ watch(
 );
 
 const isAnyConsensusRunning = computed(() => {
-  const consensusServices = selecteConfigServices.value.filter(
-    (service) => service.category === "consensus"
-  );
-  return (
-    consensusServices.length > 0 &&
-    consensusServices.some((service) => service.state === "running")
-  );
+  const consensusServices = selecteConfigServices.value.filter((service) => service.category === "consensus");
+  return consensusServices.length > 0 && consensusServices.some((service) => service.state === "running");
 });
 watch(
   isAnyConsensusRunning,
@@ -271,9 +237,7 @@ watch(
 
 //is prometheus off
 const isPrometheusOff = computed(() => {
-  const prometheusService = selecteConfigServices.value.find(
-    (service) => service.name === "Prometheus"
-  );
+  const prometheusService = selecteConfigServices.value.find((service) => service.name === "Prometheus");
   return prometheusService?.state === "running" ? false : true;
 });
 
@@ -393,13 +357,9 @@ const updateAndExportAllLogs = async (client) => {
     until: nodeStore.untilDateParsDays,
   });
 
-  const fileName = `${client.name}_${
-    nodeStore.isExportCustomizedDateLoading ? "customized" : "all"
-  }_logs.txt`;
+  const fileName = `${client.name}_${nodeStore.isExportCustomizedDateLoading ? "customized" : "all"}_logs.txt`;
   const data = [...nodeStore.allLogsForExp.logs].reverse();
-  const lineByLine = data
-    .map((line, index) => `#${data.length - index}: ${line}`)
-    .join("\n\n");
+  const lineByLine = data.map((line, index) => `#${data.length - index}: ${line}`).join("\n\n");
   const blob = new Blob([lineByLine], { type: "text/plain;charset=utf-8" });
   saveAs(blob, fileName);
 
@@ -414,27 +374,17 @@ const exportLogs = async (client) => {
     (service) => service.config?.serviceID === client.config?.serviceID
   );
 
-  const fileName = nodeStore.exportLogs
-    ? `${client.name}_150_logs.txt`
-    : `${client.name}_all_logs.txt`;
+  const fileName = nodeStore.exportLogs ? `${client.name}_150_logs.txt` : `${client.name}_all_logs.txt`;
 
   // Select the data based on the condition
-  const data = nodeStore.exportLogs
-    ? currentService.logs.slice(-150).reverse()
-    : currentService.logs.reverse();
+  const data = nodeStore.exportLogs ? currentService.logs.slice(-150).reverse() : currentService.logs.reverse();
 
-  const lineByLine = data
-    .map((line, index) => `#${data.length - index}: ${line}`)
-    .join("\n\n");
+  const lineByLine = data.map((line, index) => `#${data.length - index}: ${line}`).join("\n\n");
   const blob = new Blob([lineByLine], { type: "text/plain;charset=utf-8" });
   saveAs(blob, fileName);
 };
 const updateServiceLogs = async () => {
-  if (
-    serviceStore.installedServices &&
-    serviceStore.installedServices.length > 0 &&
-    headerStore.refresh
-  ) {
+  if (serviceStore.installedServices && serviceStore.installedServices.length > 0 && headerStore.refresh) {
     const data = await ControlService.getServiceLogs({ logs_tail: 150 });
     nodeStore.serviceLogs = data;
   }