kamilniemczycki/toby
1
0
Fork 0
Code Issues Pull Requests 2 Projects Releases Activity

wip #VC

Browse Source
This commit is contained in:
Kamil Niemczycki 2022-06-21 11:26:23 +02:00
parent e8e285f3da
commit 856d1f1a7c
1 changed files with 107 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
resources/js/Shared/Widgets/VacationCalendar.vue
View File

@ -1,24 +1,49 @@
<template> <template>
<section class="bg-white shadow-md"> <section class="bg-white shadow-md">
<div class="flex items-center justify-between p-4 sm:px-6"> <div class="grid grid-cols-3 grid-rows-1 items-center justify-center p-4 sm:px-6">
<h2 class="text-lg font-medium leading-6 text-gray-900"> <h2 class="text-lg font-medium leading-6 text-gray-900">
Kalendarz {{ monthName }} {{ calendar.currents.year !== selectedYear ? calendar.currents.year : undefined }}
</h2> </h2>
<div class="flex items-center rounded-md shadow-sm md:items-stretch"> <div class="flex justify-center">
<button type="button" class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"> <div class="flex items-center rounded-md shadow-sm md:items-stretch">
<span class="sr-only">Previous month</span> <button
<ChevronLeftIcon class="h-5 w-5" aria-hidden="true" /> v-if="calendar.currents.month > 1"
</button> type="button"
<button type="button" class="hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block">Today</button> class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
<span class="relative -mx-px h-5 w-px bg-gray-300 md:hidden" /> @click="toLast"
<button type="button" class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"> >
<span class="sr-only">Next month</span> <span class="sr-only">Previous {{ viewMode.key }}</span>
<ChevronRightIcon class="h-5 w-5" aria-hidden="true" /> <ChevronLeftIcon
</button> class="h-5 w-5"
aria-hidden="true"
/>
</button>
<button
type="button"
class="hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block"
:class="[calendar.currents.month === 1 ? 'rounded-l-md border border-r-0' : undefined, calendar.currents.month === 12 ? 'rounded-r-md border border-l-0' : undefined]"
@click="resetCalendar"
>
Today
</button>
<span class="relative -mx-px h-5 w-px bg-gray-300 md:hidden" />
<button
v-if="calendar.currents.month < 12"
type="button"
class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
@click="toNext"
>
<span class="sr-only">Next {{ viewMode.key }}</span>
<ChevronRightIcon
class="h-5 w-5"
aria-hidden="true"
/>
</button>
</div>
</div> </div>
<Menu <Menu
as="div" as="div"
class="relative" class="flex justify-end relative"
> >
<MenuButton <MenuButton
type="button" type="button"
@ -96,7 +121,7 @@
v-for="(day, index) in days" v-for="(day, index) in days"
:key="index" :key="index"
class="flex flex-col" class="flex flex-col"
:class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', viewMode.key === 'week' && index !== 0 && (index % 5 === 0 || index % 6 === 0) ? 'bg-red-100' : undefined, viewMode.key === 'week' ? 'day' : undefined, 'relative py-2 px-3']" :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', viewMode.key === 'week' && index !== 0 && (index % 5 === 0 || index % 6 === 0) ? 'bg-red-100' : undefined, viewMode.key === 'week' ? 'day' : 'month-day', 'relative py-2 px-3']"
> >
<time <time
:datetime="day.date" :datetime="day.date"
@ -114,11 +139,25 @@
<script setup> <script setup>
import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/solid' import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/solid'
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue' import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
import { ref, watch, computed } from 'vue' import { ref, watch, computed, reactive } from 'vue'
import { DateTime } from 'luxon' import { DateTime } from 'luxon'
import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo' import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo'
let days = ref([]) let days = ref([])
const months = [
{ id: 1, name: 'Styczeń' },
{ id: 2, name: 'Luty' },
{ id: 3, name: 'Marzec' },
{ id: 4, name: 'Kwiecień' },
{ id: 5, name: 'Maj' },
{ id: 6, name: 'Czerwiec' },
{ id: 7, name: 'Lipiec' },
{ id: 8, name: 'Sierpień' },
{ id: 9, name: 'Wrzesień' },
{ id: 10, name: 'Październik' },
{ id: 11, name: 'Listopad' },
{ id: 12, name: 'Grudzień' },
]
function getCurrentDate() { function getCurrentDate() {
const { year, month, weekNumber } = DateTime.now() const { year, month, weekNumber } = DateTime.now()
return { year, month, weekNumber } return { year, month, weekNumber }
@ -131,15 +170,14 @@ let viewModeOptions = [
] ]
const calendar = { const calendar = {
viewMode: ref('week'), viewMode: ref('week'),
currents: ref({ currents: reactive({
year: selectedYear, year: selectedYear,
month: selectedYear === currentDate.year ? currentDate.month : 1, month: selectedYear === currentDate.year ? currentDate.month : 1,
week: selectedYear === currentDate.year ? currentDate.weekNumber : 1, week: selectedYear === currentDate.year ? currentDate.weekNumber : 1,
}), }),
} }
console.log(calendar, selectedYear, currentDate) watch([calendar.viewMode, calendar.currents], () => {
watch(() => calendar.viewMode.value, () => { loadCalendar()
loadMonth()
}) })
const viewMode = computed(() => { const viewMode = computed(() => {
@ -149,21 +187,20 @@ const viewMode = computed(() => {
name: viewModeOptions.find((obj) => obj.key === key)?.name, name: viewModeOptions.find((obj) => obj.key === key)?.name,
} }
}) })
const monthName = computed(() => months.find(month => month.id === calendar.currents.month)?.name)
loadMonth() loadCalendar()
function loadMonth() {
const tmpDays = []
function loadCalendar() {
let focusDate = DateTime.fromObject({ let focusDate = DateTime.fromObject({
year: calendar.currents.value.year, year: calendar.currents.year,
month: calendar.currents.value.month, month: calendar.currents.month,
}) })
let start, end let start, end
if (viewMode.value.key === 'week') { if (viewMode.value.key === 'week') {
if (currentDate.year === selectedYear) if (currentDate.year === selectedYear)
focusDate = DateTime.fromObject({ weekNumber: calendar.currents.value.week }) focusDate = DateTime.fromObject({ weekNumber: calendar.currents.week })
start = focusDate.startOf('week') start = focusDate.startOf('week')
end = focusDate.endOf('week') end = focusDate.endOf('week')
} else if (viewMode.value.key === 'month') { } else if (viewMode.value.key === 'month') {
@ -172,7 +209,12 @@ function loadMonth() {
end = focusDate.endOf('month').endOf('week') end = focusDate.endOf('month').endOf('week')
} }
for (let day = start; day < end; day = day.plus({ day: 1 })) { generateCalendarData(start, end, focusDate)
}
function generateCalendarData(startDate, endDate, focusDate) {
const tmpDays = []
for (let day = startDate; day < endDate; day = day.plus({ day: 1 })) {
const isCurrentMonth = isInCurrentMonth(day, focusDate) const isCurrentMonth = isInCurrentMonth(day, focusDate)
const okIsToday = isToday(day) const okIsToday = isToday(day)
@ -186,6 +228,34 @@ function loadMonth() {
days.value = tmpDays days.value = tmpDays
} }
function toLast() {
if (viewMode.value.key === 'week')
addWeeks(-1)
else
addMonths(-1)
}
function toNext() {
if (viewMode.value.key === 'week') {
addWeeks()
} else
addMonths()
}
function resetCalendar() {
calendar.currents.year = currentDate.year
calendar.currents.month = currentDate.month
calendar.currents.week = currentDate.weekNumber
}
function addWeeks(howMany = 1) {
calendar.currents.week += howMany
}
function addMonths(howMany = 1) {
calendar.currents.month += howMany
}
function updateViewMode(type) { function updateViewMode(type) {
calendar.viewMode.value = type calendar.viewMode.value = type
} }
@ -220,13 +290,20 @@ function isToday(date) {
content: "Pt"; content: "Pt";
} }
.day:nth-of-type(7n - 1):before,
.day:nth-of-type(7n):before {
color: #991b1b;
}
.day:nth-of-type(7n - 1):before { .day:nth-of-type(7n - 1):before {
content: "Sb"; content: "Sb";
color: red;
} }
.day:nth-of-type(7n):before { .day:nth-of-type(7n):before {
content: "Nd"; content: "Nd";
color: red; }
.month-day:nth-of-type(7n - 1), .month-day:nth-of-type(7n) {
background-color: #fee2e2;
} }
</style> </style>