Start on Booking form

Clean up navigation bar Form CSS Add warning to run when skipping migrations
2024-12-26 09:26:24 +00:00 · 2024-05-10 14:46:53 +01:00 · 2024-05-10 14:46:53 +01:00 · 3198dec20c
parent 5cce507c8a
commit 3198dec20c
9 changed files with 181 additions and 38 deletions
--- 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{
--- 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>
--- 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;

--- 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);
--- 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"],
--- 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>
--- 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>

--- 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;
        }
    }
 }
--- 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;
 }