Added duration display for long events

2024-05-01 16:32:27 +02:00
parent eedecdfddf
commit 104d93df06
4 changed files with 104 additions and 57 deletions
--- a/src/components/calendar/CalendarEventDetails.vue
+++ b/src/components/calendar/CalendarEventDetails.vue
@@ -3,7 +3,7 @@ import { getRelativeString } from '@/models/Date'
 import type { CalendarEvent } from '@/models/Events'
 import { useCalendar } from '@/stores/CalendarStore'

-import { PhHourglassMedium } from '@phosphor-icons/vue'
+import { PhHourglassMedium, PhAlarm } from '@phosphor-icons/vue'
 import { Badge } from '@/components/ui/badge'
 import { PopoverContent } from '@/components/ui/popover'

@@ -12,11 +12,14 @@ const { defaultDate, getFormattedDateTitle } = useCalendar()
 const props = defineProps<{ event: CalendarEvent }>()

 const dateDifference: string = getRelativeString(defaultDate, props.event.startDate)
+const dateDuration: string | null = props.event.endDate
+  ? getRelativeString(props.event.startDate, props.event.endDate, 'compact')
+  : null
 </script>

 <template>
  <PopoverContent
-    class="w-96"
+    class="event-details w-96"
    :align="'start'"
    :align-offset="50"
    :collision-padding="20"
