♻️ Refactor frontend

src/components/day-carousel.vue

@@ -3,6 +3,7 @@ import { selectedDate, changeDate, changeDay } from "../store";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import { Virtual } from "swiper";
 import { ref, watch } from "vue";
+import { getDateSkippingWeekend } from "../util";
 
 defineProps({
   element: {
@@ -26,20 +27,25 @@ const loadedDates = ref([
 
 // Load left or right date on slide change
 function slideChange(swiper) {
+  const activeSlide = swiper.activeIndex;
   // Only trigger data refresh if date is different
-  const newSelectedDate = loadedDates.value[swiper.activeIndex];
+  const newSelectedDate = loadedDates.value[activeSlide];
   if (selectedDate.value.getTime() != newSelectedDate.getTime())
     selectedDate.value = newSelectedDate;
-
-  const activeSlide = swiper.activeIndex;
+  // Check if current slide is the last one
   if (activeSlide == loadedDates.value.length - 1) {
-    const lastDate = loadedDates.value[loadedDates.value.length - 1];
+    // Append next day to loadedDates
+    const lastDate = loadedDates.value.at(-1);
     loadedDates.value.push(getDateSkippingWeekend(calculateDate(lastDate, 1)));
   }
 }
 function slideChangeEnd(swiper) {
   const activeSlide = swiper.activeIndex;
+  // Check if the current slide is the first one
   if (activeSlide == 0) {
+    // Prepend the previous day to loadedDates
+    // and slide to the next slide without transition
+    // so the same day as before is shown
     const lastDate = loadedDates.value[0];
     loadedDates.value = [
       getDateSkippingWeekend(calculateDate(lastDate, -1)),
@@ -48,6 +54,12 @@ function slideChangeEnd(swiper) {
     swiper.slideTo(activeSlide + 1, 0);
   }
 }
+// Also check if a day needs to be prepended
+// if the user releases the card later because
+// a different event is fired for that
+function slideResetEnd(swiper) {
+  slideChangeEnd(swiper);
+}
 
 // Helper functions
 function calculateDate(date, offset) {
@@ -60,6 +72,8 @@ function slideToDate(date) {
   const slide = calculateSlide(date);
   if (slide != -1) swiperElement.value.slideTo(slide);
   else {
+    // If the slide is not loaded yet reset
+    // loaded dates and load that date
     loadedDates.value = [calculateDate(date, -1), date, calculateDate(date, 1)];
     swiperElement.value.slideTo(1, 0);
   }
@@ -76,16 +90,6 @@ watch(changeDay, (change) => {
 watch(changeDate, (date) => {
   slideToDate(new Date(date.setUTCHours(0, 0, 0, 0)));
 });
-
-function getDateSkippingWeekend(date) {
-  var calculatedDate = date;
-  // Skip weekend
-  if (calculatedDate.getDay() == 6)
-    calculatedDate = new Date(calculatedDate.getTime() + 86400000 * 2);
-  if (calculatedDate.getDay() == 0)
-    calculatedDate = new Date(calculatedDate.getTime() - 86400000 * 2);
-  return calculatedDate;
-}
 </script>
 
 <template>
@@ -96,6 +100,7 @@ function getDateSkippingWeekend(date) {
     :initial-slide="1"
     :virtual="true"
     @slide-change-transition-end="slideChangeEnd"
+    @slide-reset-transition-end="slideResetEnd"
     @slide-change="slideChange"
     @swiper="setSwiper"
   >