Surrendering to the moment ⏳

package.json

@@ -1,25 +1,25 @@
 {
-  "name": "web-frontend",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "check": "svelte-check --tsconfig ./tsconfig.json"
-  },
-  "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.4.2",
-    "@tsconfig/svelte": "^5.0.0",
-    "svelte": "^4.0.5",
-    "svelte-check": "^3.4.6",
-    "svelte-routing": "^2.5.0",
-    "tslib": "^2.6.0",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.5"
-  },
-  "dependencies": {
-    "@picocss/pico": "^1.5.10"
-  }
+   "name": "web-frontend",
+   "private": true,
+   "version": "0.0.0",
+   "type": "module",
+   "scripts": {
+      "dev": "vite",
+      "build": "vite build",
+      "preview": "vite preview",
+      "check": "svelte-check --tsconfig ./tsconfig.json"
+   },
+   "devDependencies": {
+      "@sveltejs/vite-plugin-svelte": "^2.4.2",
+      "@tsconfig/svelte": "^5.0.0",
+      "svelte": "^4.0.5",
+      "svelte-check": "^3.4.6",
+      "svelte-routing": "^2.5.0",
+      "tslib": "^2.6.0",
+      "typescript": "^5.0.2",
+      "vite": "^4.4.5"
+   },
+   "dependencies": {
+      "@picocss/pico": "^1.5.10"
+   }
 }

src/model/reservation.model.ts

@@ -14,7 +14,12 @@ export interface Reservation extends StartEndTime {
    owner: string;
 }
 
-export type ReservationStoreData = Reservation[] | null;
+export interface ReservationStore {
+   reservations: Reservation[];
+   for: Date;
+}
+
+export type ReservationStoreData = ReservationStore | null;
 
 export const mapDtoToReservation = (dto: ReservationDto): Reservation => {
    return {

src/model/reservation.store.ts

@@ -20,13 +20,25 @@ const mockedReservations: ReservationDto[] = [
       start_time: '2023-10-30T12:00:00.00+01:00',
       end_time: '2023-10-30T13:00:00.00+01:00',
    },
+   {
+      id: '3',
+      owner: '3',
+      start_time: '2023-10-29T15:00:00.00+01:00',
+      end_time: '2023-10-29T16:00:00.00+01:00',
+   },
+   {
+      id: '4',
+      owner: '4',
+      start_time: '2023-10-29T10:00:00.00+01:00',
+      end_time: '2023-10-29T12:00:00.00+01:00',
+   },
 ];
 
 export const reservationStore = writable<ReservationStoreData>(null);
 
 const sortReservations = (reservations: Reservation[]): Reservation[] => {
    return reservations?.sort((reservationA, reservationB) =>
-      reservationA.startTime.isAfter(reservationB.startTime) ? -1 : 1
+      reservationA.startTime.isBefore(reservationB.startTime) ? -1 : 1
    );
 };
 
@@ -36,7 +48,7 @@ const filterReservations =
       const now = new Date();
       let isValid = dateToFilterFor.isSameDay(reservation.startTime);
       if (now.isSameDay(dateToFilterFor)) {
-         isValid = isValid && reservation.startTime.isAfter(now);
+         isValid = isValid && reservation.startTime.isBefore(now);
       }
       return isValid;
    };
@@ -49,7 +61,7 @@ export const loadReservationsForDay = (date: Date): void => {
          .map(mapDtoToReservation)
          .filter(filterReservations(date))
    );
