From 4b61e61af79e1e1a58ae051555be75bfe9a9830d Mon Sep 17 00:00:00 2001
From: Rukmini Bose <rukmini.bose15@gmail.com>
Date: Tue, 13 Feb 2024 13:37:08 -0800
Subject: [PATCH] Initial changes to refactor Time Conductor

---
 src/plugins/timeConductor/TimePopupFixed.vue | 24 ++++----
 src/plugins/timeConductor/conductor.scss     | 58 +++++++++++++++++++-
 2 files changed, 71 insertions(+), 11 deletions(-)

diff --git a/src/plugins/timeConductor/TimePopupFixed.vue b/src/plugins/timeConductor/TimePopupFixed.vue
index 3eb1912424..e357073010 100644
--- a/src/plugins/timeConductor/TimePopupFixed.vue
+++ b/src/plugins/timeConductor/TimePopupFixed.vue
@@ -1,14 +1,16 @@
 <template>
   <form ref="fixedDeltaInput">
     <div class="c-tc-input-popup__input-grid">
-      <div class="pr-time-label"><em>Start</em> Date</div>
-      <div class="pr-time-label">Time</div>
-      <div class="pr-time-label"></div>
-      <div class="pr-time-label"><em>End</em> Date</div>
-      <div class="pr-time-label">Time</div>
-      <div class="pr-time-label"></div>
+      <div class="pr-time-label pr-time-label-start-date"><em>Start</em> Date</div>
+      <div class="pr-time-label pr-time-label-start-time">Time</div>
+      <div class="pr-time-label pr-time-label-blank-grid"></div>
+      <div class="pr-time-label pr-time-label-end-date"><em>End</em> Date</div>
+      <div class="pr-time-label pr-time-label-end-time">Time</div>
+      <div class="pr-time-label pr-time-label-blank-grid"></div>
 
-      <div class="pr-time-input pr-time-input--date pr-time-input--input-and-button">
+      <div
+        class="pr-time-input pr-time-input--date pr-time-input--input-and-button pr-time-input-start-date"
+      >
         <input
           ref="startDate"
           v-model="formattedBounds.start"
@@ -28,7 +30,7 @@
         />
       </div>
 
-      <div class="pr-time-input pr-time-input--time">
+      <div class="pr-time-input pr-time-input--time pr-time-input-start-time">
         <input
           ref="startTime"
           v-model="formattedBounds.startTime"
@@ -43,7 +45,9 @@
 
       <div class="pr-time-input pr-time-input__start-end-sep icon-arrows-right-left"></div>
 
-      <div class="pr-time-input pr-time-input--date pr-time-input--input-and-button">
+      <div
+        class="pr-time-input pr-time-input--date pr-time-input--input-and-button pr-time-input-end-date"
+      >
         <input
           ref="endDate"
           v-model="formattedBounds.end"
@@ -63,7 +67,7 @@
         />
       </div>
 
-      <div class="pr-time-input pr-time-input--time">
+      <div class="pr-time-input pr-time-input--time pr-time-input-end-time">
         <input
           ref="endTime"
           v-model="formattedBounds.endTime"
diff --git a/src/plugins/timeConductor/conductor.scss b/src/plugins/timeConductor/conductor.scss
index cb6f4a8b07..79fd53b3fd 100644
--- a/src/plugins/timeConductor/conductor.scss
+++ b/src/plugins/timeConductor/conductor.scss
@@ -605,9 +605,65 @@
         }
     }
 
+    .pr-time-label-start-date{
+        background: red;
+        grid-area: head;
+    }
+    .pr-time-label-start-time{
+        background: red;
+        grid-area: headd;
+    }
+    .pr-time-input-start-date{
+        background: blue;
+        grid-area: headdd;
+    }
+    .pr-time-input-start-time{
+        background: blue;
+        grid-area: inputStartTime;
+    }
+
+    .icon-arrows-right-left{
+        background: green;
+        grid-area: arrowIcon;
+    }
+    .pr-time-label-end-date{
+        background: red;
+        grid-area: endDate;
+    }
+    .pr-time-label-end-time{
+        background: red;
+        grid-area: endTime;
+
+    }
+    .pr-time-input-end-date{
+        background: blue;
+        grid-area: inputEndDate;
+    }
+    .pr-time-input-end-time{
+        background: blue;
+        grid-area: inputEndTime;
+    }
+    .pr-time-input--buttons{
+        background: purple;
+        grid-area: buttons;
+    }
+    .pr-time-label-blank-grid{
+        background: yellow;
+        grid-area: blankSpace;
+    }
+
     &--fixed-mode {
         .c-tc-input-popup__input-grid {
-            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 2fr;
+            // grid-template-columns: 1fr 1fr 1fr 1fr 1fr 2fr;
+            grid-template-rows: 50px 1fr 30px;
+            grid-template-columns: 150px 1fr;
+            // grid-template-areas: 
+            //     "start_date start_time blank-space end_date end_time blank-space"
+            //     "input_start_date input_start_time arrow_icon input_end_date input_end_time buttons";
+            grid-template-areas: 
+               "head headd headdd";
+
+
         }
     }