feat(ui): filter bar / filter item for calendar trees

src/App.svelte

@@ -8,6 +8,7 @@
   import frLocale from '@fullcalendar/core/locales/fr';
   import Modal, { bind } from 'svelte-simple-modal';
   import EventDetails from './EventDetails.svelte';
+  import FilterBar from './FilterBar.svelte';
   import { refreshEvents, calendarTree } from './calendar';
 
   const modal = writable(null);
@@ -39,11 +40,13 @@
 
 <div class="app-container">
   <h1 class="title">Calendrier de la vie étudiante à l'ENS</h1>
-  <div style="height: 100%;">
+  <div style="height: 100%; display: flex;">
-<!-- <FilterBar {calendarTree} {selectedCalendars}> -->
+    <Modal show={$modal}>
-      <Modal show={$modal}>
+      <FilterBar {calendarTree} {selectedCalendars} />
+      <div style="flex: 1;">
         <FullCalendar {options} />
-      </Modal>
+      </div>
+    </Modal>
   </div>
 </div>
 

src/FilterBar.svelte

@@ -0,0 +1,11 @@
+<script>
+  import FilterItem from './FilterItem.svelte';
+  export let calendarTree = [];
+  export let selectedCalendars = null;
+</script>
+
+<ul>
+{#each Object.entries(calendarTree) as [toplevel, subtrees]}
+<FilterItem item={toplevel} children={subtrees} />
+{/each}
+</ul>

src/FilterItem.svelte

@@ -0,0 +1,15 @@
+<script>
+  export let item = null;
+  export let children = [];
+</script>
+
+{#if item != null}
+<li>
+<input type="checkbox" value={item}><span>{item}</span>
+<ul>
+{#each Object.entries(children) as [toplevel, subchildren]}
+<svelte:self item={toplevel} children={subchildren} />
+{/each}
+</ul>
+</li>
+{/if}

src/calendar.js

@@ -25,12 +25,12 @@ const calendars = {
 };
 
 export const calendarTree = {
-  "Clubs COF": [
+  "Clubs COF": {
-    "Club réseau",
+    "Club réseau": {},
-    "hackENS",
+    "hackENS": {},
-  ],
+  },
-  "COF": [],
+  "COF": {},
-  "Délégation Générale": [],
+  "Délégation Générale": {},
 };
 
 const calendarIds = Object.keys(calendars);