From 0520aa44e634bb9c324121fe0e727b80502bb1ec Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 1 May 2024 23:00:12 +0200
Subject: [PATCH] Added tags for start and end dates

---
 src/components/calendar/CalendarEvent.vue     | 59 +++++++++++--------
 .../calendar/CalendarEventDetails.vue         | 49 ++++++++++-----
 .../calendar/state/monthly/DayTile.vue        |  9 ++-
 src/data/Events.ts                            | 12 +++-
 src/stores/EventStore.ts                      | 16 +++--
 5 files changed, 99 insertions(+), 46 deletions(-)

diff --git a/src/components/calendar/CalendarEvent.vue b/src/components/calendar/CalendarEvent.vue
index 0a794f1..c8d445e 100644
--- a/src/components/calendar/CalendarEvent.vue
+++ b/src/components/calendar/CalendarEvent.vue
@@ -1,12 +1,21 @@
 <script lang="ts" setup>
+import { cn } from '@/lib/utils'
 import { Popover, PopoverTrigger } from '@/components/ui/popover'
 import type { CalendarEvent } from '@/models/Events'
 
 import CalendarEventDetails from './CalendarEventDetails.vue'
+import { areDatesIdentical, type LeimDate } from '@/models/Date'
 
-defineProps<{
+const props = defineProps<{
   event: CalendarEvent
+  tileDate: LeimDate
 }>()
+
+const spansMultipleDays = Boolean(props.event.startDate && props.event.endDate)
+
+const isStartEvent = spansMultipleDays && areDatesIdentical(props.tileDate, props.event.startDate)
+const isEndEvent =
+  spansMultipleDays && props.event.endDate && areDatesIdentical(props.tileDate, props.event.endDate)
 </script>
 
 <template>
@@ -14,32 +23,36 @@ defineProps<{
     <PopoverTrigger as-child>
       <button
         class="text-xs px-2 py-1 block w-full text-left rounded-sm whitespace-nowrap overflow-hidden text-ellipsis"
-        :class="{
-          'text-white bg-slate-600 hover:bg-slate-700': !event.category,
-          'text-white bg-lime-600 hover:bg-lime-700': event.category === 'naissance',
-          'text-white bg-stone-500 hover:bg-stone-700': event.category === 'mort',
-          'text-white bg-orange-600 hover:bg-orange-700': event.category === 'catastrophe',
-          'text-white bg-pink-600 hover:bg-pink-700': event.category === 'catastrophe naturelle',
-          'text-white bg-sky-600 hover:bg-sky-700': event.category === 'législation',
-          'text-white bg-purple-600 hover:bg-purple-700': event.category === 'religion',
-          'text-white bg-emerald-600 hover:bg-emerald-700': event.category === 'joueurs',
-          'text-slate-900 bg-amber-300 hover:bg-amber-400': event.category === 'inauguration',
-          'text-slate-900 bg-emerald-200 hover:bg-emerald-300': event.category === 'invention',
-          'text-slate-900 bg-cyan-300 hover:bg-cyan-400': event.category === 'science',
-          'text-slate-900 bg-white hover:bg-yellow-200': event.category === 'bénédiction',
-          'text-slate-900 bg-purple-200 hover:bg-purple-300': event.category === 'découverte',
-          'text-slate-900 bg-indigo-200 hover:bg-indigo-300': event.category === 'exploration',
-          'text-white bg-amber-600 hover:bg-amber-700': event.category === 'construction',
-          'text-slate-900 bg-violet-200 hover:bg-violet-300': event.category === 'arcanologie',
-          'text-white bg-rose-600 hover:bg-rose-700': event.category === 'criminalité',
-          'text-white bg-stone-600 hover:bg-stone-700': event.category === 'scandale',
-          'text-slate-900 bg-yellow-500 hover:bg-yellow-600': event.category === 'commerce'
-        }"
+        :class="
+          cn({
+            'text-white bg-slate-600 hover:bg-slate-700': !event.category,
+            'text-white bg-lime-600 hover:bg-lime-700': event.category === 'naissance',
+            'text-white bg-stone-500 hover:bg-stone-700': event.category === 'mort',
+            'text-white bg-orange-600 hover:bg-orange-700': event.category === 'catastrophe',
+            'text-white bg-pink-600 hover:bg-pink-700': event.category === 'catastrophe naturelle',
+            'text-white bg-sky-600 hover:bg-sky-700': event.category === 'législation',
+            'text-white bg-purple-600 hover:bg-purple-700': event.category === 'religion',
+            'text-white bg-emerald-600 hover:bg-emerald-700': event.category === 'joueurs',
+            'text-slate-900 bg-amber-300 hover:bg-amber-400': event.category === 'inauguration',
+            'text-slate-900 bg-emerald-200 hover:bg-emerald-300': event.category === 'invention',
+            'text-slate-900 bg-cyan-300 hover:bg-cyan-400': event.category === 'science',
+            'text-slate-900 bg-white hover:bg-yellow-200': event.category === 'bénédiction',
+            'text-slate-900 bg-purple-200 hover:bg-purple-300': event.category === 'découverte',
+            'text-slate-900 bg-indigo-200 hover:bg-indigo-300': event.category === 'exploration',
+            'text-white bg-amber-600 hover:bg-amber-700': event.category === 'construction',
+            'text-slate-900 bg-violet-200 hover:bg-violet-300': event.category === 'arcanologie',
+            'text-white bg-rose-600 hover:bg-rose-700': event.category === 'criminalité',
+            'text-white bg-stone-600 hover:bg-stone-700': event.category === 'scandale',
+            'text-slate-900 bg-yellow-500 hover:bg-yellow-600': event.category === 'commerce',
+            'rounded-r-none': isStartEvent,
+            'rounded-l-none': isEndEvent
+          })
+        "
       >
         {{ event.title }}
       </button>
     </PopoverTrigger>
 
-    <CalendarEventDetails :event v-once />
+    <CalendarEventDetails :event :spans-multiple-days :is-start-event :is-end-event v-once />
   </Popover>
 </template>
diff --git a/src/components/calendar/CalendarEventDetails.vue b/src/components/calendar/CalendarEventDetails.vue
index 3fb9fc5..5f50f4b 100644
--- a/src/components/calendar/CalendarEventDetails.vue
+++ b/src/components/calendar/CalendarEventDetails.vue
@@ -3,13 +3,18 @@ import { getRelativeString } from '@/models/Date'
 import type { CalendarEvent } from '@/models/Events'
 import { useCalendar } from '@/stores/CalendarStore'
 
-import { PhHourglassMedium, PhAlarm } from '@phosphor-icons/vue'
+import { PhHourglassMedium, PhAlarm, PhHourglassHigh, PhHourglassLow } from '@phosphor-icons/vue'
 import { Badge } from '@/components/ui/badge'
 import { PopoverContent } from '@/components/ui/popover'
 
 const { defaultDate, getFormattedDateTitle } = useCalendar()
 
-const props = defineProps<{ event: CalendarEvent }>()
+const props = defineProps<{
+  event: CalendarEvent
+  spansMultipleDays: boolean
+  isStartEvent?: boolean
+  isEndEvent?: boolean
+}>()
 
 const dateDifference: string = getRelativeString(defaultDate, props.event.startDate)
 const dateDuration: string | null = props.event.endDate
@@ -20,9 +25,11 @@ const dateDuration: string | null = props.event.endDate
 <template>
   <PopoverContent
     class="event-details w-96"
-    :align="'start'"
+    :align="'center'"
     :align-offset="50"
+    :side="'left'"
     :collision-padding="20"
+    :hide-when-detached="true"
     :class="{
       'border-slate-800': !event.category,
       'border-lime-800': event.category === 'naissance',
@@ -50,24 +57,27 @@ const dateDuration: string | null = props.event.endDate
         {{ event.title }}
       </div>
 
-      <div class="mb-1 space-y-1">
-        <template v-if="event.startDate && !event.endDate">
+      <div class="mb-1">
+        <template v-if="!event.endDate">
           <p class="font-semibold">{{ getFormattedDateTitle(event.startDate, true) }}</p>
         </template>
-        <template v-else-if="event.startDate && event.endDate">
+        <template v-else>
           <p class="font-semibold">
             Du {{ getFormattedDateTitle(event.startDate, true) }} au
             {{ getFormattedDateTitle(event.endDate, true) }}
           </p>
-          <template v-if="dateDuration">
-            <p class="text-sm italic opacity-75 flex items-center gap-1">
-              <PhHourglassMedium size="16" weight="fill" /> Pendant {{ dateDuration }}
-            </p>
-          </template>
         </template>
+      </div>
+
+      <div class="mb-1 space-y-1">
         <p class="text-sm italic opacity-75 flex items-center gap-1">
           <PhAlarm size="16" weight="fill" /> {{ dateDifference }}
         </p>
+        <template v-if="dateDuration">
+          <p class="text-sm italic opacity-75 flex items-center gap-1">
+            <PhHourglassMedium size="16" weight="fill" /> Pendant {{ dateDuration }}
+          </p>
+        </template>
       </div>
 
       <template v-if="event.category || event.secondaryCategories">
@@ -86,12 +96,21 @@ const dateDuration: string | null = props.event.endDate
         </ul>
       </template>
 
-      <hr class="border-slate-500 mt-2" />
+      <template v-if="event.description">
+        <hr class="border-slate-500 mt-2" />
 
-      <div class="mt-2 text-sm text-slate-300">
-        {{ event.description }}
-      </div>
+        <div class="mt-2 text-sm text-slate-300">
+          {{ event.description }}
+        </div>
+      </template>
     </div>
+
+    <Badge v-if="isStartEvent" class="absolute -top-2 left-2 hover:bg-slate-300 hover:opacity-100">
+      <PhHourglassHigh size="16" weight="fill" /> Début
+    </Badge>
+    <Badge v-if="isEndEvent" class="absolute -top-2 left-2 hover:bg-slate-300 hover:opacity-100">
+      <PhHourglassLow size="16" weight="fill" /> Fin
+    </Badge>
   </PopoverContent>
 </template>
 
diff --git a/src/components/calendar/state/monthly/DayTile.vue b/src/components/calendar/state/monthly/DayTile.vue
index 5d9aada..3852cc1 100644
--- a/src/components/calendar/state/monthly/DayTile.vue
+++ b/src/components/calendar/state/monthly/DayTile.vue
@@ -24,7 +24,10 @@ const { currentEvents } = storeToRefs(useCalendarEvents())
 
 const eventsForTheDay = computed(() => {
   return currentEvents.value.filter((currentEvent) => {
-    return areDatesIdentical(currentEvent.startDate, props.date)
+    return (
+      areDatesIdentical(currentEvent.startDate, props.date) ||
+      areDatesIdentical(currentEvent.endDate!, props.date)
+    )
   })
 })
 
@@ -90,7 +93,7 @@ const eventsNotDisplayed = computed(
       }"
     >
       <li v-for="event in eventsToDisplay" :key="event.title" class="grid pointer-events-auto">
-        <CalendarEventButton :event />
+        <CalendarEventButton :event :tile-date="date" />
       </li>
 
       <li v-if="eventsNotDisplayed > 0" class="pointer-events-auto">
@@ -116,7 +119,7 @@ const eventsNotDisplayed = computed(
                 :key="event.title"
                 class="grid pointer-events-auto"
               >
-                <CalendarEventButton :event />
+                <CalendarEventButton :event :tile-date="date" />
               </li>
             </ul>
           </PopoverContent>
diff --git a/src/data/Events.ts b/src/data/Events.ts
index 26258bf..11abfc3 100644
--- a/src/data/Events.ts
+++ b/src/data/Events.ts
@@ -22,6 +22,16 @@ export const regularEvents: CalendarEvent[] = [
     wiki: 'https://alexcreates.fr/leim/index.php/Pr%C3%AAtresses_d%27Asm%C3%A9nys',
     hidden: true
   },
+  {
+    title: 'Marche du sang',
+    startDate: { day: 18, month: 9, year: -420 },
+    endDate: { day: 27, month: 1, year: -419 },
+    description:
+      "L'empereur de Kaliatos ordonne personnellement la traque de Jorhas Kirendre pour connivence avec les démons. Plusieurs bataillons sont affectés à la chasse de Jorhas, qui se terminera par son incarcération ainsi que la mort de plusieurs centaines de soldats.",
+    category: 'criminalité',
+    wiki: 'https://alexcreates.fr/leim/index.php/Jorhas_Kirendre',
+    hidden: true
+  },
   {
     title: 'Exécution de Tyhos',
     startDate: { day: 1, month: 0, year: 0 },
@@ -130,7 +140,7 @@ export const regularEvents: CalendarEvent[] = [
     description: "Le Moine Premier inaugure la grande cloche d'argent au sommet du Pilier d'Ikami.",
     startDate: { day: 29, month: 5, year: 3209 },
     category: 'religion',
-    hidden: true
+    secondaryCategories: ['inauguration']
   },
   {
     title: '1ère disparation à Cantane',
diff --git a/src/stores/EventStore.ts b/src/stores/EventStore.ts
index 663f2f5..c47a6b1 100644
--- a/src/stores/EventStore.ts
+++ b/src/stores/EventStore.ts
@@ -47,10 +47,15 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
    * @returns Whether the event should appear in the current view
    */
   function shouldEventBeDisplayed(event: CalendarEvent): boolean {
-    const eventDateToDays = convertDateToDays(event.startDate)
+    const eventStartDateToDays = convertDateToDays(event.startDate)
+    const eventEndDateToDays: number = event.endDate ? convertDateToDays(event.endDate) : 0
+
     const isEventOnCurrentScreen =
-      event.startDate.year === currentDate.currentYear &&
-      event.startDate.month === currentDate.currentMonth
+      (event.startDate.year === currentDate.currentYear &&
+        event.startDate.month === currentDate.currentMonth) ||
+      (event.endDate &&
+        event.endDate.year === currentDate.currentYear &&
+        event.endDate.month === currentDate.currentMonth)
 
     // Check whether the event is on the last 8 tiles
     // This is to allow leap events from appearing on the last 8 tiles
@@ -63,7 +68,10 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
     const last8Tiles = lastDayOfCurrentMonth + 8
 
     const isEventOnNext8Tiles =
-      eventDateToDays <= last8Tiles && eventDateToDays >= lastDayOfCurrentMonth
+      (eventStartDateToDays <= last8Tiles && eventStartDateToDays >= lastDayOfCurrentMonth) ||
+      (Boolean(event.endDate) &&
+        eventEndDateToDays <= last8Tiles &&
+        eventEndDateToDays >= lastDayOfCurrentMonth)
 
     switch (currentConfig.viewType) {
       case 'month':