Separated navigation and selectedDate

src/components/calendar/CalendarMenu.vue

@@ -4,13 +4,23 @@ import CalendarMenuToday from './CalendarMenuToday.vue'
 import CalendarMenuNav from './CalendarMenuNav.vue'
 import CalendarSwitch from './CalendarSwitch.vue'
 import CalendarSearch from './search/CalendarSearch.vue'
+import { substractToDate } from '@/models/Date'
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { PhMapPin } from '@phosphor-icons/vue'
 
-const { currentDate } = useCalendar()
+const { defaultDate, getFormattedDateTitle, currentDate } = useCalendar()
+const { currentLeimDate, selectedDate } = storeToRefs(useCalendar())
+
+const mainDateTitle = computed(() => getFormattedDateTitle(selectedDate.value, true))
+
+const dateDifference = computed(() => substractToDate(defaultDate, currentLeimDate.value))
+const formattedDateDifference = computed(() => getFormattedDateTitle(dateDifference.value, true))
 </script>
 
 <template>
-  <header class="py-4 border-slate-700 border-b-[1px]">
+  <header class="border-slate-700 border-b-[1px]">
-    <div class="container">
+    <div class="pt-4 container">
       <div class="grid md:grid-cols-12 items-center">
         <div class="md:col-span-9">
           <div class="flex items-center gap-6">
@@ -25,9 +35,12 @@ const { currentDate } = useCalendar()
                 <CalendarMenuNav />
               </li>
             </menu>
-            <h1 class="text-2xl font-bold">
+            <div>
-              {{ currentDate.currentDateTitle }}
+              <h1 class="text-2xl font-bold flex items-center gap-1">
-            </h1>
+                <PhMapPin size="26" weight="bold" /> {{ mainDateTitle }}
+              </h1>
+              <h2 class="text-lg italic opacity-75">Placeholder</h2>
+            </div>
           </div>
         </div>
         <div class="md:col-span-3 flex justify-end">
@@ -35,5 +48,12 @@ const { currentDate } = useCalendar()
         </div>
       </div>
     </div>
+    <div class="container">
+      <div class="flex">
+        <div class="px-4 py-2 border-slate-700 border-x-[1px] border-t-[1px] rounded-sm">
+          <span class="text-sm font-bold">{{ currentDate.currentDateTitle }}</span>
+        </div>
+      </div>
+    </div>
   </header>
 </template>

src/components/calendar/CalendarTile.vue

@@ -11,7 +11,8 @@ const props = defineProps<{
   faded?: boolean
 }>()
 
