✨ Add swipe gestures for changing days

src/App.vue

@@ -1,23 +1,34 @@
 <script setup>
-import { RouterView } from "vue-router";
+import { RouterView, useRoute } from "vue-router";
 import TitleBar from "./components/titlebar-element.vue";
 import BottomNavbar from "./components/bottom-navbar.vue";
 import DateSelector from "./components/date-selector.vue";
 import LoadingElement from "./components/loading-element.vue";
 import { loading } from "./store";
+import { previousDay, nextDay } from "./util";
+import { computed } from "vue";
+
+const route = useRoute();
+const routeName = computed(() => route.name);
+const isDataView = computed(() => {
+  return (
+    routeName.value != "title.settings" && routeName.value != "title.login"
+  );
+});
+
+function swipeHandler(direction) {
+  if (!isDataView.value) return;
+  if (direction == "left") nextDay();
+  else if (direction == "right") previousDay();
+}
 </script>
 
 <template>
   <TitleBar />
-  <div class="center">
+  <div class="center" v-touch:swipe="swipeHandler">
     <main>
-      <DateSelector
-        v-show="$route.name != 'title.settings' && $route.name != 'title.login'"
-      />
-      <LoadingElement
-        :active="loading"
-        v-show="$route.name != 'title.settings' && $route.name != 'title.login'"
-      />
+      <DateSelector v-show="isDataView" />
+      <LoadingElement :active="loading" v-show="isDataView" />
       <RouterView />
     </main>
   </div>
@@ -44,6 +55,7 @@ body {
 .center {
   display: flex;
   justify-content: center;
+  min-height: 100vh;
 }
 
 main {

src/components/date-selector.vue

@@ -1,13 +1,8 @@
 <script setup>
-import {
-  selectedDate,
-  selectedDay,
-  fetchSubstitutions,
-  fetchHistory,
-  loading,
-} from "../store";
-import dayjs from "dayjs";
+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",
@@ -18,26 +13,6 @@ const dayNames = [
   "days.friday",
   "days.saturday",
 ];
-
-function nextDay() {
-  var newDate = dayjs(selectedDate.value).add(1, "day");
-  // Skip weekend
-  if (newDate.day() == 6) newDate = newDate.add(2, "day");
-  changeDate(newDate);
-}
-function previousDay() {
-  var newDate = dayjs(selectedDate.value).subtract(1, "day");
-  // Skip weekend
-  if (newDate.day() == 0) newDate = newDate.subtract(2, "day");
-  changeDate(newDate);
-}
-async function changeDate(newDate) {
-  selectedDate.value = new Date(newDate.toDate().setUTCHours(0, 0, 0, 0));
-  loading.value = true;
-  await fetchSubstitutions();
-  await fetchHistory();
-  loading.value = false;
-}
 </script>
 
 <template>

src/main.js

@@ -5,6 +5,7 @@ import { registerSW } from "virtual:pwa-register";
 import { createI18n } from "vue-i18n";
 import { strings } from "./strings";
 import { language } from "./store";
+import Vue3TouchEvents from "vue3-touch-events";
 
 const i18n = createI18n({
   locale: language.value,
@@ -16,6 +17,7 @@ const app = createApp(App);
 
 app.use(router);
 app.use(i18n);
+app.use(Vue3TouchEvents);
 
 app.mount("#app");
 

src/util.js

@@ -1,4 +1,11 @@
-import { classFilter } from "./store";
+import {
+  classFilter,
+  fetchSubstitutions,
+  fetchHistory,
+  loading,
+  selectedDate,
+} from "./store";
+import dayjs from "dayjs";
 
 export function getSubstitutionText(substitution) {
   const includeClass = !classFilter.value || classFilter.value == "none";
@@ -22,3 +29,23 @@ export function getSubstitutionColor(substitution) {
       return "background-color: var(--substitution-background-cancellation);";
   }
 }
+
+export function nextDay() {
+  var newDate = dayjs(selectedDate.value).add(1, "day");
+  // Skip weekend
+  if (newDate.day() == 6) newDate = newDate.add(2, "day");
+  changeDate(newDate);
+}
+export function previousDay() {
+  var newDate = dayjs(selectedDate.value).subtract(1, "day");
+  // Skip weekend
+  if (newDate.day() == 0) newDate = newDate.subtract(2, "day");
+  changeDate(newDate);
+}
+export async function changeDate(newDate) {
+  selectedDate.value = new Date(newDate.toDate().setUTCHours(0, 0, 0, 0));
+  loading.value = true;
+  await fetchSubstitutions();
+  await fetchHistory();
+  loading.value = false;
+}