Merge pull request #66 from Carifio24/calendar-picker

Use calendar picker for date selection
cosmicds · Oct 23, 2024 · 2e86ebd · 2e86ebd
2 parents 38dddc2 + 4aa4867
commit 2e86ebd
Show file tree

Hide file tree

Showing 4 changed files with 5,691 additions and 8,346 deletions.
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.5",
+    "@vuepic/vue-datepicker": "^9.0.3",
     "@wwtelescope/engine-pinia": "^0.9.0",
     "date-fns": "^3.6.0",
     "date-fns-tz": "^3.1.3",

diff --git a/src/TempoLite.vue b/src/TempoLite.vue
@@ -234,19 +234,19 @@
                 :value="0"
                 @keyup.enter="radio = 0"
               >
-              <template #label>
-                <v-select
-                  :modelValue="singleDateSelected"
-                  :disabled="radio !== 0"
-                  :items="uniqueDays"
-                  item-title="title"
-                  item-value="value"
-                  label="Select a Date"
-                  @update:model-value="(e) => { singleDateSelected = e;}"
-                  hide-details
-                ></v-select>
-              </template>
             </v-radio>
+            <date-picker
+              v-model="singleDateSelected"
+              :allowed-dates="uniqueDays"
+              :disabled="radio != 0"
+              :clearable="false"
+              :enable-time-picker="false"
+              :multi-dates="false"
+              :transitions="false"
+              :format="(date: Date | null) => date?.toDateString()"
+              :preview-format="(date: Date | null) => date?.toDateString()"
+              dark
+            ></date-picker>
             </v-radio-group>
           </div>        
           <!-- create a list of the uniqueDays -->
@@ -268,9 +268,9 @@
                 <v-btn
                   v-bind="props"
                   class="rounded-icon-wrapper"
-                  @click="singleDateSelected = uniqueDays[uniqueDays.findIndex(day => day.value === singleDateSelected) - 1]?.value"
-                  @keyup.enter="singleDateSelected = uniqueDays[uniqueDays.findIndex(day => day.value === singleDateSelected) - 1]?.value"
-                  :disabled="radio !== 0 || singleDateSelected === uniqueDays[0].value"
+                  @click="moveBackwardOneDay"
+                  @keyup.enter="moveBackwardOneDay"
+                  :disabled="radio !== 0 || singleDateSelected === uniqueDays[0]"
                   color="#009ade"
                   variant="outlined"
                   elevation="0"
@@ -286,9 +286,9 @@
                 <v-btn
                   v-bind="props"
                   class="rounded-icon-wrapper"
-                  @click="singleDateSelected = uniqueDays[uniqueDays.findIndex(day => day.value === singleDateSelected) + 1]?.value"
-                  @keyup.enter="singleDateSelected = uniqueDays[uniqueDays.findIndex(day => day.value === singleDateSelected) + 1]?.value"
-                  :disabled="radio !== 0 || singleDateSelected === uniqueDays[uniqueDays.length - 1].value"
+                  @click="moveForwardOneDay"
+                  @keyup.enter="moveForwardOneDay"
+                  :disabled="radio !== 0 || singleDateSelected === uniqueDays[uniqueDays.length - 1]"
                   color="#009ade"
                   variant="outlined"
                   elevation="0"
@@ -780,7 +780,7 @@ export default defineComponent({
       fosterTimestamps,      
       preload: true,
       
-      singleDateSelected: Date.now() as number | null,
+      singleDateSelected: new Date(),
 
       searchOpen: true,
       searchErrorMessage: null as string | null,
@@ -839,7 +839,7 @@ export default defineComponent({
       pane: 'labels'
     }).addTo(this.map as Map);
 
-    this.singleDateSelected = this.uniqueDays[this.uniqueDays.length-1].value;
+    this.singleDateSelected = this.uniqueDays[this.uniqueDays.length-1];
     this.imageOverlay.setUrl(this.imageUrl).addTo(this.map as Map);
     this.cloudOverlay.setUrl(this.cloudUrl).addTo(this.map as Map);
     
@@ -1004,15 +1004,13 @@ export default defineComponent({
       }
     },
     
-    uniqueDays() {
+    uniqueDays(): Date[] {
       // eastern time
       const offset = (date: Date) => getTimezoneOffset("US/Eastern", date);
       const easternDates = this.timestamps.map(ts => new Date(ts + offset(new Date(ts))));
-      const days = easternDates.map(date => new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate())).map(date => date.getTime());
-      const unique =  Array.from(new Set(days));
-      const stamps = unique.map(day => new Date(day)).map(date => date.toDateString());
-      // create an object with keys for timestamp and value
-      return stamps.map((stamp, index) => ({ value: unique[index], title: stamp }));
+      const days = easternDates.map(date => (new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate())).getTime());
+      const unique = Array.from(new Set(days));
+      return unique.map(ts => new Date(ts));
     },
     
     highresAvailable() {
@@ -1192,6 +1190,18 @@ export default defineComponent({
         });
       });
     },
+
+    getUniqueDayIndex(date: Date): number {
+      return this.uniqueDays.findIndex(day => day.getTime() === date.getTime());
+    },
+
+    moveBackwardOneDay() {
+      this.singleDateSelected = this.uniqueDays[this.getUniqueDayIndex(this.singleDateSelected) - 1];
+    },
+
+    moveForwardOneDay() {
+      this.singleDateSelected = this.uniqueDays[this.getUniqueDayIndex(this.singleDateSelected) + 1];
+    }
     
   },
 
@@ -1257,7 +1267,7 @@ export default defineComponent({
     },
     
     timestamps() {
-      this.singleDateSelected = this.uniqueDays[this.uniqueDays.length-1].value;
+      this.singleDateSelected = this.uniqueDays[this.uniqueDays.length-1];
     },
     
     radio(value: number) {
@@ -1267,7 +1277,7 @@ export default defineComponent({
       if (value == 0) {
         // this.minIndex = 0;
         // this.maxIndex = this.timestamps.length - 1;
-        this.setNearestDate(this.singleDateSelected);
+        this.setNearestDate(this.singleDateSelected.getTime());
         this.sublocationRadio = null;
         return;
       }
@@ -1317,6 +1327,10 @@ export default defineComponent({
   --map-height: 500px;
 }
 
+.dp__theme_dark {
+  --dp-primary-color: var(--accent-color) !important;
+}
+
 html {
   height: 100%;
   margin: 0;

diff --git a/src/main.ts b/src/main.ts
@@ -9,7 +9,6 @@ import InfoButton from "./InfoButton.vue";
 import vuetify from "../plugins/vuetify";
 
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-
 import { library } from "@fortawesome/fontawesome-svg-core";
 import {
   faBookOpen,
@@ -23,6 +22,9 @@ import {
   faHome,
 } from "@fortawesome/free-solid-svg-icons";
 
+import VueDatePicker from "@vuepic/vue-datepicker";
+import '@vuepic/vue-datepicker/dist/main.css';
+
 library.add(faBookOpen);
 library.add(faPlay);
 library.add(faPause);
@@ -68,6 +70,7 @@ createApp(TempoLite, {})
   .component('location-search', LocationSearch)
   .component('info-button', InfoButton)
   .component('colorbar-horizontal', ColorBarHorizontal)
+  .component('date-picker', VueDatePicker)
 
   // Mount
   .mount("#app");