Implement date selction with card 🚀

src/app.css

@@ -1,80 +1,80 @@
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+   line-height: 1.5;
+   font-weight: 400;
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+   color-scheme: light dark;
+   color: rgba(255, 255, 255, 0.87);
+   background-color: #242424;
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
+   font-synthesis: none;
+   text-rendering: optimizeLegibility;
+   -webkit-font-smoothing: antialiased;
+   -moz-osx-font-smoothing: grayscale;
+   -webkit-text-size-adjust: 100%;
 }
 
 a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
+   font-weight: 500;
+   color: #646cff;
+   text-decoration: inherit;
 }
 a:hover {
-  color: #535bf2;
+   color: #535bf2;
 }
 
 body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+   margin: 0;
+   display: flex;
+   justify-content: flex-start;
+   min-width: 320px;
+   min-height: 100vh;
 }
 
 h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+   font-size: 3.2em;
+   line-height: 1.1;
 }
 
 .card {
-  padding: 2em;
+   padding: 2em;
 }
 
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+   max-width: 1280px;
+   margin: 0 auto;
+   padding: 2rem;
+   text-align: center;
 }
 
 button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
+   border-radius: 8px;
+   border: 1px solid transparent;
+   padding: 0.6em 1.2em;
+   font-size: 1em;
+   font-weight: 500;
+   font-family: inherit;
+   background-color: #1a1a1a;
+   cursor: pointer;
+   transition: border-color 0.25s;
 }
 button:hover {
-  border-color: #646cff;
+   border-color: #646cff;
 }
 button:focus,
 button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+   outline: 4px auto -webkit-focus-ring-color;
 }
 
 @media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+   :root {
+      color: #213547;
+      background-color: #ffffff;
+   }
+   a:hover {
+      color: #747bff;
+   }
+   button {
+      background-color: #f9f9f9;
+   }
 }

src/model/reservation.model.ts

@@ -1,8 +1,25 @@
-export interface Reservation {
+import { timestampToDate } from '../utils/date.utils';
+
+export interface ReservationDto {
    id: string;
    owner: string;
    startTime: number; //timestamp
    endTime: number; //timestamp
 }
 
+export interface Reservation {
+   id: string;
+   owner: string;
+   startTime: Date;
+   endTime: Date;
+}
+
 export type ReservationStoreData = Reservation[] | null;
+
+export const mapDtoToReservation = (dto: ReservationDto): Reservation => {
+   return {
+      ...dto,
+      startTime: timestampToDate(dto.startTime),
+      endTime: timestampToDate(dto.endTime),
+   };
+};

src/model/reservation.store.ts

@@ -1,7 +1,12 @@
 import { writable } from 'svelte/store';
-import type { Reservation, ReservationStoreData } from './reservation.model';
+import { isSameDay } from '../utils/date.utils';
+import {
+   mapDtoToReservation,
+   type ReservationDto,
+   type ReservationStoreData,
+} from './reservation.model';
 
-const mockedReservations: Reservation[] = [
+const mockedReservations: ReservationDto[] = [
    {
       id: '1',
       owner: '1',
@@ -16,8 +21,11 @@ const mockedReservations: Reservation[] = [
    },
 ];
 
-const reservations$ = writable<ReservationStoreData>(null);
+export const reservationStore = writable<ReservationStoreData>(null);
 
-export const loadSlots = (): Reservation[] => {
-   return mockedReservations;
+export const loadReservationsForDay = (date: Date) => {
+   const reservations = mockedReservations
+      .map(mapDtoToReservation)
+      .filter((reservation) => isSameDay(date, reservation.startTime));
+   reservationStore.set(reservations);
 };

src/routes/calendar/Calendar.svelte

@@ -1,8 +1,39 @@
 <script lang="ts">
    import Datepicker from '../../lib/Datepicker.svelte';
+   import type { Reservation } from '../../model/reservation.model';
+   import {
+      loadReservationsForDay,
+      reservationStore,
+   } from '../../model/reservation.store';
+   import { convertToDateString } from '../../utils/date.utils';
+   import ReservationCard from './components/ReservationCard.svelte';
 
    let pickedDate: Date;
+   let hasReservations: boolean = false;
+   let reservations: Reservation[];
+
+   $: selecedDate = !!pickedDate ? new Date(pickedDate) : undefined;
+   $: if (selecedDate) loadReservationsForDay(selecedDate);
+
+   reservationStore.subscribe((allReservations) => {
+      hasReservations = !!allReservations && allReservations?.length > 0;
+      if (hasReservations) {
+         reservations = allReservations!;
+      }
+   });
 </script>
 
-<p>{pickedDate}</p>
 <Datepicker bind:date={pickedDate} />
+
+{#if selecedDate}
+   <p>{convertToDateString(selecedDate)}</p>
+   <div class="reservations-container">
+      {#if hasReservations}
+         {#each reservations as reservation}
+            <ReservationCard {reservation} />
+         {/each}
+      {:else}
+         <p>There are no reservations for today</p>
+      {/if}
+   </div>
+{/if}

src/routes/calendar/components/Booking.svelte

@@ -0,0 +1,2 @@
+<script lang="ts">
+</script>

src/routes/calendar/components/ReservationCard.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+   import type { Reservation } from '../../../model/reservation.model';
+   import { convertToTime } from '../../../utils/date.utils';
+
+   export let reservation: Reservation;
+</script>
+
+<article>
+   <h3>
+      {convertToTime(reservation.startTime)} -
+      {convertToTime(reservation.endTime)}
+   </h3>
+</article>

src/utils/date.utils.ts

@@ -0,0 +1,23 @@
+export const timestampToDate = (timestamp: number): Date => {
+   return new Date(timestamp * 1000);
+};
+
+export const isSameDay = (dateA: Date, dateB: Date) => {
+   var dateAStr = dateA.toISOString().slice(0, 10);
+   var dateBStr = dateB.toISOString().slice(0, 10);
+
+   return dateAStr === dateBStr;
+};
+
+export const convertToDateString = (date: Date) =>
+   date.toLocaleDateString('en-us', {
+      day: '2-digit',
+      month: 'short',
+      weekday: 'long',
+   });
+
+export const convertToTime = (date: Date) =>
+   date.toLocaleTimeString('de-ch', {
+      hour: '2-digit',
+      minute: '2-digit',
+   });