Add announcements banner loading content

Add leaflet type definitions

front/package-lock.json

@@ -13,6 +13,7 @@
       },
       "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^3.0.2",
+        "@types/leaflet": "^1.9.12",
         "phosphor-svelte": "^2.0.1",
         "sass": "^1.75.0",
         "svelte": "^4.2.12",
@@ -701,6 +702,21 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.14",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz",
+      "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==",
+      "dev": true
+    },
+    "node_modules/@types/leaflet": {
+      "version": "1.9.12",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.12.tgz",
+      "integrity": "sha512-BK7XS+NyRI291HIo0HCfE18Lp8oA30H1gpi1tf0mF3TgiCEzanQjOqNZ4x126SXzzi2oNSZhZ5axJp1k0iM6jg==",
+      "dev": true,
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",

front/package.json

@@ -10,6 +10,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
+    "@types/leaflet": "^1.9.12",
     "phosphor-svelte": "^2.0.1",
     "sass": "^1.75.0",
     "svelte": "^4.2.12",

front/src/components/AnnouncementBanner.svelte

@@ -0,0 +1,65 @@
+<script>
+    import { getAnnouncements } from '%/lib/test-api.js';
+
+    let announcement = getAnnouncements();
+</script>
+
+
+{#await announcement}
+    <div class="announcement-banner-loading">
+        <div />
+    </div>
+{:then announcement}
+    <div class="announcement-banner">
+        <img src={announcement.image} alt="">
+    </div>
+{:catch error}
+    <p>{error}</p>
+{/await}
+
+<style lang="scss">
+    @import "%/styles/vars";
+
+    $padding: 1px;
+
+    .announcement-banner-loading {
+        height: 400px;
+
+        position: relative;
+
+        border-radius: $border-radius-large;
+
+        background: linear-gradient(to right, $color-background 8%, rgba($color-dark, 0.3) 38%, $color-background 54%);
+        background-size: 1000px 100%;
+        animation: loading 1s infinite linear;
+
+        overflow: hidden;
+
+        > div {
+            position: absolute;
+            top: $padding;
+            right: $padding;
+            bottom: $padding;
+            left: $padding;
+            border-radius: calc($border-radius-large - $padding);
+            background-color: rgba($color-background, 0.9);
+        }
+    }
+
+    @media only screen and (max-width: 670px) {
+        .announcement-banner-loading {
+            margin: -$spacing-small;
+            margin-bottom: 0;
+            height: 250px;
+        }
+    }
+
+    @keyframes loading{
+        0%{
+            background-position: -500px 0
+        }
+        100%{
+            background-position: 500px 0
+        }
+    }
+</style>

front/src/lib/test-api.js

@@ -4,6 +4,14 @@ async function fakeDelay(timeout = 1000) {
     await new Promise(resolve => setTimeout(resolve, timeout));
 }
 
+export async function getAnnouncements() {
+    const data = {
+        image: "/BannerExampleImage.jpg",
+    };
+    await fakeDelay(2000)
+    return data;
+}
+
 export async function getPopularToday() {
     const data = Items;
     await fakeDelay(2000)

front/src/pages/PageIndex.svelte

@@ -1,22 +1,23 @@
 <script>
     import { onMount } from "svelte";
     import { link } from 'svelte-spa-router';
-    import { map, tileLayer, marker } from 'leaflet';
     import { ArrowUpRight } from "phosphor-svelte";
+    import L from 'leaflet';
 
-    import MenuList from "%/components/MenuList.svelte";
     import { getPopularToday } from "%/lib/test-api.js";
-    import BannerImage from '/BannerExampleImage.jpg';
+    import LoadingBar from "%/components/LoadingBar.svelte";
+    import AnnouncementBanner from "%/components/AnnouncementBanner.svelte";
+    import MenuList from "%/components/MenuList.svelte";
 
     let items = getPopularToday();
 
     onMount(() => {
-        let Map = map('map').setView([50.82304922105467, -0.432780150496344], 13);
+        let map = L.map('map').setView([50.82304922105467, -0.432780150496344], 13);
-        tileLayer(
+        L.tileLayer(
             'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-            {maxZoom: 19, attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'}
+            {maxZoom: 19, attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'}
-        ).addTo(Map);
+        ).addTo(map);
-        marker([50.82304922105467, -0.432780150496344]).addTo(Map);
+        L.marker([50.82304922105467, -0.432780150496344]).addTo(map);
 
     });
 </script>
@@ -25,9 +26,7 @@
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
 </svelte:head>
 
-<div class="announcement-banner">
+<AnnouncementBanner />
-    <img src={BannerImage} alt="">
-</div>
 <a href="/annoucements" use:link>Learn More <ArrowUpRight /></a>
 <div class="spacer" />
 
@@ -49,18 +48,21 @@
                 <tr><td>Sunday</td><td>11am</td><td>2am</td></tr>
             </table>
         </div>
+        <a href="/menu" use:link>Ready to book a table?</a>
     </div>
 </div>
 <div class="spacer" />
 
 <h2>Popular Today</h2>
+<div id="popular">
     {#await items}
-    <p>Loading...</p>
+        <LoadingBar />
     {:then items}
         <MenuList {items} />
     {:catch error}
         <p>{error}</p>
     {/await}
+</div>
 <a href="/menu" use:link>See All <ArrowUpRight /></a>
 <div class="spacer" />
 
@@ -114,6 +116,30 @@
             h2, p {
                 padding-bottom: $spacing-xsmall;
             }
+
+            a {
+                margin-top: 8px;
+                padding: 0 $spacing-small;
+
+                width: 100%;
+                height: 30px;
+
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                font-size: $font-size-p;
+                text-decoration: none;
+
+                border-radius: 9999px;
+                background-color: $color-primary;
+                color: $color-on-primary;
+
+                &:hover {
+                    background-color: $color-dark;
+                    color: $color-on-dark;
+                }
+            }
         }
     }
 
@@ -154,6 +180,10 @@
         }
     }
 
+    #popular {
+        position: relative;
+    }
+
     @media only screen and (max-width: 900px) {
         #map {
             min-width: 400px;

front/src/pages/PageMenu.svelte

@@ -7,13 +7,17 @@
     import { getMenuItems } from "%/lib/test-api.js";
 
     let items = getMenuItems();
+
+    function reloadMenu() {
+        items = getMenuItems();
+    }
 </script>
 
 <div class="menu">
     <div class="container" id="filter">
         <div class="header">
             <h2>Filters</h2>
-            <button><ArrowClockwise /></button>
+            <button on:click={reloadMenu}><ArrowClockwise /></button>
         </div>
         <hr>
         <DropDown name="Meal Prefrences" open={true}>

front/src/styles/_announcement_banner.scss

@@ -9,23 +9,24 @@
 
     img{
         width: 100%;
-        max-height: 400%;
+        height: 400px;
 
         display: block;
 
-        aspect-ratio: 16 / 7;
+        //aspect-ratio: 16 / 7;
         object-fit: cover;
     }
 }
 
 @media only screen and (max-width: 670px) {
     .announcement-banner {
-        margin: -$spacing-normal;
+        margin: -$spacing-small;
         margin-bottom: 0;
-        border-radius: 0;
+        //border-radius: 0;
 
         img {
-            aspect-ratio: 16 / 9;
+            height: 250px;
+            //aspect-ratio: 16 / 9;
         }
     }
 }