Add time slot selection

Stop moving elements when error appears under input
make 404, 500, Empty Basket and No Item sections larger
clean up test-api slightly

front/src/lib/test-api.ts

@@ -74,19 +74,10 @@ export async function getItemsByUUID(items: string[]): Promise<Item[]> {
 }
 
 export async function getItemByUUID(uuid: string): Promise<Item> {
-    const data: Item[] = [];
+    const data = await getItemsByUUID([uuid])
-
+    if (data.length !== 1) {
-    await getItemsByUUID([uuid])
-        .then((result) => {
-            if (result.length !== 1) {
         throw new Error("Resource could not be found");
     }
-            data.push(...result);
-        })
-        .catch((error) => {
-            throw error;
-        });
-
     return data[0];
 }
 

front/src/pages/Page404.svelte

@@ -11,12 +11,12 @@
     @import "../styles/vars";
 
     div {
-        padding: $spacing-large;
+        height: 400px;
-
-        height: 100%;
 
         display: flex;
         flex-direction: column;
+        justify-content: center;
+        align-items: center;
     }
     h1 {
         display: flex;

front/src/pages/Page500.svelte

@@ -11,12 +11,12 @@
     @import "../styles/vars";
 
     div {
-        padding: $spacing-large;
+        height: 400px;
-
-        height: 100%;
 
         display: flex;
         flex-direction: column;
+        justify-content: center;
+        align-items: center;
     }
     h1 {
         display: flex;

front/src/pages/PageBooking.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { SealWarning, CaretDown } from "phosphor-svelte";
+
     import { expandOnTyping } from "../lib/utils";
     import Calendar from "../components/Calendar.svelte";
 
@@ -9,6 +11,7 @@
     let email = "";
     let telephone = "";
     let date: Date;
+    let timeSlot = "slot1";
     let specialRequests = "";
 
     let nameValid = true;
@@ -41,9 +44,11 @@
                 name="name"
                 class="form-input"
         />
+        <span class="form-notice error">
             {#if !nameValid}
-            <span class="form-notice error">Enter a name</span>
+                Enter a name
             {/if}
+        </span>
     </div>
 
     <div class="spacer half" />
@@ -59,15 +64,17 @@
                 name="email"
                 class="form-input"
         />
+        <span class="form-notice error">
             {#if !emailValid}
-            <span class="form-notice error">Email not valid</span>
+                Email not valid
             {/if}
+        </span>
     </div>
 
     <div class="spacer half" />
 
     <div class="form-element">
-        <label class="form-label" for="email">Telephone</label>
+        <label class="form-label" for="telephone">Telephone</label>
         <input
                 bind:value={telephone}
                 on:blur={validateTelephone}
@@ -77,9 +84,11 @@
                 name="telephone"
                 class="form-input"
         />
+        <span class="form-notice error">
             {#if !telephoneValid}
-            <span class="form-notice error">Telephone number not valid</span>
+                Telephone number not valid
             {/if}
+        </span>
     </div>
 
     <div class="spacer" />
@@ -91,11 +100,43 @@
                 on:selected={validateDate}
                 notBefore={today}
         />
+        <span class="form-notice error">
             {#if !dateValid}
-            <span class="form-notice error">Date not valid! Must chose date tomorrow or later</span>
+                Must chose date that's tomorrow or later
             {/if}
+        </span>
     </div>
 
+    <div class="spacer half" />
+
+    <!-- ToDo: Don't give a fake error for the weekend slots, just for testing  || !dateValid -->
+    {#if date && (date.getDay() === 6 || date.getDay() === 0)}
+        <p class="form-message error"><SealWarning weight="fill" />&nbsp;Time slots not available for this date</p>
+    {:else}
+        <div class="form-element">
+            <label class="form-label" for="time-slot">Time Slot</label>
+            <div class="select-container">
+                <select
+                        bind:value={timeSlot}
+                        class="form-input"
+                        id="time-slot"
+                        name="time-slot"
+                >
+                    <option value="slot0">8am to 10am</option>
+                    <option value="slot1">10am to 12am</option>
+                    <option value="slot2" disabled>12am to 2pm</option>
+                    <option value="slot3">2pm to 4pm</option>
+                    <option value="slot4">4pm to 6pm</option>
+                    <option value="slot5">6pm to 8pm</option>
+                    <option value="slot6">8pm to 10pm</option>
+                </select>
+                <div class="select-arrow">
+                    <CaretDown />
+                </div>
+            </div>
+        </div>
+    {/if}
+
     <div class="spacer" />
 
     <div class="form-element">
@@ -136,4 +177,34 @@
         resize: none;
         overflow: hidden;
     }
+
+    .select-container{
+        position: relative;
+
+        > select {
+            width: 200px;
+            appearance: none;
+        }
+
+        > .select-arrow {
+            height: 100%;
+
+            position: absolute;
+            top: 0;
+            right: $spacing-small;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            transition: transform 0.1s ease-in-out;
+            pointer-events: none;
+        }
+
+        &:hover {
+            > .select-arrow {
+                transform: translateY(2px);
+            }
+        }
+    }
 </style>

front/src/pages/PageCart.svelte

@@ -105,12 +105,14 @@
     #emptyCart {
         margin-left: auto;
         margin-right: auto;
-        padding: $spacing-large;
 
         max-width: $sizing-default-width;
+        height: 400px;
 
         display: flex;
         flex-direction: column;
+        justify-content: center;
+        align-items: center;
 
         > h1 {
             display: flex;

front/src/pages/PageContact.svelte

@@ -17,22 +17,13 @@
     let emailValid = true;
     let messageValid = false;
 
-    function validateName() {
+    function validateName() { nameValid = name.length > 1 }
-        nameValid = name.length > 1
+    function validateEmail() { emailValid = email.length > 1 }
-    }
+    function validateMessage() { messageValid = message.length > minMessageLength }
-
-    function validateEmail() {
-        emailValid = email.length > 1
-    }
-
-    function validateMessage() {
-        messageValid = message.length > minMessageLength
-    }
 
     function onSubmit() {
         nameValid = true;
         emailValid = true;
-        messageValid = false;
 
         formMessage = postContactEmail(name, email, message)
             .catch((error) => {
@@ -66,16 +57,6 @@
 
 <h2>Contact From</h2>
 <form on:submit|preventDefault={onSubmit}>
-    {#await formMessage then formMessage}
-        {#if formMessage}
-            <p class="form-message success"><SealCheck weight="fill" />&nbsp;{formMessage}</p>
-            <div class="spacer half" />
-        {/if}
-    {:catch error}
-        <p class="form-message error"><SealWarning weight="fill" />&nbsp;{error.message}</p>
-        <div class="spacer half" />
-    {/await}
-
     <div class="form-element">
         <label class="form-label" for="name">Name</label>
         <input
@@ -87,9 +68,11 @@
                 name="name"
                 class="form-input"
         />
+        <span class="form-notice error">
             {#if !nameValid}
-            <span class="form-notice error">Enter a name</span>
+                Enter a name
             {/if}
+        </span>
     </div>
 
     <div class="spacer half" />
@@ -105,9 +88,11 @@
                 name="email"
                 class="form-input"
         />
+        <span class="form-notice error">
             {#if !emailValid}
-            <span class="form-notice error">Email not valid</span>
+                Email not valid
             {/if}
+        </span>
     </div>
 
     <div class="spacer half" />
@@ -130,7 +115,17 @@
         </span>
     </div>
 
-    <div class="spacer" />
+    <div class="spacer half" />
+
+    {#await formMessage then formMessage}
+        {#if formMessage}
+            <p class="form-message success"><SealCheck weight="fill" />&nbsp;{formMessage}</p>
+            <div class="spacer half" />
+        {/if}
+    {:catch error}
+        <p class="form-message error"><SealWarning weight="fill" />&nbsp;{error.message}</p>
+        <div class="spacer half" />
+    {/await}
 
     <button type="submit">Submit&nbsp;&nbsp;<PaperPlaneRight weight="fill" /></button>
 </form>

front/src/pages/PageItem.svelte

@@ -409,12 +409,14 @@
     #error {
         margin-left: auto;
         margin-right: auto;
-        padding: $spacing-large;
 
         max-width: $sizing-default-width;
+        height: 400px;
 
         display: flex;
         flex-direction: column;
+        justify-content: center;
+        align-items: center;
 
         > h1 {
             display: flex;

front/src/styles/_form_element.scss

@@ -29,13 +29,15 @@
     &:hover {
         border: 1px solid rgba($color-dark, 0.4);
     }
-    &:focus {
+    &:focus-visible {
         border: 1px solid rgba($color-primary, 0.9);
         outline: 0 solid transparent;
     }
 }
 
 .form-notice {
+    height: 16px;
+
     padding: 0 $spacing-xsmall;
     display: block;
     font-size: $font-size-xsmall;