wip
This commit is contained in:
Adrian Hopek
parent
b49fcadbba
commit
1166357689
14
package-lock.json
generated
14
package-lock.json
generated
@ -22,6 +22,7 @@
|
||||
"flatpickr": "^4.6.11",
|
||||
"laravel-mix": "^6.0.43",
|
||||
"lodash": "^4.17.21",
|
||||
"luxon": "^2.3.1",
|
||||
"postcss": "^8.4.12",
|
||||
"tailwindcss": "^3.0.23",
|
||||
"vue": "^3.2.31",
|
||||
@ -6115,6 +6116,14 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/luxon": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/luxon/-/luxon-2.3.1.tgz",
|
||||
"integrity": "sha512-I8vnjOmhXsMSlNMZlMkSOvgrxKJl0uOsEzdGgGNZuZPaS9KlefpE9KV95QFftlJSC+1UyCC9/I69R02cz/zcCA==",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/magic-string": {
|
||||
"version": "0.25.7",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
|
||||
@ -14182,6 +14191,11 @@
|
||||
"yallist": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"luxon": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/luxon/-/luxon-2.3.1.tgz",
|
||||
"integrity": "sha512-I8vnjOmhXsMSlNMZlMkSOvgrxKJl0uOsEzdGgGNZuZPaS9KlefpE9KV95QFftlJSC+1UyCC9/I69R02cz/zcCA=="
|
||||
},
|
||||
"magic-string": {
|
||||
"version": "0.25.7",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
|
||||
|
||||
@ -29,6 +29,7 @@
|
||||
"flatpickr": "^4.6.11",
|
||||
"laravel-mix": "^6.0.43",
|
||||
"lodash": "^4.17.21",
|
||||
"luxon": "^2.3.1",
|
||||
"postcss": "^8.4.12",
|
||||
"tailwindcss": "^3.0.23",
|
||||
"vue": "^3.2.31",
|
||||
|
||||
105
resources/js/Pages/Test.vue
Normal file
105
resources/js/Pages/Test.vue
Normal file
@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="bg-white shadow-md">
|
||||
<div class="p-4 sm:px-6">
|
||||
<div>
|
||||
<h2 class="text-lg font-medium leading-6 text-gray-900">
|
||||
Podsumowanie roczne
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-8 py-8 px-4 mx-auto max-w-3xl border-t border-gray-200 sm:grid-cols-2 sm:px-6 xl:grid-cols-3 xl:px-8 xl:max-w-none 2xl:grid-cols-4">
|
||||
<section
|
||||
v-for="month in months"
|
||||
:key="month.name"
|
||||
class="text-center"
|
||||
>
|
||||
<h2 class="font-semibold text-gray-900 capitalize">
|
||||
{{ month.name }}
|
||||
</h2>
|
||||
<div class="grid grid-cols-7 mt-6 text-xs font-semibold leading-6 text-gray-500">
|
||||
<div>Pn</div>
|
||||
<div>Wt</div>
|
||||
<div>Śr</div>
|
||||
<div>Cz</div>
|
||||
<div>Pt</div>
|
||||
<div>Sb</div>
|
||||
<div>Nd</div>
|
||||
</div>
|
||||
<div class="grid isolate grid-cols-7 gap-px mt-2 text-sm bg-gray-200 ring-1 ring-gray-200 shadow">
|
||||
<Component
|
||||
:is="day.isCurrentMonth ? 'button' : 'div'"
|
||||
v-for="(day, dayIdx) in month.days"
|
||||
:key="dayIdx"
|
||||
:class="[day.isCurrentMonth ? 'bg-white hover:brightness-90' : 'bg-gray-50 text-gray-400', day.isCurrentMonth && day.isToday && 'bg-blumilk-700', 'py-1.5 focus:z-10 font-medium']"
|
||||
>
|
||||
<div :class="[day.isCurrentMonth && (day.isWeekend || day.isHoliday) && 'text-red-600 font-bold', 'mx-auto flex h-7 w-7 p-4 items-center justify-center']">
|
||||
<time :datetime="day.date">
|
||||
{{ day.date.split('-').pop().replace(/^0/, '') }}
|
||||
</time>
|
||||
</div>
|
||||
</Component>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { DateTime } from 'luxon'
|
||||
|
||||
const vacations = [
|
||||
'2022-03-21',
|
||||
'2022-03-22',
|
||||
'2022-03-23',
|
||||
'2022-03-24',
|
||||
'2022-03-25',
|
||||
'2022-03-28',
|
||||
'2022-03-29',
|
||||
'2022-03-30',
|
||||
'2022-03-31',
|
||||
'2022-04-01',
|
||||
]
|
||||
|
||||
const holidays = [
|
||||
'2022-04-17',
|
||||
'2022-04-18',
|
||||
'2022-05-01',
|
||||
'2022-05-03',
|
||||
'2022-01-01',
|
||||
'2022-01-06',
|
||||
'2022-06-16',
|
||||
'2022-08-15',
|
||||
'2022-11-01',
|
||||
'2022-11-11',
|
||||
'2022-12-25',
|
||||
'2022-12-26',
|
||||
]
|
||||
|
||||
const months = []
|
||||
|
||||
for (let i = 1; i < 13; i++) {
|
||||
const currentMonth = DateTime.fromObject({ month: i }).startOf('month')
|
||||
|
||||
const start = currentMonth.startOf('week')
|
||||
const end = currentMonth.endOf('month').endOf('week')
|
||||
|
||||
const temp = {
|
||||
name: currentMonth.monthLong,
|
||||
days: [],
|
||||
}
|
||||
|
||||
for (let day = start; day < end; day = day.plus({ day: 1 })) {
|
||||
temp.days.push({
|
||||
date: day.toFormat('yyyy-MM-dd'),
|
||||
isCurrentMonth: currentMonth.hasSame(day, 'month'),
|
||||
isToday: DateTime.now().hasSame(day, 'day'),
|
||||
isWeekend: day.weekday === 6 || day.weekday === 7,
|
||||
isVacation: vacations.includes(day.toFormat('yyyy-MM-dd')),
|
||||
isHoliday: holidays.includes(day.toFormat('yyyy-MM-dd')),
|
||||
})
|
||||
}
|
||||
|
||||
months.push(temp)
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -64,6 +64,9 @@ Route::middleware("auth")->group(function (): void {
|
||||
Route::get("/monthly-usage", MonthlyUsageController::class)
|
||||
->name("vacation.monthly-usage");
|
||||
});
|
||||
|
||||
Route::get("/test", fn() => inertia("Test"));
|
||||
|
||||
});
|
||||
|
||||
Route::middleware("guest")->group(function (): void {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user