david subr
4 years ago
9 changed files with 280 additions and 12 deletions
@ -1,20 +1,240 @@ |
|||
<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> |
|||
<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> |
|||
|
|||
<!-- volba destinace --> |
|||
<!-- datum odletu --> |
|||
|
|||
</div> |
|||
</template> |
|||
<!-- 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> |
|||
|
|||
|
|||
|
|||
|
|||
<script> |
|||
|
|||
|
|||
<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 { |
|||
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> |
|||
|
|||
|
|||
<style> |
|||
.wrapper{ |
|||
|
|||
/**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 { |
|||
padding: 10px; |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr; |
|||
} |
|||
</style> |
|||
|
|||
.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> |
|||
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 App from './App.vue' |
|||
import VCalendar from 'v-calendar'; |
|||
|
|||
Vue.config.productionTip = false |
|||
|
|||
new Vue({ |
|||
render: h => h(App), |
|||
}).$mount('#app') |
|||
render: h => h(App) |
|||
}).$mount('#app'); |
|||
|
|||
Vue.use(VCalendar, { |
|||
componentPrefix: 'vc', |
|||
}); |
|||
|
|||
|
|||
Loading…
Reference in new issue