FIX: multi setup issues (#1919)

* FIX: network n sync * FIX: resync * FIX: network installation * FIX: some ui issues * REMOVE: lineDrawer func on edit
stereum-dev · Jun 27, 2024 · e96b50f · e96b50f
1 parent a2dd85e
commit e96b50f
Show file tree

Hide file tree

Showing 15 changed files with 287 additions and 677 deletions.
diff --git a/launcher/public/output.css b/launcher/public/output.css
@@ -1,7 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap");
 
 /*
-! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -819,10 +819,6 @@ video {
   bottom: 0.25rem;
 }
 
-.bottom-2{
-  bottom: 0.5rem;
-}
-
 .bottom-20{
   bottom: 5rem;
 }
@@ -931,16 +927,12 @@ video {
   right: 2rem;
 }
 
-.right-\[10\.5rem\]{
-  right: 10.5rem;
-}
-
 .right-\[1px\]{
   right: 1px;
 }
 
-.right-\[5px\]{
-  right: 5px;
+.right-\[20px\]{
+  right: 20px;
 }
 
 .right-\[8px\]{
@@ -1527,10 +1519,6 @@ video {
   margin-top: 1rem;
 }
 
-.mt-40{
-  margin-top: 10rem;
-}
-
 .mt-5{
   margin-top: 1.25rem;
 }
@@ -1543,6 +1531,10 @@ video {
   margin-top: 2rem;
 }
 
+.mt-\[9\.5rem\]{
+  margin-top: 9.5rem;
+}
+
 .box-border{
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -1764,10 +1756,6 @@ video {
   height: 36px;
 }
 
-.h-\[37px\]{
-  height: 37px;
-}
-
 .h-\[38px\]{
   height: 38px;
 }
@@ -2022,10 +2010,6 @@ video {
   min-height: 30px;
 }
 
-.min-h-\[37px\]{
-  min-height: 37px;
-}
-
 .min-h-\[400px\]{
   min-height: 400px;
 }
@@ -2250,10 +2234,6 @@ video {
   width: 230px;
 }
 
-.w-\[25px\]{
-  width: 25px;
-}
-
 .w-\[27px\]{
   width: 27px;
 }
@@ -2929,11 +2909,22 @@ video {
   border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
 }
 
+.divide-y-\[1px\] > :not([hidden]) ~ :not([hidden]){
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+}
+
 .divide-gray-300 > :not([hidden]) ~ :not([hidden]){
   --tw-divide-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-divide-opacity));
 }
 
+.divide-gray-400 > :not([hidden]) ~ :not([hidden]){
+  --tw-divide-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-divide-opacity));
+}
+
 .divide-gray-500 > :not([hidden]) ~ :not([hidden]){
   --tw-divide-opacity: 1;
   border-color: rgb(107 114 128 / var(--tw-divide-opacity));
@@ -3650,6 +3641,11 @@ video {
   background-color: rgb(32 38 50 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#212225\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(33 34 37 / var(--tw-bg-opacity));
+}
+
 .bg-\[\#212629\]{
   --tw-bg-opacity: 1;
   background-color: rgb(33 38 41 / var(--tw-bg-opacity));
@@ -3680,11 +3676,6 @@ video {
   background-color: rgb(35 37 40 / var(--tw-bg-opacity));
 }
 
-.bg-\[\#23272c\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(35 39 44 / var(--tw-bg-opacity));
-}
-
 .bg-\[\#242529\]{
   --tw-bg-opacity: 1;
   background-color: rgb(36 37 41 / var(--tw-bg-opacity));
@@ -4245,6 +4236,11 @@ video {
   padding-right: 0.5rem;
 }
 
+.px-20{
+  padding-left: 5rem;
+  padding-right: 5rem;
+}
+
 .px-3{
   padding-left: 0.75rem;
   padding-right: 0.75rem;

diff --git a/launcher/src/components/UI/TheCarousel/components/TheCarousel.vue b/launcher/src/components/UI/TheCarousel/components/TheCarousel.vue
@@ -9,16 +9,31 @@
       :transition="500"
       snap-align="center"
     >
-      <slide v-for="(item, index) in installStore.syncType" :key="index" aria-current="0">
+      <slide v-for="item in installStore.syncType" :key="item.name" aria-current="0">
         <div class="w-full h-full flex justify-center items-center pl-2">
-          <div v-if="item.name === 'genesis'" class="w-full h-full flex flex-col justify-center items-start">
-            <span class="text-md text-gray-300 font-semibold text-left uppercase">{{ item.name }}</span>
-            <span class="text-sm text-teal-600 font-semibold text-left">{{ item.type }}</span>
+          <div
+            v-if="item.name === 'genesis'"
+            class="w-full h-full flex flex-col justify-center items-start"
+          >
+            <span class="text-md text-gray-300 font-semibold text-left uppercase">{{
+              item.name
+            }}</span>
+            <span class="text-sm text-teal-600 font-semibold text-left">{{
+              item.type
+            }}</span>
           </div>
-          <div v-else-if="item.type === 'custom source'" class="w-full h-full flex justify-between items-center">
+          <div
+            v-else-if="item.type === 'custom source'"
+            class="w-full h-full flex justify-between items-center"
+          >
             <div class="w-fit h-full flex flex-col justify-center items-start">
-              <span class="w-fit h-5 text-sm text-gray-300 font-semibold text-left uppercase">{{ item.name }}</span>
-              <span class="w-fit text-xs text-teal-600 font-semibold text-left">{{ item.type }}</span>
+              <span
+                class="w-fit h-5 text-sm text-gray-300 font-semibold text-left uppercase"
+                >{{ item.name }}</span
+              >
+              <span class="w-fit text-xs text-teal-600 font-semibold text-left">{{
+                item.type
+              }}</span>
             </div>
             <div class="w-[60%] h-full flex justify-center items-center">
               <input
@@ -29,10 +44,18 @@
               />
             </div>
           </div>
-          <div v-else-if="item.type === 'recommended'" class="w-full h-full flex justify-between items-center">
+          <div
+            v-else-if="item.type === 'recommended'"
+            class="w-full h-full flex justify-between items-center"
+          >
             <div class="w-fit h-full flex flex-col justify-center items-start">
-              <span class="w-fit h-5 text-sm text-gray-300 font-semibold text-left uppercase">{{ item.name }}</span>
-              <span class="w-fit text-xs text-teal-600 font-semibold text-left">{{ item.type }}</span>
+              <span
+                class="w-fit h-5 text-sm text-gray-300 font-semibold text-left uppercase"
+                >{{ item.name }}</span
+              >
+              <span class="w-fit text-xs text-teal-600 font-semibold text-left">{{
+                item.type
+              }}</span>
             </div>
 
             <div class="w-[60%] h-10 flex justify-center items-center">
@@ -49,22 +72,38 @@
                 @click="openDropdown"
               >
                 <div class="col-start-1 col-span-1 self-center">
-                  <img v-if="selectedIcon" class="w-6 ml-1" :src="selectedIcon" :alt="selectedItem" />
+                  <img
+                    v-if="selectedIcon"
+                    class="w-6 ml-1"
+                    :src="selectedIcon"
+                    :alt="selectedItem"
+                  />
                 </div>
                 <div
                   v-if="selectedIcon"
                   class="extentions h-9 pt-5 col-start-2 col-end-6 text-md text-gray-300 flex justify-center items-center self-center"
                 >
-                  <span class="text-sm text-gray-300 text-center">{{ selectedItem }}</span>
+                  <span class="text-sm text-gray-300 text-center">{{
+                    selectedItem
+                  }}</span>
                 </div>
                 <div
                   v-else
                   class="extentions h-9 pt-5 col-start-2 col-end-6 text-md text-gray-300 flex justify-center items-center self-center"
                 >
-                  <span class="text-sm text-gray-300 text-center">{{ selectedItem }}</span>
+                  <span class="text-sm text-gray-300 text-center">{{
+                    selectedItem
+                  }}</span>
                 </div>
-                <div class="col-start-6 col-span-1 self-center justify-self-end" @click="openWindow">
-                  <img class="w-6" src="/img/icon/service-modals-icons/internet.png" alt="Internet" />
+                <div
+                  class="col-start-6 col-span-1 self-center justify-self-end"
+                  @click="openWindow"
+                >
+                  <img
+                    class="w-6"
+                    src="/img/icon/service-modals-icons/internet.png"
+                    alt="Internet"
+                  />
                 </div>
               </div>
             </div>
@@ -106,47 +145,44 @@
 import ControlService from "@/store/ControlService";
 import { useClickInstall } from "@/store/clickInstallation";
 import { useNodeManage } from "@/store/nodeManage";
-import "vue3-carousel/dist/carousel.css";
-import { Carousel, Slide, Navigation } from "vue3-carousel";
-import { ref, watch, onMounted, computed, watchEffect } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router";
+import { Carousel, Navigation, Slide } from "vue3-carousel";
+import "vue3-carousel/dist/carousel.css";
+import { useSetups } from "../../../../store/setups";
 
 // Store
 const installStore = useClickInstall();
 const manageStore = useNodeManage();
+const setupStore = useSetups();
 const router = useRouter();
 
 // Data
 
 const dropdown = ref(false);
 const selectedItem = ref("- SELECT A SOURCE -");
 const currentSlide = ref(null);
-const selectedLinks = ref([]);
 const prevVal = ref(0);
 const selectedIcon = ref("");
-const incommingNetwork = ref(null);
-const fullPath = router.currentRoute.value.fullPath;
 
 // Computed properties
 
 const currentNetwork = computed(() => {
-  return manageStore.currentNetwork;
+  let setupNetwork;
+  let current;
+  if (setupStore.selectedSetup) {
+    setupNetwork = setupStore.selectedSetup.network;
+  }
+  current = manageStore.networkList.find((network) => network.name === setupNetwork);
+  return current;
 });
 
-const configNetwork = computed(() => {
-  return installStore.configNetwork;
+const selectedLinks = computed(() => {
+  return installStore[currentNetwork.value.network];
 });
 
 // Watchers
 
-watchEffect(() => {
-  if (fullPath.startsWith("/config")) {
-    incommingNetwork.value = configNetwork.value;
-  } else {
-    incommingNetwork.value = currentNetwork.value;
-  }
-});
-
 watch(currentSlide, (val) => {
   if (router.currentRoute.value.path === "/oneClick/sync") {
     if (val !== prevVal.value) {
@@ -170,7 +206,6 @@ watch(currentSlide, (val) => {
 
 onMounted(() => {
   currentSlide.value = 3;
-  setSelectedLinks();
 });
 
 // Methods
@@ -207,10 +242,6 @@ const linkPicker = async (item) => {
   selectedIcon.value = item.icon;
   installStore.checkPointSync = item.url;
 };
-
-const setSelectedLinks = () => {
-  selectedLinks.value = installStore[manageStore.currentNetwork.network];
-};
 </script>
 <style scoped>
 .extentions {

diff --git a/launcher/src/components/UI/edit-page/EditScreen.vue b/launcher/src/components/UI/edit-page/EditScreen.vue
@@ -629,7 +629,7 @@ const addServiceHandler = (item) => {
   }
   let dataObject = {
     setupId: setupStore.selectedSetup?.setupId,
-    network: manageStore.configNetwork.network,
+    network: setupStore.selectedSetup?.network,
     installDir: item.installDir || "/opt/stereum",
     executionClients: item.executionClients,
     consensusClients: item.consensusClients,

diff --git a/launcher/src/components/UI/edit-page/components/drawer/DrawerMenu.vue b/launcher/src/components/UI/edit-page/components/drawer/DrawerMenu.vue
@@ -5,7 +5,7 @@
     <div
       class="col-start-1 col-span-full row-start-1 row-end-3 w-full h-full bg-[#232428] rounded-md flex flex-col justify-between items-center p-1"
     >
-      <span class="text-xs text-center text-gray-100 font-sans uppercase mt-1"
+      <span class="text-xs text-center text-gray-300 font-sans uppercase mt-1"
         >Create a setup</span
       >
 
@@ -19,8 +19,8 @@
     <div
       class="col-start-1 col-span-full row-start-3 row-end-5 w-full h-full bg-[#232428] rounded-md flex flex-col justify-between items-center p-1"
     >
-      <span class="text-xs text-center text-gray-100 font-sans uppercase mt-1"
-        >IMPORT A CONFIG</span
+      <span class="text-xs text-center text-gray-300 font-sans uppercase mt-1"
+        >IMPORT A SETUP</span
       >
 
       <div
@@ -34,7 +34,7 @@
       class="col-start-1 col-span-full row-start-5 row-end-10 w-full h-full bg-[#232428] rounded-md grid grid-cols-6 grid-rows-6 items-start gap-y-1 p-1"
     >
       <span
-        class="col-start-1 col-span-full row-start-1 row-span-1 text-xs text-center text-gray-100 font-sans uppercase"
+        class="col-start-1 col-span-full row-start-1 row-span-1 text-xs text-center text-gray-300 font-sans uppercase self-center"
         >ADD A SERVER SERVICE</span
       >
       <div

diff --git a/launcher/src/components/UI/edit-page/components/drawer/SetupsDrawer.vue b/launcher/src/components/UI/edit-page/components/drawer/SetupsDrawer.vue
@@ -7,7 +7,7 @@
     >
       <div class="w-full h-full rounded-sm flex justify-center items-center">
         <span
-          class="text-sm text-center text-gray-100 font-normal font-sans uppercase mt-1"
+          class="text-xs text-center text-gray-300 font-normal font-sans uppercase mt-1"
           >Select A Network</span
         >
       </div>
@@ -38,7 +38,7 @@
     </div>
 
     <div
-      class="col-start-1 col-span-full row-start-14 row-span-full w-full h-full bg-[#151618] rounded-md flex flex-col justify-between items-center p-1 shadow-sm shadow-black active:shadow-none border border-gray-700"
+      class="col-start-1 col-span-full row-start-14 row-span-full w-full h-full bg-[#151618] rounded-md flex flex-col justify-between items-center p-1 shadow-sm shadow-black active:shadow-none border border-gray-700 opacity-50 pointer-events-none"
     >
       <span
         class="text-2xs text-center text-gray-100 font-semibold font-sans uppercase mt-1"