From 3d86dee708f749e19019da782d03cb815eda0e38 Mon Sep 17 00:00:00 2001
From: mabasian <54101509+mabasian@users.noreply.github.com>
Date: Wed, 18 Sep 2024 13:46:29 +0200
Subject: [PATCH] ADD: cpu widget to the new control page

---
 launcher/public/output.css                    |   8 +
 .../components/widgets/TheCpu.vue             |  69 ++++++++
 .../components/widgets/TheNetwork.vue         |   2 +-
 .../control-page/sections/CommonSidebar.vue   |   8 +-
 .../UI/the-control/ControlDashboard.vue       |   2 +-
 .../src/components/UI/the-control/TheCpu.vue  | 149 ------------------
 6 files changed, 84 insertions(+), 154 deletions(-)
 create mode 100755 launcher/src/components/UI/control-page/components/widgets/TheCpu.vue
 delete mode 100755 launcher/src/components/UI/the-control/TheCpu.vue

diff --git a/launcher/public/output.css b/launcher/public/output.css
index b3cc1de1ee..6eddc02808 100755
--- a/launcher/public/output.css
+++ b/launcher/public/output.css
@@ -2378,6 +2378,14 @@ video {
   width: 100vw;
 }
 
+.w-2\/5{
+  width: 40%;
+}
+
+.w-\[90\%\]{
+  width: 90%;
+}
+
 .min-w-\[100px\]{
   min-width: 100px;
 }
diff --git a/launcher/src/components/UI/control-page/components/widgets/TheCpu.vue b/launcher/src/components/UI/control-page/components/widgets/TheCpu.vue
new file mode 100755
index 0000000000..59f0b81d7e
--- /dev/null
+++ b/launcher/src/components/UI/control-page/components/widgets/TheCpu.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="theCpuParent flex w-full h-full justify-center items-center">
+    <div class="cpuIco w-1/3 h-full flex flex-col justify-center items-center">
+      <div class="cpuIco-container flex justify-center items-center w-full h-4/5">
+        <img class="w-3/4" src="/img/icon/control-page-icons/cpuIcon.svg" />
+      </div>
+      <span class="w-full h-1/5 flex justify-center items-center text-gray-200 text-2xs font-semibold uppercase">CPU</span>
+    </div>
+    <div class="cpuCountPart w-2/3 h-full flex flex-col justify-center items-center">
+      <div class="cpuUsage flex justify-center items-center w-full h-1/2">
+        <div class="cpuProccessBarCont w-[90%] h-full flex justify-center items-center">
+          <div class="cpuProccessBar">
+            <div class="cpuProccessBar_value_bg">
+              <div class="cpuProccessBar_value" :style="getStyle" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="cpuTemp flex justify-center items-center w-full h-1/2 text-gray-200 text-[90%] uppercase">
+        <div class="cpuTemp-title flex justify-center items-center w-2/5 h-full">
+          <span>{{ $t("controlPage.usage") }} :</span>
+        </div>
+        <div class="cpuTemp-value flex justify-center items-center w-2/5 h-full">
+          <span>{{ cpu }} %</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useControlStore } from "@/store/theControl";
+import { computed } from "vue";
+
+const controlStore = useControlStore();
+
+const cpu = computed(() => controlStore.cpu);
+
+const getStyle = computed(() => {
+  return { width: 100 - cpu.value + "%" };
+});
+</script>
+
+<style scoped>
+.cpuProccessBar {
+  width: 90%;
+  background: #33393e;
+  height: 50%;
+  border: 1px solid #33393e;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 1px 1px 11px 1px #1f1f1f;
+}
+.cpuProccessBar_value_bg {
+  width: 99%;
+  background-image: linear-gradient(to right, green 35%, yellow, red);
+  height: 88%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  border-radius: 10px;
+}
+.cpuProccessBar_value {
+  height: 100%;
+  background: #33393e;
+}
+</style>
diff --git a/launcher/src/components/UI/control-page/components/widgets/TheNetwork.vue b/launcher/src/components/UI/control-page/components/widgets/TheNetwork.vue
index 5b221714d8..eca8b65a9b 100755
--- a/launcher/src/components/UI/control-page/components/widgets/TheNetwork.vue
+++ b/launcher/src/components/UI/control-page/components/widgets/TheNetwork.vue
@@ -8,7 +8,7 @@
         $t("controlPage.network")
       }}</span>
     </div>
-    <div class="totalReceived w-1/3 h-full flex flex-col">
+    <div class="totalReceived w-1/3 h-full flex flex-col justify-center items-center">
       <div class="receivePerSecond w-full h-1/2 flex justify-center items-end">
         <span class="text-orange-600 font-semibold text-lg">{{ controlStore.rx }}</span>
       </div>
diff --git a/launcher/src/components/UI/control-page/sections/CommonSidebar.vue b/launcher/src/components/UI/control-page/sections/CommonSidebar.vue
index d143cf60ed..97899d4207 100644
--- a/launcher/src/components/UI/control-page/sections/CommonSidebar.vue
+++ b/launcher/src/components/UI/control-page/sections/CommonSidebar.vue
@@ -1,11 +1,12 @@
 <template>
   <div
