minie4/Timetable-V2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Implement day navigation gestures with Swiper.js

Browse Source
This commit is contained in:
minie4
2022-09-11 20:40:08 +02:00
parent 8d9bcee279
commit 4346aa23c5
19 changed files with 2966 additions and 2342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/date-selector.vue
View File

@ -1,8 +1,7 @@
<script setup>
import { selectedDate, selectedDay } from "../store";
import { selectedDate, selectedDay, changeDay, changeDate } from "../store";
import ArrowIcon from "./icons/arrow-icon.vue";
import dayjs from "dayjs";
import { changeDate, previousDay, nextDay } from "../util";
const dayNames = [
"days.sunday",
@ -17,12 +16,15 @@ const dayNames = [
<template>
<div class="selector">
<ArrowIcon @click="previousDay" />
<span class="day" @click="changeDate(dayjs())">
<ArrowIcon @click="() => (changeDay -= 1)" />
<span class="day" @click="changeDate = dayjs().toDate()">
{{ $t(dayNames[selectedDay + 1]) }},
{{ dayjs(selectedDate).format("DD.MM.YYYY") }}
</span>
<ArrowIcon style="transform: rotate(180deg)" @click="nextDay" />
<ArrowIcon
style="transform: rotate(180deg)"
@click="() => (changeDay += 1)"
/>
</div>
</template>