|
|
@ -1,86 +1,125 @@ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<template> |
|
|
<template> |
|
|
|
|
|
|
|
|
<div id="app"> |
|
|
<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-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 v-on:click="addSeatClick(seat)"> |
|
|
|
|
|
{{ seat }} |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<nav style="background-color: #5B66FA" class="navbar navbar-expand-lg "> |
|
|
|
|
|
<h1>Letenky</h1> |
|
|
|
|
|
</nav> |
|
|
|
|
|
<div class="container-fluid"> |
|
|
|
|
|
<div class="row"> |
|
|
|
|
|
<div class="fotka"> |
|
|
|
|
|
<div class="wrapper"> |
|
|
|
|
|
<div class="col form"> |
|
|
|
|
|
<h2>Parametry letu</h2> |
|
|
|
|
|
<div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="okno"> |
|
|
|
|
|
<form action=""> |
|
|
|
|
|
<p>Cesta<br> |
|
|
|
|
|
<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> |
|
|
|
|
|
Označte datum odletu a příletu <br> |
|
|
|
|
|
<!-- volba destinace --> |
|
|
|
|
|
<!-- datum odletu --> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- datum příletu pokud zpáteční --> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<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-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"> |
|
|
|
|
|
<p>Zvolte si místa k sezení</p> |
|
|
|
|
|
<div style="width: 20%; border: 0" class="seat" v-for="(seat, index) in seats" :key="index"> |
|
|
|
|
|
<img style="width: 50%" class="sedacka" src="@/assets/seat-b.png" alt="sedacka"> |
|
|
|
|
|
<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> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<button v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button> |
|
|
|
|
|
|
|
|
|
|
|
</form> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button> |
|
|
|
|
|
</form> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="col order"> |
|
|
|
|
|
<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> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="barva"> |
|
|
|
|
|
<div class="col orde"> |
|
|
|
|
|
<h2 style="color: black">Objednávka</h2> |
|
|
|
|
|
<p style="padding-left: 15px" v-if="travelType"> |
|
|
|
|
|
Typ cesty: |
|
|
|
|
|
<span style="text-transform: lowercase"> |
|
|
|
|
|
{{ travelType.text }} |
|
|
|
|
|
</span> |
|
|
|
|
|
</p> |
|
|
|
|
|
<p style="padding-left: 15px"> |
|
|
|
|
|
Počet cestujích: {{ personCount}} |
|
|
|
|
|
</p> |
|
|
|
|
|
<p style="padding-left: 15px" v-if="classType"> |
|
|
|
|
|
Třída: |
|
|
|
|
|
<span style="text-transform: lowercase"> |
|
|
|
|
|
{{ classType.text }} |
|
|
|
|
|
</span> |
|
|
|
|
|
</p> |
|
|
|
|
|
|
|
|
|
|
|
<div style="padding-left: 15px" v-if="chosenSeats.length"> |
|
|
|
|
|
Vybraná místa: |
|
|
|
|
|
<div class="seat" v-for="seat in chosenSeats" :key="seat"> |
|
|
|
|
|
{{ seat }} |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
<img class="inside" src="@/assets/inside.jpg" alt="obrazek"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<footer style="color: white; padding: 50px; background-color: #5B66FA" class=" text-lg-start"> |
|
|
|
|
|
<p>© by Work-In-Progress design, 2021</p> |
|
|
|
|
|
<a style="color: white; padding-bottom: 50px" href="#">Privacy policy</a><br> |
|
|
|
|
|
<a style="color: white" href="#">Contact us</a> |
|
|
|
|
|
</footer> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<script src='https://unpkg.com/vue/dist/vue.js'></script> |
|
|
|
|
|
<script src='https://unpkg.com/v-calendar'></script> |
|
|
<script> |
|
|
<script> |
|
|
|
|
|
|
|
|
export default { |
|
|
export default { |
|
|
@ -125,9 +164,32 @@ |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style> |
|
|
<style> |
|
|
|
|
|
|
|
|
|
|
|
@import './assets/css/bootstrap.css'; |
|
|
|
|
|
@import './assets/css/bootstrap-grid.css'; |
|
|
|
|
|
|
|
|
|
|
|
.container { |
|
|
|
|
|
width: 80%; |
|
|
|
|
|
height: 200px; |
|
|
|
|
|
background: aqua; |
|
|
|
|
|
margin: auto; |
|
|
|
|
|
padding: 10px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
select{ |
|
|
|
|
|
border-radius: 8px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.wrapper { |
|
|
.wrapper { |
|
|
display: grid; |
|
|
display: grid; |
|
|
grid-template-columns: 1fr 1fr; |
|
|
grid-template-columns: 1fr 1fr; |
|
|
@ -150,4 +212,48 @@ |
|
|
background-color: lightgreen; |
|
|
background-color: lightgreen; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
h1{ |
|
|
|
|
|
color: white; |
|
|
|
|
|
padding-left: 30px; |
|
|
|
|
|
font-size: 30px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.fotka{ |
|
|
|
|
|
background-image: url("assets/fly.jpg"); |
|
|
|
|
|
float: left; |
|
|
|
|
|
width: 50%; |
|
|
|
|
|
height: 750px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.barva{ |
|
|
|
|
|
background-color: gainsboro; |
|
|
|
|
|
float: right; |
|
|
|
|
|
width: 50%; |
|
|
|
|
|
height: 750px; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.okno{ |
|
|
|
|
|
background-color: white; |
|
|
|
|
|
padding-left: 40px; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
padding-bottom: 40px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
h2{ |
|
|
|
|
|
color: white; |
|
|
|
|
|
font-size: 25px; |
|
|
|
|
|
padding: 15px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.inside{ |
|
|
|
|
|
width: 60%; |
|
|
|
|
|
padding-right: 3%; |
|
|
|
|
|
padding-bottom: 10%; |
|
|
|
|
|
float: right; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |
nela
4 years ago
