From c2f3158b6f363aaab92bed9afac6475c332165f5 Mon Sep 17 00:00:00 2001
From: Tom Hubrecht <tom.hubrecht@ens.fr>
Date: Sun, 6 Mar 2022 00:59:36 +0100
Subject: [PATCH] New modal event

---
 src/App.svelte        | 23 +++++++++++++----------
 src/EventModal.svelte | 23 +++++++++++++++++++++++
 2 files changed, 36 insertions(+), 10 deletions(-)
 create mode 100644 src/EventModal.svelte

diff --git a/src/App.svelte b/src/App.svelte
index 258d748..ecdf4e0 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -8,8 +8,7 @@
   import dayGridPlugin from '@fullcalendar/daygrid';
   import listPlugin from '@fullcalendar/list';
   import frLocale from '@fullcalendar/core/locales/fr';
-  import Modal, { bind } from 'svelte-simple-modal';
-  import EventDetails from './EventDetails.svelte';
+  import EventModal from './EventModal.svelte';
   import FilterBar from './FilterBar.svelte';
   import { refreshEvents, calendarTree } from './calendar';
   import { debounce } from 'lodash';
@@ -18,7 +17,11 @@
   import 'bootstrap-icons/font/bootstrap-icons.css';
   import bootstrap5Plugin from '@fullcalendar/bootstrap5';
 
-  const modal = writable(null);
+  const event = writable(null);
+
+  let openModal = false;
+  const toggle = () => (openModal = !openModal);
+
   let calendar;
 
   let options = writable({
@@ -42,7 +45,8 @@
     nowIndicator: true,
     now: new Date(),
     eventClick: info => {
-      modal.set(bind(EventDetails, { event: info.event }));
+      openModal = true;
+      event.set(info.event);
     },
     events: [],
     themeSystem: 'bootstrap5'
@@ -79,12 +83,11 @@
 <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} bind:selected={selectedCalendars} />
-      <div style="flex: 1;">
-        <FullCalendar bind:this={calendar} options={$options} />
-      </div>
-    </Modal>
+    <FilterBar {calendarTree} bind:selected={selectedCalendars} />
+    <div style="flex: 1;">
+      <FullCalendar bind:this={calendar} options={$options} />
+    </div>
+    <EventModal event={$event} open={openModal} {toggle} />
   </div>
 </div>
 
diff --git a/src/EventModal.svelte b/src/EventModal.svelte
new file mode 100644
index 0000000..f685bbc
--- /dev/null
+++ b/src/EventModal.svelte
@@ -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>