From 3198dec20ce0cf81f4df59f9876b804274ddaf11 Mon Sep 17 00:00:00 2001
From: Fluffy <michal-gdula@protonmail.com>
Date: Fri, 10 May 2024 14:46:53 +0100
Subject: [PATCH] Start on Booking form Clean up navigation bar Form CSS Add
 warning to run when skipping migrations

---
 cmd/run.go                                 |   2 +
 front/src/App.svelte                       |  43 ++++---
 front/src/components/MenuItem.svelte       |   2 +-
 front/src/lib/cart.ts                      |   3 +-
 front/src/lib/test-data.ts                 |  20 +--
 front/src/pages/PageBooking.svelte         | 134 +++++++++++++++++++++
 front/src/pages/PageContact.svelte         |   9 ++
 front/src/styles/_announcement_banner.scss |   5 +-
 front/src/styles/_form_element.scss        |   1 -
 9 files changed, 181 insertions(+), 38 deletions(-)

diff --git a/cmd/run.go b/cmd/run.go
index b3a521a..a5da512 100644
--- a/cmd/run.go
+++ b/cmd/run.go
@@ -34,6 +34,8 @@ func run(flags []string) {
 			fmt.Println("Run `TastyBites status` or use the flag -skipMigrations")
 			os.Exit(1)
 		}
