Base nuxt move after refactoring until no warnings
There still exists an issue with one Adobe led library ; @international-dates don't seem to compile their sourcemaps correctly. I don't think this is something I can fix however, and it may require hacks and workarounds to solve from what I've gathered
This commit is contained in:
Alexis
417
stores/CalendarStore.ts
Normal file
417
stores/CalendarStore.ts
Normal file
@@ -0,0 +1,417 @@
|
||||
import {
|
||||
monthsPerYear,
|
||||
daysPerWeek,
|
||||
daysPerMonth,
|
||||
daysPerYear,
|
||||
type LeimDate,
|
||||
type LeimPeriod,
|
||||
type LeimPeriodShort
|
||||
} from '@/models/Date'
|
||||
import { useStorage, useUrlSearchParams } from '@vueuse/core'
|
||||
import { defineStore } from 'pinia'
|
||||
import { computed, ref, type ComputedRef, type Ref } from 'vue'
|
||||
|
||||
type CalendarViewType = 'month' | 'year' | 'decade' | 'century'
|
||||
|
||||
type CalendarStaticConfig = {
|
||||
months: string[]
|
||||
monthsPerYear: number
|
||||
daysPerYear: number
|
||||
daysPerMonth: number
|
||||
daysPerWeek: number
|
||||
}
|
||||
|
||||
type CalendarCurrentConfig = {
|
||||
viewType: CalendarViewType
|
||||
}
|
||||
|
||||
type CalendarCurrentDate = {
|
||||
currentDay: ComputedRef<number>
|
||||
currentMonth: ComputedRef<number>
|
||||
currentMonthName: ComputedRef<string>
|
||||
currentYear: ComputedRef<number>
|
||||
currentPeriod: Ref<LeimPeriod>
|
||||
currentPeriodAbbr: Ref<LeimPeriodShort>
|
||||
currentDateTitle: ComputedRef<string>
|
||||
}
|
||||
|
||||
export const useCalendar = defineStore('calendar', () => {
|
||||
/**
|
||||
* Static calendar config
|
||||
* This shouldn't change
|
||||
*/
|
||||
/**
|
||||
* Month list
|
||||
*/
|
||||
const months: string[] = [
|
||||
'Jalen',
|
||||
'Malsen',
|
||||
'Verlys',
|
||||
'Nalys',
|
||||
'Verdore',
|
||||
'Sidore',
|
||||
'Lyllion',
|
||||
'Rion',
|
||||
'Farene',
|
||||
'Dalvene'
|
||||
]
|
||||
|
||||
// Assign the static config
|
||||
const staticConfig: CalendarStaticConfig = {
|
||||
months,
|
||||
monthsPerYear,
|
||||
daysPerYear,
|
||||
daysPerMonth,
|
||||
daysPerWeek
|
||||
}
|
||||
|
||||
const currentConfig: Ref<CalendarCurrentConfig> = ref({
|
||||
viewType: 'month'
|
||||
})
|
||||
const viewTypeOptions: Set<CalendarViewType> = new Set<CalendarViewType>([
|
||||
'month',
|
||||
'year',
|
||||
'decade',
|
||||
'century'
|
||||
])
|
||||
|
||||
// Default date settings (current day in the world)
|
||||
const defaultDay: number = 23
|
||||
const defaultMonth: number = 8
|
||||
const defaultYear: number = 3209
|
||||
const defaultDate: ComputedRef<LeimDate> = computed(() => {
|
||||
return {
|
||||
day: defaultDay,
|
||||
month: defaultMonth,
|
||||
year: defaultYear
|
||||
}
|
||||
})
|
||||
|
||||
// Get date from URL params
|
||||
const params = useUrlSearchParams('history', {
|
||||
write: false,
|
||||
initialValue: {
|
||||
day: defaultDate.value.day.toString(),
|
||||
month: defaultDate.value.month.toString(),
|
||||
year: defaultDate.value.year.toString()
|
||||
}
|
||||
})
|
||||
|
||||
const currentDay = computed<number>(() => {
|
||||
return Number(params.day)
|
||||
})
|
||||
|
||||
const currentMonth = computed<number>(() => {
|
||||
return Number(params.month)
|
||||
})
|
||||
// Gets the label from currentMonth index
|
||||
const currentMonthName = computed<string>(() => getMonthName(currentMonth.value))
|
||||
|
||||
const currentYear = computed<number>(() => {
|
||||
return Number(params.year)
|
||||
})
|
||||
|
||||
// Get period from currentYear
|
||||
const currentPeriod = computed<LeimPeriod>(() => getPeriodOfYear(currentYear.value).long)
|
||||
const currentPeriodAbbr = computed<LeimPeriodShort>(
|
||||
() => getPeriodOfYear(currentYear.value).short
|
||||
)
|
||||
|
||||
const currentDateTitle = computed<string>(() => {
|
||||
switch (currentConfig.value.viewType) {
|
||||
case 'month':
|
||||
return getFormattedDateTitle({
|
||||
day: currentDate.currentDay.value,
|
||||
month: currentDate.currentMonth.value,
|
||||
year: currentDate.currentYear.value,
|
||||
period: currentDate.currentPeriod.value
|
||||
})
|
||||
|
||||
case 'year':
|
||||
return `Année ${currentYear.value} ${currentPeriodAbbr.value}`
|
||||
|
||||
case 'decade':
|
||||
return `Années ${currentYear.value} ${getPeriodOfYear(currentYear.value).short} - ${currentYear.value + 10} ${getPeriodOfYear(currentYear.value + 10).short}`
|
||||
|
||||
case 'century':
|
||||
return `Années ${currentYear.value} ${getPeriodOfYear(currentYear.value).short} - ${currentYear.value + 100} ${getPeriodOfYear(currentYear.value + 100).short}`
|
||||
|
||||
default:
|
||||
return 'Date inconnue'
|
||||
}
|
||||
})
|
||||
|
||||
// Create base config
|
||||
const currentDate: CalendarCurrentDate = {
|
||||
currentDay,
|
||||
currentMonth,
|
||||
currentMonthName,
|
||||
currentYear,
|
||||
currentPeriod,
|
||||
currentPeriodAbbr,
|
||||
currentDateTitle
|
||||
}
|
||||
|
||||
const currentLeimDate = computed<LeimDate>(() => {
|
||||
return {
|
||||
day: currentDate.currentDay.value,
|
||||
month: currentDate.currentMonth.value,
|
||||
year: currentDate.currentYear.value,
|
||||
period: currentDate.currentPeriod.value
|
||||
}
|
||||
})
|
||||
|
||||
const selectedDate = useStorage<LeimDate>('selected-date', currentLeimDate.value)
|
||||
|
||||
/**
|
||||
* Check whether the current viewType is active
|
||||
*/
|
||||
const isCurrentScreenActive = computed<boolean>(() => {
|
||||
switch (currentConfig.value.viewType) {
|
||||
case 'month':
|
||||
return (
|
||||
defaultDate.value.month === currentDate.currentMonth.value &&
|
||||
defaultDate.value.year === currentDate.currentYear.value
|
||||
)
|
||||
|
||||
case 'year':
|
||||
case 'decade':
|
||||
case 'century':
|
||||
return defaultDate.value.year === currentDate.currentYear.value
|
||||
|
||||
default:
|
||||
return false
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* Moves the current date forward one month
|
||||
*/
|
||||
|
||||
function incrementMonth(): void {
|
||||
let newValue = Number(params.month) + 1
|
||||
|
||||
// If the new value would exceed the max number of month per year
|
||||
if (newValue >= staticConfig.monthsPerYear) {
|
||||
newValue = 0
|
||||
// Increment the year
|
||||
incrementYear()
|
||||
}
|
||||
|
||||
params.month = newValue.toString()
|
||||
}
|
||||
|
||||
/**
|
||||
* Moves the current date backward one month
|
||||
*/
|
||||
function decrementMonth(): void {
|
||||
let newValue = Number(params.month) - 1
|
||||
|
||||
// If the new value would go below 0
|
||||
if (newValue < 0) {
|
||||
newValue = staticConfig.monthsPerYear - 1
|
||||
// Decrement the year
|
||||
decrementYear()
|
||||
}
|
||||
|
||||
params.month = newValue.toString()
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the previous month number
|
||||
*
|
||||
* @param monthNumber Initial month
|
||||
* @returns The previous month number in the year
|
||||
*/
|
||||
function getPreviousMonth(monthNumber: number): number {
|
||||
const target: number = monthNumber - 1
|
||||
|
||||
if (target < 0) {
|
||||
return monthsPerYear - 1
|
||||
}
|
||||
|
||||
return target
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the following month number
|
||||
*
|
||||
* @param monthNumber Initial month
|
||||
* @returns The next month number in the year
|
||||
*/
|
||||
function getNextMonth(monthNumber: number): number {
|
||||
const target: number = monthNumber + 1
|
||||
|
||||
if (target + 1 >= monthsPerYear) {
|
||||
return 0
|
||||
}
|
||||
|
||||
return target
|
||||
}
|
||||
|
||||
/**
|
||||
* Moves the current date to a particular month
|
||||
*/
|
||||
function setMonth(target: number): void {
|
||||
// If the target is outside the month bounds
|
||||
if (target < 0 || target >= staticConfig.monthsPerYear) {
|
||||
return
|
||||
}
|
||||
|
||||
params.month = target.toString()
|
||||
}
|
||||
|
||||
/**
|
||||
* Moves the current date forward one year
|
||||
*/
|
||||
function incrementYear(inc: number = 1): void {
|
||||
const newValue = Number(params.year) + inc
|
||||
|
||||
params.year = newValue.toString()
|
||||
}
|
||||
|
||||
/**
|
||||
* Moves the current date backward one year
|
||||
*/
|
||||
function decrementYear(inc: number = 1): void {
|
||||
const newValue = Number(params.year) - inc
|
||||
|
||||
params.year = newValue.toString()
|
||||
}
|
||||
|
||||
/**
|
||||
* From a given year, returns a set of LeimPeriod identifier
|
||||
*
|
||||
* This is used in range use-cases
|
||||
*
|
||||
* @param year The year to display
|
||||
* @returns An object containing both short and long LeimPeriod
|
||||
*/
|
||||
function getPeriodOfYear(year: string | number): { long: LeimPeriod; short: LeimPeriodShort } {
|
||||
const numYear = year as number
|
||||
|
||||
return {
|
||||
long: numYear >= 0 ? 'nante' : 'ante',
|
||||
short: numYear >= 0 ? 'N.R' : 'A.R'
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the formatted month name given its index
|
||||
*
|
||||
* @param monthNumber Index of the month
|
||||
* @returns Formatted month name
|
||||
*/
|
||||
function getMonthName(monthNumber: number): string {
|
||||
const index = Number(monthNumber)
|
||||
return staticConfig.months[index]
|
||||
}
|
||||
|
||||
/**
|
||||
* Switches the active viewType
|
||||
*
|
||||
* @param viewType Target viewType
|
||||
*/
|
||||
function setViewType(viewType: CalendarViewType): void {
|
||||
currentConfig.value.viewType = viewType
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the formatted viewType title
|
||||
*
|
||||
* @param viewType Target viewType
|
||||
* @returns Formatted mode title
|
||||
*/
|
||||
function getViewTypeTitle(viewType: CalendarViewType): string {
|
||||
switch (viewType) {
|
||||
case 'year':
|
||||
return 'Année'
|
||||
|
||||
case 'decade':
|
||||
return 'Décennie'
|
||||
|
||||
case 'century':
|
||||
return 'Siècle'
|
||||
|
||||
case 'month':
|
||||
default:
|
||||
return 'Mois'
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* From a LeimDate, returns the legible date title
|
||||
*
|
||||
* @param date Date target
|
||||
* @param showNumber Should the date show the day number
|
||||
* @returns Formatted date name
|
||||
*/
|
||||
function getFormattedDateTitle(date: LeimDate, showNumber?: boolean): string {
|
||||
if (showNumber) {
|
||||
return `${date.day} ${getMonthName(date.month)} ${date.year} ${getPeriodOfYear(date.year).short}`
|
||||
}
|
||||
|
||||
return `${getMonthName(date.month)} ${date.year} ${getPeriodOfYear(date.year).short}`
|
||||
}
|
||||
|
||||
/**
|
||||
* Jumps the calendar to the given date
|
||||
*
|
||||
* @param date Target date
|
||||
*/
|
||||
function jumpToDate(date: LeimDate): void {
|
||||
params.day = date.day.toString()
|
||||
params.month = date.month.toString()
|
||||
params.year = date.year.toString()
|
||||
selectDate(date)
|
||||
}
|
||||
|
||||
/**
|
||||
* Jump the calendar to the default date
|
||||
*/
|
||||
function jumpToDefaultDate(): void {
|
||||
jumpToDate(defaultDate.value)
|
||||
}
|
||||
|
||||
/**
|
||||
* Jump the calendar to the default date
|
||||
*/
|
||||
function selectDate(date: LeimDate): void {
|
||||
selectedDate.value = date
|
||||
}
|
||||
|
||||
const isAdvancedSearchOpen: Ref<boolean> = ref<boolean>(false)
|
||||
|
||||
function revealAdvancedSearch() {
|
||||
isAdvancedSearchOpen.value = true
|
||||
}
|
||||
|
||||
return {
|
||||
staticConfig,
|
||||
viewTypeOptions,
|
||||
currentConfig,
|
||||
currentDate,
|
||||
currentLeimDate,
|
||||
defaultDate,
|
||||
selectedDate,
|
||||
selectDate,
|
||||
params,
|
||||
getPeriodOfYear,
|
||||
incrementMonth,
|
||||
decrementMonth,
|
||||
setMonth,
|
||||
getPreviousMonth,
|
||||
getNextMonth,
|
||||
incrementYear,
|
||||
decrementYear,
|
||||
jumpToDate,
|
||||
jumpToDefaultDate,
|
||||
getFormattedDateTitle,
|
||||
getMonthName,
|
||||
setViewType,
|
||||
getViewTypeTitle,
|
||||
isCurrentScreenActive,
|
||||
isAdvancedSearchOpen,
|
||||
revealAdvancedSearch
|
||||
}
|
||||
})
|
||||
15
stores/CharacterStore.ts
Normal file
15
stores/CharacterStore.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { charactersList } from '@/data/Characters'
|
||||
import type { Character } from '@/models/Characters'
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useCharacters = defineStore('characters', () => {
|
||||
const characters: Character[] = charactersList
|
||||
|
||||
// Get all birth events
|
||||
const charactersWithBirthData: Character[] = characters.filter((character) => character.birth)
|
||||
|
||||
// Get all death events
|
||||
const charactersWithDeathData: Character[] = characters.filter((character) => character.death)
|
||||
|
||||
return { characters, charactersWithBirthData, charactersWithDeathData }
|
||||
})
|
||||
215
stores/EventStore.ts
Normal file
215
stores/EventStore.ts
Normal file
@@ -0,0 +1,215 @@
|
||||
import { initialEvents } from '@/data/Events'
|
||||
import { compareDates, convertDateToDays, daysPerMonth, type LeimDate } from '@/models/Date'
|
||||
import type { CalendarEvent } from '@/models/Events'
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, watch, type Ref } from 'vue'
|
||||
import { useCalendar } from './CalendarStore'
|
||||
// import { useCharacters } from './CharacterStore'
|
||||
|
||||
export const useCalendarEvents = defineStore('calendar-events', () => {
|
||||
const { currentDate, currentConfig } = useCalendar()
|
||||
// const { charactersWithBirthData, charactersWithDeathData } = useCharacters()
|
||||
|
||||
const baseEvents: CalendarEvent[] = initialEvents
|
||||
|
||||
// const characterBirthEvents = charactersWithBirthData.map((character) => {
|
||||
// return {
|
||||
// title: `Naissance de ${character.name}`,
|
||||
// startDate: character.birth,
|
||||
// category: 'naissance'
|
||||
// } as CalendarEvent
|
||||
// })
|
||||
|
||||
// const characterDeathEvents = charactersWithDeathData.map((character) => {
|
||||
// return {
|
||||
// title: `Décès de ${character.name}`,
|
||||
// startDate: character.death,
|
||||
// category: 'mort'
|
||||
// } as CalendarEvent
|
||||
// })
|
||||
|
||||
const allEvents = [...baseEvents].sort((a, b) => {
|
||||
return compareDates(a.startDate, b.startDate, 'desc')
|
||||
})
|
||||
|
||||
// Gets all current event in its default state
|
||||
const currentEvents: Ref<CalendarEvent[]> = ref(computeCurrentEvents())
|
||||
|
||||
// Watch for currentDate changes
|
||||
watch(currentDate, () => {
|
||||
currentEvents.value = computeCurrentEvents()
|
||||
})
|
||||
|
||||
/**
|
||||
* Determines if the event can appear in the front end
|
||||
*
|
||||
* This function takes into consideration the viewType of the calendar config
|
||||
*
|
||||
* @param event The event to analyze
|
||||
* @returns Whether the event should appear in the current view
|
||||
*/
|
||||
function shouldEventBeDisplayed(event: CalendarEvent): boolean {
|
||||
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.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
|
||||
const firstDayOfCurrentMonth = convertDateToDays({
|
||||
day: 1,
|
||||
month: currentDate.currentMonth,
|
||||
year: currentDate.currentYear
|
||||
})
|
||||
const lastDayOfCurrentMonth = firstDayOfCurrentMonth + daysPerMonth
|
||||
const last8Tiles = lastDayOfCurrentMonth + 8
|
||||
|
||||
const isEventOnNext8Tiles =
|
||||
(eventStartDateToDays <= last8Tiles && eventStartDateToDays >= lastDayOfCurrentMonth) ||
|
||||
(Boolean(event.endDate) &&
|
||||
eventEndDateToDays <= last8Tiles &&
|
||||
eventEndDateToDays >= lastDayOfCurrentMonth)
|
||||
|
||||
switch (currentConfig.viewType) {
|
||||
case 'month':
|
||||
return isEventOnCurrentScreen || isEventOnNext8Tiles
|
||||
|
||||
case 'year':
|
||||
return event.startDate.year === currentDate.currentYear
|
||||
|
||||
case 'decade':
|
||||
return (
|
||||
event.startDate.year >= currentDate.currentYear &&
|
||||
event.startDate.year <= currentDate.currentYear + 10
|
||||
)
|
||||
|
||||
case 'century':
|
||||
return (
|
||||
event.startDate.year >= currentDate.currentYear &&
|
||||
event.startDate.year <= currentDate.currentYear + 100
|
||||
)
|
||||
|
||||
default:
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches all the current events for the current view
|
||||
*
|
||||
* @returns A list of events that can appear in the current view
|
||||
*/
|
||||
function computeCurrentEvents(): CalendarEvent[] {
|
||||
return allEvents.filter((event) => shouldEventBeDisplayed(event))
|
||||
}
|
||||
|
||||
/**
|
||||
* From a base event, gets the next or previous in the timeline
|
||||
* @todo **This should probably be extracted to function FIRST with dates only, as the initialIsEnd param is only used at the beggining to establish a pivot**
|
||||
*
|
||||
* @param event The event at a given position in the data
|
||||
* @param position Whether we should get the next or previous event
|
||||
* @returns The next event in chronological order
|
||||
*/
|
||||
function getRelativeEventFromEvent(
|
||||
event: CalendarEvent,
|
||||
position: 'next' | 'prev' = 'next',
|
||||
initialIsEnd: boolean = false
|
||||
): { event: CalendarEvent; targetDate: LeimDate } {
|
||||
let dateToParse: LeimDate // Day value of the date that the user interacted with
|
||||
|
||||
if (initialIsEnd && event.endDate) {
|
||||
dateToParse = event.endDate
|
||||
} else {
|
||||
dateToParse = event.startDate
|
||||
}
|
||||
|
||||
return getRelativeEventFromDate(dateToParse, position)
|
||||
}
|
||||
|
||||
function getRelativeEventFromDate(
|
||||
date: LeimDate,
|
||||
position: 'next' | 'prev' = 'next'
|
||||
): { event: CalendarEvent; targetDate: LeimDate } {
|
||||
const pivotValue = convertDateToDays(date)
|
||||
let t: { eventData: CalendarEvent; distance: number; targetKey: 'startDate' | 'endDate' }[] = []
|
||||
|
||||
// Loop over all event once to convert the structure to a usable one
|
||||
for (let i = 0; i < allEvents.length; i++) {
|
||||
const e: CalendarEvent = allEvents[i]
|
||||
|
||||
// Estimate distance from pivot
|
||||
const startDateDays: number = convertDateToDays(e.startDate)
|
||||
const startDistance: number = startDateDays - pivotValue
|
||||
|
||||
// Push startDate to comparator array
|
||||
t.push({
|
||||
eventData: e,
|
||||
distance: startDistance,
|
||||
targetKey: 'startDate'
|
||||
})
|
||||
|
||||
// Check the same things for endDate
|
||||
if (e.endDate) {
|
||||
const endDateDays: number = convertDateToDays(e.endDate)
|
||||
const endDistance: number = endDateDays - pivotValue
|
||||
|
||||
// Push optional endDate to comparator array
|
||||
t.push({
|
||||
eventData: e,
|
||||
distance: endDistance,
|
||||
targetKey: 'endDate'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// // Special case : If we query the first one but it already is
|
||||
// if (position === 'prev' && t[0].distance === 0) {
|
||||
// const targetDate =
|
||||
// t[0].targetKey === 'startDate' ? t[0].eventData.startDate : t[0].eventData.endDate!
|
||||
// return {
|
||||
// event: t[0].eventData,
|
||||
// targetDate: targetDate
|
||||
// }
|
||||
// }
|
||||
// // Special case : If we query the last one but it already is
|
||||
// if (position === 'next' && t[t.length - 1].distance === 0) {
|
||||
// const targetDate =
|
||||
// t[t.length - 1].targetKey === 'startDate'
|
||||
// ? t[t.length - 1].eventData.startDate
|
||||
// : t[t.length - 1].eventData.endDate!
|
||||
// return {
|
||||
// event: t[t.length - 1].eventData,
|
||||
// targetDate: targetDate
|
||||
// }
|
||||
// }
|
||||
|
||||
// Based on the direction, either ignore negative distance (past) or positive distance (future)
|
||||
t = t.filter((i) => {
|
||||
return position === 'next' ? i.distance > 0 : i.distance < 0
|
||||
})
|
||||
|
||||
if (!t.length) {
|
||||
throw new Error(
|
||||
"Aucun évènement suivant ou précédent trouvé ; Peut-être l'évènement se situe au début ou à la fin du calendrier ?"
|
||||
)
|
||||
}
|
||||
|
||||
// Get event with remaining minimum distance
|
||||
const closestEvent = t.reduce((a, b) => {
|
||||
return Math.abs(b.distance) < Math.abs(a.distance) ? b : a
|
||||
})
|
||||
|
||||
return {
|
||||
event: closestEvent.eventData,
|
||||
targetDate: closestEvent.eventData[closestEvent.targetKey]!
|
||||
}
|
||||
}
|
||||
|
||||
return { allEvents, currentEvents, getRelativeEventFromDate, getRelativeEventFromEvent }
|
||||
})
|
||||
Reference in New Issue
Block a user