@@ -56,9 +59,14 @@ const dateDifference: string = getRelativeString(defaultDate, props.event.startD
            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>
        <p class="text-sm italic opacity-75 flex items-center gap-1">
-          <PhHourglassMedium size="16" weight="fill" /> {{ dateDifference }}
+          <PhAlarm size="16" weight="fill" /> {{ dateDifference }}
        </p>
      </div>

@@ -78,7 +86,9 @@ const dateDifference: string = getRelativeString(defaultDate, props.event.startD
        </ul>
      </template>

-      <div class="mt-2 italic text-sm text-slate-500">
+      <hr class="border-slate-500 mt-2" />
+
+      <div class="mt-2 text-sm text-slate-300">
        {{ event.description }}
      </div>
    </div>
@@ -87,60 +97,69 @@ const dateDifference: string = getRelativeString(defaultDate, props.event.startD

 <style lang="scss">
 .border-slate-800 {
-  background-color: color-mix(in srgb, var(--color-slate-800), var(--color-slate-950) 85%);
+  --base-color: var(--color-slate-800);
 }
 .border-lime-800 {
-  background-color: color-mix(in srgb, var(--color-lime-800), var(--color-slate-950) 85%);
+  --base-color: var(--color-lime-800);
 }
 .border-stone-600 {
-  background-color: color-mix(in srgb, var(--color-stone-600), var(--color-slate-950) 85%);
+  --base-color: var(--color-stone-600);
 }
 .border-orange-800 {
-  background-color: color-mix(in srgb, var(--color-orange-800), var(--color-slate-950) 85%);
+  --base-color: var(--color-orange-800);
 }
 .border-pink-800 {
-  background-color: color-mix(in srgb, var(--color-pink-800), var(--color-slate-950) 85%);
+  --base-color: var(--color-pink-800);
 }
 .border-sky-800 {
-  background-color: color-mix(in srgb, var(--color-sky-800), var(--color-slate-950) 85%);
+  --base-color: var(--color-sky-800);
 }
 .border-purple-800 {
-  background-color: color-mix(in srgb, var(--color-purple-800), var(--color-slate-950) 85%);
+  --base-color: var(--color-purple-800);
 }
 .border-emerald-800 {
-  background-color: color-mix(in srgb, var(--color-emerald-800), var(--color-slate-950) 85%);
+  --base-color: var(--color-emerald-800);
 }
 .border-amber-800 {
-  background-color: color-mix(in srgb, var(--color-amber-800), var(--color-slate-950) 85%);
+  --base-color: var(--color-amber-800);
 }
 .border-green-800 {
-  background-color: color-mix(in srgb, var(--color-green-800), var(--color-slate-950) 85%);
+  --base-color: var(--color-green-800);
 }
 .border-cyan-800 {
-  background-color: color-mix(in srgb, var(--color-cyan-800), var(--color-slate-950) 85%);
+  --base-color: var(--color-cyan-800);
 }
 .border-slate-600 {
-  background-color: color-mix(in srgb, var(--color-slate-600), var(--color-slate-950) 85%);
+  --base-color: var(--color-slate-600);
 }
 .border-purple-700 {
-  background-color: color-mix(in srgb, var(--color-purple-700), var(--color-slate-950) 85%);
+  --base-color: var(--color-purple-700);
 }
 .border-indigo-700 {
-  background-color: color-mix(in srgb, var(--color-indigo-700), var(--color-slate-950) 85%);
+  --base-color: var(--color-indigo-700);
 }
 .border-amber-700 {
-  background-color: color-mix(in srgb, var(--color-amber-700), var(--color-slate-950) 85%);
+  --base-color: var(--color-amber-700);
 }
 .border-violet-700 {
-  background-color: color-mix(in srgb, var(--color-violet-700), var(--color-slate-950) 85%);
+  --base-color: var(--color-violet-700);
 }
 .border-rose-800 {
-  background-color: color-mix(in srgb, var(--color-rose-800), var(--color-slate-950) 85%);
+  --base-color: var(--color-rose-800);
 }
 .border-stone-700 {
-  background-color: color-mix(in srgb, var(--color-stone-700), var(--color-slate-950) 85%);
+  --base-color: var(--color-stone-700);
 }
 .border-yellow-600 {
-  background-color: color-mix(in srgb, var(--color-yellow-600), var(--color-slate-950) 85%);
+  --base-color: var(--color-yellow-600);
+}
+
+.event-details {
+  --bg-color: color-mix(in srgb, var(--base-color), var(--color-slate-950) 85%);
+  background-color: var(--bg-color);
+
+  hr {
+    border-color: var(--base-color);
+  }
 }
 </style>
--- a/src/components/calendar/search/lists/EventCallout.vue
+++ b/src/components/calendar/search/lists/EventCallout.vue
@@ -5,9 +5,9 @@ import { useCalendar } from '@/stores/CalendarStore'

 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
-import { PhArrowSquareOut, PhHourglassMedium } from '@phosphor-icons/vue'
+import { PhArrowSquareOut, PhHourglassMedium, PhAlarm } from '@phosphor-icons/vue'

-defineProps<{
+const props = defineProps<{
  event: CalendarEvent
 }>()

@@ -16,6 +16,11 @@ defineEmits<{
 }>()

 const { defaultDate, getFormattedDateTitle } = useCalendar()
+
+const dateDifference: string = getRelativeString(defaultDate, props.event.startDate)
+const dateDuration: string | null = props.event.endDate
+  ? getRelativeString(props.event.startDate, props.event.endDate, 'compact')
+  : null
 </script>

 <template>
@@ -58,12 +63,29 @@ const { defaultDate, getFormattedDateTitle } = useCalendar()
      </div>
    </div>

-    <div class="mb-1 flex gap-4 items-center">
-      <p class="opacity-75">{{ getFormattedDateTitle(event.startDate, true) }}</p>
-      <p class="text-sm italic opacity-75 flex items-center gap-1">
-        <PhHourglassMedium size="16" weight="fill" />
-        {{ getRelativeString(defaultDate, event.startDate) }}
+    <div class="mb-1">
+      <template v-if="!event.endDate">
+        <p class="col-span-2 font-semibold text-sm opacity-75">
+          {{ getFormattedDateTitle(event.startDate, true) }}
+        </p>
+      </template>
+      <template v-else>
+        <p class="col-span-2 font-semibold text-sm opacity-75">
+          Du {{ getFormattedDateTitle(event.startDate, true) }} au
+          {{ getFormattedDateTitle(event.endDate, true) }}
+        </p>
+      </template>
+    </div>
+
+    <div class="mb-1 flex gap-x-2 items-center">
+      <p class="w-fit text-sm italic opacity-75 flex items-center gap-1">
+        <PhAlarm size="16" weight="fill" /> {{ dateDifference }}
      </p>
+      <template v-if="dateDuration">
+        <p class="w-fit text-sm italic opacity-75 flex items-center gap-1">
+          <PhHourglassMedium size="16" weight="fill" /> Pendant {{ dateDuration }}
+        </p>
+      </template>
    </div>

    <div v-if="event.category || event.secondaryCategories" class="absolute top-3 right-4">
--- a/src/data/Events.ts
+++ b/src/data/Events.ts
@@ -55,7 +55,7 @@ export const regularEvents: CalendarEvent[] = [
    startDate: { day: 30, month: 2, year: 340 },
    endDate: { day: 27, month: 9, year: 355 },
    description:
-      "Le Grand Conseil Kaldélien ordonne la construction d'une muraille autour des Plaines de Poussières, afin de contenir les quelques démons y sortant.",
+      "Le Grand Conseil Kaldélien ordonne la construction d'une muraille autour des Plaines de Poussières, afin de contenir les démons y sortant.",
    category: 'construction',
    wiki: 'https://alexcreates.fr/leim/index.php/Plaines_de_poussi%C3%A8re',
    hidden: true
--- a/src/models/Date.ts
+++ b/src/models/Date.ts
@@ -90,7 +90,11 @@ export function getDifferenceInDays(baseDate: LeimDate, relativeDate: LeimDate):
 * @param relativeDate The year to compare it to
 * @returns A string with info on how the relative date differs to the base date
 */
-export function getRelativeString(baseDate: LeimDate, relativeDate: LeimDate): string {
+export function getRelativeString(
+  baseDate: LeimDate,
+  relativeDate: LeimDate,
+  formatting: 'compact' | 'complex' = 'complex'
+): string {
  const differenceInDays: number = getDifferenceInDays(baseDate, relativeDate)
  let output: string = ''
  let direction: 'past' | 'present' | 'future' = 'present'
@@ -103,31 +107,33 @@ export function getRelativeString(baseDate: LeimDate, relativeDate: LeimDate): s
    direction = 'past'
  }

-  // Handle if it's the same date
-  if (direction === 'present') {
-    return "Aujourd'hui"
-  }
-  if (differenceInDays === -2) {
-    return 'Avant-hier'
-  }
-  if (differenceInDays === -1) {
-    return 'Hier'
-  }
-  if (differenceInDays === 1) {
-    return 'Demain'
-  }
-  if (differenceInDays === 2) {
-    return 'Après-demain'
-  }
+  if (formatting === 'complex') {
+    // Handle if it's the same date
+    if (direction === 'present') {
+      return "Aujourd'hui"
+    }
+    if (differenceInDays === -2) {
+      return 'Avant-hier'
+    }
+    if (differenceInDays === -1) {
+      return 'Hier'
+    }
+    if (differenceInDays === 1) {
+      return 'Demain'
+    }
+    if (differenceInDays === 2) {
+      return 'Après-demain'
+    }

-  // Get relevant prefix for the string
-  if (direction === 'future') {
-    directionPrefix = 'Dans'
-  } else if (direction === 'past') {
-    directionPrefix = 'Il y a'
-  }
+    // Get relevant prefix for the string
+    if (direction === 'future') {
+      directionPrefix = 'Dans '
+    } else if (direction === 'past') {
+      directionPrefix = 'Il y a '
+    }

-  output += directionPrefix
+    output += directionPrefix
+  }

  const yearPackets: number = Math.abs(Math.trunc(differenceInDays / daysPerYear))
  const monthPackets: number = Math.abs(Math.trunc(differenceInDays / daysPerMonth) % monthsPerYear)
@@ -138,9 +144,9 @@ export function getRelativeString(baseDate: LeimDate, relativeDate: LeimDate): s
  // Assign year part
  if (yearPackets) {
    if (yearPackets === 1) {
-      output += ` ${yearPackets} an`
+      output += `${yearPackets} an`
    } else {
-      output += ` ${yearPackets} ans`
+      output += `${yearPackets} ans`
    }
  }