From b7bc7da3661480ab415900ec80a72c5f11753044 Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Tue, 30 Apr 2024 14:48:32 +0100
Subject: [PATCH] Basic Cart functionality Add test-api function for contact
 page

---
 front/src/App.svelte                | 15 ++++++++--
 front/src/lib/cart.ts               | 43 +++++++++++++++++++++++++++++
 front/src/lib/test-api.js           | 26 ++++++++++++++++-
 front/src/lib/test-data.js          | 14 +++++-----
 front/src/pages/PageCart.svelte     | 19 +++++++++----
 front/src/pages/PageContact.svelte  | 24 +++++++++++-----
 front/src/pages/PageItem.svelte     |  5 +++-
 front/src/styles/_form_element.scss | 20 ++++++++++++++
 8 files changed, 142 insertions(+), 24 deletions(-)
 create mode 100644 front/src/lib/cart.ts

diff --git a/front/src/App.svelte b/front/src/App.svelte
index 28090dc..fe39557 100644
--- a/front/src/App.svelte
+++ b/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>
diff --git a/front/src/lib/cart.ts b/front/src/lib/cart.ts
new file mode 100644
index 0000000..d771e30
--- /dev/null
+++ b/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;
diff --git a/front/src/lib/test-api.js b/front/src/lib/test-api.js
index 22b5973..98505d3 100644
--- a/front/src/lib/test-api.js
+++ b/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;
 
@@ -66,4 +71,23 @@ export async function getItemByUUID(uuid) {
     }
 
     return data;
-}
\ No newline at end of file
+}
+
+
+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!";
+}
diff --git a/front/src/lib/test-data.js b/front/src/lib/test-data.js
index 8d749b5..b19bb3b 100644
--- a/front/src/lib/test-data.js
+++ b/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",
diff --git a/front/src/pages/PageCart.svelte b/front/src/pages/PageCart.svelte
index b4d53bf..463bb1c 100644
--- a/front/src/pages/PageCart.svelte
+++ b/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>
diff --git a/front/src/pages/PageContact.svelte b/front/src/pages/PageContact.svelte
index ca4bd77..2263884 100644
--- a/front/src/pages/PageContact.svelte
+++ b/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">
diff --git a/front/src/pages/PageItem.svelte b/front/src/pages/PageItem.svelte
index 0f8863a..d23505c 100644
--- a/front/src/pages/PageItem.svelte
+++ b/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">
diff --git a/front/src/styles/_form_element.scss b/front/src/styles/_form_element.scss
index 285bf2c..e60f55f 100644
--- a/front/src/styles/_form_element.scss
+++ b/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;
+    }
+}
\ No newline at end of file