+	} else {
+		fmt.Println("WARNING: Skipping migrations! This can lead to errors, or even data loss!")
 	}
 
 	api.Serve(api.Config{
diff --git a/front/src/App.svelte b/front/src/App.svelte
index 439ed0c..445c44a 100644
--- a/front/src/App.svelte
+++ b/front/src/App.svelte
@@ -1,17 +1,18 @@
 <script>
     import Router, { replace, link } from 'svelte-spa-router';
     import active from 'svelte-spa-router/active'
-    import { TwitterLogo, FacebookLogo, InstagramLogo, TiktokLogo } from 'phosphor-svelte';
+    import { House, BookOpenText, Envelope, CalendarDots, Basket, TwitterLogo, FacebookLogo, InstagramLogo, TiktokLogo } from 'phosphor-svelte';
 
     import Cart, { cartLoaded } from './lib/cart';
     import routes from './routes';
     import Logo from '/assets/LogoAlt.svg';
-    import Spinner from '/spinner.svg';
 
     const links = {
         home: {path: '/', className: 'active'},
         menu: {path: '/menu', className: 'active'},
+        about: {path: '/about', className: 'active'},
         contact: {path: '/contact', className: 'active'},
+        booking: {path: '/booking', className: 'active'},
         cart: {path: '/cart', className: 'active'},
     }
 
@@ -61,43 +62,41 @@
 
 
 {#if showNavBar }
-    <nav class:scrolled={scrollY > 0} class:mobile={width < 700}>
-        {#if !(width < 700)}
+    <nav class:scrolled={scrollY > 0} class:mobile={width < 850}>
+        {#if !(width < 850)}
             <ul style="justify-content: flex-end">
                 <li use:active={links.home}><a href="/" use:link>Home</a></li>
-                <li use:active={links.menu}><a href="/menu" use:link>Menu</a></li>
+                <li use:active={links.about}><a href="/about" use:link>About</a></li>
+                <li use:active={links.contact}><a href="/contact" use:link>Contact</a></li>
             </ul>
             <span class="nav-logo"><img src={Logo} alt="TastyBites"></span>
             <ul style="justify-content: flex-start">
-                <li use:active={links.contact}><a href="/contact" use:link>Contact&nbsp;Us</a></li>
+                <li use:active={links.menu}><a href="/menu" use:link>Menu</a></li>
+                <li use:active={links.booking}><a href="/booking" use:link>Booking</a></li>
                 <li use:active={links.cart}>
                     <a href="/cart" use:link>
                         Cart&nbsp;&nbsp;
                         <span class="nav-basket">
-                            {#await cartLoaded}
-                                <img src={Spinner} alt="Cart Loading">
-                            {:then _}
-                                {cartItemCount}
-                            {/await}
+                            {#await cartLoaded then _}{cartItemCount}{/await}
                         </span>
                     </a>
                 </li>
             </ul>
         {:else}
             <ul>
-                <li use:active={links.home}><a href="/" use:link>Home</a></li>
-                <li use:active={links.menu}><a href="/menu" use:link>Menu</a></li>
-                <li use:active={links.contact}><a href="/contact" use:link>Contact&nbsp;Us</a></li>
+                <li use:active={links.home}><a href="/" use:link><House weight="fill" /></a></li>
+                <li use:active={links.contact}><a href="/contact" use:link><Envelope weight="fill" /></a></li>
+                <li use:active={links.menu}><a href="/menu" use:link><BookOpenText weight="fill" /></a></li>
+                <li use:active={links.booking}><a href="/booking" use:link><CalendarDots weight="fill" /></a></li>
                 <li use:active={links.cart}>
                     <a href="/cart" use:link>
-                        Cart&nbsp;&nbsp;
-                        <span class="nav-basket">
-                            {#await cartLoaded}
-                                <img src={Spinner} alt="Cart Loading">
-                            {:then _}
-                                {cartItemCount}
-                            {/await}
-                        </span>
+                        {#await cartLoaded then _}
+                            {#if cartItemCount === 0}
+                                <Basket weight="fill" />
+                            {:else}
+                                <span class="nav-basket">{cartItemCount}</span>
+                            {/if}
+                        {/await}
                     </a>
                 </li>
             </ul>
diff --git a/front/src/components/MenuItem.svelte b/front/src/components/MenuItem.svelte
index 3ead38c..b79d52d 100644
--- a/front/src/components/MenuItem.svelte
+++ b/front/src/components/MenuItem.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
+    import { onMount } from "svelte";
     import { link } from 'svelte-spa-router';
     import { Acorn, Fish, Leaf, Pepper, ArrowUpRight, GrainsSlash } from 'phosphor-svelte';
 
     import { type Item, Labels} from "../lib/types";
     import LoadingImage from '/assets/MenuItemLoadingAlt.svg';
-    import {onMount} from "svelte";
 
     export let item: Item;
 
diff --git a/front/src/lib/cart.ts b/front/src/lib/cart.ts
index 761f872..4e148f8 100644
--- a/front/src/lib/cart.ts
+++ b/front/src/lib/cart.ts
@@ -17,8 +17,7 @@ function createCartStore() {
         }
 
         try {
-            const newData: Record<string, CartItem> =
-                await postVerifyCart(localData);
+            const newData: Record<string, CartItem> = await postVerifyCart(localData);
             cart.set(newData);
         } catch (error) {
             console.error("Could not load basket:", error);
diff --git a/front/src/lib/test-data.ts b/front/src/lib/test-data.ts
index 864bc46..b2fa804 100644
--- a/front/src/lib/test-data.ts
+++ b/front/src/lib/test-data.ts
@@ -61,21 +61,21 @@ Example
         `,
         labels: [Labels.nut],
     },
-    {
-        uuid: "gwagwa",
-        availability: false,
-        name: "GwaGwa",
-        price: 69,
-        labels: [Labels.nut],
-        images: ["/item_images/dab.jpg"],
-    },
+    // {
+    //     uuid: "gwagwa",
+    //     availability: false,
+    //     name: "GwaGwa",
+    //     price: 69,
+    //     labels: [Labels.nut],
+    //     images: ["/item_images/dab.jpg"],
+    // },
     {
         uuid: "hogmelon",
         availability: true,
         name: "Hogermellon",
         price: 1111,
         description: `
-This is a sample description. Gay Balls.
+This is a sample description.
 
 Contains the following:
 - hog
@@ -92,7 +92,7 @@ Contains the following:
         description: `
 This is a sample description.
 
-Gay Balls
+Blue Hog
         `,
         labels: [Labels.nut, Labels.gluten, Labels.spicy],
         images: ["/item_images/sonichog.jpg"],
diff --git a/front/src/pages/PageBooking.svelte b/front/src/pages/PageBooking.svelte
index 6382160..57f7498 100644
--- a/front/src/pages/PageBooking.svelte
+++ b/front/src/pages/PageBooking.svelte
@@ -1 +1,135 @@
+<script lang="ts">
+    import { expandOnTyping } from "../lib/utils";
+
+    const specialRequestsMax = 300;
+
+    let name = "";
+    let email = "";
+    let telephone = "";
+    let specialRequests = "";
+
+    let nameValid = true;
+    let emailValid = true;
+    let telephoneValid = true;
+    let specialRequestsValid = true;
+
+    function validateName() {
+        nameValid = name.length > 1
+    }
+
+    function validateEmail() {
+        emailValid = email.length > 1
+    }
+
+    function validateTelephone() {
+        telephoneValid = telephone.length == 11
+    }
+
+    function validateSpecialRequests() {
+        specialRequestsValid = specialRequests.length < 301
+    }
+
+    function onSubmit(event) {
+
+    }
+</script>
+
 <h1>Table booking</h1>
+<form on:submit|preventDefault={onSubmit}>
+    <div class="form-element">
+        <label class="form-label" for="name">Full 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" />
+
+    <div class="form-element">
+        <label class="form-label" for="email">Telephone</label>
+        <input
+                bind:value={telephone}
+                on:blur={validateTelephone}
+                on:input={validateTelephone}
+                type="text"
+                id="telephone"
+                name="telephone"
+                class="form-input"
+        />
+        {#if !telephoneValid}
+            <span class="form-notice error">Telephone number not valid</span>
+        {/if}
+    </div>
+
+    <div class="spacer half" />
+    <hr>
+    <div class="spacer" />
+    <hr>
+    <div class="spacer half" />
+
+    <div class="form-element">
+        <label class="form-label" for="message">Message</label>
+        <textarea
+                bind:value={specialRequests}
+                on:input={validateSpecialRequests}
+                on:blur={validateSpecialRequests}
+                use:expandOnTyping
+                rows="1"
+                cols="50"
+                id="message"
+                name="message"
+                class="form-input"
+        />
+        <span class="form-notice" class:error={!specialRequestsValid}>
+            ({specialRequests.length}/{specialRequestsMax})
+        </span>
+    </div>
+</form>
+
+<style lang="scss">
+    @import "../styles/vars";
+
+    #name, #email {
+        width: 300px;
+        max-width: calc(100vw - calc(2 * $spacing-normal));
+    }
+
+    #telephone {
+        width: 180px;
+        max-width: calc(100vw - calc(2 * $spacing-normal));
+    }
+
+    #message {
+        min-width: 250px;
+        max-width: calc(100vw - calc(2 * $spacing-normal));
+        resize: none;
+        overflow: hidden;
+    }
+</style>
\ No newline at end of file
diff --git a/front/src/pages/PageContact.svelte b/front/src/pages/PageContact.svelte
index db4e95b..bafab99 100644
--- a/front/src/pages/PageContact.svelte
+++ b/front/src/pages/PageContact.svelte
@@ -20,9 +20,11 @@
     function validateName() {
         nameValid = name.length > 1
     }
+
     function validateEmail() {
         emailValid = email.length > 1
     }
+
     function validateMessage() {
         messageValid = message.length > minMessageLength
     }
@@ -67,9 +69,11 @@
     {#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">
@@ -88,6 +92,8 @@
         {/if}
     </div>
 
+    <div class="spacer half" />
+
     <div class="form-element">
         <label class="form-label" for="email">Email</label>
         <input
@@ -104,6 +110,7 @@
         {/if}
     </div>
 
+    <div class="spacer half" />
     <!-- ToDo: Add dropdown for issue type, such as Technical, Order, Account, or other -->
 
     <div class="form-element">
@@ -123,6 +130,8 @@
         </span>
     </div>
 
+    <div class="spacer" />
+
     <button type="submit">Submit&nbsp;&nbsp;<PaperPlaneRight weight="fill" /></button>
 </form>
 
diff --git a/front/src/styles/_announcement_banner.scss b/front/src/styles/_announcement_banner.scss
index db502c7..814f75d 100644
--- a/front/src/styles/_announcement_banner.scss
+++ b/front/src/styles/_announcement_banner.scss
@@ -20,13 +20,14 @@
 
 @media only screen and (max-width: 670px) {
     .announcement-banner {
-        margin: -$spacing-small;
+        margin: -$spacing-normal;
         margin-bottom: 0;
-        //border-radius: 0;
+        border-radius: 0;
 
         img {
             height: 250px;
             //aspect-ratio: 16 / 9;
+            aspect-ratio: unset;
         }
     }
 }
diff --git a/front/src/styles/_form_element.scss b/front/src/styles/_form_element.scss
index bb5e4c3..a0a351a 100644
--- a/front/src/styles/_form_element.scss
+++ b/front/src/styles/_form_element.scss
@@ -1,5 +1,4 @@
 .form-element {
-    margin-bottom: $spacing-normal;
     width: fit-content;
     overflow: hidden;
 }