|
|
|
@ -2,9 +2,12 @@ |
|
|
|
<div id="app"> |
|
|
|
<h1>Letenka</h1> |
|
|
|
<div class="wrapper"> |
|
|
|
<div class="col"> |
|
|
|
<div class="col form"> |
|
|
|
<div class="wrapper2"> |
|
|
|
<h2>Parametry letu</h2> |
|
|
|
<form action=""> |
|
|
|
<p> |
|
|
|
<label for="">Třída: </label> |
|
|
|
<select v-model="travelType"> |
|
|
|
<option value="" disabled>Vyberte jednu možnost</option> |
|
|
|
<option v-for="(option, index) in travelTypes" :key="index" :value="option"> |
|
|
|
@ -14,8 +17,22 @@ |
|
|
|
</p> |
|
|
|
|
|
|
|
<!-- volba destinace --> |
|
|
|
<p> |
|
|
|
<label for="">Destinace: </label> |
|
|
|
<select v-model="travelDest"> |
|
|
|
<option value="" disabled>Vyberte jednu možnost</option> |
|
|
|
<option v-for="(option, index) in travelDests" :key="index" :value="option"> |
|
|
|
{{ option.text }} |
|
|
|
</option> |
|
|
|
</select> |
|
|
|
</p> |
|
|
|
<!-- datum odletu --> |
|
|
|
<input type="date"> |
|
|
|
<div v-if="travelType.value == 'R'"> |
|
|
|
<v-date-picker v-model="departureRangeDate" :min-date="new Date()" value="" is-range/> |
|
|
|
</div> |
|
|
|
<div v-else> |
|
|
|
<v-date-picker v-model="departureDate" :min-date="new Date()" /> |
|
|
|
</div> |
|
|
|
<!-- datum příletu pokud zpáteční --> |
|
|
|
|
|
|
|
|
|
|
|
@ -24,10 +41,11 @@ |
|
|
|
<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-model="classType" id="inputClassType"> |
|
|
|
<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 }} |
|
|
|
@ -35,36 +53,25 @@ |
|
|
|
</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 v-on:click="addSeatClick(seat)"> |
|
|
|
{{ seat }} |
|
|
|
</div> |
|
|
|
<Seat-picker :seats="seats" :classType="classType" :personCount= "personCount" /> |
|
|
|
|
|
|
|
</form> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<button v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="col"> |
|
|
|
<div> |
|
|
|
<div class="col order"> |
|
|
|
<h2>Objednávka</h2> |
|
|
|
<p v-if="travelType"> |
|
|
|
Typ cesty: |
|
|
|
<span style="text-transform: lowercase"> |
|
|
|
<span> |
|
|
|
{{ 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 v-if="travelDest"> |
|
|
|
Destinace: {{ travelDest.text }} |
|
|
|
</p> |
|
|
|
<p v-if="travelType.value == 'R'"> |
|
|
|
Datum odletu: |
|
|
|
@ -76,6 +83,12 @@ |
|
|
|
Datum odletu: |
|
|
|
{{ departureDate }} <br> |
|
|
|
</p> |
|
|
|
<p v-if="classType"> |
|
|
|
Třída: |
|
|
|
<span> |
|
|
|
{{ classType.text }} |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
<div v-if="chosenSeats.length"> |
|
|
|
Vybraná místa: |
|
|
|
@ -83,22 +96,31 @@ |
|
|
|
{{ seat }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import Vue from 'vue'; |
|
|
|
import VCalendar from 'v-calendar'; |
|
|
|
import SeatPicker from './components/SeatPicker'; |
|
|
|
|
|
|
|
// Use v-calendar & v-date-picker components |
|
|
|
Vue.use(VCalendar, {}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
components: { SeatPicker }, |
|
|
|
name: 'App', |
|
|
|
data: function() { |
|
|
|
return { |
|
|
|
travelType: "", |
|
|
|
travelTypes: [ |
|
|
|
{ value: "R", text: "Zpáteční" }, |
|
|
|
{ value: "O", text: "Jednosměrná" }, |
|
|
|
{ value: "R", text: "TwoWay" }, |
|
|
|
{ value: "O", text: "OneWay" }, |
|
|
|
], |
|
|
|
personCount: 1, |
|
|
|
classType: "", |
|
|
|
@ -110,29 +132,31 @@ export default { |
|
|
|
"B1", "B2", "B3", |
|
|
|
"E1", "E2", "E3", "E4", "E5" |
|
|
|
], |
|
|
|
chosenSeats: [] |
|
|
|
} |
|
|
|
chosenSeats: [], |
|
|
|
travelDest: "", |
|
|
|
travelDests:[ |
|
|
|
{ value:"Pg", text:"Prague"}, |
|
|
|
{ value:"Ps", text:"Paris"}, |
|
|
|
{ value:"LA", text:"Los Angeles"}, |
|
|
|
{ value:"Pe", text:"Peking"}, |
|
|
|
{ value:"T", text:"Tokio"}, |
|
|
|
], |
|
|
|
departureDate: new Date(), |
|
|
|
departureRangeDate: { |
|
|
|
start: new Date() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
addSeatClick: function(seat) { |
|
|
|
if (this.chosenSeats.length < this.personCount) { |
|
|
|
this.chosenSeats.push(seat); |
|
|
|
} |
|
|
|
else { |
|
|
|
alert("Všichni cestující již sedí!"); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
personCountChange: function() { |
|
|
|
let diff = this.personCount - this.chosenSeats.length; |
|
|
|
if (diff < 0) { |
|
|
|
// diff je záporné číslo |
|
|
|
for (let i = diff; i < 0; i++) { |
|
|
|
this.chosenSeats.pop(); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
<style> |
|
|
|
|
Harazim
4 years ago