From 7ca89abaf68660dbc071de773b3cae8d709a01ca Mon Sep 17 00:00:00 2001
From: mabasian <54101509+mabasian@users.noreply.github.com>
Date: Wed, 18 Sep 2024 17:21:28 +0200
Subject: [PATCH] ADD: alert box added to the new control

---
 launcher/public/output.css                    |  5 +++
 .../UI/control-page/ControlScreen.vue         |  2 +
 .../components/alert}/ControlAlert.vue        | 40 +++++++++----------
 .../components/widgets/VolumeWidget.vue       | 18 +++++++++
 .../UI/control-page/sections/AlertSection.vue |  8 ++--
 .../control-page/sections/CommonSidebar.vue   |  7 ++--
 .../UI/the-control/ControlScreen.vue          |  2 +-
 7 files changed, 51 insertions(+), 31 deletions(-)
 rename launcher/src/components/UI/{the-control => control-page/components/alert}/ControlAlert.vue (98%)
 create mode 100644 launcher/src/components/UI/control-page/components/widgets/VolumeWidget.vue

diff --git a/launcher/public/output.css b/launcher/public/output.css
index 059694f49f..ba2a6d039f 100755
--- a/launcher/public/output.css
+++ b/launcher/public/output.css
@@ -4205,6 +4205,11 @@ video {
   background-color: rgb(248 113 113 / var(--tw-bg-opacity));
 }
 
