Add fake API to allow for testing of requests

front/src/App.svelte

@@ -48,38 +48,20 @@
     <nav class:scrolled={scrolled} class:mobile={mobile}>
         {#if !mobile}
             <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.home}><a href="/" use:link>Home</a></li>
+                <li use:active={links.menu}><a href="/menu" use:link>Menu</a></li>
             </ul>
-
             <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.contact}><a href="/contact" use:link>Contact&nbsp;Us</a></li>
+                <li use:active={links.cart}><a href="/cart" use:link>Cart</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.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>
             </ul>
         {/if}
     </nav>

front/src/lib/api.js

@@ -1,4 +1,4 @@
-import Items from '%/lib/testData.js';
+import Items from '%/lib/test-data.js';
 
 export async function getPopularToday() {
     const res = await fetch("/api/items")

front/src/lib/test-api.js

@@ -0,0 +1,30 @@
+import Items from '%/lib/test-data.js';
+
+async function fakeDelay(timeout = 1000) {
+    await new Promise(resolve => setTimeout(resolve, timeout));
+}
+
+export async function getPopularToday() {
+    const data = Items;
+    await fakeDelay(2000)
+    return data;
+}
+
+export async function getMenuItems() {
+    const data = [
+        {
+            name: "Main Menu",
+            items: Items,
+        },
+        {
+            name: "Breakfast",
+            items: [],
+        },
+        {
+            name: "Seasonal",
+            items: Items,
+        },
+    ];
+    await fakeDelay(2000)
+    return data;
+}

front/src/lib/test-data.js

@@ -1,53 +1,72 @@
 // "vegan", "fish", "nut", "spicy", "gluten"
 
-let Items;
-export default Items = [
+const Items = [
+    // soap: {
     {
+        uuid: "soap",
         name: "Bar of Soap",
         price: 69.99,
         labels: ["vegan", "spicy"],
     },
+    // sock: {
     {
+        uuid: "sock",
         name: "Sock",
         price: 21,
         labels: ["vegan", "fish", "nut", "spicy"],
     },
+    // brick: {
     {
+        uuid: "brick",
         name: "Brick",
         price: 0,
         labels: ["spicy"],
     },
+    // toast: {
     {
+        uuid: "toast",
         name: "Toast",
         price: 4382749832743,
         labels: ["gluten"],
     },
+    // water: {
     {
+        uuid: "water",
         name: "water",
         price: 1,
         labels: ["fish"],
     },
+    // mouldy_bread: {
     {
+        uuid: "mouldy_bread",
         name: "half eaten mouldy bread",
         price: -99,
         labels: ["nut"],
     },
+    // gwagwa: {
     {
+        uuid: "gwagwa",
         name: "GwaGwa",
         price: "Priceless",
         labels: ["nut"],
         image: "/dab.jpg",
     },
+    // hogmelon: {
     {
+        uuid: "hogmelon",
         name: "Hogermellon",
         price: "1111",
         labels: ["fish"],
         image: "/wathog.jpg",
     },
+    // bluhog: {
     {
+        uuid: "bluhog",
         name: "Blue HOGGGGG",
         price: "ARUGH",
         labels: ["nut", "gluten", "spicy"],
         image: "/sonichog.jpg",
     },
 ];
+
+export default Items;

front/src/pages/PageIndex.svelte

@@ -5,7 +5,7 @@
     import { ArrowUpRight } from "phosphor-svelte";
 
     import MenuList from "%/components/MenuList.svelte";
-    import { getPopularToday } from "%/lib/api.js";
+    import { getPopularToday } from "%/lib/test-api.js";
     import BannerImage from '/BannerExampleImage.jpg';
 
     let items = getPopularToday();
@@ -35,8 +35,8 @@
 <div id="contact">
     <div id="map"></div>
     <div class="container">
-        <h2>Some Title</h2>
-        <p>Example text</p>
+        <h2>Opening Times</h2>
+        <p>Please make sure to checkout our full calendar, as we have different times during public holiday</p>
         <div id="timetable">
             <table>
                 <tr><th>Day</th><th>Opening</th><th>Closing</th></tr>

front/src/pages/PageItem.svelte

@@ -1,7 +1,7 @@
 <script>
     import MenuList from "%/components/MenuList.svelte";
     import LoadingImage from "/MenuItemLoading.svg";
-    import Items from '%/lib/testData.js';
+    import Items from '%/lib/test-data.js';
 
     let items = Items;
 

front/src/pages/PageMenu.svelte

@@ -1,9 +1,10 @@
 <script>
     import { ArrowClockwise } from "phosphor-svelte";
 
+    import LoadingBar from "%/components/LoadingBar.svelte";
     import MenuList from "%/components/MenuList.svelte";
     import DropDown from "%/components/DropDown.svelte";
-    import { getMenuItems } from "%/lib/api.js";
+    import { getMenuItems } from "%/lib/test-api.js";
 
     let items = getMenuItems();
 </script>
@@ -139,6 +140,9 @@
     </div>
 
     <div id="menu-list">
+        {#await items}
+            <LoadingBar />
+        {:then items}
             {#each items as section}
                 <h2>{section.name}</h2>
                 {#if section.items.length > 0}
@@ -148,6 +152,9 @@
                 {/if}
                 <div class="spacer" />
             {/each}
+        {:catch error}
+            <p>{error}</p>
+        {/await}
     </div>
 </div>
 
@@ -162,7 +169,9 @@
     }
 
     #menu-list {
-        padding-left: $spacing-normal;
+        margin-left: $spacing-normal;
+        width: 100%;
+        position: relative;
     }
 
     #filter {
@@ -206,8 +215,8 @@
         }
 
         #menu-list {
-            padding-left: 0;
-            padding-top: $spacing-normal;
+            margin-left: 0;
+            margin-top: $spacing-normal;
         }
     }
 </style>