✨ Add swipe gestures for changing days

package-lock.json

@@ -12,7 +12,8 @@
         "vite-plugin-git-revision": "^0.1.9",
         "vue": "^3.2.37",
         "vue-i18n": "^9.2.2",
-        "vue-router": "^4.0.15"
+        "vue-router": "^4.0.15",
+        "vue3-touch-events": "^4.1.0"
       },
       "devDependencies": {
         "@rushstack/eslint-patch": "^1.1.0",
@@ -5200,6 +5201,11 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue3-touch-events": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vue3-touch-events/-/vue3-touch-events-4.1.0.tgz",
+      "integrity": "sha512-fZKusOiBJzDPsY34tXYl/Wo9c2ONzBuQmF0+oHqVWr+TDbf90CgMWLHZsTv1KaShXjt+oeLow7BDVBpXW6lfXQ=="
+    },
     "node_modules/webidl-conversions": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
@@ -9177,6 +9183,11 @@
         "@vue/devtools-api": "^6.0.0"
       }
     },
+    "vue3-touch-events": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vue3-touch-events/-/vue3-touch-events-4.1.0.tgz",
+      "integrity": "sha512-fZKusOiBJzDPsY34tXYl/Wo9c2ONzBuQmF0+oHqVWr+TDbf90CgMWLHZsTv1KaShXjt+oeLow7BDVBpXW6lfXQ=="
+    },
     "webidl-conversions": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",

package.json

@@ -12,7 +12,8 @@
     "vite-plugin-git-revision": "^0.1.9",
     "vue": "^3.2.37",
     "vue-i18n": "^9.2.2",
-    "vue-router": "^4.0.15"
+    "vue-router": "^4.0.15",
+    "vue3-touch-events": "^4.1.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.1.0",

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
+      <DateSelector v-show="isDataView" />
-        v-show="$route.name != 'title.settings' && $route.name != 'title.login'"
+      <LoadingElement :active="loading" v-show="isDataView" />
-      />
-      <LoadingElement
-        :active="loading"
-        v-show="$route.name != 'title.settings' && $route.name != 'title.login'"
-      />
       <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 {
+import { selectedDate, selectedDay } from "../store";
-  selectedDate,
-  selectedDay,
-  fetchSubstitutions,
-  fetchHistory,
-  loading,
-} from "../store";
-import dayjs from "dayjs";
 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;
+}