-    class="w-full h-full col-start-1 col-end-7 row-start-2 row-span-full grid grid-cols-6 grid-rows-12 items-center bg-red-600 gap-1 p-1"
+    class="w-full h-full col-start-1 col-end-7 row-start-2 row-span-full grid grid-cols-6 grid-rows-15 items-center bg-red-600 gap-1 p-1"
   >
     <WidgetCard class="info-widget col-start-1 col-span-6 row-start-1 row-span-3" />
     <WidgetCard class="info-widget col-start-1 col-span-6 row-start-4 row-span-3" />
-    <WidgetCard class="ram-widget col-start-1 col-span-6 row-start-7 row-span-3"><TheRam /></WidgetCard>
-    <WidgetCard class="network-widget col-start-1 col-span-6 row-start-10 row-span-3"><TheNetwork /></WidgetCard>
+    <WidgetCard class="cpu-widget col-start-1 col-span-6 row-start-7 row-span-3"><TheCpu /></WidgetCard>
+    <WidgetCard class="ram-widget col-start-1 col-span-6 row-start-10 row-span-3"><TheRam /></WidgetCard>
+    <WidgetCard class="network-widget col-start-1 col-span-6 row-start-13 row-span-3"><TheNetwork /></WidgetCard>
   </div>
 </template>
 
@@ -13,4 +14,5 @@
 import WidgetCard from "../components/cards/WidgetCard.vue";
 import TheNetwork from "../components/widgets/TheNetwork.vue";
 import TheRam from "../components/widgets/TheRam.vue";
+import TheCpu from "../components/widgets/TheCpu.vue";
 </script>
diff --git a/launcher/src/components/UI/the-control/ControlDashboard.vue b/launcher/src/components/UI/the-control/ControlDashboard.vue
index eb6e16f10c..d431ac1f27 100755
--- a/launcher/src/components/UI/the-control/ControlDashboard.vue
+++ b/launcher/src/components/UI/the-control/ControlDashboard.vue
@@ -63,7 +63,7 @@ import TheStorage from "./TheStorage.vue";
 import DataApi from "./DataApi.vue";
 import SyncStatus from "./SyncStatus.vue";
 import EpochSlot from "./EpochSlot.vue";
-import TheCpu from "./TheCpu.vue";
+import TheCpu from "../control-page/components/widgets/TheCpu.vue";
 import TheHard from "./TheHard.vue";
 import MachineName from "./MachineName.vue";
 import DashboardCard from "./DashboardCard.vue";
diff --git a/launcher/src/components/UI/the-control/TheCpu.vue b/launcher/src/components/UI/the-control/TheCpu.vue
deleted file mode 100755
index 732a1beb60..0000000000
--- a/launcher/src/components/UI/the-control/TheCpu.vue
+++ /dev/null
@@ -1,149 +0,0 @@
-<template>
-  <div class="theCpuParent">
-    <div class="cpuContentBox">
-      <div class="cpuIco">
-        <div class="cpuIco-container">
-          <img src="/img/icon/control-page-icons/cpuIcon.svg" />
-        </div>
-        <span>CPU</span>
-      </div>
-      <div class="cpuCountPart">
-        <div class="cpuUsage">
-          <div class="cpuProccessBarCont">
-            <div class="cpuProccessBar">
-              <div class="cpuProccessBar_value_bg">
-                <div class="cpuProccessBar_value" :style="getStyle"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="cpuTemp">
-          <div class="cpuTemp-title">
-            <span>{{ $t("controlPage.usage") }} :</span>
-          </div>
-          <div class="cpuTemp-value">
-            <span>{{ cpu }} %</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { useControlStore } from "@/store/theControl";
-import { computed } from "vue";
-
-const controlStore = useControlStore();
-
-const cpu = computed(() => controlStore.cpu);
-
-const getStyle = computed(() => {
-  return { width: 100 - cpu.value + "%" };
-});
-</script>
-
-<style scoped>
-.theCpuParent {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-}
-.cpuContentBox {
-  width: 100%;
-  height: 100%;
-  display: flex;
-}
-.cpuIco {
-  width: 30%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-.cpuIco-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 80%;
-}
-.cpuIco img {
-  width: 75%;
-  height: 80%;
-}
-.cpuIco span {
-  width: 100%;
-  height: 20%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 60%;
-  font-weight: bold;
-  color: #c1c1c1;
-}
-.cpuCountPart {
-  display: flex;
-  width: 70%;
-  height: 100%;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-.cpuUsage,
-.cpuTemp {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 50%;
-  font-size: 90%;
-  font-weight: bold;
-  color: #eee;
-  color: #c1c1c1;
-  text-transform: uppercase;
-}
-.cpuProccessBarCont {
-  width: 90%;
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  align-items: center;
-}
-.cpuProccessBar {
-  width: 90%;
-  background: #33393e;
-  height: 50%;
-  border: 1px solid #33393e;
-  border-radius: 10px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-shadow: 1px 1px 11px 1px #1f1f1f;
-}
-.cpuProccessBar_value_bg {
-  width: 99%;
-  background-image: linear-gradient(to right, green 35%, yellow, red);
-  height: 88%;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  border-radius: 10px;
-}
-.cpuProccessBar_value {
-  height: 100%;
-  background: #33393e;
-}
-.cpuTemp-title,
-.cpuTemp-value {
-  width: 40%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-</style>