Skip to content

Commit

Permalink
✨ implement removal of stopovers
Browse files Browse the repository at this point in the history
  • Loading branch information
@MrKrisKrisu
MrKrisKrisu committed Jan 11, 2025
1 parent c663a01 commit 230fd19
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 46 deletions.
57 changes: 33 additions & 24 deletions resources/vue/components/TripCreation/StationRow.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand Down
64 changes: 42 additions & 22 deletions resources/vue/components/TripCreation/TripCreationForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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">
Expand Down

0 comments on commit 230fd19

Please sign in to comment.