ADD: setup services widget

launcher/public/output.css

@@ -2370,6 +2370,10 @@ video {
   width: 100vw;
 }
 
+.w-1\/5{
+  width: 20%;
+}
+
 .min-w-\[100px\]{
   min-width: 100px;
 }
@@ -3441,11 +3445,6 @@ video {
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
-.border-blue-600{
-  --tw-border-opacity: 1;
-  border-color: rgb(37 99 235 / var(--tw-border-opacity));
-}
-
 .border-b-transparent{
   border-bottom-color: transparent;
 }

launcher/src/components/UI/control-page/components/widgets/SetupServices.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="total-setup-services-parent MachineNameParent bg-[#151618] rounded-md w-full h-full relative flex justify-start items-center">
+    <span class="w-4/5 h-full text-teal-700 text-sm font-semibold flex justify-center items-center uppercase">{{
+      t("setupServicesWidget.text")
+    }}</span>
+    <span class="w-1/5 h-full text-gray-100 font-semibold flex justify-center items-center uppercase">{{
+      controlStore.setupServices
+    }}</span>
+  </div>
+</template>
+
+<script setup>
+import { useControlStore } from "@/store/theControl";
+
+import i18n from "@/includes/i18n";
+
+const controlStore = useControlStore();
+
+const t = i18n.global.t;
+</script>

launcher/src/components/UI/control-page/sections/ControlHeader.vue

@@ -1,24 +1,32 @@
 <template>
-  <div class="control-header col-start-1 col-end-25 bg-red-500 row-start-1 row-span-1 grid grid-cols-24 grid-rows-1 h-full p-1 gap-1">
+  <div class="control-header col-start-1 col-end-25 row-start-1 row-span-1 grid grid-cols-24 grid-rows-1 h-full p-1 gap-1">
     <ThinCard class="machine-name col-start-3 col-span-5"><MachineName /></ThinCard>
     <NetworkStatus class="network-status col-start-8 col-end-12" />
-
     <SetupDetails class="SetupDetails col-start-12 col-span-5" :list="setupsList" @select-setup="selectSetup" @server-view="serverView" />
+    <ThinCard class="setup-services col-start-17 col-span-6"><SetupServices /></ThinCard>
   </div>
 </template>
 
 <script setup>
+import { computed, watch } from "vue";
+
+import { useSetups } from "@/store/setups";
+import { useServices } from "@/store/services";
+import { useControlStore } from "@/store/theControl";
+
+import { useMultiSetups } from "@/composables/multiSetups";
+
 import ThinCard from "../components/cards/ThinCard.vue";
 import MachineName from "../components/widgets/MachineName.vue";
 import NetworkStatus from "../../../layers/NetworkStatus.vue";
 import SetupDetails from "../../edit-page/components/edit/header/SetupDetails.vue";
-import { computed } from "vue";
-import { useSetups } from "@/store/setups";
-import { useMultiSetups } from "@/composables/multiSetups";
+import SetupServices from "../../control-page/components/widgets/SetupServices.vue";
 
 const { getSelectedSetup, getServerView } = useMultiSetups();
 
 const setupStore = useSetups();
+const serviceStore = useServices();
+const controlStore = useControlStore();
 
 const setupsList = computed(() => {
   return setupStore.allSetups;
@@ -32,11 +40,37 @@ const serverView = () => {
   getServerView();
 };
 
-// onUnmounted(() => {
-//   getServerView();
-// });
+const selectedConfigServices = computed(() => {
+  let test = [];
+  const selectedSetup = setupStore.selectedSetup;
+
+  if (selectedSetup && selectedSetup.services) {
+    const selectedServiceIds = selectedSetup.services.map((service) => service.config.serviceID);
+
+    serviceStore.installedServices.forEach((service) => {
+      if (
+        (["execution", "validator", "consensus"].includes(service.category) && selectedServiceIds.includes(service.config.serviceID)) ||
+        service.category === "service"
+      ) {
+        test.push({
+          isServicePending: false,
+          ...service,
+        });
+      }
+    });
+  }
+  return test;
+});
 
-// const serverView = () => {
-//   getServerView();
-// };
+watch(
+  () => setupStore.selectedSetup,
+  () => {
+    if (selectedConfigServices.value && selectedConfigServices.value.length === 0) {
+      controlStore.setupServices = 0;
+    } else {
+      controlStore.setupServices = selectedConfigServices.value.length;
+    }
+  },
+  { immediate: true }
+);
 </script>

launcher/src/languages/en.json

@@ -1065,5 +1065,8 @@
     "acc": "accept",
     "deny": "deny",
     "updateTo": "Updating Stereum Launcher to {version}"
+  },
+  "setupServicesWidget": {
+    "text": "total services on setup"
   }
 }

launcher/src/store/theControl.js

@@ -3,6 +3,7 @@ import { defineStore } from "pinia";
 export const useControlStore = defineStore("theControl", {
   state: () => {
     return {
+      setupServices: 0,
       currentConsensusIcon: "",
       currentExecutionIcon: "",
       synchronizationError: false,