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/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>