From 72edbf338d8f688542ff05bd144ff87f6c892e44 Mon Sep 17 00:00:00 2001
From: Jeppe Bundgaard <jb@truckwash.dk>
Date: Mon, 15 Dec 2025 15:28:38 +0100
Subject: [PATCH] "Refactor MyWashStart.vue: add elapsed wash timer with
 start/stop logic, integrate `onUnmounted` for cleanup, and enhance UI with
 completed wash step."

---
 .../userDashboard/wash/MyWashStart.vue        | 44 ++++++++++++++++---
 1 file changed, 39 insertions(+), 5 deletions(-)

diff --git a/src/views/dashboards/userDashboard/wash/MyWashStart.vue b/src/views/dashboards/userDashboard/wash/MyWashStart.vue
index 612013b5..e8185360 100644
--- a/src/views/dashboards/userDashboard/wash/MyWashStart.vue
+++ b/src/views/dashboards/userDashboard/wash/MyWashStart.vue
@@ -8,7 +8,7 @@ import {BButton, BField, BIcon, BInput, BMessage, BRadioButton, BStepItem, BStep
 import WhiteBoxCard from "@/components/displays/boxes/WhiteBoxCard.vue";
 
 import {getDepartmentsGuest} from "@/components/pagination/departmentTabs.vue";
-import {computed, onMounted, ref, watch} from "vue";
+import {computed, onMounted, onUnmounted, ref, watch} from "vue";
 
 const guestDepartments = ref([]);
 
@@ -89,11 +89,30 @@ const isLaneAvailable = (lane) => {
 };
 
 const washInProgress = ref(false);
-const washLaneId = ref(null);
-const washStartTime = ref(null);
+const washLaneId = ref<null | number>(null);
+const washStartTime = ref<number | null>(null);
+// Reactive "now" to drive the timer UI
+const now = ref<number>(Date.now());
+let timerInterval: ReturnType<typeof setInterval> | null = null;
+
+const startElapsedTimer = () => {
+  // ensure only one interval
+  if (timerInterval) clearInterval(timerInterval);
+  timerInterval = setInterval(() => {
+    now.value = Date.now();
+  }, 1000);
+};
+
+const stopElapsedTimer = () => {
+  if (timerInterval) {
+    clearInterval(timerInterval);
+    timerInterval = null;
+  }
+};
+
 const timeSinceWashStart = computed(() => {
   if (washInProgress.value && washStartTime.value) {
-    return Date.now() - washStartTime.value;
+    return now.value - washStartTime.value;
   }
   return 0;
 });
@@ -127,6 +146,7 @@ const onStartWash = (laneId, licensePlate, customerNumber) => {
         // Start time tracking
         washStartTime.value = Date.now();
         washInProgress.value = true;
+        startElapsedTimer();
         // Go to the wash in progress step
         currentStep.value = steps.WASH_IN_PROGRESS;
         // Optionally, you can redirect the user or reset the form here
@@ -159,6 +179,7 @@ const onStopWash = (laneId) => {
         //alert('Vask stoppet succesfuldt!');
         washInProgress.value = false;
         washLaneId.value = null;
+        stopElapsedTimer();
       } else {
         alert('Fejl ved stop af vask: ' + (response.data.message || 'Ukendt fejl.'));
       }
@@ -169,6 +190,10 @@ const onStopWash = (laneId) => {
     });
 };
 
+onUnmounted(() => {
+  stopElapsedTimer();
+});
+
 const getWashStatus = (laneId) => {
   if (!nearestDepartment.value) {
     alert('Ingen afdeling valgt.');
@@ -405,7 +430,6 @@ watch(() => nearestDepartment.value, (newValue) => {
             <b-step-item label="Vask" iconPack="fas" icon="soap" :step="steps.WASH_IN_PROGRESS" :clickable="clickableSteps[steps.WASH_IN_PROGRESS]()">
               <h1 class="title has-text-centered">Vask i gang</h1>
               <p class="has-text-centered">
-                Vasken har været i gang i
                 <strong>{{ Math.floor(timeSinceWashStart / 60000) }} minutter og {{ Math.floor((timeSinceWashStart % 60000) / 1000) }} sekunder</strong>.
               </p>
               <p class="has-text-centered">
@@ -424,6 +448,16 @@ watch(() => nearestDepartment.value, (newValue) => {
                 >Stop vask</b-button>
               </b-message>
             </b-step-item>
+            <!-- Completed -->
+            <b-step-item label="Færdig" iconPack="fas" icon="check-circle" :step="steps.COMPLETED">
+              <h1 class="title has-text-centered">Vask færdig</h1>
+              <p class="has-text-centered">
+                Din vask er nu færdig! Tak fordi du brugte vores selvbetjeningsvask.
+              </p>
+              <p class="has-text-centered">
+                Vi håber, at du er tilfreds med resultatet. Hvis du har brug for yderligere assistance, er du velkommen til at kontakte vores personale.
+              </p>
+            </b-step-item>
             <!-- Navigation buttons -->
             <template #navigation="{ previous, next }">
               <!--{{ currentStep }}-->