-const { defaultDate } = useCalendar()
+const { defaultDate, selectDate } = useCalendar()
+const { selectedDate } = storeToRefs(useCalendar())
 const { currentEvents } = storeToRefs(useCalendarEvents())
 
 const eventsForTheDay = computed(() => {
@@ -23,6 +24,10 @@ const eventsForTheDay = computed(() => {
 const isDefaultDate = computed(() => {
   return areDatesIdentical(props.date, defaultDate)
 })
+
+const isSelectedDate = computed(() => {
+  return areDatesIdentical(props.date, selectedDate.value)
+})
 </script>
 
 <template>
@@ -35,22 +40,29 @@ const isDefaultDate = computed(() => {
   >
     <div class="text-center">
       <span
-        class="inline-flex w-8 h-8 aspect-square items-center justify-center rounded-full font-bold"
+        class="inline-flex w-8 h-8 aspect-square items-center justify-center rounded-full font-bold transition-colors"
-        :class="{ 'bg-slate-800': isDefaultDate }"
+        :class="{
-        >{{ date.day }}</span
+          'bg-slate-800': isDefaultDate && !isSelectedDate,
+          'text-white bg-blue-500': isSelectedDate
+        }"
       >
+        {{ date.day }}
+      </span>
     </div>
+
     <ul
       v-if="eventsForTheDay.length > 0"
-      class="absolute top-12 bottom-2 inset-x-2 grid auto-rows-min gap-1"
+      class="absolute top-12 bottom-2 inset-x-2 grid auto-rows-min gap-1 z-10 pointer-events-none transition-opacity"
       :class="{
-        'opacity-40': props.faded
+        'opacity-40': props.faded && !isSelectedDate
       }"
     >
-      <li v-for="event in eventsForTheDay" :key="event.title" class="grid">
+      <li v-for="event in eventsForTheDay" :key="event.title" class="grid pointer-events-auto">
         <CalendarEvent :event />
       </li>
     </ul>
+
+    <button class="absolute inset-0 w-full h-full cursor-default z-0" @click="selectDate(date)" />
   </div>
 </template>
 

src/models/Date.ts

@@ -9,6 +9,11 @@ export type LeimPeriod = 'ante' | 'nante'
 export type LeimPeriodShort = 'A.R' | 'N.R'
 export type LeimDateOrder = 'asc' | 'desc'
 
+export const monthsPerYear = 10
+export const daysPerYear = 320
+export const daysPerMonth = 32
+export const daysPerWeek = 6
+
 /**
  * Check whether two dates are identical
  *
@@ -17,8 +22,7 @@ export type LeimDateOrder = 'asc' | 'desc'
  * @returns True if the dates are identical
  */
 export function areDatesIdentical(date1: LeimDate, date2: LeimDate) {
-  // To refacto to be more precise
+  return convertDateToDays({ ...date1 }) === convertDateToDays({ ...date2 })
-  return JSON.stringify({ ...date1 }) === JSON.stringify({ ...date2 })
 }
 
 /**
@@ -46,3 +50,33 @@ export function compareDates(a: LeimDate, b: LeimDate, order: LeimDateOrder = 'd
 
   return 0
 }
+
+export function convertDateToDays(dateToConvert: LeimDate) {
+  let numberOfDays: number = dateToConvert.day
+
+  numberOfDays = numberOfDays + dateToConvert.month * daysPerMonth
+  numberOfDays = numberOfDays + dateToConvert.year * daysPerYear
+
+  return numberOfDays
+}
+
+export function substractToDate(baseDate: LeimDate, substractionDate: LeimDate) {
+  let newDay: number
+  let newMonth: number
+  let newYear: number
+  let newPeriod: LeimPeriod
+
+  // console.log(baseDate, substractionDate)
+  // console.log(convertDateToDays(baseDate), convertDateToDays(substractionDate))
+
+  return baseDate
+
+  // return {
+  //   day: newDay,
+  //   month: newMonth,
+  //   year: newYear,
+  //   period: newPeriod
+  // }
+}
+
+export function addToDate(firstDate: LeimDate, secondDate: LeimDate) {}

src/stores/calendar.ts

@@ -1,4 +1,12 @@
-import type { LeimDate, LeimPeriod, LeimPeriodShort } from '@/models/Date'
+import {
+  monthsPerYear,
+  daysPerWeek,
+  daysPerMonth,
+  daysPerYear,
+  type LeimDate,
+  type LeimPeriod,
+  type LeimPeriodShort
+} from '@/models/Date'
 import { isDigit, isInt, isSignedInt } from '@/utils/Regex'
 import { useUrlSearchParams } from '@vueuse/core'
 import { defineStore } from 'pinia'
@@ -48,17 +56,13 @@ export const useCalendar = defineStore('calendar', () => {
     'Farene',
     'Dalvene'
   ]
-  const monthsPerYear = computed(() => months.length)
-  const daysPerYear = 320
-  const daysPerMonth = computed(() => daysPerYear / monthsPerYear.value)
-  const daysPerWeek = 6
 
   // Assign the static config
   const staticConfig: CalendarStaticConfig = {
     months,
-    monthsPerYear: monthsPerYear.value,
+    monthsPerYear,
     daysPerYear,
-    daysPerMonth: daysPerMonth.value,
+    daysPerMonth,
     daysPerWeek
   }
 
@@ -116,10 +120,8 @@ export const useCalendar = defineStore('calendar', () => {
   })
 
   // Get period from currentYear
-  const currentPeriod: ComputedRef<LeimPeriod> = computed(
+  const currentPeriod = computed<LeimPeriod>(() => getPeriodOfYear(currentYear.value).long)
-    () => getPeriodOfYear(currentYear.value).long
+  const currentPeriodAbbr = computed<LeimPeriodShort>(
-  )
-  const currentPeriodAbbr: ComputedRef<LeimPeriodShort> = computed(
     () => getPeriodOfYear(currentYear.value).short
   )
 
@@ -158,6 +160,17 @@ export const useCalendar = defineStore('calendar', () => {
     currentDateTitle
   }
 
+  const currentLeimDate = computed<LeimDate>(() => {
+    return {
+      day: currentDate.currentDay.value,
+      month: currentDate.currentMonth.value,
+      year: currentDate.currentYear.value,
+      period: currentDate.currentPeriod.value
+    }
+  })
+
+  const selectedDate = ref<LeimDate>(currentLeimDate.value)
+
   /**
    * Check whether the current viewType is active
    */
@@ -325,6 +338,7 @@ export const useCalendar = defineStore('calendar', () => {
     params.day = date.day.toString()
     params.month = date.month.toString()
     params.year = date.year.toString()
+    selectDate(date)
   }
 
   /**
@@ -335,12 +349,22 @@ export const useCalendar = defineStore('calendar', () => {
     currentConfig.value.viewType = 'month'
   }
 
+  /**
+   * Jump the calendar to the default date
+   */
+  function selectDate(date: LeimDate) {
+    selectedDate.value = date
+  }
+
   return {
     staticConfig,
     viewTypeOptions,
     currentConfig,
     currentDate,
+    currentLeimDate,
     defaultDate,
+    selectedDate,
+    selectDate,
     params,
     getPeriodOfYear,
     incrementMonth,