Merge pull request #101 from LCOGT/update/formattime

Update/formattime

src/components/Dashboard/ObservationList.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { formatDateMMDDYY } from '../../utils/formatTime.js'
+import { formatDateTime } from '../../utils/formatTime.js'
 
 const props = defineProps({
   observations: {
@@ -24,7 +24,7 @@ const props = defineProps({
     <div class="table-summary">
       <div v-for="observation in observations" :key="observation.id">
             <div v-for="configuration in observation" :key="configuration.id">
-              <a @click.prevent="onSelect(configuration)"><p>{{ configuration.OBJECT.toUpperCase() }} - {{ formatDateMMDDYY(configuration.observation_date, ) }}</p></a>
+              <a @click.prevent="onSelect(configuration)"><p>{{ configuration.OBJECT.toUpperCase() }} - {{ formatDateTime(configuration.observation_date, {month: '2-digit', day: '2-digit', year: '2-digit'}) }}</p></a>
             </div>
       </div>
     </div>

src/components/Dashboard/UpcomingBookings.vue

@@ -4,7 +4,7 @@ import { ref, computed, onMounted } from 'vue'
 import { useRealTimeSessionsStore } from '../../stores/realTimeSessions'
 import { useObsPortalDataStore } from '../../stores/obsPortalData'
 import { useConfigurationStore } from '../../stores/configuration'
-import { formatDate, formatTime } from '../../utils/formatTime.js'
+import { formatDateTime } from '../../utils/formatTime.js'
 import { fetchApiCall } from '../../utils/api.js'
 
 const router = useRouter()
@@ -57,7 +57,7 @@ onMounted(() => {
       <h3 v-else>No Real-Time Sessions Booked</h3>
         <div class="table-summary">
         <div v-for="session in sortedSessions" :key="session.id">
-            <div><a @click.prevent="selectSession(session.id)" class="date">{{ formatDate(session.start) }}</a></div><div>{{ formatTime(session.start) }}</div>
+            <div><a @click.prevent="selectSession(session.id)" class="date">{{ formatDateTime(session.start, { year: 'numeric', month: 'long', day: 'numeric' }) }}</a></div><div>{{ formatDateTime(session.start, { hour: 'numeric', minute: 'numeric' }) }}</div>
             <button @click="deleteSession(session.id)" class="deleteButton">x</button>
         </div>
         </div>

src/components/Images/MyGallery.vue

@@ -2,7 +2,7 @@
 import { computed, ref, onMounted, watch } from 'vue'
 import { useObsPortalDataStore } from '../../stores/obsPortalData'
 import { useConfigurationStore } from '../../stores/configuration'
-import { formatDate } from '../../utils/formatTime.js'
+import { formatDateTime } from '../../utils/formatTime.js'
 import { getThumbnails } from '../../utils/thumbnailsUtils.js'
 
 const configurationStore = useConfigurationStore()
@@ -93,7 +93,7 @@ onMounted(() => {
   </template>
   <div class="container">
     <div v-for="obs in sessionsWithThumbnails" :key="obs.id">
-      <h3 class="startTime">{{ formatDate(obs.start) }}</h3>
+      <h3 class="startTime">{{ formatDateTime(obs.start, { year: 'numeric', month: 'long', day: 'numeric' }) }}</h3>
       <div class="columns is-multiline">
         <div
           class="column is-one-quarter-desktop is-half-tablet"

src/components/RealTimeInterface/TimePicker.vue

@@ -2,17 +2,15 @@
 import { ref, watch, defineEmits, onMounted, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useRealTimeSessionsStore } from '../../stores/realTimeSessions'
-import { useUserDataStore } from '../../stores/userData'
 import { fetchApiCall } from '../../utils/api'
-import { formatToUTC, formatDate } from '../../utils/formatTime.js'
+import { formatToUTC, formatDateTime } from '../../utils/formatTime.js'
 import { useConfigurationStore } from '../../stores/configuration'
 import LeafletMap from './GlobeMap/LeafletMap.vue'
 import ProposalDropdown from '../Global/ProposalDropdown.vue'
 
 const router = useRouter()
 const realTimeSessionsStore = useRealTimeSessionsStore()
 const configurationStore = useConfigurationStore()
-const userDataStore = useUserDataStore()
 
 const date = ref(null)
 const startTime = ref(null)
@@ -282,8 +280,8 @@ onMounted(() => {
         </div>
         <div v-if="startTime" class="column">
           <p class="selected-datetime">
-            <span v-if="selectedSite && !errorMessage">{{ selectedSite.site }} selected for {{ formatDate(date) }} at {{ startTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }}</span>
-            <span v-else-if="!selectedSite">Click on a pin to book for {{ formatDate(date) }} at {{ startTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }}</span>
+            <span v-if="selectedSite && !errorMessage">{{ selectedSite.site }} selected for {{ formatDateTime(date, { year: 'numeric', month: 'long', day: 'numeric' }) }} at {{ startTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }}</span>
+            <span v-else-if="!selectedSite">Click on a pin to book for {{ formatDateTime(date, { year: 'numeric', month: 'long', day: 'numeric' }) }} at {{ startTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }}</span>
             <span v-else-if="selectedSite && errorMessage" class="error">{{ errorMessage }}</span>
           </p>
           <v-btn variant="tonal" v-if="date && selectedSite" @click="blockRti" class="blue-bg">Book</v-btn>

src/components/Views/ObservationDetailsView.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, ref, onMounted } from 'vue'
-import { formatDate, formatTime } from '../../utils/formatTime.js'
+import { formatDateTime } from '../../utils/formatTime.js'
 import { useObsPortalDataStore } from '../../stores/obsPortalData.js'
 import { getThumbnails } from '../../utils/thumbnailsUtils.js'
 
@@ -24,7 +24,7 @@ onMounted(async () => {
     <h3>Observation Details</h3>
     <div>
       <p>Target: {{ observationDetails.OBJECT }}</p>
-      <p>Time: {{ formatDate(observationDetails.observation_day)}} at {{ formatTime(observationDetails.observation_date) }}</p>
+      <p>Time: {{ formatDateTime(observationDetails.observation_day, { year: 'numeric', month: 'long', day: 'numeric' })}} at {{ formatDateTime(observationDetails.observation_date, { hour: 'numeric', minute: 'numeric' }) }}</p>
       <p>Location: {{ observationDetails.SITEID }}</p>
       <p>Exposure settings:</p>
         <p> {{ observationDetails.EXPTIME }} seconds in {{ observationDetails.FILTER }} filter</p>

src/tests/unit/utils/formatTime.test.js

@@ -1,39 +1,48 @@
 import { describe, it, expect } from 'vitest'
-import { formatDate, formatTime, formatToUTC, formatCountdown, calculateSessionCountdown } from '../../../utils/formatTime'
+import { formatDateTime, formatToUTC, formatCountdown, calculateSessionCountdown } from '../../../utils/formatTime'
 
 describe('formatUtils.js', () => {
-  describe('formatDate', () => {
+  describe('formatDateTime', () => {
+    const getLocalTimeString = (dateString, options) => {
+      const date = new Date(dateString)
+      // Converts UTC to the environment's local time
+      return date.toLocaleTimeString('en-US', options)
+    }
+
+    const getLocalDateString = (dateString, options) => {
+      const date = new Date(dateString)
+      return date.toLocaleDateString('en-US', options)
+    }
+
     it('formats a date string to "Month Day, Year" format', () => {
       const date = '2024-08-15T00:00:00Z'
-      const expectedDate = formatDate(new Date(date).toISOString())
-      expect(formatDate(date)).toBe(expectedDate)
+      const expectedDate = getLocalDateString(date, { year: 'numeric', month: 'long', day: 'numeric' })
+      expect(formatDateTime(date, { year: 'numeric', month: 'long', day: 'numeric' })).toBe(expectedDate)
     })
 
-    it('formats a local date string to "Month Day, Year" format', () => {
-      const date = 'Wed Aug 21 2024 16:15:00 GMT-0700 (Pacific Daylight Time)'
-      const expectedDate = formatDate(new Date(date).toISOString())
-      expect(formatDate(date)).toBe(expectedDate)
-    })
-  })
-
-  describe('formatTime', () => {
     it('formats a UTC time string to "Hour:Minute AM/PM" format', () => {
       const time = '2024-08-15T15:30:00Z'
-      const expectedTime = formatTime(new Date(time).toISOString())
-      expect(formatTime(time)).toBe(expectedTime)
+      const expectedTime = getLocalTimeString(time, { hour: 'numeric', minute: 'numeric' })
+      expect(formatDateTime(time, { hour: 'numeric', minute: 'numeric' })).toBe(expectedTime)
     })
 
     it('formats a local time string to "Hour:Minute AM/PM" format', () => {
-      const time = 'Wed Aug 21 2024 16:15:00 GMT-0700 (Pacific Daylight Time)'
-      const expectedTime = formatTime(new Date(time).toISOString())
-      expect(formatTime(time)).toBe(expectedTime)
+      const time = 'Wed Aug 21 2024 16:15:00Z'
+      const expectedTime = getLocalTimeString(time, { hour: 'numeric', minute: 'numeric' })
+      expect(formatDateTime(time, { hour: 'numeric', minute: 'numeric' })).toBe(expectedTime)
+    })
+
+    it('formats a date string to "MM/DD/YY" format', () => {
+      const date = '2024-12-25T00:00:00Z'
+      const expectedDate = getLocalDateString(date, { month: '2-digit', day: '2-digit', year: '2-digit' })
+      expect(formatDateTime(date, { month: '2-digit', day: '2-digit', year: '2-digit' })).toBe(expectedDate)
     })
   })
 
   describe('formatToUTC', () => {
     it('converts a date-time string to UTC format', () => {
       const dateTime = 'Wed Aug 15 2024 08:30:00 GMT-0700 (Pacific Daylight Time)'
-      const expectedUTC = new Date(dateTime).toISOString().split('.')[0] + 'Z'
+      const expectedUTC = '2024-08-15T15:30:00Z'
       expect(formatToUTC(dateTime)).toBe(expectedUTC)
     })
 

src/utils/formatTime.js

@@ -1,13 +1,13 @@
-function formatDate (dateString, options) {
+// formats a date based on the options provided
+function formatDateTime (dateString, options) {
   const date = new Date(dateString)
-  options = { year: 'numeric', month: 'long', day: 'numeric' }
-  return date.toLocaleDateString('en-US', options)
-}
-
-function formatTime (timeString) {
-  const date = new Date(timeString)
-  const options = { hour: 'numeric', minute: 'numeric' }
-  return date.toLocaleTimeString('en-US', options)
+  // This condition is necessary because the toLocaleTimeString method does not accept the year, month, or day options
+  if (options && (options.hour || options.minute)) {
+    return date.toLocaleTimeString('en-US', options)
+    // And this condition is necessary because the toLocaleDateString method does not accept the hour or minute options
+  } else {
+    return date.toLocaleDateString('en-US', options)
+  }
 }
 
 function formatToUTC (dateTime) {
@@ -50,10 +50,4 @@ function calculateSessionCountdown (session) {
   return Math.floor((countdown - currentTime) / 1000)
 }
 
-function formatDateMMDDYY (dateString) {
-  const date = new Date(dateString)
-  const options = { month: '2-digit', day: '2-digit', year: '2-digit' }
-  return date.toLocaleDateString('en-US', options)
-}
-
-export { formatDate, formatTime, formatToUTC, formatCountdown, calculateSessionCountdown, formatDateMMDDYY }
+export { formatDateTime, formatToUTC, formatCountdown, calculateSessionCountdown }