46 lines
974 B
Vue
46 lines
974 B
Vue
<script setup>
|
|
import { selectedDate, selectedDay, changeDay, changeDate } from "../store";
|
|
import ArrowIcon from "./icons/arrow-icon.vue";
|
|
import dayjs from "dayjs";
|
|
import { getDateSkippingWeekend } from "../util";
|
|
|
|
const dayNames = [
|
|
"days.sunday",
|
|
"days.monday",
|
|
"days.tuesday",
|
|
"days.wednesday",
|
|
"days.thursday",
|
|
"days.friday",
|
|
"days.saturday",
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<div class="selector">
|
|
<ArrowIcon @click="changeDay--" />
|
|
<span
|
|
class="day"
|
|
@click="changeDate = getDateSkippingWeekend(dayjs().toDate(), true)"
|
|
>
|
|
{{ $t(dayNames[selectedDay + 1]) }},
|
|
{{ dayjs(selectedDate).format("DD.MM.YYYY") }}
|
|
</span>
|
|
<ArrowIcon style="transform: rotate(180deg)" @click="changeDay++" />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.selector {
|
|
padding: 15px 10px 10px 10px;
|
|
display: grid;
|
|
grid-template-columns: 35px 1fr 35px;
|
|
align-items: center;
|
|
justify-items: center;
|
|
}
|
|
|
|
svg,
|
|
span {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|