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

This commit is contained in:
Raito Bezarius 2022-03-05 02:38:58 +01:00
parent 511bb2b0a6
commit cfe3956c98
4 changed files with 39 additions and 10 deletions

View file

@ -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%;">
<!-- <FilterBar {calendarTree} {selectedCalendars}> -->
<Modal show={$modal}>
<div style="height: 100%; display: flex;">
<Modal show={$modal}>
<FilterBar {calendarTree} {selectedCalendars} />
<div style="flex: 1;">
<FullCalendar {options} />
</Modal>
</div>
</Modal>
</div>
</div>

11
src/FilterBar.svelte Normal file
View file

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

15
src/FilterItem.svelte Normal file
View file

@ -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}

View file

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