feat: implement filtering through calendars

src/App.svelte

@@ -16,7 +16,7 @@
   const modal = writable(null);
   let calendar;
 
-  let options = {
+  let options = writable({
     initialView: 'timeGridWeek',
     plugins: [timeGridPlugin, dayGridPlugin, rrulePlugin, listPlugin, adaptivePlugin],
     locale: frLocale,
@@ -33,36 +33,44 @@
       modal.set(bind(EventDetails, { event: info.event }));
     },
     events: []
-  };
+  });
 
   let selectedCalendars;
+  let updateTimer;
 
-  async function reloadEvents(selectedCalendars, options) {
+  async function reloadEvents(selectedCalendars) {
     const evts = await refreshEvents(selectedCalendars);
     return evts.flat();
   }
 
+  function updateEvents(calendars) {
+    return reloadEvents(calendars).then(events => {
+      options.update(opts => ({
+        ...opts,
+        events
+      }));
+    });
+  }
+
 
   onMount(async () => {
-    options.events = await reloadEvents(selectedCalendars, options);
+    const events = await reloadEvents(selectedCalendars);
-    options = { ...options };
+    options.update(opts => ({
+      ...opts,
+      events
+    }));
   });
 
-  $: {
+  $: updateEvents(selectedCalendars);
-    /*reloadEvents(selectedCalendars, options).then(events => {
-      options.events = events;
-      options = { ...options };
-    });*/
-  }
 </script>
 
 <div class="app-container">
   <h1 class="title">Calendrier de la vie étudiante à l'ENS</h1>
   <div style="height: 100%; display: flex;">
     <Modal show={$modal}>
-      <FilterBar {calendarTree} />
+      <FilterBar {calendarTree} bind:selected={selectedCalendars} />
       <div style="flex: 1;">
-        <FullCalendar bind:this={calendar} {options} />
+        <FullCalendar bind:this={calendar} options={$options} />
       </div>
     </Modal>
   </div>

src/FilterBar.svelte

@@ -1,14 +1,14 @@
 <script>
   import FilterItem from './FilterItem.svelte';
   export let calendarTree = [];
-  export let selectedCalendars = null;
+  export let selected = null;
 
-  let subSelections = Array(Object.keys(calendarTree).length).fill([]);
+  let subSelections = Array.from({length: Object.keys(calendarTree).length}, e => []);
-  $: selectedCalendars = subSelections.flat();
+  $: selected = subSelections.flat();
 </script>
 
 <ul>
 {#each Object.entries(calendarTree) as [toplevel, subtrees], i}
-  <FilterItem item={toplevel} children={subtrees} />
+  <FilterItem item={toplevel} children={subtrees} bind:selected={subSelections[i]} />
 {/each}
 </ul>

src/FilterItem.svelte

@@ -11,6 +11,7 @@
   export let selected = [];
   export let filtering = createTriState(CHECKED);
   let subfiltering = createTriStates(CHECKED, Object.entries(children).length);
+  let subselected = Array.from({length: Object.entries(children).length}, e => []);
 
   function isVal(val) {
     return function (other) {
@@ -33,7 +34,6 @@
   }
 
   subfiltering.subscribe(subvalues => {
-    console.log('new subvalues', subvalues);
     if (areAllChecked(subvalues) && $filtering !== CHECKED) {
       filtering.setChecked();
     } else if (areAllUnchecked(subvalues) && $filtering !== UNCHECKED) {
@@ -45,7 +45,6 @@
 
   if (subfiltering.length > 0) {
     filtering.subscribe(value => {
-      console.log(item, value);
       switch (value) {
         case CHECKED:
           subfiltering.updateAll(_ => CHECKED);
@@ -63,6 +62,7 @@
     dispatch('change', { value: evt.detail.value });
   }
 
+  $: selected = $filtering === CHECKED ? [item, ...subselected.flat()] : subselected.flat();
 </script>
 
 {#if item != null}
@@ -72,9 +72,9 @@
   <ul>
   {#each Object.entries(children) as [toplevel, subchildren], i}
     {#if subchildren}
-      <svelte:self item={toplevel} children={subchildren} on:change={handleChildChange(i)} filtering={subfiltering.storeAt(i)} />
+      <svelte:self item={toplevel} children={subchildren} on:change={handleChildChange(i)} filtering={subfiltering.storeAt(i)} bind:selected={subselected[i]} />
     {:else}
-      <svelte:self item={toplevel} on:change={handleChildChange(i)} filtering={subfiltering.storeAt(i)} />
+      <svelte:self item={toplevel} on:change={handleChildChange(i)} filtering={subfiltering.storeAt(i)} bind:selected={subselected[i]} />
     {/if}
   {/each}
   </ul>

src/TriStateCheckbox.svelte

@@ -15,7 +15,7 @@
     if (node) {
       if (state === CHECKED) {
         checkedValue = true;
-      } else if (state === UNCHECKED) {
+      } else {
         checkedValue = false;
       }
 

src/calendar.js

@@ -29,7 +29,13 @@ export const calendarTree = {
     "Club réseau": {},
     "hackENS": {},
   },
-  "COF": {},
+  "COF": {
+    "BDA": {
+      "Philharmonie": {},
+    },
+    "AG": {},
+  },
+  "BDS": {},
   "Délégation Générale": {},
 };