metis/src/EventModal.svelte

<script>
  import { Modal, ModalHeader, ModalBody, ModalFooter, Icon, Badge } from 'sveltestrap';
  import { Remarkable } from 'remarkable';

  const md = new Remarkable({ breaks: true });

  export let event = undefined;
  export let open = undefined;
  export let toggle = undefined;

  const timeFormat = d =>
    d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });

  const dateFormat = d =>
    d.toLocaleDateString('fr-FR', { month: '2-digit', day: '2-digit' });
</script>

<Modal isOpen={open} {toggle} centered scrollable>
  <ModalHeader {toggle}>
    <span class="pe-3">
      <Badge
        color="custom"
        style="background-color:{event.backgroundColor}; color:{event.textColor}"
      >
        {event.extendedProps.calendar}
      </Badge>
    </span>
    <b>{event.extendedProps.short_name}</b>
  </ModalHeader>
  <ModalBody>
    {#if event.extendedProps.status === 'CANCELLED'}
      <p class="w-100 text-center text-danger">
        <Icon name="exclamation-triangle" />
        <b class="ms-1">Évènement annulé</b>
      </p>
    {:else if event.extendedProps.status == 'TENTATIVE'}
      <p class="w-100 text-primary text-center">
        <Icon name="info-circle" />
        <b class="ms-1">Évènement provisoire</b>
      </p>
    {/if}

    {#if event.extendedProps.description}
      {@html md.render(event.extendedProps.description)}
    {:else}
      <i class="fs-7">Pas de description</i>
    {/if}
  </ModalBody>

  <ModalFooter class="justify-content-between">
    <span>
      {#if event.extendedProps.location}
        <Icon name="geo" class="text-success" />
        <span class="ms-1">{event.extendedProps.location}</span>
      {/if}
    </span>

    <span>
      {#if event.allDay}
        <Icon name="calendar-range" class="text-primary" />
        <span class="ms-1">{dateFormat(event.start)} - {dateFormat(event.end)}</span>
      {:else}
        <Icon name="clock-history" class="text-primary" />
        <span class="ms-1">{timeFormat(event.start)} - {timeFormat(event.end)}</span>
      {/if}
    </span>
  </ModalFooter>
</Modal>