3 changed files with 222 additions and 153 deletions
@ -1,163 +1,211 @@ |
|||||
<template> |
|
||||
<div id="app"> |
|
||||
<h1>Letenka</h1> |
|
||||
<div class="wrapper"> |
|
||||
<div class="col form"> |
|
||||
<h2>Parametry letu</h2> |
|
||||
<form action=""> |
|
||||
<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 --> |
|
||||
<input type="date"> |
|
||||
<!-- 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"> |
|
||||
|
<template> |
||||
|
<div id="app"> |
||||
|
<h1>Letenka</h1> |
||||
|
<div class="wrapper"> |
||||
|
<div class="col form"> |
||||
|
<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"> |
||||
{{ option.text }} |
{{ 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> |
|
||||
|
|
||||
</div> |
|
||||
</div> |
|
||||
<button v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button> |
|
||||
</form> |
|
||||
|
</option> |
||||
|
</select> |
||||
|
</p> |
||||
|
|
||||
</div> |
|
||||
<div class="col order"> |
|
||||
<h2>Objednávka</h2> |
|
||||
<p v-if="travelType"> |
|
||||
Typ cesty: |
|
||||
<span style="text-transform: lowercase"> |
|
||||
{{ travelType.text }} |
|
||||
</span> |
|
||||
|
<!-- 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> |
</p> |
||||
|
<!-- datum odletu --> |
||||
|
<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í --> |
||||
|
|
||||
|
|
||||
<p> |
<p> |
||||
Počet cestujích: {{ personCount}} |
|
||||
|
<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> |
</p> |
||||
<p v-if="classType"> |
|
||||
Třída: |
|
||||
<span style="text-transform: lowercase"> |
|
||||
{{ classType.text }} |
|
||||
</span> |
|
||||
|
|
||||
|
<!-- 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> |
</p> |
||||
|
|
||||
<div v-if="chosenSeats.length"> |
|
||||
Vybraná místa: |
|
||||
<div class="seat" v-for="seat in chosenSeats" :key="seat"> |
|
||||
{{ 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> |
||||
</div> |
</div> |
||||
|
<button v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button> |
||||
|
</form> |
||||
|
|
||||
|
</div> |
||||
|
<div> |
||||
|
<div class="col order"> |
||||
|
<h2>Objednávka</h2> |
||||
|
<p v-if="travelType"> |
||||
|
Typ cesty: |
||||
|
<span> |
||||
|
{{ travelType.text }} |
||||
|
</span> |
||||
|
</p> |
||||
|
<p> |
||||
|
Počet cestujích: {{ personCount }} |
||||
|
</p> |
||||
|
<p v-if="travelDest"> |
||||
|
Destinace: {{ travelDest.text }} |
||||
|
</p> |
||||
|
<p v-if="travelType.value == 'R'"> |
||||
|
Datum odletu: |
||||
|
{{ departureRangeDate.start }} <br> |
||||
|
Datum příletu: |
||||
|
{{ departureRangeDate.end }} |
||||
|
</p> |
||||
|
<p v-if="classType"> |
||||
|
Třída: |
||||
|
<span> |
||||
|
{{ classType.text }} |
||||
|
</span> |
||||
|
</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> |
</div> |
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
|
|
||||
export default { |
|
||||
name: 'App', |
|
||||
data: function() { |
|
||||
return { |
|
||||
travelType: "", |
|
||||
travelTypes: [ |
|
||||
{ value: "R", text: "Zpáteční" }, |
|
||||
{ value: "O", text: "Jednosměrná" }, |
|
||||
], |
|
||||
personCount: 1, |
|
||||
classType: "", |
|
||||
classTypes: [ |
|
||||
{ value: "E", text: "Ekonomická" }, |
|
||||
{ value: "B", text: "Byznys" } |
|
||||
], |
|
||||
seats: [ |
|
||||
"B1", "B2", "B3", |
|
||||
"E1", "E2", "E3", "E4", "E5" |
|
||||
], |
|
||||
chosenSeats: [] |
|
||||
} |
|
||||
}, |
|
||||
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; |
|
||||
// diff je záporné číslo |
|
||||
for (let i = diff; i < 0; i++) { |
|
||||
this.chosenSeats.pop(); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Vue from 'vue'; |
||||
|
import VCalendar from 'v-calendar'; |
||||
|
|
||||
|
// Use v-calendar & v-date-picker components |
||||
|
Vue.use(VCalendar, {}); |
||||
|
|
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
name: 'App', |
||||
|
data: function() { |
||||
|
const date = new Date(); |
||||
|
const year = date.getFullYear(); |
||||
|
const month = date.getMonth(); |
||||
|
return { |
||||
|
travelType: "", |
||||
|
travelTypes: [ |
||||
|
{ value: "R", text: "TwoWay" }, |
||||
|
{ value: "O", text: "OneWay" }, |
||||
|
], |
||||
|
personCount: 1, |
||||
|
classType: "", |
||||
|
classTypes: [ |
||||
|
{ value: "E", text: "Ekonomická" }, |
||||
|
{ value: "B", text: "Byznys" } |
||||
|
], |
||||
|
seats: [ |
||||
|
"B1", "B2", "B3", |
||||
|
"E1", "E2", "E3", "E4", "E5" |
||||
|
], |
||||
|
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(year, month, 12), |
||||
|
departureRangeDate: { |
||||
|
start: new Date(year, month, 12) |
||||
|
}, |
||||
|
} |
||||
|
}, |
||||
|
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; |
||||
|
// diff je záporné číslo |
||||
|
for (let i = diff; i < 0; i++) { |
||||
|
this.chosenSeats.pop(); |
||||
|
} |
||||
|
} |
||||
} |
} |
||||
</script> |
|
||||
|
|
||||
<style> |
|
||||
.wrapper { |
|
||||
display: grid; |
|
||||
grid-template-columns: 1fr 1fr; |
|
||||
} |
|
||||
|
|
||||
.seat { |
|
||||
display: inline-block; |
|
||||
width: 30px; |
|
||||
text-align: center; |
|
||||
border: 1px solid gray; |
|
||||
margin: 2px; |
|
||||
} |
|
||||
|
|
||||
.seat div:hover { |
|
||||
cursor: pointer; |
|
||||
background-color: lightgray; |
|
||||
} |
|
||||
|
|
||||
.seat .disabled { |
|
||||
color: lightgray; |
|
||||
} |
|
||||
|
|
||||
.seat .disabled:hover { |
|
||||
cursor: default; |
|
||||
background-color: transparent; |
|
||||
} |
|
||||
|
|
||||
.seat .chosen { |
|
||||
background-color: lightgreen; |
|
||||
} |
|
||||
|
|
||||
</style> |
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.wrapper { |
||||
|
background-color: lightgreen; |
||||
|
display: grid; |
||||
|
grid-template-columns: 1fr 1fr; |
||||
|
} |
||||
|
|
||||
|
.seat { |
||||
|
display: inline-block; |
||||
|
width: 30px; |
||||
|
text-align: center; |
||||
|
border: 1px solid gray; |
||||
|
margin: 2px; |
||||
|
} |
||||
|
|
||||
|
.seat div:hover { |
||||
|
cursor: pointer; |
||||
|
background-color: lightgray; |
||||
|
} |
||||
|
|
||||
|
.seat .disabled { |
||||
|
color: lightgray; |
||||
|
} |
||||
|
|
||||
|
.seat .disabled:hover { |
||||
|
cursor: default; |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
|
||||
|
.seat .chosen { |
||||
|
background-color: lightgreen; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
Loading…
Reference in new issue