From fd132ebf97872f9551477559f17b5917fd2e9163 Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Sat, 11 May 2024 16:26:17 +0100
Subject: [PATCH] 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           |  17 +---
 front/src/pages/Page404.svelte      |   6 +-
 front/src/pages/Page500.svelte      |   6 +-
 front/src/pages/PageBooking.svelte  |  97 +++++++++++++++++---
 front/src/pages/PageCart.svelte     |   4 +-
 front/src/pages/PageContact.svelte  | 131 +++++++++++++---------------
 front/src/pages/PageItem.svelte     |   4 +-
 front/src/styles/_form_element.scss |   4 +-
 8 files changed, 166 insertions(+), 103 deletions(-)

diff --git a/front/src/lib/test-api.ts b/front/src/lib/test-api.ts
index b840970..f45fcd5 100644
--- a/front/src/lib/test-api.ts
+++ b/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[] = [];
-
-    await getItemsByUUID([uuid])
-        .then((result) => {
-            if (result.length !== 1) {
-                throw new Error("Resource could not be found");
-            }
-            data.push(...result);
-        })
-        .catch((error) => {
-            throw error;
-        });
-
+    const data = await getItemsByUUID([uuid])
+    if (data.length !== 1) {
+        throw new Error("Resource could not be found");
+    }
     return data[0];
 }
 
