Added relative date comparisons

src/components/calendar/CalendarMenu.vue

@@ -1,21 +1,20 @@
 <script lang="ts" setup>
+import { getRelativeString } from '@/models/Date'
 import { useCalendar } from '@/stores/calendar'
-import CalendarMenuToday from './CalendarMenuToday.vue'
+import { PhMapPin } from '@phosphor-icons/vue'
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
 import CalendarMenuNav from './CalendarMenuNav.vue'
+import CalendarMenuToday from './CalendarMenuToday.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 { defaultDate, getFormattedDateTitle, currentDate } = useCalendar()
-const { currentLeimDate, selectedDate } = storeToRefs(useCalendar())
+const { selectedDate } = storeToRefs(useCalendar())
 
 const mainDateTitle = computed(() => getFormattedDateTitle(selectedDate.value, true))
 
-const dateDifference = computed(() => substractToDate(defaultDate, currentLeimDate.value))
+const dateDifference = computed(() => getRelativeString(defaultDate, selectedDate.value))
-const formattedDateDifference = computed(() => getFormattedDateTitle(dateDifference.value, true))
 </script>
 
 <template>
@@ -39,7 +38,9 @@ const formattedDateDifference = computed(() => getFormattedDateTitle(dateDiffere
               <h1 class="text-2xl font-bold flex items-center gap-1">
                 <PhMapPin size="26" weight="bold" /> {{ mainDateTitle }}
               </h1>
-              <h2 class="text-lg italic opacity-75">Placeholder</h2>
+              <h2 class="text-lg italic opacity-75">
+                {{ dateDifference }}
+              </h2>
             </div>
           </div>
         </div>

src/models/Date.ts

@@ -9,10 +9,10 @@ export type LeimPeriod = 'ante' | 'nante'
 export type LeimPeriodShort = 'A.R' | 'N.R'
 export type LeimDateOrder = 'asc' | 'desc'
 
-export const monthsPerYear = 10
+export const monthsPerYear: number = 10
-export const daysPerYear = 320
+export const daysPerYear: number = 320
-export const daysPerMonth = 32
+export const daysPerMonth: number = 32
-export const daysPerWeek = 6
+export const daysPerWeek: number = 6
 
 /**
  * Check whether two dates are identical
@@ -21,7 +21,7 @@ export const daysPerWeek = 6
  * @param date2 Second date
  * @returns True if the dates are identical
  */
-export function areDatesIdentical(date1: LeimDate, date2: LeimDate) {
+export function areDatesIdentical(date1: LeimDate, date2: LeimDate): boolean {
   return convertDateToDays({ ...date1 }) === convertDateToDays({ ...date2 })
 }
 
@@ -34,7 +34,7 @@ export function areDatesIdentical(date1: LeimDate, date2: LeimDate) {
  */
 export function compareDates(a: LeimDate, b: LeimDate, order: LeimDateOrder = 'desc'): number {
   // Reverses the order if specified
-  const orderFactor = order === 'desc' ? 1 : -1
+  const orderFactor: number = order === 'desc' ? 1 : -1
 
   if (a.period === 'ante' && b.period === 'nante') return -1 * orderFactor
   if (a.period === 'nante' && b.period === 'ante') return 1 * orderFactor
@@ -51,7 +51,14 @@ export function compareDates(a: LeimDate, b: LeimDate, order: LeimDateOrder = 'd
   return 0
 }
 
-export function convertDateToDays(dateToConvert: LeimDate) {
+/**
+ * Converts a LeimDate to its equivalent in days
+ *
+ * @todo Handle negative dates
+ * @param dateToConvert The date object
+ * @returns How many days does it represent
+ */
+export function convertDateToDays(dateToConvert: LeimDate): number {
   let numberOfDays: number = dateToConvert.day
 
   numberOfDays = numberOfDays + dateToConvert.month * daysPerMonth
@@ -60,23 +67,109 @@ export function convertDateToDays(dateToConvert: LeimDate) {
   return numberOfDays
 }
 
-export function substractToDate(baseDate: LeimDate, substractionDate: LeimDate) {
+/**
-  let newDay: number
+ * From two dates, get the difference in days between them
-  let newMonth: number
+ * @param baseDate The base date
-  let newYear: number
+ * @param relativeDate The year to compare it to
-  let newPeriod: LeimPeriod
+ * @returns The number of days separating the two dates (both positive and negative numbers)
-
+ */
-  // console.log(baseDate, substractionDate)
+export function getDifferenceInDays(baseDate: LeimDate, relativeDate: LeimDate): number {
-  // console.log(convertDateToDays(baseDate), convertDateToDays(substractionDate))
+  return convertDateToDays(relativeDate) - convertDateToDays(baseDate)
-
-  return baseDate
-
-  // return {
-  //   day: newDay,
-  //   month: newMonth,
-  //   year: newYear,
-  //   period: newPeriod
-  // }
 }
 
-export function addToDate(firstDate: LeimDate, secondDate: LeimDate) {}
+/**
+ * From two dates, gives information on how many years, months and days it has been / will be between them
+ *
+ * @param baseDate The base date
+ * @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 {
+  const differenceInDays: number = getDifferenceInDays(baseDate, relativeDate)
+  let output: string = ''
+  let direction: 'past' | 'present' | 'future' = 'present'
+  let directionPrefix: string = ''
+
+  // Check whether it's a past or future date
+  if (differenceInDays > 0) {
+    direction = 'future'
+  } else if (differenceInDays < 0) {
+    direction = 'past'
+  }
+
+  // Handle if it's the same date
+  if (direction === 'present') {
+    return "Aujourd'hui"
+  }
+
+  // Get relevant prefix for the string
+  if (direction === 'future') {
+    directionPrefix = 'Dans'
+  } else if (direction === 'past') {
+    directionPrefix = 'Il y a'
+  }
+
+  output += directionPrefix
+
+  const yearPackets: number = Math.abs(Math.trunc(differenceInDays / daysPerYear))
+  const monthPackets: number = Math.abs(Math.trunc(differenceInDays / daysPerMonth) % monthsPerYear)
+
+  const remainingDays: number =
+    Math.abs(differenceInDays) - (yearPackets * daysPerYear + monthPackets * daysPerMonth)
+
+  // Assign year part
+  if (yearPackets) {
+    if (yearPackets === 1) {
+      output += ` ${yearPackets} an`
+    } else {
+      output += ` ${yearPackets} ans`
+    }
+  }
+
+  // Assign month part
+  if (monthPackets) {
+    // If there was a year packet(s), separate from them
+    if (yearPackets) {
+      output += ','
+    }
+
+    output += ` ${monthPackets} mois`
+  }
+
+  // Assign day part
+  if (remainingDays) {
+    // If there was a year OR month packet(s), separate from them
+    if (yearPackets || monthPackets) {
+      output += ' et'
+    }
+
+    if (remainingDays === 1) {
+      output += ` ${remainingDays} jour`
+    } else {
+      output += ` ${remainingDays} jours`
+    }
+  }
+
+  return output
+}
+
+// export function getRelativeDate(baseDate: LeimDate, relativeDate: LeimDate) {
+//   let newDay: number
+//   let newMonth: number
+//   let newYear: number
+//   let newPeriod: LeimPeriod
+
+//   const differenceInDays = getDifferenceInDays(baseDate, relativeDate)
+
+//   // console.log(baseDate, substractionDate)
+//   console.log(getRelativeString(baseDate, relativeDate))
+
+//   return differenceInDays
+
+//   // return {
+//   //   day: newDay,
+//   //   month: newMonth,
+//   //   year: newYear,
+//   //   period: newPeriod
+//   // }
+// }