67f5a270af
This is barely functionnal, but at least it can display some data without crashing Most other functionnalities other than displaying events are broken, and so are the relative date operations, they need to be fixed asap
57 lines
1.9 KiB
Vue
57 lines
1.9 KiB
Vue
<script lang="ts" setup>
|
|
import { areDatesIdentical, type RPGDate } from '@/models/Date'
|
|
import { useCalendar } from '@/stores/CalendarStore'
|
|
import { useCalendarEvents } from '@/stores/EventStore'
|
|
import { storeToRefs } from 'pinia'
|
|
import { computed, type ComputedRef } from 'vue'
|
|
|
|
const { currentDate, defaultDate, selectDate } = useCalendar()
|
|
const { selectedDate } = storeToRefs(useCalendar())
|
|
const { currentEvents } = storeToRefs(useCalendarEvents())
|
|
|
|
const props = defineProps<{
|
|
monthNumber: number
|
|
dayNumber: number
|
|
}>()
|
|
|
|
const tileDate: ComputedRef<RPGDate> = computed(() => {
|
|
return {
|
|
day: props.dayNumber,
|
|
month: props.monthNumber,
|
|
year: currentDate.currentYear
|
|
}
|
|
})
|
|
|
|
const isDefaultDate = computed<boolean>(() => {
|
|
return areDatesIdentical(tileDate.value, defaultDate)
|
|
})
|
|
|
|
const isSelectedDate = computed<boolean>(() => {
|
|
return areDatesIdentical(tileDate.value, selectedDate.value)
|
|
})
|
|
|
|
const hasAtLeastOneEvent = computed<boolean>(() => {
|
|
return Boolean(
|
|
currentEvents.value.find((currentEvent) => {
|
|
return areDatesIdentical(currentEvent.startDate, tileDate.value)
|
|
})
|
|
)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
class="relative grid place-items-center aspect-square rounded-full border-2 border-transparent transition-colors after:content-[''] after:absolute after:top-1 after:right-1 after:w-[.3rem] after:h-[.3rem] after:rounded-full after:transition-colors"
|
|
:class="{
|
|
'hover:bg-slate-800 hover:border-slate-800': !isDefaultDate && !isSelectedDate,
|
|
'bg-slate-800 hover:bg-slate-600 hover:border-slate-600': isDefaultDate && !isSelectedDate,
|
|
'text-white bg-blue-500 hover:bg-blue-600 hover:border-blue-600': isSelectedDate,
|
|
'after:bg-green-600': hasAtLeastOneEvent,
|
|
'after:bg-slate-950': hasAtLeastOneEvent && isSelectedDate
|
|
}"
|
|
@click="selectDate(tileDate)"
|
|
>
|
|
<span ref="tileRef" class="text-slate-300 text-[.85em]">{{ dayNumber }}</span>
|
|
</button>
|
|
</template>
|