Basic Cart functionality

Add test-api function for contact page

front/src/App.svelte

@@ -1,9 +1,11 @@
 <script>
+    import { get } from 'svelte/store';
     import Router from 'svelte-spa-router';
     import { replace, link } from 'svelte-spa-router';
     import active from 'svelte-spa-router/active'
     import { TwitterLogo, FacebookLogo, InstagramLogo, TiktokLogo } from 'phosphor-svelte';
 
+    import Cart from '%/lib/cart.ts';
     import routes from '%/routes.js';
     import Logo from '/LogoAlt.svg';
 
@@ -14,6 +16,11 @@
         cart: {path: '/cart', className: 'active'},
     }
 
+    let cartLen = 0;
+    Cart.subscribe((value) => {
+        cartLen = Cart.getLength();
+    });
+
     let scrollY = 0;
     let width = 0;
 
@@ -56,14 +63,18 @@
             <span><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.cart}><a href="/cart" use:link>Cart</a></li>
+                <li use:active={links.cart}><a href="/cart" use:link>
+                    Cart&nbsp;{#if cartLen}({cartLen}){/if}
+                </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.cart}><a href="/cart" use:link>Cart</a></li>
+                <li use:active={links.cart}><a href="/cart" use:link>
+                    Cart&nbsp;{#if cartLen}({cartLen}){/if}
+                </a></li>
             </ul>
         {/if}
     </nav>

front/src/lib/cart.ts

@@ -0,0 +1,43 @@
+import { get, writable } from "svelte/store";
+
+// Load content from localstorage
+let local = [];
+try {
+    local = JSON.parse(localStorage.getItem("basket")) || []
+} catch {
+    console.error("Failed to load cart")
+}
+
+// Store function
+function createCartStore() {
+    const cart = writable(local);
+
+    function addToCart(item: any) {
+        cart.update((cart) => [...cart, item]);
+    }
+
+    function getLength() {
+        return get(cart).length;
+    }
+
+    function removeByUUID(uuid: string) {
+        cart.update((cart) => cart.filter((item) => item.uuid !== uuid))
+    }
+
+    return {
+        ...cart,
+        addToCart,
+        getLength,
+        removeByUUID,
+    }
+}
+
+// Create store
+const Cart = createCartStore();
+
+// Make sure to update localstorage on any changes
+Cart.subscribe((value) => {
+    localStorage.setItem("basket", JSON.stringify(value));
+});
+
+export default Cart;

front/src/lib/test-api.js

@@ -1,5 +1,6 @@
 import Items from '%/lib/test-data.js';
 
+
 let cache = {};
 
 
@@ -7,6 +8,7 @@ async function fakeDelay(timeout = 1000) {
     await new Promise(resolve => setTimeout(resolve, timeout));
 }
 
+
 export async function getAnnouncements() {
     if (cache.announcement_banner !== undefined) {
         return cache.announcement_banner;
@@ -20,6 +22,7 @@ export async function getAnnouncements() {
     return data;
 }
 
+
 export async function getPopularToday() {
     if (cache.popular_today !== undefined) {
         return cache.popular_today;
@@ -31,6 +34,7 @@ export async function getPopularToday() {
     return data;
 }
 
+
 export async function getMenuItems() {
     const data = [
         {
@@ -50,6 +54,7 @@ export async function getMenuItems() {
     return data;
 }
 
+
 export async function getItemByUUID(uuid) {
     let data;
 
@@ -67,3 +72,22 @@ export async function getItemByUUID(uuid) {
 
     return data;
 }
+
+
+export async function postContactEmail(name, email, message) {
+    await fakeDelay(1000)
+
+    if (!name) {
+        throw new Error("Namey missing");
+    }
+    if (!email) {
+        throw new Error("Emaily missing");
+    }
+    if (!message) {
+        throw new Error("Message missing");
+    } else if (message.length < 150) {
+        throw new Error("Message FUCKED");
+    }
+
+    return "Check your email to confirm the message!";
+}

front/src/lib/test-data.js

@@ -50,13 +50,13 @@ const Items = [
         detail: "Example",
     },
     // gwagwa: {
-    {
-        uuid: "gwagwa",
-        name: "GwaGwa",
-        price: "Priceless",
-        labels: ["nut"],
-        image: "/dab.jpg",
-    },
+    // {
+    //     uuid: "gwagwa",
+    //     name: "GwaGwa",
+    //     price: "Priceless",
+    //     labels: ["nut"],
+    //     image: "/dab.jpg",
+    // },
     // hogmelon: {
     {
         uuid: "hogmelon",

front/src/pages/PageCart.svelte

@@ -1,15 +1,22 @@
 <script>
     import { link } from 'svelte-spa-router';
+
+    import Cart from '%/lib/cart.ts';
+    import MenuList from "%/components/MenuList.svelte";
+
+    console.log($Cart);
 </script>
 
 <h1>Shopping Cart</h1>
 
-<div class="container">
-    <div class="section">
-        <p>Empty....</p>
-    </div>
-</div>
+<MenuList items={$Cart} />
 
-<div class="spacer"></div>
+<ul>
+    {#each $Cart as item}
+        <li>
+            <button on:click={() => {Cart.removeByUUID(item.uuid)}}>Yeet {item.name}</button>
+        </li>
+    {/each}
+</ul>
 
 <p>Looking past orders? Check out the <a href="/contact" use:link>commonly asked questions</a></p>

front/src/pages/PageContact.svelte

@@ -1,11 +1,14 @@
 <script>
-    import { PaperPlaneRight } from "phosphor-svelte";
+    import { PaperPlaneRight, SealWarning, SealCheck } from "phosphor-svelte";
 
     import DropDown from "%/components/DropDown.svelte";
+    import { postContactEmail } from "%/lib/test-api.js";
     import { expandOnTyping } from "%/lib/utils.js";
 
     const minMessageLength = 150;
 
+    let formMessage;
+
     let name = "";
     let email = "";
     let message = "";
@@ -25,17 +28,14 @@
     }
 
     function onSubmit(event) {
-        console.log(name, email, message);
+        formMessage = postContactEmail(name, email, message);
     }
 </script>
 
 <h1>Contact us</h1>
 
+<h2>Commonly Asked Questions</h2>
 <div class="container">
-<!--    <div class="header">-->
-<!--        <h2>Commonly Asked Questions</h2>-->
-<!--    </div>-->
-    <hr>
     <DropDown name="Can I refund my order?">
         <p>If you ordered online, if we haven't started making your food yet, a refund is possible.</p>
         <p>If you reserved a table, you can refund upto 1 hour before your time.</p>
@@ -54,6 +54,14 @@
 
 <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>
+        {/if}
+    {:catch error}
+        <p class="form-message error"><SealWarning weight="fill" />&nbsp;{error.message}</p>
+    {/await}
+
     <div class="form-element">
         <label class="form-label" for="name">Name</label>
         <input
@@ -86,6 +94,8 @@
         {/if}
     </div>
 
+    <!-- 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
@@ -103,7 +113,7 @@
         </span>
     </div>
 
-    <button type="submit">Submit&nbsp;&nbsp;<PaperPlaneRight /></button>
+    <button type="submit">Submit&nbsp;&nbsp;<PaperPlaneRight weight="fill" /></button>
 </form>
 
 <style lang="scss">

front/src/pages/PageItem.svelte

@@ -2,9 +2,10 @@
     import { replace } from "svelte-spa-router";
     import { SmileySad } from "phosphor-svelte";
 
+    import Cart from "%/lib/cart.ts";
+    import { getPopularToday, getItemByUUID } from "%/lib/test-api.js";
     import MenuList from "%/components/MenuList.svelte";
     import LoadingBar from "%/components/LoadingBar.svelte";
-    import { getPopularToday, getItemByUUID } from "%/lib/test-api.js";
     import LoadingImage from "/MenuItemLoading.svg";
 
     export let params;
@@ -64,6 +65,8 @@
             <div class="container">
                 <p>{item.detail}</p>
             </div>
+
+            <button on:click={() => { Cart.addToCart(item) }}>Add to Cart</button>
         </div>
     {:catch error}
         <div id="error">

front/src/styles/_form_element.scss

@@ -47,3 +47,23 @@
         color: $color-error;
     }
 }
+
+.form-message {
+    margin-bottom: $spacing-small;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+
+    text-shadow: 0 1px 0.5px rgba(#000, 0.2);
+    border-radius: $border-radius-normal;
+    color: $color-on-background;
+
+    &.success {
+        color: $color-primary;
+    }
+    &.error {
+        color: $color-error;
+    }
+}