Merge branch 'development' of https://github.com/COS301-SE-2023/Blue-…

…Skies into development
COS301-SE-2023 · Oct 25, 2023 · 77d05a0 · 77d05a0
2 parents 383da23 + a1cbf8d
commit 77d05a0
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 9 deletions.
diff --git a/src/apps/blazor-app/Components/Advanced/BuildYourHome.razor b/src/apps/blazor-app/Components/Advanced/BuildYourHome.razor
@@ -221,7 +221,7 @@
         <div class="flex justify-between gap-4 w-full scale-75">
             @if (systems.Count > 0)
             {
-                <div class="flex flex-col w-full -mt-16 justify-center items-center gap-4">
+                <div class="flex flex-col w-full -mt-28 justify-center items-center gap-4">
                     <div class="mb-2 w-full flex flex-col">
                         <div @onclick='@(() => CustomSystemModal("Panels"))'>
                             <Appliance css="scale-90 hover:shadow transition-all duration-300 hover:-translate-y-1" imageName="SolarPanels.svg" name="Number of Panels"count="@systems[selectedSystem].numberOfPanels" />
@@ -255,28 +255,38 @@
                 <BatterySkeleton />
             }
         </div>
-        <div class="has-tooltip">
+        <div class="has-tooltip -mt-8">
             <Tooltip pointer="48" direction="left" translateX="-105">
                 <p>@tooltipService.GetTooltip("running hours on batteries")</p>
             </Tooltip>
             <h3 class="font-medium text-lg text-primary-900 text-left">Running Hours on Batteries</h3>
         </div>
-        <div class="flex relative flex-col justify-center w-full has-tooltip">
             <DaylightChart hours="@dlh" daylightHours="@daylight" concurrent="concurrentRuntime"/>
-            <div class="flex w-full justify-center absolute top-1/2 left-0 items-center gap-1 mt-5">
+        <div class="flex relative flex-row justify-center w-full has-tooltip">
+            <div class="flex flex-row w-full justify-center items-center gap-1">
                 @if(float.IsInfinity(dlh) || dlh == 99) {
                     string hexColor = calculationDataHandler.GetColorGradient(99);
-                    @* ToDo: Implement the hexColor Here too *@
-
+                    <div class=" h-3 w-3 rounded-md" style="background-color: @hexColor;"></div>
                     <p class="text-5xl text-primary-900 font-semibold">99+</p>
                 } else {
-                    string hexColor = calculationDataHandler.GetColorGradient(99);
-                    @* ToDo: Implement the hexColor Here too *@
-
+                    string hexColor = calculationDataHandler.GetColorGradient(dlh);
+                    <div class=" h-3 w-3 rounded-md" style="background-color: @hexColor;"></div>
                     <p class="text-5xl text-primary-900 font-semibold">@dlh</p>
                 }
                 <p class="text-5xl text-gray-400 font-bold">h</p>
             </div>
+            <div class="flex flex-row w-full justify-center items-center gap-1">
+                @if(float.IsInfinity(concurrentRuntime) || dlh == 99) {
+                    string hexColorConcurrent = calculationDataHandler.GetColorGradient(99, 4);
+                    <div class=" h-3 w-3 rounded-md" style="background-color: @hexColorConcurrent;"></div>
+                    <p class="text-5xl text-primary-900 font-semibold">99+</p>
+                } else {
+                    string hexColorConcurrent = calculationDataHandler.GetColorGradient(concurrentRuntime, 4);
+                    <div class=" h-3 w-3 rounded-md" style="background-color: @hexColorConcurrent;"></div>
+                    <p class="text-5xl text-primary-900 font-semibold">@concurrentRuntime</p>
+                }
+                <p class="text-5xl text-gray-400 font-bold">h</p>
+            </div>
         </div>
     </div>
 </div>

diff --git a/src/apps/blazor-app/wwwroot/css/app.css b/src/apps/blazor-app/wwwroot/css/app.css
@@ -1493,6 +1493,18 @@ video {
   max-height: 24rem;
 }
 
+.max-h-32 {
+  max-height: 8rem;
+}
+
+.max-h-6 {
+  max-height: 1.5rem;
+}
+
+.max-h-60 {
+  max-height: 15rem;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -4489,6 +4501,18 @@ html {
     width: 100%;
   }
 
+  .md\:w-24 {
+    width: 6rem;
+  }
+
+  .md\:w-\[360px\] {
+    width: 360px;
+  }
+
+  .md\:w-\[470px\] {
+    width: 470px;
+  }
+
   .md\:flex-shrink-0 {
     flex-shrink: 0;
   }