From ec5ff41bfac60468ead4e7934a42a647e2c32d06 Mon Sep 17 00:00:00 2001
From: Jeppe Bundgaard <jb@truckwash.dk>
Date: Tue, 20 Jan 2026 14:35:11 +0100
Subject: [PATCH] Fix inconsistent spacing and indentation in `MyWashStart.vue`
 for improved readability and maintainability.

---
 .../userDashboard/wash/MyWashStart.vue        | 150 +++++++++---------
 1 file changed, 75 insertions(+), 75 deletions(-)

diff --git a/src/views/dashboards/userDashboard/wash/MyWashStart.vue b/src/views/dashboards/userDashboard/wash/MyWashStart.vue
index f412303c..258af8b9 100644
--- a/src/views/dashboards/userDashboard/wash/MyWashStart.vue
+++ b/src/views/dashboards/userDashboard/wash/MyWashStart.vue
@@ -76,7 +76,7 @@ onMounted(async () => {
     console.log(`MyWashStart [${instanceId}]: timeDiff:`, timeDiff, 'twoHoursMs:', twoHoursMs, 'savedProgress.currentStep:', savedProgress.currentStep);
     if (timeDiff < twoHoursMs) {
       console.log(`MyWashStart [${instanceId}]: STARTING RESTORATION.`);
-      
+
       // Update refs but don't allow saveProgress to trigger
       washInProgress.value = savedProgress.washInProgress;
       washLaneId.value = savedProgress.washLaneId;
@@ -86,12 +86,12 @@ onMounted(async () => {
       radioWashType.value = savedProgress.radioWashType;
       radioLaneOption.value = savedProgress.radioLaneOption;
       customerNumberInput.value = savedProgress.customerNumberInput;
-      
+
       if (savedProgress.nearestDepartmentId) {
         forceNearestDepartmentEvaluationId.value = savedProgress.nearestDepartmentId;
       }
       evaluateLocationDepartments(locations.location.value);
-      
+
       if (washInProgress.value) {
         startElapsedTimer();
       }
@@ -215,7 +215,7 @@ const saveProgress = (trigger = 'manual') => {
     console.log(`MyWashStart [${instanceId}]: saveProgress(${trigger}) BLOCKED because isRestoring is true.`);
     return;
   }
-  
+
   // Stricter protection against saving "reset" state during unmounting/destruction
   if (isDestroying.value || isDestroyingManual.value || isDestroyingGlobal) {
     if (trigger !== 'beforeunload') {
@@ -227,8 +227,8 @@ const saveProgress = (trigger = 'manual') => {
   // If we're being asked to save a step 0 while we're in the middle of a wash, 
   // it's almost certainly a reactive reset we don't want to persist.
   if (washInProgress.value && currentStep.value === 0 && trigger !== 'onStartWash' && trigger !== 'onCloseCompleted') {
-     console.warn(`MyWashStart [${instanceId}]: saveProgress(${trigger}) BLOCKED - Attempted to save step 0 while wash is in progress.`);
-     return;
+    console.warn(`MyWashStart [${instanceId}]: saveProgress(${trigger}) BLOCKED - Attempted to save step 0 while wash is in progress.`);
+    return;
   }
 
   try {
@@ -466,17 +466,17 @@ const getWashStatus = (laneId) => {
   }
   // Send the request to get the wash status
   SessionUser.request('/modules/self-serve/lane/status', 'post', payload)
-    .then(response => {
-      if (response.data.success) {
-        alert('Vaskestatus: ' + (response.data.status || 'Ukendt status.'));
-      } else {
-        alert('Fejl ved hentning af vaskestatus: ' + (response.data.message || 'Ukendt fejl.'));
-      }
-    })
-    .catch(error => {
-      console.error('Error getting wash status:', error);
-      alert('Der opstod en fejl ved hentning af vaskestatus. Prøv igen senere.');
-    });
+      .then(response => {
+        if (response.data.success) {
+          alert('Vaskestatus: ' + (response.data.status || 'Ukendt status.'));
+        } else {
+          alert('Fejl ved hentning af vaskestatus: ' + (response.data.message || 'Ukendt fejl.'));
+        }
+      })
+      .catch(error => {
+        console.error('Error getting wash status:', error);
+        alert('Der opstod en fejl ved hentning af vaskestatus. Prøv igen senere.');
+      });
 };
 
 /**
@@ -1003,29 +1003,29 @@ watch(() => allVisibleQuestionsAnswered.value, (newValue) => {
           </template>
         </WhiteBoxCard>
       </div>
-    <!-- Steps -->
+      <!-- Steps -->
       <div class="column is-12">
         <section>
-            <h3 class="title is-4 has-text-centered mb-4">
-              <b-skeleton v-if="!nearestDepartment" :width="300" :height="24" class="mb-2 is-centered"/>
-              <span v-else>
+          <h3 class="title is-4 has-text-centered mb-4">
+            <b-skeleton v-if="!nearestDepartment" :width="300" :height="24" class="mb-2 is-centered"/>
+            <span v-else>
               {{ nearestDepartment ? nearestDepartment.name : 'Indlæser afdeling...' }}
               </span>
-            </h3>
-            <h5 class="subtitle is-6 has-text-centered mb-4">
-              <b-skeleton v-if="!nearestDepartment" :width="200" :height="20" class="mb-4 is-centered"/>
-              <span v-else>
+          </h3>
+          <h5 class="subtitle is-6 has-text-centered mb-4">
+            <b-skeleton v-if="!nearestDepartment" :width="200" :height="20" class="mb-4 is-centered"/>
+            <span v-else>
                 {{ nearestDepartment.address }}
               </span>
-            </h5>
+          </h5>
           <b-steps type="is-link" size="is-small" v-model="currentStep" :has-navigation="true">
             <!-- Vehicle -->
-            <b-step-item label="Køretøj" iconPack="fas" icon="car-side" :step="steps.VEHICLE" :clickable="clickableSteps[steps.VEHICLE]()">
+            <b-step-item label="Nummerplade" iconPack="fas" icon="car-side" :step="steps.VEHICLE" :clickable="clickableSteps[steps.VEHICLE]()">
               <h1 class="title has-text-centered">Køretøj</h1>
               <!-- Customer number (if needed) -->
-                <b-field label="Kundenummer" v-if="!SessionUser.user.customer_number.value || !customerNumberInput">
-                  <b-input v-model="customerNumberInput" placeholder="Indtast kundenummer"></b-input>
-                </b-field>
+              <b-field label="Kundenummer" v-if="!SessionUser.user.customer_number.value || !customerNumberInput">
+                <b-input v-model="customerNumberInput" placeholder="Indtast kundenummer"></b-input>
+              </b-field>
               <b-field label="Registreringsnummer">
                 <b-autocomplete
                     v-model="licensePlateInput"
@@ -1073,7 +1073,7 @@ watch(() => allVisibleQuestionsAnswered.value, (newValue) => {
               </b-field>
             </b-step-item>
             <!-- Optional services -->
-            <b-step-item label="Start vask" iconPack="fas" icon="droplet" :step="steps.SELECT_LANE" :clickable="clickableSteps[steps.SELECT_LANE]()">
+            <b-step-item label="Konfigurer vask" iconPack="fas" icon="droplet" :step="steps.SELECT_LANE" :clickable="clickableSteps[steps.SELECT_LANE]()" :visible="currentStep === steps.SELECT_LANE || currentStep === steps.VEHICLE">
               <h1 class="title has-text-centered">Start vask</h1>
               <b-field label="Vaskebane">
                 <div class="columns is-multiline is-mobile" :class="{ 'is-centered': nearestDepartment && (nearestDepartment.lanes || []).length >= 2 }">
@@ -1104,13 +1104,13 @@ watch(() => allVisibleQuestionsAnswered.value, (newValue) => {
                         </span>
                       </BRadioButton>
                     </div>
-                      <button v-show="false"
-                          class="button is-fullwidth"
-                          :class="isLaneAvailable(lane) ? 'is-link' : 'is-danger'"
-                          :disabled="!isLaneAvailable(lane)"
-                          @click="() => onStartWash(lane.id, licensePlateInput, customerNumberInput)"
-                      >
-                      </button>
+                    <button v-show="false"
+                            class="button is-fullwidth"
+                            :class="isLaneAvailable(lane) ? 'is-link' : 'is-danger'"
+                            :disabled="!isLaneAvailable(lane)"
+                            @click="() => onStartWash(lane.id, licensePlateInput, customerNumberInput)"
+                    >
+                    </button>
                   </template>
                   <!-- If no lanes are available -->
                   <div class="column is-12" v-if="nearestDepartment && (!nearestDepartment.lanes || nearestDepartment.lanes.length === 0)">
@@ -1161,7 +1161,7 @@ watch(() => allVisibleQuestionsAnswered.value, (newValue) => {
               </b-field>
             </b-step-item>
             <!-- Questions -->
-            <b-step-item label="Spørgsmål" iconPack="fas" icon="question-circle" :step="steps.QUESTIONS" :clickable="clickableSteps[steps.QUESTIONS]()" :visible="visibleQuestions.length > 0">
+            <b-step-item label="Konfigurer vask" iconPack="fas" icon="droplet" :step="steps.QUESTIONS" :clickable="clickableSteps[steps.QUESTIONS]()" :visible="visibleQuestions.length > 0 && (currentStep === steps.QUESTIONS || currentStep === steps.TASKS || currentStep === steps.WASH_IN_PROGRESS || currentStep === steps.COMPLETED)">
               <div v-if="isLoadingSelfServeData" class="has-text-centered p-6">
                 <b-icon pack="fas" icon="spinner" custom-class="fa-pulse" size="is-large"></b-icon>
                 <p>Henter data...</p>
@@ -1272,7 +1272,7 @@ watch(() => allVisibleQuestionsAnswered.value, (newValue) => {
                     </template>
                   </WhiteBoxCard>
                 </div>
-                  <!-- Confirm and start wash button -->
+                <!-- Confirm and start wash button -->
                 <div class="has-text-centered" v-if="allVisibleQuestionsAnswered && !editAnswers && !washInProgress">
                   <b-button
                       class="is-large is-link"
@@ -1287,40 +1287,39 @@ watch(() => allVisibleQuestionsAnswered.value, (newValue) => {
               </div>
             </b-step-item>
             <!-- Tasks -->
-            <b-step-item label="Opgaver" iconPack="fas" icon="tasks" :step="steps.TASKS" :clickable="clickableSteps[steps.TASKS]()" :visible="activeTasks.length > 0">
-                <div v-if="isLoadingSelfServeData" class="has-text-centered p-6">
-                  <b-icon pack="fas" icon="spinner" custom-class="fa-pulse" size="is-large"></b-icon>
-                  <p>Henter data...</p>
+            <b-step-item label="Vask" iconPack="fas" icon="soap" :step="steps.TASKS" :clickable="clickableSteps[steps.TASKS]()" :visible="activeTasks.length > 0 && (currentStep === steps.TASKS || currentStep === steps.QUESTIONS || currentStep === steps.VEHICLE || currentStep === steps.SELECT_LANE)">
+              <div v-if="isLoadingSelfServeData" class="has-text-centered p-6">
+                <b-icon pack="fas" icon="spinner" custom-class="fa-pulse" size="is-large"></b-icon>
+                <p>Henter data...</p>
+              </div>
+              <div v-else class="mt-6">
+                <div style="position: sticky; top: 0; background-color: white; z-index: 10; padding-top: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #ddd; margin-bottom: 1rem;">
+                  <h1 class="title has-text-centered">Vask i gang</h1>
+                  <h2 class="subtitle has-text-centered">
+                    <strong>{{ formattedElapsed }}</strong>
+                  </h2>
                 </div>
-                <div v-else class="mt-6">
-                  <div style="position: sticky; top: 0; background-color: white; z-index: 10; padding-top: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #ddd; margin-bottom: 1rem;">
-                    <h1 class="title has-text-centered">Vask i gang</h1>
-                    <h2 class="subtitle has-text-centered">
-                      <strong>{{ formattedElapsed }}</strong>
-                    </h2>
-                  </div>
-                  <div v-show="allVisibleQuestionsAnswered && !editAnswers" class="notification is-info is-light mb-4">
-                    <h1 class="title has-text-centered mb-2" v-if="activeTasks.length > 0">Start af maskine</h1>
-                    <h1 class="title has-text-centered mb-2" v-else>Spørgsmål besvaret</h1>
-                    <div v-for="task in activeTasks" :key="task.id" class="notification is-warning is-light mb-4" :class="{'is-success': completedTasks[task.id]}">
-                      <div class="columns is-mobile is-vcentered">
-                        <div class="column is-narrow">
-                          <b-field>
-                            <b-checkbox size="is-large" v-model="completedTasks[task.id]" type="is-success"></b-checkbox>
-                          </b-field>
-                        </div>
-                        <div class="column">
-                          <p><strong>{{ task.task }}</strong></p>
-                          <p class="is-size-7" v-if="task.description">{{ task.description }}</p>
-                          <div v-if="task.attachments && task.attachments.length > 0" class="mt-2">
-                            <div v-for="attachment in task.attachments" :key="attachment.id" class="mb-2">
-                              <template v-if="isImage(attachment) && attachment.download_link">
-                                <img :src="attachment.download_link" :alt="attachment.content?.other" style="max-width: 100%; height: auto; border-radius: 4px; display: block;" class="mb-1 is-clickable" @click="downloadAttachment(task.id, attachment.id)">
-                              </template>
-                              <div v-else class="is-flex is-align-items-center">
-                                <b-icon pack="fas" icon="paperclip" size="is-small" class="mr-1"></b-icon>
-                                <a @click="downloadAttachment(task.id, attachment.id)" class="is-size-7">{{ attachment.content?.other || 'Vedhæftet fil' }}</a>
-                              </div>
+                <div v-show="allVisibleQuestionsAnswered && !editAnswers" class="notification is-info is-light mb-4">
+                  <h1 class="title has-text-centered mb-2" v-if="activeTasks.length > 0">Start af maskine</h1>
+                  <h1 class="title has-text-centered mb-2" v-else>Spørgsmål besvaret</h1>
+                  <div v-for="task in activeTasks" :key="task.id" class="notification is-warning is-light mb-4" :class="{'is-success': completedTasks[task.id]}">
+                    <div class="columns is-mobile is-vcentered">
+                      <div class="column is-narrow">
+                        <b-field>
+                          <b-checkbox size="is-large" v-model="completedTasks[task.id]" type="is-success"></b-checkbox>
+                        </b-field>
+                      </div>
+                      <div class="column">
+                        <p><strong>{{ task.task }}</strong></p>
+                        <p class="is-size-7" v-if="task.description">{{ task.description }}</p>
+                        <div v-if="task.attachments && task.attachments.length > 0" class="mt-2">
+                          <div v-for="attachment in task.attachments" :key="attachment.id" class="mb-2">
+                            <template v-if="isImage(attachment) && attachment.download_link">
+                              <img :src="attachment.download_link" :alt="attachment.content?.other" style="max-width: 100%; height: auto; border-radius: 4px; display: block;" class="mb-1 is-clickable" @click="downloadAttachment(task.id, attachment.id)">
+                            </template>
+                            <div v-else class="is-flex is-align-items-center">
+                              <b-icon pack="fas" icon="paperclip" size="is-small" class="mr-1"></b-icon>
+                              <a @click="downloadAttachment(task.id, attachment.id)" class="is-size-7">{{ attachment.content?.other || 'Vedhæftet fil' }}</a>
                             </div>
                           </div>
                         </div>
@@ -1328,9 +1327,10 @@ watch(() => allVisibleQuestionsAnswered.value, (newValue) => {
                     </div>
                   </div>
                 </div>
+              </div>
             </b-step-item>
             <!-- Wash -->
-            <b-step-item label="Vask" iconPack="fas" icon="soap" :step="steps.WASH_IN_PROGRESS" :clickable="clickableSteps[steps.WASH_IN_PROGRESS]()">
+            <b-step-item label="Vask" iconPack="fas" icon="soap" :step="steps.WASH_IN_PROGRESS" :clickable="clickableSteps[steps.WASH_IN_PROGRESS]()" :visible="currentStep === steps.WASH_IN_PROGRESS || currentStep === steps.COMPLETED">
               <div style="position: sticky; top: 0; background-color: white; z-index: 10; padding-top: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #ddd; margin-bottom: 1rem;">
                 <h1 class="title has-text-centered">Vask i gang</h1>
                 <h2 class="subtitle has-text-centered">
@@ -1505,7 +1505,7 @@ watch(() => allVisibleQuestionsAnswered.value, (newValue) => {
                     icon-pack="fas"
                     icon-right="info-circle"
                     @click.prevent="SessionUser.functions.contact.onClickCallPhoneNumber()"
-                    >Assistance</b-button>
+                >Assistance</b-button>
                 <!-- Complete button -->
                 <b-button
                     v-show="currentStep === steps.WASH_IN_PROGRESS"