|
|
|
@ -1,89 +1,115 @@ |
|
|
|
|
|
|
|
<template> |
|
|
|
<div id="app"> |
|
|
|
<h1>Letenka</h1> |
|
|
|
<div class="hlava"><h1>Letenka</h1></div> |
|
|
|
<div class="wrapper"> |
|
|
|
<div class="col"> |
|
|
|
<h2>Parametry letu</h2> |
|
|
|
<p> |
|
|
|
<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> |
|
|
|
|
|
|
|
<!-- volba destinace --> |
|
|
|
<!-- datum odletu --> |
|
|
|
<v-date-picker v-model="departuredate" :min-date="new Date()" value=""/> |
|
|
|
<!-- datum příletu pokud zpáteční --> |
|
|
|
|
|
|
|
|
|
|
|
<p> |
|
|
|
<label for="inputPersonCount">Počet cestujících</label><br> |
|
|
|
<input v-on:change="personCountChange()" v-model="personCount" type="number" id="inputPersonCount" min="1" max="10"> |
|
|
|
</p> |
|
|
|
|
|
|
|
<!-- volba třídy E, B --> |
|
|
|
<p> |
|
|
|
<label for="inputClassType">Volba třídy</label><br> |
|
|
|
<select v-on:change="chosenSeats = []" v-model="classType" id="inputClassType"> |
|
|
|
<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 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 class="col1"> |
|
|
|
<div class="hlavni"> |
|
|
|
|
|
|
|
<h2>Parametry letu</h2> |
|
|
|
<p> |
|
|
|
<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> |
|
|
|
|
|
|
|
<!-- volba destinace --> |
|
|
|
|
|
|
|
|
|
|
|
<!-- datum odletu --> |
|
|
|
<v-date-picker v-model="departuredate" :min-date="new Date()" value=""/> |
|
|
|
<!-- datum příletu pokud zpáteční --> |
|
|
|
|
|
|
|
|
|
|
|
<p> |
|
|
|
<label for="inputPersonCount">Počet cestujících</label><br> |
|
|
|
<input v-on:change="personCountChange()" v-model="personCount" type="number" id="inputPersonCount" min="1" max="10"> |
|
|
|
</p> |
|
|
|
|
|
|
|
<!-- volba třídy E, B --> |
|
|
|
<p> |
|
|
|
<label for="inputClassType">Volba třídy</label><br> |
|
|
|
<select v-on:change="chosenSeats = []" v-model="classType" id="inputClassType"> |
|
|
|
<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 class="sedadlo"> |
|
|
|
<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> |
|
|
|
<img class="obr" src="./assets/sedadlo.png" alt=""> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<br> |
|
|
|
<button v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
<button v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="col"> |
|
|
|
<h2>Objednávka</h2> |
|
|
|
<p v-if="travelType"> |
|
|
|
Typ cesty: |
|
|
|
<span style="text-transform: lowercase"> |
|
|
|
{{ travelType.text }} |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
<p> |
|
|
|
Počet cestujích: {{ personCount}} |
|
|
|
</p> |
|
|
|
<p v-if="classType"> |
|
|
|
Třída: |
|
|
|
<span style="text-transform: lowercase"> |
|
|
|
{{ classType.text }} |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
<div v-if="chosenSeats.length"> |
|
|
|
Vybraná místa: |
|
|
|
<div class="seat" v-for="seat in chosenSeats" :key="seat"> |
|
|
|
{{ seat }} |
|
|
|
<div class="col"> |
|
|
|
<div class="hlavni"> |
|
|
|
<h2>Objednávka</h2> |
|
|
|
<p v-if="travelType"> |
|
|
|
Typ cesty: |
|
|
|
<span style="text-transform: lowercase"> |
|
|
|
{{ travelType.text }} |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
<p> |
|
|
|
Počet cestujích: {{ personCount}} |
|
|
|
</p> |
|
|
|
<p v-if="classType"> |
|
|
|
Třída: |
|
|
|
<span style="text-transform: lowercase"> |
|
|
|
{{ classType.text }} |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
<div v-if="chosenSeats.length"> |
|
|
|
|
|
|
|
Vybraná místa: |
|
|
|
<div class="sedadlo"> |
|
|
|
<div class="seat" v-for="seat in chosenSeats" :key="seat"> |
|
|
|
{{ seat }} |
|
|
|
<img class="obr" src="./assets/sedadlo.png" alt=""> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
|
|
import Vue from 'vue'; |
|
|
|
|
|
|
|
import VCalendar from 'v-calendar'; |
|
|
|
Vue.use(VCalendar, {}); |
|
|
|
|
|
|
|
@ -91,6 +117,8 @@ export default { |
|
|
|
name: 'App', |
|
|
|
data: function() { |
|
|
|
return { |
|
|
|
|
|
|
|
|
|
|
|
travelType: "", |
|
|
|
travelTypes: [ |
|
|
|
{ value: "R", text: "Zpáteční" }, |
|
|
|
@ -99,15 +127,22 @@ export default { |
|
|
|
personCount: 1, |
|
|
|
classType: "", |
|
|
|
classTypes: [ |
|
|
|
{ value: "E", text: "Ekonomická" }, |
|
|
|
{ value: "B", text: "Byznys" } |
|
|
|
{ value: "E", text: "Ekonomi" }, |
|
|
|
{ value: "B", text: "Business" }, |
|
|
|
{ value: "F", text: "First" } |
|
|
|
], |
|
|
|
seats: [ |
|
|
|
"F1", "F2", "F3", |
|
|
|
"B1", "B2", "B3", |
|
|
|
"E1", "E2", "E3", "E4", "E5" |
|
|
|
"E1", "E2", "E3", "E4", "E5", "E6", |
|
|
|
], |
|
|
|
chosenSeats: [], |
|
|
|
departuredate: new Date(), |
|
|
|
departurerangedate: { |
|
|
|
start: new Date(), |
|
|
|
end: new Date(), |
|
|
|
|
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
@ -132,17 +167,24 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.wrapper { |
|
|
|
display: grid; |
|
|
|
grid-template-columns: 1fr 1fr; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.seat { |
|
|
|
display: inline-block; |
|
|
|
width: 30px; |
|
|
|
width: 50px; |
|
|
|
height: 50px; |
|
|
|
text-align: center; |
|
|
|
border: 1px solid gray; |
|
|
|
margin: 2px; |
|
|
|
background-color: rgb(62, 156, 53); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.seat div:hover { |
|
|
|
@ -151,7 +193,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.seat .disabled { |
|
|
|
color: brown; |
|
|
|
color: rgb(255, 255, 255); |
|
|
|
} |
|
|
|
|
|
|
|
.seat .disabled:hover { |
|
|
|
@ -162,5 +204,42 @@ export default { |
|
|
|
.seat .chosen { |
|
|
|
background-color: lightgreen; |
|
|
|
} |
|
|
|
.col{ |
|
|
|
width: 40%; |
|
|
|
background-color: rgb(255, 255, 255); |
|
|
|
margin: 0 left; |
|
|
|
opacity: 0.8; |
|
|
|
} |
|
|
|
|
|
|
|
.hlavni{ |
|
|
|
width: 50%; |
|
|
|
margin: 0 auto; |
|
|
|
} |
|
|
|
.hlava{ |
|
|
|
width: 100%; |
|
|
|
background-color: |
|
|
|
} |
|
|
|
#app{ |
|
|
|
background-image: url("./assets/leta.jpeg"); |
|
|
|
} |
|
|
|
.obr{ |
|
|
|
width: 30px; |
|
|
|
} |
|
|
|
h1,h2,h3,p { |
|
|
|
font-family: Arial, Helvetica, sans-serif; |
|
|
|
} |
|
|
|
.sedadlo{ |
|
|
|
width: 170px; |
|
|
|
} |
|
|
|
|
|
|
|
@media (max-width: 500px) { |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style> |
|
|
|
|
petr
4 years ago
