|
|
|
@ -1,77 +1,146 @@ |
|
|
|
<template> |
|
|
|
<div id="app"> |
|
|
|
<h1>Letenka</h1> |
|
|
|
<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> |
|
|
|
|
|
|
|
<v-date-picker v-model="departureDate" :min-date="new Date()" /> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
</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 cestuijících: {{ personCount }} |
|
|
|
</p> |
|
|
|
<p v-if="classType"> |
|
|
|
Typ cesty: |
|
|
|
<span style="text-transform: lowercase"> |
|
|
|
{{ classType.text }} |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
<div v-if="chosenSeats.length > 0"> |
|
|
|
Vybraná místa: |
|
|
|
<div class="seat" v-for="seat in chosenSeats" :key="seat"> |
|
|
|
{{ seat }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div id="app"> |
|
|
|
<header> |
|
|
|
<h1>Letenka</h1> |
|
|
|
</header> |
|
|
|
<div class="wrapper"> |
|
|
|
<div class="colInput"> |
|
|
|
<h2 style="color: white; margin: 20px">Parametry letu</h2> |
|
|
|
<div class="inputWindow"> |
|
|
|
<div class="col"> |
|
|
|
|
|
|
|
<div class="input"> |
|
|
|
<label for="travelType">Cesta</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> |
|
|
|
</select> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="input"> |
|
|
|
<label for="chosenDestination">Destinace</label> |
|
|
|
<select v-model="chosenDestination"> |
|
|
|
<option value="" disabled>Vyberte jednu možnost</option> |
|
|
|
<option v-for="(option, index) in destinations" :key="index" :value="option">{{ option }}</option> |
|
|
|
</select> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="input"> |
|
|
|
<div v-if="travelType.value =='O'"> |
|
|
|
<label for="inputDepartureDate">Označte datum odletu</label> |
|
|
|
<v-date-picker v-model="departureDate" :min-date="new Date()" value="" /> |
|
|
|
</div> |
|
|
|
<div v-else> |
|
|
|
<label for="inputDepartureRangeDate">Označte datum doletu a příletu</label> |
|
|
|
<v-date-picker v-model="departureRangeDate" :min-date="new Date()" is-range/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="col"> |
|
|
|
<div class="input"> |
|
|
|
<label for="inputPersonCount">Počet cestujících</label> |
|
|
|
<input v-on:change="personCountChange()" v-model="personCount" type="number" id="inputPersonCount" min="1" max="10"> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="input"> |
|
|
|
<label for="inputClassType">Volba třídy</label> |
|
|
|
<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> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="input"> |
|
|
|
<label for="seat">Zvolte si místa k sezení</label> |
|
|
|
<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"> |
|
|
|
<img class="seatImg" src="./assets/seat-b.png" alt=""> |
|
|
|
{{ seat }} |
|
|
|
</div> |
|
|
|
<div v-else-if="seat.startsWith(classType.value)" v-on:click="addSeatClick(seat)"> |
|
|
|
<img class="seatImg" src="./assets/seat-b.png" alt=""> |
|
|
|
{{ seat }} |
|
|
|
</div> |
|
|
|
<div v-else class="disabled"> |
|
|
|
<img class="seatImg" src="./assets/seat-b.png" alt=""> |
|
|
|
{{ seat }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="colOrder"> |
|
|
|
<h2 style="margin: 20px">Objednávka</h2> |
|
|
|
<div class="orderWindow"> |
|
|
|
<div class="col"> |
|
|
|
<table> |
|
|
|
<tr> |
|
|
|
<th><label for="travelType">Typ cesty: </label></th> |
|
|
|
<td> |
|
|
|
<span style="text-transform: lowercase"> |
|
|
|
{{ travelType.text }} |
|
|
|
</span> |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<th><label for="chosenDestination">Cílová destinace: </label></th> |
|
|
|
<td>{{ chosenDestination }}</td> |
|
|
|
</tr> |
|
|
|
<tr v-if="travelType.value == 'O'"> |
|
|
|
<th><label for="departureDate">Datum odletu: </label></th> |
|
|
|
<td> |
|
|
|
{{departureDate.getDate() }}.{{ (departureDate.getMonth()) + 1 }}.{{ departureDate.getFullYear() }} |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr v-if="travelType.value == 'R'"> |
|
|
|
<th><label for="departureDate">Datum odletu: </label></th> |
|
|
|
<td> |
|
|
|
{{departureRangeDate.start.getDate() }}.{{ (departureRangeDate.start.getMonth()) + 1 }}.{{ departureRangeDate.start.getFullYear() }} |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr v-if="travelType.value == 'R'"> |
|
|
|
<th><label for="arrivalDate">Datum příletu: </label></th> |
|
|
|
<td>{{departureRangeDate.end.getDate() }}.{{ (departureRangeDate.end.getMonth()) + 1 }}.{{ departureRangeDate.end.getFullYear() }}</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<th><label for="passengerCount">Počet cestuijících: </label></th> |
|
|
|
<td>{{ personCount }}</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<th><label for="classType">Třída: </label></th> |
|
|
|
<td>{{ classType.text }}</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<th><label for="chosenSeats">Vybraná místa: </label></th> |
|
|
|
<td v-if="chosenSeats.length > 0"> |
|
|
|
<div class="seat" v-for="seat in chosenSeats" :key="seat"> |
|
|
|
{{ seat }} |
|
|
|
</div> |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
</table> |
|
|
|
</div> |
|
|
|
<div class="col"> |
|
|
|
<div class="cropped"> |
|
|
|
<img class="img" src="./assets/inside.jpg" alt=""> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<footer> |
|
|
|
<p> |
|
|
|
© by Work-in-Progress design, 2021<br> |
|
|
|
<a href="#">Privacy policy</a><br> |
|
|
|
<a href="#">Contact us</a> |
|
|
|
</p> |
|
|
|
|
|
|
|
</footer> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
@ -82,82 +151,240 @@ Vue.use(VCalendar, {}); |
|
|
|
|
|
|
|
|
|
|
|
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: [], |
|
|
|
departureDate: 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() { |
|
|
|
let diff = this.personCount - this.chosenSeats.length |
|
|
|
if (diff < 0) { |
|
|
|
for (let i = diff; i < 0 ; i++) { |
|
|
|
this.chosenSeats.pop() |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
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: [], |
|
|
|
departureDate: new Date(), |
|
|
|
departureRangeDate: { |
|
|
|
start: new Date(), |
|
|
|
end: new Date() |
|
|
|
}, |
|
|
|
chosenDestination: "", |
|
|
|
destinations: [ |
|
|
|
"Londýn", "New York", "Moskva" |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
addSeatClick: function(seat) { |
|
|
|
if (this.chosenSeats.length < this.personCount) { |
|
|
|
this.chosenSeats.push(seat); |
|
|
|
} |
|
|
|
else { |
|
|
|
alert("Všichni cestující již sedí!") |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
personCountChange() { |
|
|
|
let diff = this.personCount - this.chosenSeats.length |
|
|
|
if (diff < 0) { |
|
|
|
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; |
|
|
|
margin: 2px; |
|
|
|
border: 1px solid grey; |
|
|
|
} |
|
|
|
|
|
|
|
.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; |
|
|
|
} |
|
|
|
#app{ |
|
|
|
height: 100vh; |
|
|
|
} |
|
|
|
|
|
|
|
body{ |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
font-family: Arial, Helvetica, sans-serif; |
|
|
|
height: 100%; |
|
|
|
font-size: 75%; |
|
|
|
} |
|
|
|
|
|
|
|
h1{ |
|
|
|
margin: 0; |
|
|
|
padding: 15px 0; |
|
|
|
padding-left: 15px; |
|
|
|
font-size: 30px; |
|
|
|
} |
|
|
|
|
|
|
|
header{ |
|
|
|
color: white; |
|
|
|
background-color: #003554; |
|
|
|
height: 60px; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.wrapper{ |
|
|
|
display: grid; |
|
|
|
grid-template-columns: 1fr 1fr; |
|
|
|
height: calc(100% - (55px + 145px)); |
|
|
|
} |
|
|
|
|
|
|
|
footer{ |
|
|
|
background-color: #003554; |
|
|
|
height: 150px; |
|
|
|
} |
|
|
|
|
|
|
|
footer a, p{ |
|
|
|
color: white; |
|
|
|
text-decoration: none; |
|
|
|
text-decoration: underline; |
|
|
|
padding: 25px; |
|
|
|
margin: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.colInput{ |
|
|
|
background-image: url("./assets/fly.jpg"); |
|
|
|
} |
|
|
|
|
|
|
|
.col{ |
|
|
|
margin: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.inputWindow{ |
|
|
|
margin: 0 auto; |
|
|
|
width: 85%; |
|
|
|
background-color: whitesmoke; |
|
|
|
display: grid; |
|
|
|
grid-template-columns: 1fr 1fr; |
|
|
|
box-shadow: 5px 5px 10px, -1px -1px 10px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.orderWindow{ |
|
|
|
margin: 0 auto; |
|
|
|
display: grid; |
|
|
|
grid-template-columns: 1fr 1fr; |
|
|
|
} |
|
|
|
|
|
|
|
.input{ |
|
|
|
margin-bottom: 5px; |
|
|
|
} |
|
|
|
|
|
|
|
.input label,select,div{ |
|
|
|
display: block; |
|
|
|
} |
|
|
|
|
|
|
|
.input label{ |
|
|
|
color: lightslategrey; |
|
|
|
} |
|
|
|
|
|
|
|
select{ |
|
|
|
width: 200px; |
|
|
|
height: 30px; |
|
|
|
} |
|
|
|
|
|
|
|
.seatImg{ |
|
|
|
width: 50px; |
|
|
|
} |
|
|
|
|
|
|
|
.seat{ |
|
|
|
display: inline-block; |
|
|
|
width: 30px; |
|
|
|
text-align: center; |
|
|
|
margin-left: 20px; |
|
|
|
margin-right: 20px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.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; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.colOrder{ |
|
|
|
background-color: rgb(211, 231, 250); |
|
|
|
} |
|
|
|
|
|
|
|
.img{ |
|
|
|
width: 400px; |
|
|
|
margin-right: 30px; |
|
|
|
} |
|
|
|
|
|
|
|
th{ |
|
|
|
color: gray; |
|
|
|
text-align: left; |
|
|
|
padding-bottom: 5px; |
|
|
|
} |
|
|
|
|
|
|
|
td{ |
|
|
|
padding-bottom: 5px; |
|
|
|
padding-left: 10px; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
|
|
|
|
td .seat{ |
|
|
|
width: 15px; |
|
|
|
margin-left: 5px; |
|
|
|
margin-right: 5px; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@media only screen and (max-width: 1440px){ |
|
|
|
#app{ |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.inputWindow{ |
|
|
|
grid-template-columns: 1fr; |
|
|
|
margin-bottom: 30px; |
|
|
|
} |
|
|
|
|
|
|
|
.input{ |
|
|
|
float: none; |
|
|
|
} |
|
|
|
|
|
|
|
.orderWindow{ |
|
|
|
grid-template-columns: 1fr; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@media only screen and (max-width: 922px){ |
|
|
|
|
|
|
|
.wrapper{ |
|
|
|
grid-template-columns: 1fr; |
|
|
|
} |
|
|
|
|
|
|
|
.cropped{ |
|
|
|
width: 250px; |
|
|
|
height: 300px; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
</style> |
|
|
|
|
Stanislav Platil