+.bg-yellow-500{
+  --tw-bg-opacity: 1;
+  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-80{
   --tw-bg-opacity: 0.8;
 }
diff --git a/launcher/src/components/UI/control-page/ControlScreen.vue b/launcher/src/components/UI/control-page/ControlScreen.vue
index a234f8b18e..89505831e9 100644
--- a/launcher/src/components/UI/control-page/ControlScreen.vue
+++ b/launcher/src/components/UI/control-page/ControlScreen.vue
@@ -3,6 +3,7 @@
     <div class="Control-screen w-full h-full grid grid-cols-24 grid-rows-12 items-center bg-[#242529]">
       <ControlHeader />
       <CommonSidebar />
+      <AlertSection />
     </div>
   </base-layout>
 </template>
@@ -10,6 +11,7 @@
 <script setup>
 import ControlHeader from "./sections/ControlHeader.vue";
 import CommonSidebar from "./sections/CommonSidebar.vue";
+import AlertSection from "./sections/AlertSection.vue";
 </script>
 <style scoped>
 .Control-screen {
diff --git a/launcher/src/components/UI/the-control/ControlAlert.vue b/launcher/src/components/UI/control-page/components/alert/ControlAlert.vue
similarity index 98%
rename from launcher/src/components/UI/the-control/ControlAlert.vue
rename to launcher/src/components/UI/control-page/components/alert/ControlAlert.vue
index d7e0d43f7a..e459dbf797 100755
--- a/launcher/src/components/UI/the-control/ControlAlert.vue
+++ b/launcher/src/components/UI/control-page/components/alert/ControlAlert.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="alert-box_parent">
+  <div class="alert-box_parent rounded-md">
     <div class="alert-box">
-      <div class="alert-box_header h-8 w-full flex justify-center items-center">
+      <div class="alert-box_header h-7 w-full flex justify-center items-center">
         <div class="alert-box_icons border border-gray-600 rounded-md bg-[#151618] w-3/4 h-full flex justify-start items-center pt-0.5">
           <div
             class="icon_alarm"
@@ -31,7 +31,7 @@
             <img src="/img/icon/node-alert-icons/alert-general-red.png" alt="green" />
           </div>
         </div>
-        <div class="status-box_vol-state w-1/4 h-full flex justify-center items-center">
+        <div class="status-box_vol-state w-1/4 h-full flex justify-center items-center ml-1">
           <div class="volBtn cursor-pointer w-8" @click="volToggle">
             <img
               :src="volState ? '/img/icon/node-alert-icons/alert-settings.png' : '/img/icon/node-alert-icons/alert-settings-mute.png'"
@@ -666,24 +666,22 @@ export default {
   right: 0 !important;
 }
 .alert-box_parent {
-  width: 161px;
-  max-height: 333px;
-  height: 333px;
-  border-radius: 15px;
+  width: 100%;
+  max-height: 100%;
+  height: 100%;
   background-color: #264744;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 10px 5px;
+
   position: relative;
-  box-shadow: 0px 0px 5px 2px #001717;
   cursor: default;
 }
 .alert-box {
   display: flex;
-  height: 330px;
-  justify-content: space-between;
+  height: 100%;
+  width: 100%;
   align-items: center;
   flex-direction: column;
   padding: 5px;
@@ -731,9 +729,9 @@ export default {
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  width: 140px;
-  max-height: 338px;
-  height: 338px;
+  width: 100%;
+
+  height: 92%;
   background: #23272a;
   border: 1px solid #707070;
   border-radius: 5px;
@@ -746,7 +744,7 @@ export default {
   justify-content: space-between;
   align-items: center;
   width: 95%;
-  height: 13%;
+  height: 9%;
   background: #ffd924;
   border: 1px solid #707070;
   border-radius: 5px;
@@ -758,7 +756,7 @@ export default {
   justify-content: space-between;
   align-items: center;
   width: 95%;
-  height: 13%;
+  height: 9%;
   background: rgb(173, 7, 7);
   border: 1px solid #707070;
   border-radius: 5px;
@@ -771,7 +769,7 @@ export default {
   justify-content: space-between;
   align-items: center;
   width: 95%;
-  height: 13%;
+  height: 9%;
   background: #5f7e6a;
   border: 1px solid #707070;
   border-radius: 5px;
@@ -782,15 +780,15 @@ export default {
 }
 
 .icon-box {
-  width: 28%;
-  height: 95%;
+  width: 25%;
+  height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .icon-box img {
-  width: 95%;
-  height: 99%;
+  width: 1.5rem;
+  height: 1.5rem;
 }
 .message-box {
   width: 90%;
diff --git a/launcher/src/components/UI/control-page/components/widgets/VolumeWidget.vue b/launcher/src/components/UI/control-page/components/widgets/VolumeWidget.vue
new file mode 100644
index 0000000000..6af630f886
--- /dev/null
+++ b/launcher/src/components/UI/control-page/components/widgets/VolumeWidget.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="volume-Parent flex w-full h-full justify-center items-center">
+    <div class="volume-Ico w-1/3 h-full flex flex-col justify-center items-center">
+      <div class="volume-Ico-container flex justify-center items-center w-full h-4/5">
+        <img class="w-3/4" src="/img/icon/control-page-icons/hdd.svg" />
+      </div>
+      <span class="w-full h-1/5 flex justify-center items-center text-gray-200 text-2xs font-semibold uppercase">volume</span>
+    </div>
+    <div class="volume-box w-2/3 h-full flex flex-col justify-center items-center p-1">
+      <div class="volume_services w-full h-2/3 flex rounded-md border border-gray-500"></div>
+      <div class="hdd-services w-full h-1/3 flex"></div>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style scoped></style>
diff --git a/launcher/src/components/UI/control-page/sections/AlertSection.vue b/launcher/src/components/UI/control-page/sections/AlertSection.vue
index 8eea9cd390..f707639e31 100644
--- a/launcher/src/components/UI/control-page/sections/AlertSection.vue
+++ b/launcher/src/components/UI/control-page/sections/AlertSection.vue
@@ -1,11 +1,9 @@
 <template>
-  <div class="w-full h-full col-start-7 col-end-10 grid-cols-5 grid-rows-12 items-center">
-    <AlertHeader />
-    <AlertBody />
+  <div class="w-full h-full col-start-7 col-end-10 row-start-2 row-span-full flex justify-center items-center pt-2 pb-2">
+    <ControlAlert />
   </div>
 </template>
 
 <script setup>
-import AlertBody from "../components/alert/AlertBody.vue";
-import AlertHeader from "../components/alert/AlertHeader.vue";
+import ControlAlert from "../components/alert/ControlAlert.vue";
 </script>
diff --git a/launcher/src/components/UI/control-page/sections/CommonSidebar.vue b/launcher/src/components/UI/control-page/sections/CommonSidebar.vue
index 5c9e72dede..fedf30dc63 100644
--- a/launcher/src/components/UI/control-page/sections/CommonSidebar.vue
+++ b/launcher/src/components/UI/control-page/sections/CommonSidebar.vue
@@ -1,9 +1,7 @@
 <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-15 items-center bg-red-600 gap-1 p-1"
-  >
+  <div 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 gap-1 p-1">
     <WidgetCard class="info-widget col-start-1 col-span-6 row-start-1 row-span-3"><InfoWidget /></WidgetCard>
-    <WidgetCard class="info-widget col-start-1 col-span-6 row-start-4 row-span-3" />
+    <WidgetCard class="info-widget col-start-1 col-span-6 row-start-4 row-span-3"><VolumeWidget /></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>
@@ -16,4 +14,5 @@ import TheNetwork from "../components/widgets/TheNetwork.vue";
 import TheRam from "../components/widgets/TheRam.vue";
 import TheCpu from "../components/widgets/TheCpu.vue";
 import InfoWidget from "../components/widgets/InfoWidget.vue";
+import VolumeWidget from "../components/widgets/VolumeWidget.vue";
 </script>
diff --git a/launcher/src/components/UI/the-control/ControlScreen.vue b/launcher/src/components/UI/the-control/ControlScreen.vue
index 6499a7b443..9fdbd9b160 100644
--- a/launcher/src/components/UI/the-control/ControlScreen.vue
+++ b/launcher/src/components/UI/the-control/ControlScreen.vue
@@ -134,7 +134,7 @@ import LogsSection from "../node-page/sections/LogsSection.vue";
 import { useStateHandler } from "@/composables/services";
 import ControlDashboard from "./ControlDashboard.vue";
 import ControlPlugins from "./ControlPlugins.vue";
-import ControlAlert from "./ControlAlert.vue";
+import ControlAlert from "../control-page/components/alert/ControlAlert.vue";
 import { saveAs } from "file-saver";
 import ExpertWindow from "../node-page/sections/ExpertWindow.vue";
 import { useServices } from "@/store/services";