DGNum/metis
16
2
Fork 1
Code Issues 12 Pull requests 3 Projects Releases Packages Wiki Activity

New modal event

Browse source
This commit is contained in:
Tom Hubrecht 2022-03-06 00:59:36 +01:00
parent 03e284b7dc
commit c2f3158b6f
2 changed files with 36 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/App.svelte
View file

@ -8,8 +8,7 @@
import dayGridPlugin from '@fullcalendar/daygrid'; import dayGridPlugin from '@fullcalendar/daygrid';
import listPlugin from '@fullcalendar/list'; import listPlugin from '@fullcalendar/list';
import frLocale from '@fullcalendar/core/locales/fr'; import frLocale from '@fullcalendar/core/locales/fr';
import Modal, { bind } from 'svelte-simple-modal'; import EventModal from './EventModal.svelte';
import EventDetails from './EventDetails.svelte';
import FilterBar from './FilterBar.svelte'; import FilterBar from './FilterBar.svelte';
import { refreshEvents, calendarTree } from './calendar'; import { refreshEvents, calendarTree } from './calendar';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
@ -18,7 +17,11 @@
import 'bootstrap-icons/font/bootstrap-icons.css'; import 'bootstrap-icons/font/bootstrap-icons.css';
import bootstrap5Plugin from '@fullcalendar/bootstrap5'; import bootstrap5Plugin from '@fullcalendar/bootstrap5';
const modal = writable(null); const event = writable(null);
let openModal = false;
const toggle = () => (openModal = !openModal);
let calendar; let calendar;
let options = writable({ let options = writable({
@ -42,7 +45,8 @@
nowIndicator: true, nowIndicator: true,
now: new Date(), now: new Date(),
eventClick: info => { eventClick: info => {
modal.set(bind(EventDetails, { event: info.event })); openModal = true;
event.set(info.event);
}, },
events: [], events: [],
themeSystem: 'bootstrap5' themeSystem: 'bootstrap5'
@ -79,12 +83,11 @@
<div class="app-container"> <div class="app-container">
<h1 class="title">Calendrier de la vie étudiante à l'ENS</h1> <h1 class="title">Calendrier de la vie étudiante à l'ENS</h1>
<div style="height: 100%; display: flex;"> <div style="height: 100%; display: flex;">
<Modal show={$modal}> <FilterBar {calendarTree} bind:selected={selectedCalendars} />
<FilterBar {calendarTree} bind:selected={selectedCalendars} /> <div style="flex: 1;">
<div style="flex: 1;"> <FullCalendar bind:this={calendar} options={$options} />
<FullCalendar bind:this={calendar} options={$options} /> </div>
</div> <EventModal event={$event} open={openModal} {toggle} />
</Modal>
</div> </div>
</div> </div>

23
src/EventModal.svelte Normal file
View file

@ -0,0 +1,23 @@
<script>
import { Modal, ModalHeader, ModalBody, ModalFooter, Icon } from 'sveltestrap';
export let event = undefined;
export let open = undefined;
export let toggle = undefined;
</script>
<Modal isOpen={open} {toggle} centered scrollable>
<ModalHeader {toggle}>{event.title}</ModalHeader>
{#if event.extendedProps.description}
<ModalBody>
{#each event.extendedProps.description.split('\n') as line}
<p>{line}</p>
{/each}
</ModalBody>
{/if}
{#if event.extendedProps.location}
<ModalFooter>
<Icon name="geo" />
</ModalFooter>
{/if}
</Modal>