From 60129a578bfb06447e31edebb239bc4d1ed885cd Mon Sep 17 00:00:00 2001
From: Carolina Capetillo <carolinacapetilloc@gmail.com>
Date: Mon, 18 Nov 2024 13:19:24 -0800
Subject: [PATCH 1/3] fixes calendar bug

---
 src/components/Scheduling/Calendar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Scheduling/Calendar.vue b/src/components/Scheduling/Calendar.vue
index eac8b77..ca5f3b9 100644
--- a/src/components/Scheduling/Calendar.vue
+++ b/src/components/Scheduling/Calendar.vue
@@ -25,7 +25,7 @@ onMounted(async () => {
         mode="date"
         is-range
         :min-date="today"
-        :max-date="new Date(currentSemesterEnd)"
+        :max-date="currentSemesterEnd"
         placeholder="Select Dates"
         is-required
         />

From e9b94b6541c1af6a1ccb964c8ff4b32e9a9881ef Mon Sep 17 00:00:00 2001
From: Edward Gomez <edward@gomez.me.uk>
Date: Tue, 19 Nov 2024 08:27:47 +0000
Subject: [PATCH 2/3] Workaround and parsing isoformat

---
 src/components/Scheduling/Calendar.vue | 10 +++++++---
 src/utils/calendarUtils.js             |  8 +++++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/Scheduling/Calendar.vue b/src/components/Scheduling/Calendar.vue
index ca5f3b9..cdde2d9 100644
--- a/src/components/Scheduling/Calendar.vue
+++ b/src/components/Scheduling/Calendar.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref, watch, defineEmits, onMounted } from 'vue'
-import { fetchSemesterData, currentSemesterEnd } from '../../utils/calendarUtils'
+import { fetchSemesterData, currentSemesterEnd, parseISOString } from '../../utils/calendarUtils'
 
 const emits = defineEmits(['updateDateRange'])
 
@@ -25,9 +25,13 @@ onMounted(async () => {
         mode="date"
         is-range
         :min-date="today"
-        :max-date="currentSemesterEnd"
+        :max-date="parseISOString(currentSemesterEnd)"
         placeholder="Select Dates"
         is-required
-        />
+        @dayclick="
+        (_, event) => {
+          event.target.blur();
+        }
+      " />
     </div>
 </template>
diff --git a/src/utils/calendarUtils.js b/src/utils/calendarUtils.js
index 378113b..73270bc 100644
--- a/src/utils/calendarUtils.js
+++ b/src/utils/calendarUtils.js
@@ -4,6 +4,12 @@ import { useConfigurationStore } from '../stores/configuration.js'
 let currentSemesterStart = null
 let currentSemesterEnd = null
 
+function parseISOString (s) {
+  if (s === null) return null
+  const b = s.split(/\D+/)
+  return new Date(Date.UTC(b[0], --b[1], b[2], b[3], b[4], b[5], b[6]))
+}
+
 const getStartAndEndDatesOfCurrentSemester = (semesters) => {
   const today = new Date()
   const currentSemester = semesters.find(semester => {
@@ -30,4 +36,4 @@ const fetchSemesterData = async () => {
   })
 }
 
-export { currentSemesterStart, currentSemesterEnd, fetchSemesterData }
+export { currentSemesterStart, currentSemesterEnd, fetchSemesterData, parseISOString }

From e46af8c3d7cfe4a9c4b8e4c73f714e24f2a7e282 Mon Sep 17 00:00:00 2001
From: Carolina Capetillo <carolinacapetilloc@gmail.com>
Date: Tue, 19 Nov 2024 09:09:37 -0800
Subject: [PATCH 3/3] updates test

---
 .../Scheduling/AdvancedScheduling.vue         |  14 +-
 .../Scheduling/SchedulingSettings.vue         | 146 +++++++++++++-----
 src/components/Views/SchedulingView.vue       |   4 +-
 .../integration/components/calendar.test.js   |  19 ++-
 4 files changed, 130 insertions(+), 53 deletions(-)

diff --git a/src/components/Scheduling/AdvancedScheduling.vue b/src/components/Scheduling/AdvancedScheduling.vue
index 909b0c8..06055af 100644
--- a/src/components/Scheduling/AdvancedScheduling.vue
+++ b/src/components/Scheduling/AdvancedScheduling.vue
@@ -51,8 +51,7 @@ const emitSelections = () => {
 </script>
 
 <template>
-  <h2>Photon Ranch</h2>
-  <h4>Requesting an Observation</h4>
+  <h2>Request an Observation</h2>
 
   <SchedulingSettings
     :show-project-field="true"
@@ -65,16 +64,7 @@ const emitSelections = () => {
 </template>
 
 <style scoped>
-h2 {
-  margin-top: 1em;
-}
-.input-wrapper {
-  margin: 1em;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-}
+
 .p-text {
   margin-right: 1em;
   font-size: 1.2em;
diff --git a/src/components/Scheduling/SchedulingSettings.vue b/src/components/Scheduling/SchedulingSettings.vue
index 712a14d..723645b 100644
--- a/src/components/Scheduling/SchedulingSettings.vue
+++ b/src/components/Scheduling/SchedulingSettings.vue
@@ -2,6 +2,7 @@
 import { ref, reactive, computed, defineProps, defineEmits, onMounted } from 'vue'
 import { useConfigurationStore } from '../../stores/configuration.js'
 import { fetchApiCall } from '../../utils/api.js'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 const props = defineProps({
   showProjectField: {
@@ -145,10 +146,22 @@ onMounted(() => {
 </script>
 
 <template>
-    <div class="container">
+    <div class="columns">
+      <div class="column is-one-third">
       <div v-if="showProjectField" class="input-wrapper">
-        <label for="project-name">Project Name:</label>
-        <input id="project-name" v-model="projectName" class="scheduling-inputs" placeholder="Enter project name" />
+
+        <div class="field is-horizontal">
+          <div class="field-label is-normal">
+              <label for="project-name" class="label">Name</label>
+          </div>
+          <div class="field-body">
+            <div class="field">
+              <div class="control">
+                <input id="project-name" v-model="projectName" class="scheduling-inputs input" type="text" placeholder="Enter a name for your request" />
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
       <!-- Render saved targets and exposures -->
       <div v-if="targetList.length > 1">
@@ -158,50 +171,111 @@ onMounted(() => {
           </div>
         </div>
       </div>
+
+      <!-- Target input -->
+      <div v-if="showTitleField" class="input-wrapper">
+        <div class="field is-horizontal">
+          <div class="field-label is-normal">
+              <label for="target-list" class="label">Target</label>
+          </div>
+          <div class="field-body">
+            <div class="field">
+              <div class="control">
+                <input
+                  id="target-list"
+                  v-model="targetList[activeTargetIndex].name"
+                  @blur="getRaDecFromTargetName"
+                  :disabled="!targetEnabled"
+                  :readonly="isTargetConfirmed"
+                  class="scheduling-inputs input"
+                  placeholder="Enter target"
+                />
+                </div>
+              </div>
+            </div>
+        </div>
+        <p v-if="targetError" class="error-text">{{ targetError }}</p>
+        <div class="field is-horizontal">
+          <div class="field-label is-normal">
+            <label class="label">RA</label>
+          </div>
+          <div class="field-body">
+            <div class="field">
+              <div class="control">
+                <input type="text" v-model="targetList[activeTargetIndex].ra" class="scheduling-inputs input" readonly disabled/>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="field is-horizontal">
+          <div class="field-label is-normal">
+            <label class="label">Dec</label>
+          </div>
+          <div class="field-body">
+            <div class="field">
+              <div class="control">
+                <input type="text" v-model="targetList[activeTargetIndex].dec" class="scheduling-inputs input" readonly disabled/>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <v-btn v-if="props.showTitleField" @click="addTarget" color="indigo" :disabled="!addTargetEnabled" class="add-target">Add Another Target</v-btn>
+    </div>
+    <div class="column is-one-third">
       <!-- Render saved exposures for the active target -->
       <div v-if="targetList[activeTargetIndex].exposures.length > 0">
-        <div>
+        <div class="highlight-box">
+          <FontAwesomeIcon icon="fa-regular fa-camera-retro" />
           {{ targetList[activeTargetIndex].name || props.target }}: {{ formatExposures(targetList[activeTargetIndex].exposures) }}
         </div>
       </div>
-      <!-- Target input -->
-      <div v-if="showTitleField" class="input-wrapper">
-        <label for="target-list">Target:</label>
-        <input
-          id="target-list"
-          v-model="targetList[activeTargetIndex].name"
-          @blur="getRaDecFromTargetName"
-          :disabled="!targetEnabled"
-          :readonly="isTargetConfirmed"
-          class="scheduling-inputs"
-          placeholder="Enter target"
-        />
-        <p v-if="targetError" class="error-text">{{ targetError }}</p>
-        <label>RA:</label>
-        <input type="text" v-model="targetList[activeTargetIndex].ra" class="scheduling-inputs" readonly disabled/>
-        <label>Dec:</label>
-        <input type="text" v-model="targetList[activeTargetIndex].dec" class="scheduling-inputs" readonly disabled/>
-      </div>
+
       <!-- Exposure settings -->
-      <div class="exposure-settings" :class="{ disabled: !exposureEnabled }">
-        <div class="select is-fullwidth">
-          <select id="filter" v-model="settings.filter" :disabled="(!isTargetConfirmed && props.showProjectField) || !exposureEnabled">
-            <option disabled value="">Choose a filter</option>
-              <option v-for="filter in filterList" :key="filter.code" :value="filter.code">
-                {{ filter.name }}
-              </option>
-          </select>
+
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">Filter</label>
         </div>
-        <div class="field is-horizontal">
-          <label>Exposure Time</label>
-          <input type="text" v-model="settings.exposureTime" :disabled="!exposureEnabled" placeholder="Exp time" />
-          <label>Count</label>
-          <input type="text" v-model="settings.count" :disabled="!exposureEnabled" placeholder="Count" />
+        <div class="field-body">
+          <div class="field is-narrow">
+            <div class="control" :class="{ disabled: !exposureEnabled }">
+              <div class="select is-fullwidth">
+                <select id="filter" v-model="settings.filter" :disabled="(!isTargetConfirmed && props.showProjectField) || !exposureEnabled">
+                  <option disabled value="">Choose a filter</option>
+                    <option v-for="filter in filterList" :key="filter.code" :value="filter.code">
+                      {{ filter.name }}
+                    </option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">Exposure</label>
+        </div>
+        <div class="field-body">
+          <div class="field is-narrow">
+            <p class="control is-expanded">
+              <input id="exposureTime" type="number" class="input" v-model="settings.exposureTime" :disabled="!exposureEnabled" placeholder="Seconds">
+            </p>
+            <p class="help is-danger" v-if="!isExposureTimeValid">{{ exposureError }}</p>
+          </div>
+          <div class="times">
+            <FontAwesomeIcon icon="fa-solid fa-xmark" />
+          </div>
+          <div class="field is-narrow">
+            <p class="control is-expanded">
+              <input id="exposureCount" type="number" class="input" v-model="settings.count" :disabled="!exposureEnabled" value="1">
+            </p>
+          </div>
         </div>
       </div>
       <!-- Add exposure button -->
       <v-btn @click="addExposure" color="indigo" :disabled="!addExposuresEnabled" class="add-exposure">Add Exposure</v-btn>
       <!-- Add another target button -->
-      <v-btn v-if="props.showTitleField" @click="addTarget" color="indigo" :disabled="!addTargetEnabled" class="add-target">Add Another Target</v-btn>
+    </div>
     </div>
 </template>
diff --git a/src/components/Views/SchedulingView.vue b/src/components/Views/SchedulingView.vue
index 38b35dd..3456c56 100644
--- a/src/components/Views/SchedulingView.vue
+++ b/src/components/Views/SchedulingView.vue
@@ -135,6 +135,7 @@ const enableButton = computed(() => {
 </script>
 
 <template>
+  <section class="section  highlight">
   <div class="container">
     <div v-if="!level && !showScheduled" class="level-buttons-wrapper">
       <h2>Submit a Request</h2>
@@ -155,7 +156,8 @@ const enableButton = computed(() => {
     <div v-if="showScheduled">
       <ScheduledObservations />
     </div>
-  </div>
+    </div>
+  </section>
 </template>
 
 <style scoped>
diff --git a/src/tests/integration/components/calendar.test.js b/src/tests/integration/components/calendar.test.js
index b99d46e..a1ec0fb 100644
--- a/src/tests/integration/components/calendar.test.js
+++ b/src/tests/integration/components/calendar.test.js
@@ -4,10 +4,21 @@ import Calendar from '../../../components/Scheduling/Calendar.vue'
 import { fetchSemesterData, currentSemesterEnd } from '../../../utils/calendarUtils'
 import flushPromises from 'flush-promises'
 
-vi.mock('../../../utils/calendarUtils', () => ({
-  fetchSemesterData: vi.fn(),
-  currentSemesterEnd: '2024-08-01T12:00:00Z'
-}))
+// Partially mock the calendarUtils module
+// The terminal suggested using 'importOriginal' to do a partial mock.
+// This is necessary because we want to mock some exports (like 'fetchSemesterData' and 'currentSemesterEnd')
+// while keeping other exports (like 'parseISOString') unchanged and available.
+// 'importOriginal' represents the original module with all its exports.
+// Using 'actual' will hold all original exports, then spread them to preserve the original functionality.
+vi.mock('../../../utils/calendarUtils', async (importOriginal) => {
+  const actual = await importOriginal()
+  return {
+    // Include all original exports
+    ...actual,
+    fetchSemesterData: vi.fn(),
+    currentSemesterEnd: '2024-08-01T12:00:00Z'
+  }
+})
 
 describe('Calendar.vue', () => {
   let wrapper