From f9b95d943c37d8bebf433716e7fbc4c8da42fecb Mon Sep 17 00:00:00 2001
From: Kagameow <kagami.404@gmail.com>
Date: Thu, 18 Jul 2024 15:57:20 +0200
Subject: [PATCH] updated info pages to be reactive

---
 src/views/AgricultureView.vue           | 40 ++++++++++++++++++-----
 src/views/CityView.vue                  | 40 ++++++++++++++++++-----
 src/views/EnergyGridView.vue            | 40 ++++++++++++++++++-----
 src/views/HealthView.vue                | 42 ++++++++++++++++++++-----
 src/views/home-view/HomeViewDesktop.vue |  1 +
 5 files changed, 134 insertions(+), 29 deletions(-)

diff --git a/src/views/AgricultureView.vue b/src/views/AgricultureView.vue
index 1652e3e..9ddb822 100644
--- a/src/views/AgricultureView.vue
+++ b/src/views/AgricultureView.vue
@@ -5,6 +5,7 @@ import {
   agricultureGraph,
 } from '@/constants/agriculture-page';
 import AppFlowChart from '@/components/AppFlowChart.vue';
+import AppCardSelector from '@/components/AppCardSelector.vue';
 </script>
 
 <template>
@@ -21,6 +22,7 @@ import AppFlowChart from '@/components/AppFlowChart.vue';
     <AppFlowChart
       :nodes="agricultureGraph.nodes"
       :edges="agricultureGraph.edges"
+      class="agriculture-view__flow-chart"
     />
     <section class="card-section">
       <AppCard
@@ -31,6 +33,10 @@ import AppFlowChart from '@/components/AppFlowChart.vue';
         :cube-variant="card.type"
       />
     </section>
+    <AppCardSelector
+      class="agriculture-view__card-selector"
+      :cards="agricultureCards"
+    />
   </div>
 </template>
 
@@ -41,15 +47,35 @@ import AppFlowChart from '@/components/AppFlowChart.vue';
   height: 100%;
   align-items: center;
   justify-content: space-between;
