From 230fd197553a4e04ac20898400c611404249e31e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kristian=20St=C3=B6ckel?= <git@k118.de>
Date: Sat, 11 Jan 2025 15:02:29 +0100
Subject: [PATCH] :sparkles: implement removal of stopovers

---
 .../components/TripCreation/StationRow.vue    | 57 ++++++++++-------
 .../TripCreation/TripCreationForm.vue         | 64 ++++++++++++-------
 2 files changed, 75 insertions(+), 46 deletions(-)

diff --git a/resources/vue/components/TripCreation/StationRow.vue b/resources/vue/components/TripCreation/StationRow.vue
index 566aea00d..52114b4a6 100644
--- a/resources/vue/components/TripCreation/StationRow.vue
+++ b/resources/vue/components/TripCreation/StationRow.vue
@@ -91,33 +91,41 @@ export default {
 </script>
 
 <template>
-  <div :class="departure && arrival ? 'col-12 col-md-4' : 'col'">
-    <FullScreenModal ref="modal">
-      <template #header>
-        <input v-model="stationInput"
-               :placeholder="placeholder"
-               class="form-control mobile-input-fs-16"
-               name="station"
-               type="text"
-        />
-      </template>
-      <template #body>
-        <ul class="list-group list-group-light list-group-small">
-          <li v-for="item in autocompleteList" class="list-group-item" @click="setStation(item)">
-            <a class="text-trwl" href="#">
-              {{ item.name }} <span v-if="item.rilIdentifier">({{ item.rilIdentifier }})</span>
-            </a>
-          </li>
-        </ul>
-      </template>
-    </FullScreenModal>
+  <FullScreenModal ref="modal">
+    <template #header>
+      <input v-model="stationInput"
+             :placeholder="placeholder"
+             class="form-control mobile-input-fs-16"
+             name="station"
+             type="text"
+      />
+    </template>
+    <template #body>
+      <ul class="list-group list-group-light list-group-small">
+        <li v-for="item in autocompleteList" class="list-group-item" @click="setStation(item)">
+          <a class="text-trwl" href="#">
+            {{ item.name }} <span v-if="item.rilIdentifier">({{ item.rilIdentifier }})</span>
+          </a>
+        </li>
+      </ul>
+    </template>
+  </FullScreenModal>
+
+  <!-- Station Input -->
+  <div class="flex-grow-1 me-2">
     <div class="form-floating">
-      <input v-model="stationInput" class="form-control mobile-input-fs-16"
-             type="text" @focusin="showModal">
+      <input
+          v-model="stationInput"
+          class="form-control mobile-input-fs-16"
+          type="text"
+          @focusin="showModal"
+      >
       <label :for="timeFieldBId" class="form-label">{{ placeholder }}</label>
     </div>
   </div>
-  <div v-if="departure && arrival" :class="departure && arrival ? 'col col-md-4' : 'col-4'">
+
+  <!-- Time Fields -->
+  <div class="me-2" v-if="departure && arrival" :class="departure && arrival ? 'col-md-4' : 'col-4'">
     <div class="form-floating">
       <input
           :id="timeFieldAId"
@@ -130,7 +138,8 @@ export default {
       <label :for="timeFieldAId" class="form-label">{{ timeFieldALabel }}</label>
     </div>
   </div>
-  <div :class="departure && arrival ? 'col col-md-4' : 'col-4'">
+
+  <div :class="departure && arrival ? 'col-md-4' : 'col-4'">
     <div class="form-floating">
       <input
           :id="timeFieldBId"
diff --git a/resources/vue/components/TripCreation/TripCreationForm.vue b/resources/vue/components/TripCreation/TripCreationForm.vue
index c43d0b84d..262136489 100644
--- a/resources/vue/components/TripCreation/TripCreationForm.vue
+++ b/resources/vue/components/TripCreation/TripCreationForm.vue
@@ -63,6 +63,10 @@ export default {
       };
       this.stopovers.push(dummyStopover);
     },
+    removeStopover(index) {
+      this.stopovers.splice(index, 1);
+      this.validateTimes(); // Optional: Zeiten erneut validieren
+    },
     setOrigin(item) {
       this.origin = item;
       this.form.originId = item.id;
@@ -214,31 +218,47 @@ export default {
     <div class="card mb-3">
       <form @submit.prevent="sendForm" class="card-body">
         <div class="row g-3 mb-3">
-          <StationRow
-              :placeholder="trans('trip_creation.form.origin')"
-              :arrival="false"
-              v-on:update:station="setOrigin"
-              v-on:update:timeFieldB="setDeparture"
-          ></StationRow>
+          <div class="d-flex align-items-center w-100">
+            <StationRow
+                :placeholder="trans('trip_creation.form.origin')"
+                :arrival="false"
+                v-on:update:station="setOrigin"
+                v-on:update:timeFieldB="setDeparture"
+            ></StationRow>
+          </div>
         </div>
-        <a href="#" @click="addStopover">{{ trans("trip_creation.form.add_stopover") }} <i class="fa fa-plus"
-                                                                                           aria-hidden="true"></i></a>
-        <div class="row g-3 mt-1" v-for="(stopover, key) in stopovers" v-bind:key="key">
-          <StationRow
-              :placeholder="trans('trip_creation.form.stopover')"
-              v-on:update:station="setStopoverStation($event, key)"
-              v-on:update:timeFieldB="setStopoverDeparture($event, key)"
-              v-on:update:timeFieldA="setStopoverArrival($event, key)"
-          ></StationRow>
-          <hr>
+        <a href="#" @click="addStopover">{{ trans("trip_creation.form.add_stopover") }}
+          <i class="fa fa-plus" aria-hidden="true"></i>
+        </a>
+        <div class="row g-3 mt-1" v-for="(stopover, key) in stopovers" :key="key">
+          <div class="d-flex align-items-center w-100">
+            <div class="flex-grow-1 d-flex">
+              <StationRow
+                  :placeholder="trans('trip_creation.form.stopover')"
+                  v-on:update:station="setStopoverStation($event, key)"
+                  v-on:update:timeFieldB="setStopoverDeparture($event, key)"
+                  v-on:update:timeFieldA="setStopoverArrival($event, key)"
+              ></StationRow>
+
+              <button type="button" class="btn btn-danger btn-sm ms-3"
+                      @click="removeStopover(key)"
+                      style="height: calc(3.5rem);"
+              >
+                <i class="fa fa-trash" aria-hidden="true"></i>
+              </button>
+            </div>
+          </div>
+          <hr class="my-2">
         </div>
         <div class="row g-3 mt-1">
-          <StationRow
-              :placeholder="trans('trip_creation.form.destination')"
-              :departure="false"
-              v-on:update:station="setDestination"
-              v-on:update:timeFieldB="setArrival"
-          ></StationRow>
+          <div class="d-flex align-items-center w-100">
+            <StationRow
+                :placeholder="trans('trip_creation.form.destination')"
+                :departure="false"
+                v-on:update:station="setDestination"
+                v-on:update:timeFieldB="setArrival"
+            ></StationRow>
+          </div>
         </div>
         <div class="row g-3 mt-1">
           <div class="col-12 col-md-3">