david subr
4 years ago
9 changed files with 280 additions and 12 deletions
@ -1,20 +1,240 @@ |
|||||
<template> |
<template> |
||||
<div id="app"> |
<div id="app"> |
||||
|
<div class="container-fluid"> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-12; peknejheader"> |
||||
|
<nav class="navbar navbar-expand-lg navbar-light bg-light; peknejheader"> |
||||
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> |
||||
|
<span class="navbar-toggler-icon"></span> |
||||
|
</button> <a class="navbar-brand" href="#"> <h1>Letenky</h1> </a> |
||||
|
|
||||
|
</nav> |
||||
</div> |
</div> |
||||
</template> |
|
||||
|
</div> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-6"> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-6; fotka"> |
||||
|
<h2 style="color: whitesmoke; padding-top: 10px;">Parametry letu</h2> |
||||
|
<div class="peknyokno"> |
||||
|
<h3>Cesta:</h3> |
||||
|
<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> |
||||
|
|
||||
<script> |
|
||||
|
<!-- volba destinace --> |
||||
|
<!-- datum odletu --> |
||||
|
|
||||
|
<!-- datum příletu pokud zpáteční --> |
||||
|
|
||||
|
|
||||
|
<p> |
||||
|
<label for="inputPersonCount"> <h3>Počet cestujících:</h3> </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"> <h3>Volba třídy:</h3> </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 style="width: 20%; border:0;" class="seat" v-for="(seat, index) in seats" :key="index"> |
||||
|
<img style="width: 50%; padding-bottom: 5%" class="sedacka" src="@/assets/seat.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> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
<div class="col-md-6"> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-5"> |
||||
|
|
||||
|
<h2 style="padding-top: 10px;">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"> |
||||
|
<p>Vybraná místa:</p> |
||||
|
<div class="seat" v-for="seat in chosenSeats" :key="seat"> |
||||
|
{{ seat }} |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
<div class="col-md-7"> |
||||
|
<img src="./assets/inside.jpg" style="height: 600px"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<footer style="color: gray; padding:10px; background-color: lightblue" class=" text-lg-start"> |
||||
|
<p style="color: black;">© David Šubr 2021</p> |
||||
|
<a style="padding: 0px" href="#">Privacy policy</a><br> |
||||
|
<a style="padding: 0px" href="#">Contact us</a> |
||||
|
</footer> |
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
export default { |
export default { |
||||
name: 'App', |
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; |
||||
|
if (diff < 0) { |
||||
|
// diff je záporné číslo |
||||
|
for (let i = diff; i < 0; i++) { |
||||
|
this.chosenSeats.pop(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style> |
<style> |
||||
|
|
||||
|
/**html, body {margin: 0; height: 100%; overflow: hidden}**/ |
||||
|
|
||||
|
html, body{ |
||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif |
||||
|
} |
||||
|
|
||||
|
@import './assets/bootstrap.min.css'; |
||||
|
|
||||
.wrapper { |
.wrapper { |
||||
|
padding: 10px; |
||||
display: grid; |
display: grid; |
||||
grid-template-columns: 1fr 1fr; |
grid-template-columns: 1fr 1fr; |
||||
} |
} |
||||
|
|
||||
|
.seat { |
||||
|
display: inline-block; |
||||
|
width: 30px; |
||||
|
text-align: center; |
||||
|
border: 1px solid gray; |
||||
|
margin: 2px; |
||||
|
} |
||||
|
|
||||
|
.seatWrap{ |
||||
|
padding-bottom: 2.5%; |
||||
|
} |
||||
|
|
||||
|
.seat div:hover { |
||||
|
cursor: pointer; |
||||
|
background-color: lightgray; |
||||
|
} |
||||
|
|
||||
|
.seat .chosen { |
||||
|
background-color: lightgreen; |
||||
|
} |
||||
|
|
||||
|
.peknejheader{ |
||||
|
background-color: lightblue; |
||||
|
} |
||||
|
|
||||
|
.fotka{ |
||||
|
background-image: url("assets/fly.jpg"); |
||||
|
height: 600px; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.peknyokno{ |
||||
|
margin-top: 5px; |
||||
|
padding: 10px; |
||||
|
background-color:white; |
||||
|
border: 1px solid; |
||||
|
box-shadow: 5px 5px 5px rgb(53, 53, 53); |
||||
|
} |
||||
|
|
||||
|
select,input,button{ |
||||
|
border-radius: 5px; |
||||
|
} |
||||
|
|
||||
|
h1{ |
||||
|
font-size: 36px; |
||||
|
} |
||||
|
|
||||
|
h2{ |
||||
|
font-size: 24px; |
||||
|
} |
||||
|
h3{ |
||||
|
font-size: 18px; |
||||
|
color:rgb(138, 138, 138); |
||||
|
padding: 5px; |
||||
|
} |
||||
|
p{ |
||||
|
font-size: 14px; |
||||
|
} |
||||
</style> |
</style> |
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 267 KiB |
|
After Width: | Height: | Size: 59 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 18 KiB |
@ -1,8 +1,14 @@ |
|||||
import Vue from 'vue' |
import Vue from 'vue' |
||||
import App from './App.vue' |
import App from './App.vue' |
||||
|
import VCalendar from 'v-calendar'; |
||||
|
|
||||
Vue.config.productionTip = false |
Vue.config.productionTip = false |
||||
|
|
||||
new Vue({ |
new Vue({ |
||||
render: h => h(App), |
|
||||
}).$mount('#app') |
|
||||
|
render: h => h(App) |
||||
|
}).$mount('#app'); |
||||
|
|
||||
|
Vue.use(VCalendar, { |
||||
|
componentPrefix: 'vc', |
||||
|
}); |
||||
|
|
||||
|
|||||
Loading…
Reference in new issue