feat: allow users to create a time slot within a slot that already has begun

Users weren’t able to create a time slot in the calendar if the slot
has already begun.

The logic now checks if the start time is later or equal to the start of
the slot of the current time (i.e. current time is 16:37:28, check is
performed against 16:30:00 for a 15 minute calendar slot size). This
prevents users from creating slots in the past but allows them to create
time slots within a slot that has already begun.

If the slot has already begun then the start time of the new time slot
is set to the next available 5 minute slot after the current time. This
means that if the current time is 16:37:28 and one creates a time slot
in the 16:30:00 - 16:45:00 slot window the start time of the new time
slot is set to 16:40:00.

fixes #167

src/Pages/EmissionManager.vue

@@ -227,6 +227,7 @@ import playlist from '@/mixins/playlist'
 import ServerErrors from '@/components/ServerErrors.vue'
 import { getISODateString } from '@/utilities'
 import PageHeader from '@/components/PageHeader.vue'
+import { getClosestSlot, getNextAvailableSlot } from '@/util'
 
 export default {
   components: {
@@ -362,7 +363,7 @@ export default {
         slotDuration: `00:${slotDurationMinutes}:00`,
         eventMinHeight: 1,
         selectAllow({ start }) {
-          return start > new Date()
+          return start >= getClosestSlot(slotDurationMinutes)
         },
         navLinkDayClick(selectedDate) {
           selectDay(selectedDate)
@@ -520,7 +521,10 @@ export default {
     // this handler is called when the user creates a new timeslot
     createEvent({ start, end }) {
       if (!this.conflictMode) {
-        this.$refs.appModalEmissionManagerCreate.open(start, end)
+        this.$refs.appModalEmissionManagerCreate.open(
+          start < new Date() ? getNextAvailableSlot(5) : start,
+          end,
+        )
       }
     },
     enterConflictMode(data) {

src/util.ts

@@ -57,3 +57,19 @@ export function useFormattedISODate(date: Ref<Date>) {
     },
   })
 }
+
+export function getClosestSlot(slotDurationMinutes: number, date?: Date): Date {
+  date = date ?? new Date()
+  const slotDurationMillis = slotDurationMinutes * 60 * 1000
+  const slots = Math.floor(date.getTime() / slotDurationMillis)
+  const closestSlotTimestamp = slots * slotDurationMillis
+  return new Date(closestSlotTimestamp)
+}
+
+export function getNextAvailableSlot(slotDurationMinutes: number, date?: Date): Date {
+  date = date ?? new Date()
+  const slotDurationMillis = slotDurationMinutes * 60 * 1000
+  const slots = Math.ceil(date.getTime() / slotDurationMillis)
+  const nextSlotTimestamp = slots * slotDurationMillis
+  return new Date(nextSlotTimestamp)
+}