Joururi/leim-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Separated navigation and selectedDate

Browse Source
This commit is contained in:
Alexis
2024-04-07 12:54:26 +02:00
parent 017c257133
commit c227b42c9f
4 changed files with 116 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/calendar/CalendarMenu.vue
View File

@@ -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]">
<div class="container">
<header class="border-slate-700 border-b-[1px]">
<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">
{{ currentDate.currentDateTitle }}
</h1>
<div>
<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>
</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>

26
src/components/calendar/CalendarTile.vue
View File

@@ -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="{ 'bg-slate-800': isDefaultDate }"
>{{ date.day }}</span
class="inline-flex w-8 h-8 aspect-square items-center justify-center rounded-full font-bold transition-colors"
:class="{
'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>

38
src/models/Date.ts
View File

@@ -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 JSON.stringify({ ...date1 }) === JSON.stringify({ ...date2 })
return convertDateToDays({ ...date1 }) === convertDateToDays({ ...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) {}

46
src/stores/calendar.ts
View File

@@ -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(
() => getPeriodOfYear(currentYear.value).long
)
const currentPeriodAbbr: ComputedRef<LeimPeriodShort> = computed(
const currentPeriod = computed<LeimPeriod>(() => getPeriodOfYear(currentYear.value).long)
const currentPeriodAbbr = computed<LeimPeriodShort>(
() => 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,