|
|
|
@ -3,81 +3,91 @@ |
|
|
|
<h1 style="text-align: center;">Letenka</h1> |
|
|
|
<div class="wrapper"> |
|
|
|
<div class="col"> |
|
|
|
<h2>Parametry letu</h2> |
|
|
|
<div> |
|
|
|
<p>Typ letenky: |
|
|
|
<select v-model="travelType"> |
|
|
|
<option value="" disabled>vyberte jednu možnost</option> |
|
|
|
<option v-for="(option, index) in travelTypes" :key="index" :value="option">{{ option.text }}</option> |
|
|
|
</select> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<p>Destinace: |
|
|
|
<select v-model="locationType"> |
|
|
|
<option value="" disabled>vyberte jednu možnost</option> |
|
|
|
<option v-for="(option, index) in locationTypes" :key="index" :value="option">{{ option.text }}</option> |
|
|
|
</select> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<p>Třída: |
|
|
|
<select v-on:change="chosenSeats = []" v-model="classType"> |
|
|
|
<option value="" disabled>vyberte jednu možnost</option> |
|
|
|
<option v-for="(option, index) in classTypes" :key="index" :value="option">{{ option.text }}</option> |
|
|
|
</select> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<p> |
|
|
|
<v-date-picker v-model="departureDate" :min-date="new Date()" value="" /> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<p> |
|
|
|
<label for="inputPersonCount">Počet cestujcích</label> |
|
|
|
<input v-on:change="personCountChange()" v-model="personCount" type="number" id="inputPersonCount" min="1" max="10"> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div class="seatWrap"> |
|
|
|
<div class="seat" v-for="(seat, index) in seats" :key="index"> |
|
|
|
<div v-if="chosenSeats.indexOf(seat) >= 0" v-on:click="chosenSeats.splice(chosenSeats.indexOf(seat), 1)" class="chosen">{{ seat }}</div> |
|
|
|
<div v-else-if="seat.startsWith(classType.value)" v-on:click="addSeatClick(seat)"> |
|
|
|
{{ seat }} |
|
|
|
<div class="card"> |
|
|
|
<div class="card-body"> |
|
|
|
<h4 class="card-title">Parametry letu</h4> |
|
|
|
<div> |
|
|
|
<p>Typ letenky: |
|
|
|
<select v-model="travelType"> |
|
|
|
<option value="" disabled>vyberte jednu možnost</option> |
|
|
|
<option v-for="(option, index) in travelTypes" :key="index" :value="option">{{ option.text }}</option> |
|
|
|
</select> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<p>Destinace: |
|
|
|
<select v-model="locationType"> |
|
|
|
<option value="" disabled>vyberte jednu možnost</option> |
|
|
|
<option v-for="(option, index) in locationTypes" :key="index" :value="option">{{ option.text }}</option> |
|
|
|
</select> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<p>Třída: |
|
|
|
<select v-on:change="chosenSeats = []" v-model="classType"> |
|
|
|
<option value="" disabled>vyberte jednu možnost</option> |
|
|
|
<option v-for="(option, index) in classTypes" :key="index" :value="option">{{ option.text }}</option> |
|
|
|
</select> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<p> |
|
|
|
Datum odletu: |
|
|
|
<v-date-picker v-model="departureDate" :min-date="new Date()" value="" /> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<p> |
|
|
|
<label for="inputPersonCount">Počet cestujcích</label> |
|
|
|
<input v-on:change="personCountChange()" v-model="personCount" type="number" id="inputPersonCount" min="1" max="10"> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div v-else class="disabled"> |
|
|
|
{{ seat }} |
|
|
|
<div class="seatWrap"> |
|
|
|
<div class="seat" v-for="(seat, index) in seats" :key="index"> |
|
|
|
<div v-if="chosenSeats.indexOf(seat) >= 0" v-on:click="chosenSeats.splice(chosenSeats.indexOf(seat), 1)" class="chosen">{{ seat }}</div> |
|
|
|
<div v-else-if="seat.startsWith(classType.value)" v-on:click="addSeatClick(seat)"> |
|
|
|
{{ seat }} |
|
|
|
</div> |
|
|
|
<div v-else class="disabled"> |
|
|
|
{{ seat }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<button v-on:klick="chosenSeats=[]">Odebrat všechna sedadla</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<button v-on:klick="chosenSeats=[]">Odebrat všechna sedadla</button> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="col"> |
|
|
|
<h2>Objednavka</h2> |
|
|
|
<p v-if="travelType"> |
|
|
|
Typ cesty: <span style="text-transform: lowercase;">{{ travelType.text }}</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
|
|
|
|
<p v-if="locationType"> |
|
|
|
Destinace: <span style="text-transform: lowercase;">{{ locationType.text }}</span> |
|
|
|
</p> |
|
|
|
<div class="col"> |
|
|
|
<div class="card"> |
|
|
|
<div class="card-body"> |
|
|
|
<h4 class="card-title">Objednavka</h4> |
|
|
|
<p v-if="travelType"> |
|
|
|
Typ cesty: <span style="text-transform: lowercase;">{{ travelType.text }}</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
<p v-if="classType"> |
|
|
|
Třída: <span style="text-transform: lowercase;">{{ classType.text }}</span> |
|
|
|
</p> |
|
|
|
<p> |
|
|
|
Datum odletu: |
|
|
|
{{ departureDate.getDate() }}. {{ departureDate.getMonth() + 1 }}. {{ departureDate.getFullYear() }} |
|
|
|
</p> |
|
|
|
<p> |
|
|
|
Počet cestujcích: {{ personCount }} |
|
|
|
</p> |
|
|
|
<p v-if="locationType"> |
|
|
|
Destinace: <span style="text-transform: lowercase;">{{ locationType.text }}</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
<div v-if="chosenSeats.length"> |
|
|
|
Vybraná místa: |
|
|
|
<div class="seat" v-for="seat in chosenSeats" :key="seat">{{ seat }}</div> |
|
|
|
</div> |
|
|
|
<p v-if="classType"> |
|
|
|
Třída: <span style="text-transform: lowercase;">{{ classType.text }}</span> |
|
|
|
</p> |
|
|
|
<p> |
|
|
|
Datum odletu: |
|
|
|
{{ departureDate.getDate() }}. {{ departureDate.getMonth() + 1 }}. {{ departureDate.getFullYear() }} |
|
|
|
</p> |
|
|
|
<p> |
|
|
|
Počet cestujcích: {{ personCount }} |
|
|
|
</p> |
|
|
|
<div v-if="chosenSeats.length"> |
|
|
|
Vybraná místa: |
|
|
|
<div class="seat" v-for="seat in chosenSeats" :key="seat">{{ seat }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
Adam Písař
4 years ago