From 55e047e71c70b30042bffcdd646ed4ae955a43e4 Mon Sep 17 00:00:00 2001
From: Cees Voesenek <cees.voesenek@vortech.nl>
Date: Mon, 24 Jun 2024 13:47:08 +0200
Subject: [PATCH] Split screen vertically for time series tables

---
 .../spatialdisplay/SpatialDisplay.vue         | 35 ++++++++++++++++---
 src/router/index.ts                           |  2 +-
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/components/spatialdisplay/SpatialDisplay.vue b/src/components/spatialdisplay/SpatialDisplay.vue
index 66371153..65a89972 100644
--- a/src/components/spatialdisplay/SpatialDisplay.vue
+++ b/src/components/spatialdisplay/SpatialDisplay.vue
@@ -1,6 +1,15 @@
 <template>
-  <div class="container">
-    <div class="child-container" :class="{ 'd-none': hideMap }">
+  <div
+    class="container"
+    :class="{ 'vertical-split': route.meta.useVerticalSplit }"
+  >
+    <div
+      class="child-container"
+      :class="{
+        'd-none': hideMap,
+        'vertical-split': route.meta.useVerticalSplit,
+      }"
+    >
       <SpatialDisplayComponent
         :layer-name="props.layerName"
         :location-id="props.locationId"
@@ -16,7 +25,11 @@
         @coordinate-click="onCoordinateClick"
       ></SpatialDisplayComponent>
     </div>
-    <div v-if="filter" class="child-container">
+    <div
+      v-if="filter"
+      class="child-container"
+      :class="{ 'vertical-split': route.meta.useVerticalSplit }"
+    >
       <router-view
         @close="closeTimeSeriesDisplay"
         :filter="filter"
@@ -275,12 +288,14 @@ watch(
   height: 100%;
 }
 
+.container.vertical-split {
+  flex-direction: column;
+}
+
 .child-container {
   position: relative;
   display: flex;
   flex-direction: column;
-  width: 50%;
-  max-width: 100%;
   flex: 1 1 0px;
 }
 
@@ -288,4 +303,14 @@ watch(
   height: 100%;
   width: 100%;
 }
+
+.child-container:not(.vertical-split) {
+  width: 50%;
+  max-width: 100%;
+}
+
+.child-container.vertical-split {
+  height: 50%;
+  max-height: 100%;
+}
 </style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 6f6886f9..0b8fe98e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -199,7 +199,7 @@ export const dynamicRoutes: Readonly<RouteRecordRaw[]> = [
             name: 'SpatialTableDisplay',
             component: SpatialTableDisplay,
             props: true,
-            meta: { sidebar: true },
+            meta: { sidebar: true, useVerticalSplit: true },
           },
         ],
       },