|
|
@ -6,41 +6,46 @@ |
|
|
|
|
|
|
|
|
<div class="col1"> |
|
|
<div class="col1"> |
|
|
<div class="hlavni"> |
|
|
<div class="hlavni"> |
|
|
|
|
|
<div class="hlavni2"> |
|
|
|
|
|
<br> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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 --> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 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> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- datum odletu --> |
|
|
|
|
|
|
|
|
<!-- 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"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<v-date-picker v-model="departuredate" :min-date="new Date()" value=""/> |
|
|
|
|
|
<!-- datum příletu pokud zpáteční --> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="hlavni2"> |
|
|
|
|
|
<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="seatWrap"> |
|
|
<div class="seat" v-for="(seat, index) in seats" :key="index"> |
|
|
<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"> |
|
|
<div v-if="chosenSeats.indexOf(seat) >= 0" v-on:click="chosenSeats.splice(chosenSeats.indexOf(seat), 1)" class="chosen"> |
|
|
@ -53,20 +58,20 @@ |
|
|
{{ seat }} |
|
|
{{ seat }} |
|
|
</div> |
|
|
</div> |
|
|
<img class="obr" src="./assets/sedadlo.png" alt=""> |
|
|
<img class="obr" src="./assets/sedadlo.png" alt=""> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<br> |
|
|
|
|
|
<button v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button> |
|
|
</div> |
|
|
</div> |
|
|
<br> |
|
|
|
|
|
<button v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="col"> |
|
|
<div class="col"> |
|
|
<div class="hlavni"> |
|
|
|
|
|
|
|
|
<div class="druha"> |
|
|
<h2>Objednávka</h2> |
|
|
<h2>Objednávka</h2> |
|
|
<p v-if="travelType"> |
|
|
<p v-if="travelType"> |
|
|
Typ cesty: |
|
|
Typ cesty: |
|
|
@ -205,19 +210,21 @@ export default { |
|
|
background-color: lightgreen; |
|
|
background-color: lightgreen; |
|
|
} |
|
|
} |
|
|
.col{ |
|
|
.col{ |
|
|
width: 40%; |
|
|
|
|
|
|
|
|
width: 70%; |
|
|
background-color: rgb(255, 255, 255); |
|
|
background-color: rgb(255, 255, 255); |
|
|
margin: 0 left; |
|
|
margin: 0 left; |
|
|
opacity: 0.8; |
|
|
|
|
|
|
|
|
opacity: 0.8; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.hlavni{ |
|
|
.hlavni{ |
|
|
width: 50%; |
|
|
width: 50%; |
|
|
margin: 0 auto; |
|
|
|
|
|
|
|
|
margin: 0 auto; |
|
|
|
|
|
background-color: white; |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
.hlava{ |
|
|
.hlava{ |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
background-color: |
|
|
|
|
|
|
|
|
margin: 0 auto; |
|
|
} |
|
|
} |
|
|
#app{ |
|
|
#app{ |
|
|
background-image: url("./assets/leta.jpeg"); |
|
|
background-image: url("./assets/leta.jpeg"); |
|
|
@ -228,8 +235,19 @@ export default { |
|
|
h1,h2,h3,p { |
|
|
h1,h2,h3,p { |
|
|
font-family: Arial, Helvetica, sans-serif; |
|
|
font-family: Arial, Helvetica, sans-serif; |
|
|
} |
|
|
} |
|
|
.sedadlo{ |
|
|
|
|
|
width: 170px; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.druha{ |
|
|
|
|
|
width: 30%; |
|
|
|
|
|
float: left; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
.col1{ |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
} |
|
|
|
|
|
.hlavni2{ |
|
|
|
|
|
width: 80%; |
|
|
|
|
|
margin: 0 auto; |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 500px) { |
|
|
@media (max-width: 500px) { |
|
|
|
petr
4 years ago