diff --git a/front/src/pages/Page404.svelte b/front/src/pages/Page404.svelte
index fd10d2c..d3b3dec 100644
--- a/front/src/pages/Page404.svelte
+++ b/front/src/pages/Page404.svelte
@@ -11,12 +11,12 @@
     @import "../styles/vars";
 
     div {
-        padding: $spacing-large;
-
-        height: 100%;
+        height: 400px;
 
         display: flex;
         flex-direction: column;
+        justify-content: center;
+        align-items: center;
     }
     h1 {
         display: flex;
diff --git a/front/src/pages/Page500.svelte b/front/src/pages/Page500.svelte
index 2a6bbe6..3200ebd 100644
--- a/front/src/pages/Page500.svelte
+++ b/front/src/pages/Page500.svelte
@@ -11,12 +11,12 @@
     @import "../styles/vars";
 
     div {
-        padding: $spacing-large;
-
-        height: 100%;
+        height: 400px;
 
         display: flex;
         flex-direction: column;
+        justify-content: center;
+        align-items: center;
     }
     h1 {
         display: flex;
diff --git a/front/src/pages/PageBooking.svelte b/front/src/pages/PageBooking.svelte
index 8edc242..29081dc 100644
--- a/front/src/pages/PageBooking.svelte
+++ b/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"
         />
-        {#if !nameValid}
-            <span class="form-notice error">Enter a name</span>
-        {/if}
+        <span class="form-notice error">
+            {#if !nameValid}
+                Enter a name
+            {/if}
+        </span>
     </div>
 
     <div class="spacer half" />
@@ -59,15 +64,17 @@
                 name="email"
                 class="form-input"
         />
-        {#if !emailValid}
-            <span class="form-notice error">Email not valid</span>
-        {/if}
+        <span class="form-notice error">
+            {#if !emailValid}
+                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"
         />
-        {#if !telephoneValid}
-            <span class="form-notice error">Telephone number not valid</span>
-        {/if}
+        <span class="form-notice error">
+            {#if !telephoneValid}
+                Telephone number not valid
+            {/if}
+        </span>
     </div>
 
     <div class="spacer" />
@@ -91,11 +100,43 @@
                 on:selected={validateDate}
                 notBefore={today}
         />
-        {#if !dateValid}
-            <span class="form-notice error">Date not valid! Must chose date tomorrow or later</span>
-        {/if}
+        <span class="form-notice error">
+            {#if !dateValid}
+                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>
\ No newline at end of file
diff --git a/front/src/pages/PageCart.svelte b/front/src/pages/PageCart.svelte
index c290c72..b8b87e3 100644
--- a/front/src/pages/PageCart.svelte
+++ b/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;
diff --git a/front/src/pages/PageContact.svelte b/front/src/pages/PageContact.svelte
index bafab99..224a8d9 100644
--- a/front/src/pages/PageContact.svelte
+++ b/front/src/pages/PageContact.svelte
@@ -17,22 +17,13 @@
     let emailValid = true;
     let messageValid = false;
 
-    function validateName() {
-        nameValid = name.length > 1
-    }
-
-    function validateEmail() {
-        emailValid = email.length > 1
-    }
-
-    function validateMessage() {
-        messageValid = message.length > minMessageLength
-    }
+    function validateName() { nameValid = name.length > 1 }
+    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,6 +57,66 @@
 
 <h2>Contact From</h2>
 <form on:submit|preventDefault={onSubmit}>
+    <div class="form-element">
+        <label class="form-label" for="name">Name</label>
+        <input
+                bind:value={name}
+                on:blur={validateName}
+                on:input={validateName}
+                type="text"
+                id="name"
+                name="name"
+                class="form-input"
+        />
+        <span class="form-notice error">
+            {#if !nameValid}
+                Enter a name
+            {/if}
+        </span>
+    </div>
+
+    <div class="spacer half" />
+
+    <div class="form-element">
+        <label class="form-label" for="email">Email</label>
+        <input
+                bind:value={email}
+                on:blur={validateEmail}
+                on:input={validateEmail}
+                type="text"
+                id="email"
+                name="email"
+                class="form-input"
+        />
+        <span class="form-notice error">
+            {#if !emailValid}
+                Email not valid
+            {/if}
+        </span>
+    </div>
+
+    <div class="spacer half" />
+    <!-- ToDo: Add dropdown for issue type, such as Technical, Order, Account, or other -->
+
+    <div class="form-element">
+        <label class="form-label" for="message">Message</label>
+        <textarea
+                bind:value={message}
+                on:input={validateMessage}
+                use:expandOnTyping
+                rows="1"
+                cols="50"
+                id="message"
+                name="message"
+                class="form-input"
+        />
+        <span class="form-notice" class:error={!messageValid}>
+            ({message.length}/{minMessageLength})
+        </span>
+    </div>
+
+    <div class="spacer half" />
+
     {#await formMessage then formMessage}
         {#if formMessage}
             <p class="form-message success"><SealCheck weight="fill" />&nbsp;{formMessage}</p>
@@ -76,62 +127,6 @@
         <div class="spacer half" />
     {/await}
 
-    <div class="form-element">
-        <label class="form-label" for="name">Name</label>
-        <input
-            bind:value={name}
-            on:blur={validateName}
-            on:input={validateName}
-            type="text"
-            id="name"
-            name="name"
-            class="form-input"
-        />
-        {#if !nameValid}
-            <span class="form-notice error">Enter a name</span>
-        {/if}
-    </div>
-
-    <div class="spacer half" />
-
-    <div class="form-element">
-        <label class="form-label" for="email">Email</label>
-        <input
-            bind:value={email}
-            on:blur={validateEmail}
-            on:input={validateEmail}
-            type="text"
-            id="email"
-            name="email"
-            class="form-input"
-        />
-        {#if !emailValid}
-            <span class="form-notice error">Email not valid</span>
-        {/if}
-    </div>
-
-    <div class="spacer half" />
-    <!-- ToDo: Add dropdown for issue type, such as Technical, Order, Account, or other -->
-
-    <div class="form-element">
-        <label class="form-label" for="message">Message</label>
-        <textarea
-            bind:value={message}
-            on:input={validateMessage}
-            use:expandOnTyping
-            rows="1"
-            cols="50"
-            id="message"
-            name="message"
-            class="form-input"
-        />
-        <span class="form-notice" class:error={!messageValid}>
-            ({message.length}/{minMessageLength})
-        </span>
-    </div>
-
-    <div class="spacer" />
-
     <button type="submit">Submit&nbsp;&nbsp;<PaperPlaneRight weight="fill" /></button>
 </form>
 
diff --git a/front/src/pages/PageItem.svelte b/front/src/pages/PageItem.svelte
index 8a34b45..d2715fd 100644
--- a/front/src/pages/PageItem.svelte
+++ b/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;
diff --git a/front/src/styles/_form_element.scss b/front/src/styles/_form_element.scss
index a0a351a..8d008bd 100644
--- a/front/src/styles/_form_element.scss
+++ b/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;