Create an app to search menus

2024-05-08 18:08:21 +02:00
commit 55fd2993f3
16 changed files with 31896 additions and 0 deletions
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};
--- a/src/app.html
+++ b/src/app.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	%sveltekit.head%
+</head>
+
+<body data-sveltekit-preload-data="hover">
+	<div style="display: contents">%sveltekit.body%</div>
+</body>
+
+</html>
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -0,0 +1,9 @@
+// place files you want to import through the `$lib` alias in this folder.
+export const debounce = (callback: Function, wait = 300) => {
+    let timeout: ReturnType<typeof setTimeout>
+
+    return (...args: any[]) => {
+        clearTimeout(timeout)
+        timeout = setTimeout(() => callback(...args), wait)
+    }
+}
--- a/src/lib/menuArchives.js
+++ b/src/lib/menuArchives.js
--- a/src/lib/menus.json
+++ b/src/lib/menus.json
--- a/src/lib/osm_nominatim.ts
+++ b/src/lib/osm_nominatim.ts
@@ -0,0 +1,20 @@
+
+export interface OSMNominatimPlace {
+    addresstype: string
+    boundingbox: number[]
+    class: string
+    display_name: string
+    lat: string
+    lon: string
+    name: string
+    type: string
+}
+
+
+export const getLocations = async (query: string): Promise<OSMNominatimPlace[]> => {
+    const url = `https://nominatim.openstreetmap.org/search?q=${query}&limit=10&format=json`
+    const response = await (await fetch(url)).json()
+    const locations = response as OSMNominatimPlace[]
+
+    return locations
+}
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+  import data from '$lib/menus.json';
+  import Fuse from 'fuse.js';
+
+  interface MenuItem {
+    description: string;
+    vegan: boolean;
+    day: string;
+    date: string;
+  }
+
+  // Group menu items by date
+  const groupedMenus: Record<string, Record<string, MenuItem[]>> = {};
+  data.forEach((menu) => {
+    if (!groupedMenus[menu.date]) {
+      groupedMenus[menu.date] = {};
+    }
+    if (!groupedMenus[menu.date][menu.day]) {
+      groupedMenus[menu.date][menu.day] = [];
+    }
+    groupedMenus[menu.date][menu.day].push(menu);
+  });
+
+  // Create a Fuse instance for fuzzy searching
+  const fuse = new Fuse(data, {
+    keys: ['description'],
+    threshold: 0.4,
+  });
+
+  let searchQuery = '';
+  let searchResults: MenuItem[] = [];
+
+  function searchMenus() {
+    const results = fuse.search(searchQuery).map((result) => result.item);
+    searchResults = results.filter(
+      (menu, index, self) =>
+        index === self.findIndex((m) => m.description === menu.description),
+    );
+  }
+</script>
+
+<body>
+  <main>
+    <h2>Archives menus Dolma</h2>
+
+    <div class="search-container">
+      <input
+        type="text"
+        bind:value={searchQuery}
+        on:input={searchMenus}
+        placeholder="Chercher dans les menus"
+      />
+    </div>
+
+    {#if searchResults.length > 0}
+      <ul>
+        {#each searchResults as menu}
+          <li>{menu.description}</li>
+        {/each}
+      </ul>
+    {:else}
+      {#each Object.entries(groupedMenus) as [date, menusByDay]}
+        <h2>{date}</h2>
+        {#each Object.entries(menusByDay) as [day, menus]}
+          <h3>{day}</h3>
+          <ul>
+            {#each menus as menu}
+              <li>{menu.description}</li>
+            {/each}
+          </ul>
+        {/each}
+      {/each}
+    {/if}
+  </main>
+</body>
+
+<style>
+  main {
+    margin: 2em;
+  }
+
+  input[type='text'] {
+    width: 80%;
+    padding: 0.5em;
+    font-size: 1em;
+  }
+</style>