43 lines
900 B
Vue
43 lines
900 B
Vue
<script setup>
|
|
import { selectedDate, selectedDay } from "../store";
|
|
import ArrowIcon from "./icons/arrow-icon.vue";
|
|
import dayjs from "dayjs";
|
|
import { changeDate, previousDay, nextDay } 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="previousDay" />
|
|
<span class="day" @click="changeDate(dayjs())">
|
|
{{ $t(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 10px 10px;
|
|
display: grid;
|
|
grid-template-columns: 35px 1fr 35px;
|
|
align-items: center;
|
|
justify-items: center;
|
|
}
|
|
|
|
svg,
|
|
span {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|