Add LeafletJS map

front/package-lock.json

@@ -8,6 +8,7 @@
       "name": "front",
       "version": "0.0.0",
       "dependencies": {
+        "leaflet": "^1.9.4",
         "svelte-spa-router": "^4.0.1"
       },
       "devDependencies": {
@@ -1003,6 +1004,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
+    },
     "node_modules/locate-character": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",

front/package.json

@@ -16,6 +16,7 @@
     "vite": "^5.2.0"
   },
   "dependencies": {
+    "leaflet": "^1.9.4",
     "svelte-spa-router": "^4.0.1"
   }
 }

front/src/pages/PageIndex.svelte

@@ -1,53 +1,47 @@
 <script>
+    import { onMount } from "svelte";
     import { link } from 'svelte-spa-router';
     import { ArrowUpRight } from "phosphor-svelte";
     import AnnouncementBanner from "%/pages/elements/AnnouncementBanner.svelte";
     import MenuList from "%/pages/elements/MenuList.svelte";
+    import Items from '%/testData.js';
+    import L from 'leaflet';
 
-    const items = [
-        {
-            name: "Breakfast",
-            price: 69.99,
-            labels: ["vegan", "spicy",],
-        },
-        {
-            name: "Dinner",
-            price: 21,
-            labels: ["vegan", "fish", "nut", "spicy",],
-        },
-        {
-            name: "Brick",
-            price: 0,
-            labels: ["spicy",],
-        },
-        {
-            name: "Toast",
-            price: 4382749832743,
-        },
-        {
-            name: "water",
-            price: 1,
-            labels: ["fish"],
-        },
-        {
-            name: "half eaten mouldy bread",
-            price: -9999,
-            labels: ["nut"],
-        },
-        {
-            name: "GwaGwa",
-            price: "Priceless",
-            labels: ["nut"],
-            image: "/dab.jpg",
-        }
-    ];
+    let items = Items;
+
+    let map;
+    onMount(() => {
+        map = L.map('map').setView([51.505, -0.09], 13);
+        L.tileLayer(
+            'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+            {
+                maxZoom: 19,
+                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+            }
+        ).addTo(map);
+    })
 </script>
 
+<svelte:head>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+          integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+          crossorigin=""/>
+</svelte:head>
+
 <div>
     <AnnouncementBanner />
     <a href="/annoucements" use:link style="float: right">Learn More <ArrowUpRight /></a>
     <div class="spacer"></div>
 
+    <h2>Where to find us</h2>
+    <div class="contact">
+        <div id="map"></div>
+        <div class="contact-detail">
+            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis dolore maiores, dolorem unde, illo vero dolores magnam omnis, explicabo vel eos voluptatem libero ullam ipsa molestias laboriosam voluptas nisi sunt.</p>
+        </div>
+    </div>
+    <div class="spacer"></div>
+
     <h2>Popular Today</h2>
     <MenuList {items} />
     <a href="/menu" use:link style="float: right">See All <ArrowUpRight /></a>
@@ -59,12 +53,29 @@
 </div>
 
 <style lang="scss">
+    @import "%/styles/vars";
+
     h2 {
-        margin-bottom: 16px;
+        margin-bottom: $spacing-small;
+    }
+    .spacer {
+        height: $spacing-large;
     }
 
-    .spacer {
-        height: 100px;
+    .contact {
+        display: flex;
+        flex-direction: row;
+
+        #map {
+            min-width: 600px;
+            height: 400px;
+
+            border-radius: $border-radius-normal;
+        }
+
+        .contact-detail {
+            padding-left: $spacing-normal;
+        }
     }
 
     a {
@@ -83,11 +94,11 @@
 
         border-radius: 9999px;
         background-color: transparent;
-        color: #33251a;
+        color: $color-on-background;
 
         &:hover {
-            background-color: #fffbf4;
-            color: #33251a;
+            background-color: $color-light;
+            color: $color-on-light;
         }
     }
 </style>

front/src/pages/PageMenu.svelte

@@ -1,51 +1,14 @@
 <script>
     import { ArrowClockwise } from "phosphor-svelte";
     import MenuList from "%/pages/elements/MenuList.svelte";
-    import LoadingBar from "%/pages/elements/LoadingBar.svelte";
     import DropDown from "%/components/DropDown.svelte";
+    import Items from '%/testData.js';
 
-    const items = [
-        {
-            name: "Breakfast",
-            price: 69.99,
-            labels: ["vegan", "spicy", "gluten"],
-        },
-        {
-            name: "Dinner",
-            price: 21,
-            labels: ["vegan", "fish", "nut", "spicy",],
-        },
-        {
-            name: "Brick",
-            price: 0,
-            labels: ["spicy",],
-        },
-        {
-            name: "Toast",
-            price: 4382749832743,
-        },
-        {
-            name: "water",
-            price: 1,
-            labels: ["fish"],
-        },
-        {
-            name: "half eaten mouldy bread",
-            price: -9999,
-            labels: ["nut"],
-        },
-        {
-            name: "GwaGwa",
-            price: "Priceless",
-            labels: ["nut"],
-            image: "/MenuItemLoading.svg",
-        }
-    ];
+    let items = Items;
 </script>
 
 <div class="menu">
     <div class="menu-filter">
-<!--        <LoadingBar />-->
         <div class="menu-filter-header">
             <h2>Filters</h2>
             <button><ArrowClockwise /></button>

front/src/styles/vars.scss

@@ -27,7 +27,7 @@ $sizing-navigation-height: 55px;
 // PADDING/MARGIN
 $spacing-small: 14px;
 $spacing-normal: 16px;
-$spacing-large: 24px;
+$spacing-large: 32px;
 
 // FONT
 $font-family: 'Erode', serif;

front/src/testData.js

@@ -0,0 +1,41 @@
+// "vegan", "fish", "nut", "spicy", "gluten"
+
+let Items;
+export default Items = [
+    {
+        name: "Breakfast",
+        price: 69.99,
+        labels: ["vegan", "spicy",],
+    },
+    {
+        name: "Dinner",
+        price: 21,
+        labels: ["vegan", "fish", "nut", "spicy",],
+    },
+    {
+        name: "Brick",
+        price: 0,
+        labels: ["spicy",],
+    },
+    {
+        name: "Toast",
+        price: 4382749832743,
+        labels: ["gluten"],
+    },
+    {
+        name: "water",
+        price: 1,
+        labels: ["fish"],
+    },
+    {
+        name: "half eaten mouldy bread",
+        price: -9999,
+        labels: ["nut"],
+    },
+    {
+        name: "GwaGwa",
+        price: "Priceless",
+        labels: ["nut"],
+        image: "/dab.jpg",
+    }
+];