ADD: service port widget

stereum-dev · Sep 27, 2024 · f0162bc · f0162bc
1 parent e050cd5
commit f0162bc
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 4 deletions.
diff --git a/launcher/public/output.css b/launcher/public/output.css
@@ -2438,6 +2438,10 @@ video {
   width: 100vw;
 }
 
+.w-11{
+  width: 2.75rem;
+}
+
 .min-w-\[100px\]{
   min-width: 100px;
 }
@@ -4671,6 +4675,10 @@ video {
   line-height: 1rem;
 }
 
+.text-\[30\%\]{
+  font-size: 30%;
+}
+
 .font-\[400\]{
   font-weight: 400;
 }

diff --git a/launcher/src/components/UI/control-page/components/widgets/RPCRecievedOverTime.vue b/launcher/src/components/UI/control-page/components/widgets/RPCRecievedOverTime.vue
@@ -37,7 +37,7 @@ export default defineComponent({
             show: false,
           },
           animations: {
-            enabled: false,
+            enabled: true,
           },
           parentHeightOffset: 0,
         },
@@ -96,9 +96,9 @@ export default defineComponent({
           enabled: false,
         },
         legend: {
-          show: false, // Show series names in a minimal way
+          show: false,
           labels: {
-            colors: "#ffffff", // Adjust color to match your style
+            colors: "#ffffff",
           },
         },
       },

diff --git a/launcher/src/components/UI/control-page/components/widgets/ServicePort.vue b/launcher/src/components/UI/control-page/components/widgets/ServicePort.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="service-ports-parent w-full h-full flex justify-center items-center flex-col">
+    <div class="widget-name w-full h-1/5 flex justify-center items-center text-gray-200 uppercase font-semibold text-[55%]">
+      SERVICE PORTS
+    </div>
+    <div class="widget-box w-full h-4/5 justify-start items-center flex flex-col gap-1 p-1">
+      <div class="row-port w-full h-1/5 flex justify-start items-center border border-gray-400 rounded-sm pl-1 pr-1">
+        <span class="w-1/2 h-full flex justify-stert items-center text-[40%] font-semibold text-gray-200 uppercase">{{
+          (execClient = "NETHERMIND")
+        }}</span>
+        <small class="text-gray-200 uppercase text-[30%] w-1/7 h-full flex justify-center items-center">{{ execProtocol }}</small>
+        <span class="bg-red w-11 h-full flex justify-end items-center text-[60%] font-semibold text-gray-200 uppercase">{{
+          execPort
+        }}</span>
+      </div>
+      <div class="row-port w-full h-1/5 flex justify-start items-center border border-gray-400 rounded-sm pl-1 pr-1">
+        <span class="w-1/2 h-full flex justify-stert items-center text-[40%] font-semibold text-gray-200 uppercase">{{
+          (execClient = "NETHERMIND")
+        }}</span>
+        <small class="text-gray-200 uppercase text-[30%] w-1/7 h-full flex justify-center items-center">{{ execProtocol }}</small>
+        <span class="bg-red w-11 h-full flex justify-end items-center text-[60%] font-semibold text-gray-200 uppercase">{{
+          execPort
+        }}</span>
+      </div>
+      <div class="row-port w-full h-1/5 flex justify-start items-center border border-gray-400 rounded-sm pl-1 pr-1">
+        <span class="w-1/2 h-full flex justify-stert items-center text-[40%] font-semibold text-gray-200 uppercase">{{
+          (execClient = "NETHERMIND")
+        }}</span>
+        <small class="text-gray-200 uppercase text-[30%] w-1/7 h-full flex justify-center items-center">{{ execProtocol }}</small>
+        <span class="bg-red w-11 h-full flex justify-end items-center text-[60%] font-semibold text-gray-200 uppercase">{{
+          execPort
+        }}</span>
+      </div>
+      <div class="row-port w-full h-1/5 flex justify-start items-center border border-gray-400 rounded-sm pl-1 pr-1">
+        <span class="w-1/2 h-full flex justify-stert items-center text-[40%] font-semibold text-gray-200 uppercase">{{
+          (execClient = "NETHERMIND")
+        }}</span>
+        <small class="text-gray-200 uppercase text-[30%] w-1/7 h-full flex justify-center items-center">{{ execProtocol }}</small>
+        <span class="bg-red w-11 h-full flex justify-end items-center text-[60%] font-semibold text-gray-200 uppercase">{{
+          execPort
+        }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const execClient = ref("NETHERMIND"); //dummy client name
+const execPort = ref("22154"); //dummy port number
+const execProtocol = ref("tcp"); //dummy protocol
+</script>
+
+<style scoped></style>
diff --git a/launcher/src/components/UI/control-page/sections/SidebarRight.vue b/launcher/src/components/UI/control-page/sections/SidebarRight.vue
@@ -9,7 +9,9 @@
     <MiniCard v-if="controlStore.pickeedService === 'exeCons'" class="col-start-1 col-span-3 row-start-7 row-span-3"
       ><RPCRecievedOverTime
     /></MiniCard>
-    <MiniCard v-if="controlStore.pickeedService === 'exeCons'" class="col-start-1 col-span-3 row-start-10 row-span-3" />
+    <MiniCard v-if="controlStore.pickeedService === 'exeCons'" class="col-start-1 col-span-3 row-start-10 row-span-3"
+      ><ServicePort
+    /></MiniCard>
   </div>
 </template>
 
@@ -18,6 +20,7 @@ import MiniCard from "../components/cards/MiniCard.vue";
 import ClientPairWidget from "../components/widgets/ClientPairWidget.vue";
 import PairStatusWidget from "../components/widgets/PairStatusWidget.vue";
 import RPCRecievedOverTime from "../components/widgets/RPCRecievedOverTime.vue";
+import ServicePort from "../components/widgets/ServicePort.vue";
 
 import { useControlStore } from "@/store/theControl";