49 lines
1.2 KiB
Vue
49 lines
1.2 KiB
Vue
<script setup>
|
|
import { selectedDate, selectedDay } from "../store";
|
|
import { dayNames } from "../definitions";
|
|
import dayjs from "dayjs";
|
|
import ArrowIcon from "./icons/arrow-icon.vue";
|
|
|
|
function nextDay() {
|
|
var newDate = dayjs(selectedDate.value).add(1, "day");
|
|
// Skip weekend
|
|
if (newDate.day() == 6) newDate = newDate.add(2, "day");
|
|
selectedDate.value = newDate.toDate();
|
|
}
|
|
function previousDay() {
|
|
var newDate = dayjs(selectedDate.value).subtract(1, "day");
|
|
// Skip weekend
|
|
if (newDate.day() == 0) newDate = newDate.subtract(2, "day");
|
|
selectedDate.value = newDate.toDate();
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="selector">
|
|
<ArrowIcon @click="previousDay" />
|
|
<span
|
|
class="day"
|
|
@click="selectedDate = new Date(new Date().setUTCHours(0, 0, 0, 0))"
|
|
>
|
|
{{ dayNames[selectedDay + 1] }},
|
|
{{ dayjs(selectedDate).format("DD.MM.YYYY") }}
|
|
</span>
|
|
<ArrowIcon style="transform: rotate(180deg)" @click="nextDay" />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.selector {
|
|
padding: 65px 10px 0px 10px;
|
|
display: grid;
|
|
grid-template-columns: 35px 1fr 35px;
|
|
align-items: center;
|
|
justify-items: center;
|
|
}
|
|
|
|
svg,
|
|
span {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|