-   reservationStore.set(reservations);
+   reservationStore.set({ reservations, for: date });
 };
 
 export const createReservation = async (
@@ -62,12 +74,17 @@ export const createReservation = async (
       start_time: startTime.toISOString(),
       end_time: endTime.toISOString(),
    }).then((json) => {
-      reservationStore.update((reservations) => {
-         const newReservations = !!reservations ? reservations : [];
-         return sortReservations([
-            ...newReservations,
-            mapDtoToReservation(json),
-         ]);
+      reservationStore.update((storeData) => {
+         if (storeData) {
+            return {
+               ...storeData,
+               reservations: sortReservations([
+                  ...(storeData?.reservations ?? []),
+                  mapDtoToReservation(json),
+               ]),
+            };
+         }
+         return null;
       });
    });
 };

src/routes/calendar/Calendar.svelte

@@ -19,18 +19,19 @@
 
    $: if (selecedDate) loadReservationsForDay(selecedDate);
 
-   reservationStore.subscribe((allReservations) => {
-      hasReservations = !!allReservations && allReservations?.length > 0;
+   reservationStore.subscribe((storeData) => {
+      hasReservations = !!storeData && storeData?.reservations.length > 0;
+      selecedDate = storeData?.for;
       if (hasReservations) {
-         reservations = allReservations!;
+         reservations = storeData!.reservations;
       }
    });
 
    const getAvailableUntil = (index: number): Date => {
       let defaultEnd = getSelectedDateWithTime(DEFAULT_DAY_END);
 
       if (index < reservations.length) {
-         const nextReservation = reservations.at(index + 1);
+         const nextReservation = reservations.at(index);
          return nextReservation?.startTime ?? defaultEnd;
       }
 
@@ -42,8 +43,13 @@
    };
 
    const getSelectedDateWithTime = (time: number): Date => {
-      let date = new Date(selecedDate!);
-      date.setHours(time);
+      let date = new Date();
+      if (selecedDate?.isToday()) {
+         date.setHours(date.getHours(), date.getMinutes() + 1, 0);
+      } else {
+         date = new Date(selecedDate!);
+         date.setHours(time, 0);
+      }
       return date;
    };
 </script>
@@ -54,13 +60,18 @@
    <div class="reservations-container">
       {#if hasReservations}
          <p>Reservations for: {selecedDate.toWeekdayString()}</p>
+         <Booking
+            {selecedDate}
+            availableFrom={getSelectedDateWithTime(DEFAULT_DAY_START)}
+            availableUntil={getAvailableUntil(0)}
+         />
          {#each reservations as reservation, i (i)}
             <ReservationCard {reservation} />
-            {#if showBookingButton(reservation.endTime, getAvailableUntil(i))}
+            {#if showBookingButton(reservation.endTime, getAvailableUntil(i + 1))}
                <Booking
                   {selecedDate}
                   availableFrom={reservation.endTime}
-                  availableUntil={getAvailableUntil(i)}
+                  availableUntil={getAvailableUntil(i + 1)}
                />
             {/if}
          {/each}

src/routes/calendar/components/BookingTimeSelection.svelte

@@ -19,8 +19,6 @@
    $: if (timeStr) startTime = newDateWithTime(selecedDate, timeStr);
    $: if (startTime)
       endTime = new Date(startTime).addHours(DEFAULT_BOOKING_HOURS);
-   $: invalid =
-      startTime?.isAfter(availableFrom) || endTime?.isBefore(availableUntil);
 
    const cancelBooking = () => dispatch('cancelBooking');
    const addBooking = () => {
@@ -32,14 +30,12 @@
 </script>
 
 <div class="booking-container">
-   {$userStore?.id}
    <label for="time">
       Start time
       <input
          type="time"
          name="time"
          placeholder="Start time"
-         aria-invalid={invalid}
          bind:value={timeStr}
       />
    </label>
@@ -48,7 +44,7 @@
    {/if}
    <div class="button-container">
       <button on:click={cancelBooking}>Cancel booking</button>
-      <button on:click={addBooking} disabled={invalid}>Confirm booking</button>
+      <button on:click={addBooking}>Confirm booking</button>
    </div>
 </div>
 

src/routes/calendar/components/DateSelector.svelte

@@ -2,7 +2,7 @@
    import Datepicker from '../../../lib/Datepicker.svelte';
 
    export let selecedDate: Date | undefined;
-   let pickedDate: string;
+   let pickedDate: string = selecedDate?.toShortISOString() ?? '';
 
    $: selecedDate = !!pickedDate ? new Date(pickedDate) : undefined;
 

src/routes/home/BookingSelection.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
    import { navigate } from 'svelte-routing';
-   import { loadReservationsForDay } from '../../model/reservation.store';
+   import {
+      loadReservationsForDay,
+      reservationStore,
+   } from '../../model/reservation.store';
 
    const redirectToBookLater = () => {
+      reservationStore.set(null);
       navigate('/calendar');
    };
 
@@ -13,5 +17,5 @@
 </script>
 
 <h1>When would you like to wash?</h1>
-<button on:click={redirectToBookNow}>Get next available slot</button>
-<button on:click={redirectToBookLater}>Check for other day</button>
+<button on:click={redirectToBookNow}>Book now</button>
+<button on:click={redirectToBookLater}>View schedule</button>

src/utils/date.extenstions.ts

@@ -1,10 +1,13 @@
+import moment from 'moment';
+
 export {};
 
 declare global {
    interface Date {
       addHours(hours: number): Date;
       addDays(days: number): Date;
       isSameDay(otherDate: Date): boolean;
+      isToday(): boolean;
       toWeekdayString(): string;
       toTime(): string;
       toShortISOString(): string;
@@ -30,6 +33,15 @@ Date.prototype.isSameDay = function (otherDate: Date): boolean {
    return thisDateStr === otherDateStr;
 };
 
+Date.prototype.isToday = function (): boolean {
+   const today = new Date();
+   return (
+      this.getDate() == today.getDate() &&
+      this.getMonth() == today.getMonth() &&
+      this.getFullYear() == today.getFullYear()
+   );
+};
+
 Date.prototype.toWeekdayString = function (): string {
    return this.toLocaleDateString('en-us', {
       day: '2-digit',
@@ -46,11 +58,11 @@ Date.prototype.toTime = function (): string {
 };
 
 Date.prototype.isAfter = function (otherDate: Date): boolean {
-   return this.getTime() < otherDate.getTime();
+   return moment(this).isAfter(otherDate);
 };
 
 Date.prototype.isBefore = function (otherDate: Date): boolean {
-   return this.getTime() > otherDate.getTime();
+   return moment(this).isBefore(otherDate);
 };
 
 Date.prototype.toShortISOString = function (): string {