Added current event state

.eslintrc.cjs

@@ -23,7 +23,7 @@ module.exports = {
     ecmaVersion: 'latest'
   },
   rules: {
-    indent: ['error', 2],
+    indent: ['error', 2, { SwitchCase: 1 }],
     'prettier/prettier': [
       'error',
       {

src/stores/calendar.ts

@@ -1,8 +1,10 @@
-import { computed, type Ref, type ComputedRef } from 'vue'
+import { computed, type Ref, type ComputedRef, ref } from 'vue'
 import { defineStore } from 'pinia'
 import { useUrlSearchParams } from '@vueuse/core'
 import type { LeimPeriod } from '@/models/Date'
 
+type CalendarViewType = 'month' | 'year' | 'decade' | 'century'
+
 type CalendarStaticConfig = {
   months: string[]
   monthsPerYear: number
@@ -12,6 +14,10 @@ type CalendarStaticConfig = {
 }
 
 type CalendarCurrentConfig = {
+  viewType: CalendarViewType
+}
+
+type CalendarCurrentDate = {
   currentPeriod: Ref<LeimPeriod>
   currentYear: ComputedRef<string | string[]>
   currentMonth: ComputedRef<string | string[]>
@@ -20,7 +26,13 @@ type CalendarCurrentConfig = {
 }
 
 export const useCalendar = defineStore('calendar', () => {
-  // Static calendar config
+  /**
+   * Static calendar config
+   * This shouldn't change
+   */
+  /**
+   * Month list
+   */
   const months = [
     'Jalen',
     'Malsen',
@@ -38,6 +50,7 @@ export const useCalendar = defineStore('calendar', () => {
   const daysPerMonth = computed(() => daysPerYear / monthsPerYear.value)
   const daysPerWeek = 6
 
+  // Assign the static config
   const staticConfig: CalendarStaticConfig = {
     months,
     monthsPerYear: monthsPerYear.value,
@@ -46,6 +59,10 @@ export const useCalendar = defineStore('calendar', () => {
     daysPerWeek
   }
 
+  const currentConfig: Ref<CalendarCurrentConfig> = ref({
+    viewType: 'century'
+  })
+
   // Get date from URL params
   const params = useUrlSearchParams('history', {
     removeNullishValues: true
@@ -53,7 +70,7 @@ export const useCalendar = defineStore('calendar', () => {
 
   // Default date settings (current day)
   const defaultDay = String(12)
-  const defaultMonth = String(8)
+  const defaultMonth = String(7)
   const defaultYear = String(3209)
 
   // Assign default values if no params exist in URL
@@ -85,7 +102,7 @@ export const useCalendar = defineStore('calendar', () => {
   })
 
   // Create base config
-  const config: CalendarCurrentConfig = {
+  const currentDate: CalendarCurrentDate = {
     currentDay,
     currentMonth,
     currentYear,
@@ -159,7 +176,8 @@ export const useCalendar = defineStore('calendar', () => {
 
   return {
     staticConfig,
-    config,
+    currentConfig,
+    currentDate,
     params,
     incrementMonth,
     decrementMonth,

src/stores/characters.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import type { LeimDate } from '@/models/Date'
 
-type Character = {
+export type Character = {
   name: string
   birth?: LeimDate
   death?: LeimDate

src/stores/events.ts

@@ -1,8 +1,9 @@
-import { defineStore } from 'pinia'
+import { defineStore, storeToRefs } from 'pinia'
-import { computed } from 'vue'
+import { computed, watch, type ComputedRef, toRefs, type Ref, ref } from 'vue'
-import { useCharacters } from './characters'
+import { useCharacters, type Character } from './characters'
 
 import type { LeimDate } from '@/models/Date'
+import { useCalendar } from './calendar'
 
 type CalendarEvent = {
   title: string
@@ -11,20 +12,61 @@ type CalendarEvent = {
 
 export const useCalendarEvents = defineStore('calendar-events', () => {
   const { characters } = useCharacters()
+  const calendarStore = useCalendar()
 
+  const charactersWithBirthData: ComputedRef<Character[]> = computed(() =>
+    characters.filter((character) => character.birth)
+  )
   const characterBirthEvents = computed(() => {
-    const charactersWithBirthData = characters.filter((character) => character.birth)
+    return charactersWithBirthData.value.map((character) => {
-    return charactersWithBirthData.map((character) => {
       return { title: `Naissance de ${character.name}`, date: character.birth } as CalendarEvent
     })
   })
-
+  const charactersWithDeathData: ComputedRef<Character[]> = computed(() =>
+    characters.filter((character) => character.death)
+  )
   const characterDeathEvents = computed(() => {
-    const charactersWithDeathData = characters.filter((character) => character.death)
+    return charactersWithDeathData.value.map((character) => {
-    return charactersWithDeathData.map((character) => {
       return { title: `Décès de ${character.name}`, date: character.death } as CalendarEvent
     })
   })
 
-  return { characterBirthEvents, characterDeathEvents }
+  const currentEvents: Ref<CalendarEvent[]> = ref(computeCurrentEvents())
+
+  watch(calendarStore.currentDate, () => {
+    currentEvents.value = computeCurrentEvents()
+  })
+
+  function shouldEventBeDisplayed(event: CalendarEvent): boolean {
+    switch (calendarStore.currentConfig.viewType) {
+      case 'month':
+        return event.date.month === Number(calendarStore.currentDate.currentMonth)
+
+      case 'year':
+        return event.date.year === Number(calendarStore.currentDate.currentYear)
+
+      case 'decade':
+        return (
+          event.date.year >= Number(calendarStore.currentDate.currentYear) - 10 &&
+          event.date.year <= Number(calendarStore.currentDate.currentYear) + 10
+        )
+
+      case 'century':
+        return (
+          event.date.year >= Number(calendarStore.currentDate.currentYear) - 100 &&
+          event.date.year <= Number(calendarStore.currentDate.currentYear) + 100
+        )
+
+      default:
+        return false
+    }
+  }
+
+  function computeCurrentEvents(): CalendarEvent[] {
+    const allEvents = [...characterBirthEvents.value, ...characterDeathEvents.value]
+
+    return allEvents.filter((event) => shouldEventBeDisplayed(event))
+  }
+
+  return { currentEvents }
 })

src/views/HomeView.vue

@@ -2,11 +2,12 @@
 import { ref } from 'vue'
 import { useCalendar } from '@/stores/calendar'
 import { useCalendarEvents } from '@/stores/events'
+import { storeToRefs } from 'pinia'
 
-const { config, incrementMonth, decrementMonth, setMonth, incrementYear, decrementYear } =
+const { currentDate, incrementMonth, decrementMonth, setMonth, incrementYear, decrementYear } =
   useCalendar()
 
-const { characterBirthEvents, characterDeathEvents } = useCalendarEvents()
+const { currentEvents } = storeToRefs(useCalendarEvents())
 
 const monthTarget = ref(0)
 </script>
@@ -14,7 +15,7 @@ const monthTarget = ref(0)
 <template>
   <main class="container">
     <pre>
-      {{ config }}
+      {{ currentDate }}
     </pre>
     <div class="grid gap-2">
       <div class="flex gap-2">
@@ -50,7 +51,8 @@ const monthTarget = ref(0)
     </div>
 
     <pre>
-      {{ characterDeathEvents }}
+      Current events:
+      {{ currentEvents }}
     </pre>
   </main>
 </template>