+  flex-direction: column;
+
+  @media (--breakpoint-desktop) {
+    flex-direction: row;
+    gap: 20px;
+  }
+}
+
+.agriculture-view__flow-chart {
+  min-height: 400px;
 }
 
 .card-section {
-  display: flex;
-  flex-direction: column;
-  gap: 100px;
-  width: fit-content;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
+  display: none;
+
+  @media (--breakpoint-desktop) {
+    display: flex;
+    flex-direction: column;
+    gap: 100px;
+    width: fit-content;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.agriculture-view__card-selector {
+  @media (--breakpoint-desktop) {
+    display: none;
+  }
 }
 </style>
diff --git a/src/views/CityView.vue b/src/views/CityView.vue
index 1cc34aa..258e54a 100644
--- a/src/views/CityView.vue
+++ b/src/views/CityView.vue
@@ -2,6 +2,7 @@
 import AppCard from '@/components/AppCard.vue';
 import { cityCards, cityGraph } from '@/constants/city-page';
 import AppFlowChart from '@/components/AppFlowChart.vue';
+import AppCardSelector from '@/components/AppCardSelector.vue';
 </script>
 
 <template>
@@ -18,6 +19,7 @@ import AppFlowChart from '@/components/AppFlowChart.vue';
     <AppFlowChart
       :nodes="cityGraph.nodes"
       :edges="cityGraph.edges"
+      class="city-view__flow-chart"
     />
     <section class="card-section">
       <AppCard
@@ -28,6 +30,10 @@ import AppFlowChart from '@/components/AppFlowChart.vue';
         :cube-variant="card.type"
       />
     </section>
+    <AppCardSelector
+      class="city-view__card-selector"
+      :cards="cityCards"
+    />
   </div>
 </template>
 
@@ -38,15 +44,35 @@ import AppFlowChart from '@/components/AppFlowChart.vue';
   height: 100%;
   align-items: center;
   justify-content: space-between;
+  flex-direction: column;
+
+  @media (--breakpoint-desktop) {
+    flex-direction: row;
+    gap: 20px;
+  }
+}
+
+.city-view__flow-chart {
+  min-height: 400px;
 }
 
 .card-section {
-  display: flex;
-  flex-direction: column;
-  gap: 100px;
-  width: fit-content;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
+  display: none;
+
+  @media (--breakpoint-desktop) {
+    display: flex;
+    flex-direction: column;
+    gap: 100px;
+    width: fit-content;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.city-view__card-selector {
+  @media (--breakpoint-desktop) {
+    display: none;
+  }
 }
 </style>
diff --git a/src/views/EnergyGridView.vue b/src/views/EnergyGridView.vue
index eadb062..75a0482 100644
--- a/src/views/EnergyGridView.vue
+++ b/src/views/EnergyGridView.vue
@@ -2,6 +2,7 @@
 import AppCard from '@/components/AppCard.vue';
 import { energyGridCards, energyGridGraph } from '@/constants/energy-grid-page';
 import AppFlowChart from '@/components/AppFlowChart.vue';
+import AppCardSelector from '@/components/AppCardSelector.vue';
 </script>
 
 <template>
@@ -18,6 +19,7 @@ import AppFlowChart from '@/components/AppFlowChart.vue';
     <AppFlowChart
       :nodes="energyGridGraph.nodes"
       :edges="energyGridGraph.edges"
+      class="energy-grid-view__flow-chart"
     />
     <section class="card-section">
       <AppCard
@@ -28,6 +30,10 @@ import AppFlowChart from '@/components/AppFlowChart.vue';
         :cube-variant="card.type"
       />
     </section>
+    <AppCardSelector
+      class="energy-grid-view__card-selector"
+      :cards="energyGridCards"
+    />
   </div>
 </template>
 
@@ -38,15 +44,35 @@ import AppFlowChart from '@/components/AppFlowChart.vue';
   height: 100%;
   align-items: center;
   justify-content: space-between;
+  flex-direction: column;
+
+  @media (--breakpoint-desktop) {
+    flex-direction: row;
+    gap: 20px;
+  }
+}
+
+.energy-grid-view__flow-chart {
+  min-height: 400px;
 }
 
 .card-section {
-  display: flex;
-  flex-direction: column;
-  gap: 100px;
-  width: fit-content;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
+  display: none;
+
+  @media (--breakpoint-desktop) {
+    display: flex;
+    flex-direction: column;
+    gap: 100px;
+    width: fit-content;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.energy-grid-view__card-selector {
+  @media (--breakpoint-desktop) {
+    display: block;
+  }
 }
 </style>
diff --git a/src/views/HealthView.vue b/src/views/HealthView.vue
index aaec622..4f3d03b 100644
--- a/src/views/HealthView.vue
+++ b/src/views/HealthView.vue
@@ -2,6 +2,7 @@
 import AppCard from '@/components/AppCard.vue';
 import { healthCards, healthGraph } from '@/constants/health-page';
 import AppFlowChart from '@/components/AppFlowChart.vue';
+import AppCardSelector from '@/components/AppCardSelector.vue';
 </script>
 
 <template>
@@ -18,6 +19,7 @@ import AppFlowChart from '@/components/AppFlowChart.vue';
     <AppFlowChart
       :nodes="healthGraph.nodes"
       :edges="healthGraph.edges"
+      class="health-view__flow-chart"
     />
     <section class="card-section">
       <AppCard
@@ -28,25 +30,49 @@ import AppFlowChart from '@/components/AppFlowChart.vue';
         :cube-variant="card.type"
       />
     </section>
+    <AppCardSelector
+      class="health-view__card-selector"
+      :cards="healthCards"
+    />
   </div>
 </template>
 
 <style scoped>
 .health-view {
   display: flex;
-  gap: 20px;
+  gap: 40px;
   height: 100%;
   align-items: center;
   justify-content: space-between;
+  flex-direction: column;
+
+  @media (--breakpoint-desktop) {
+    flex-direction: row;
+    gap: 20px;
+  }
+}
+
+.health-view__flow-chart {
+  min-height: 400px;
 }
 
 .card-section {
-  display: flex;
-  flex-direction: column;
-  gap: 100px;
-  width: fit-content;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
+  display: none;
+
+  @media (--breakpoint-desktop) {
+    display: flex;
+    flex-direction: column;
+    gap: 100px;
+    width: fit-content;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.health-view__card-selector {
+  @media (--breakpoint-desktop) {
+    display: none;
+  }
 }
 </style>
diff --git a/src/views/home-view/HomeViewDesktop.vue b/src/views/home-view/HomeViewDesktop.vue
index bd806ea..ce85461 100644
--- a/src/views/home-view/HomeViewDesktop.vue
+++ b/src/views/home-view/HomeViewDesktop.vue
@@ -89,6 +89,7 @@ const { industry, energyGrid, city, agriculture, health } = customerCards;
   }
 
   @media (--breakpoint-desktop) {
+    gap: 1rem;
     flex-direction: row;
   }
 }