7 changed files with 433 additions and 21 deletions
@ -1,28 +1,290 @@ |
|||||
<template> |
<template> |
||||
<div id="app"> |
<div id="app"> |
||||
<img alt="Vue logo" src="./assets/logo.png"> |
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/> |
|
||||
|
<link href="assets/style.css" rel="stylesheet"/> |
||||
|
<h1 class="nadpis"> Letenka </h1> |
||||
|
<div class="wrapper"> |
||||
|
<div class="col first"> |
||||
|
<h2> Parametry Letu </h2> |
||||
|
<div class="box"> |
||||
|
<div class="col"> |
||||
|
<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><br> |
||||
|
|
||||
|
|
||||
|
<!-- volba destinace --> |
||||
|
<!-- datum odletu --> |
||||
|
<div v-if="travelType.value == 'O'"> |
||||
|
<v-date-picker v-model="departureDate" :min-date="new Date()" value="" /> |
||||
|
</div> |
||||
|
<div v-else-if="travelType.value == 'R'"> |
||||
|
<v-date-picker v-model="departureRangeDate" is-range :min-date="new Date()" /> |
||||
|
</div> |
||||
|
<div v-else> |
||||
|
<p> Pro zvolení datumu vyberte o typ letu. </p> |
||||
|
</div> |
||||
|
<!-- datum příletu pokud i zpátečný --> |
||||
|
<!-- počet cestujících --> |
||||
|
</div> |
||||
|
<div class="col"> |
||||
|
|
||||
|
<p> |
||||
|
<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"> |
||||
|
</p> |
||||
|
<p> |
||||
|
<label for="inputcesta"> Volba destinace </label><br> |
||||
|
<select v-model="cesty" id="inputcesta"> |
||||
|
<option value="" disabled> Vyberte jednu možnost </option> |
||||
|
<option v-for="(option,index) in cesta" :key="index" :value="option"> |
||||
|
{{ option.text }} |
||||
|
</option> |
||||
|
</select> |
||||
|
</p> |
||||
|
<!-- volba trídy --> |
||||
|
<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> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
<div class="col second "> |
||||
|
<div class="box2"> |
||||
|
<div class="items"> |
||||
|
<h2> Objednávka </h2> |
||||
|
<p v-if="travelType"> |
||||
|
Typ letu: <span style="text-transform: lowercase;">{{ travelType.text }}</span> |
||||
|
</p> |
||||
|
<div v-if="travelType.value == 'O'"> |
||||
|
Datum letu: <span>{{ departureDate.getDate() }}.{{ departureDate.getMonth() }}.{{ departureDate.getYear() }}</span> |
||||
|
</div> |
||||
|
<div v-else-if="travelType.value == 'R'"> |
||||
|
Datum odletu tam: <span>{{ departureRangeDate.start.getDate() }}.{{ departureRangeDate.start.getMonth() }}.{{ departureRangeDate.start.getYear() }}</span><br> |
||||
|
Datum odletu zpět: <span>{{ departureRangeDate.end.getDate() }}.{{ departureRangeDate.end.getMonth() }}.{{ departureRangeDate.end.getYear() }}</span> |
||||
|
</div> |
||||
|
<p v-if="cesty"> |
||||
|
Volba destinace:<span> {{ cesty.text }} </span> |
||||
|
</p> |
||||
|
<p> |
||||
|
Počet cestujících: <span>{{ personCount }}</span> |
||||
|
</p> |
||||
|
<p v-if="classType"> |
||||
|
Třída:<span style="text-transform: lowercase"> {{ classType.text }} </span> |
||||
|
</p> |
||||
|
|
||||
|
<div v-if="chosenSeats.length > 0"> |
||||
|
Vybraná místa:<span class="seat" v-for="seat in chosenSeats" :key="seat"> {{ seat }} </span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="bcg"> </div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<footer> |
||||
|
© Lukáš Helcl |
||||
|
</footer> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import HelloWorld from './components/HelloWorld.vue' |
|
||||
|
import Vue from 'vue'; |
||||
|
import VCalendar from 'v-calendar'; |
||||
|
|
||||
|
Vue.use(VCalendar, {}); |
||||
|
|
||||
export default { |
export default { |
||||
name: 'App', |
|
||||
components: { |
|
||||
HelloWorld |
|
||||
|
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" } |
||||
|
], |
||||
|
cesty: "", |
||||
|
cesta: [ |
||||
|
{ text: "Maledivy" }, |
||||
|
{ text: "Thajsko" }, |
||||
|
{ text: "Mauricius" }, |
||||
|
{ text: "Dominikánská republika" }, |
||||
|
{ text: "Srí Lanka" }, |
||||
|
{ text: "Kuba" }, |
||||
|
{ text: "Tanzanie - Zanzibar" }, |
||||
|
{ text: "Mexiko" } |
||||
|
], |
||||
|
seats: [ |
||||
|
"B1", "B2", "B3", |
||||
|
"E1", "E2", "E3", "E4", "E5" |
||||
|
], |
||||
|
chosenSeats: [], |
||||
|
departureDate: new Date(), |
||||
|
departureRangeDate: { |
||||
|
start: new Date(), |
||||
|
end: 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: function() { |
||||
|
let diff = this.personCount - this.chosenSeats.length |
||||
|
for (let i = diff; i < 0; i++) { |
||||
|
this.chosenSeats.pop(); |
||||
|
|
||||
|
} |
||||
|
} |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
</script> |
</script> |
||||
|
|
||||
<style> |
<style> |
||||
#app { |
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif; |
|
||||
-webkit-font-smoothing: antialiased; |
|
||||
-moz-osx-font-smoothing: grayscale; |
|
||||
|
.wrapper { |
||||
|
display: grid; |
||||
|
grid-template-columns:1fr 1fr ; |
||||
|
} |
||||
|
.col.second .seat { |
||||
|
display: inline-block; |
||||
|
width: 30px; |
||||
text-align: center; |
text-align: center; |
||||
color: #2c3e50; |
|
||||
margin-top: 60px; |
|
||||
|
border: 1px solid grey; |
||||
|
margin: 5px; |
||||
|
} |
||||
|
.col.first .seat { |
||||
|
display: inline-block; |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
background-image: url(seat-b.png); |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
.col.first .seat > div { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.seatWrap .seat:hover { |
||||
|
cursor: pointer; |
||||
|
background-color: lightgray; |
||||
|
} |
||||
|
.seat .chosen { |
||||
|
background-color: #a1a1a19e; |
||||
|
} |
||||
|
.seat .disabled { |
||||
|
color: lightgray; |
||||
|
} |
||||
|
.seat .disabled:hover { |
||||
|
cursor: default; |
||||
|
} |
||||
|
h2 { |
||||
|
color: #ffffff; |
||||
|
|
||||
|
} |
||||
|
.nadpis { |
||||
|
background-color: #2b4c6f; |
||||
|
color: #ffffff; |
||||
|
margin: 0px; |
||||
|
z-index: 10000; |
||||
|
} |
||||
|
.col.first { |
||||
|
background-image: url(fly.jpg); |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
.col.second { |
||||
|
background-color: #d7e3ee; |
||||
|
color: #000000; |
||||
|
} |
||||
|
.col.second h2 { |
||||
|
color: #000000; |
||||
|
} |
||||
|
.box { |
||||
|
background-color: #ffffff; |
||||
|
margin: 5%; |
||||
|
display: grid; |
||||
|
grid-template-columns:1fr 1fr ; |
||||
|
padding: 10px; |
||||
|
} |
||||
|
.box2 { |
||||
|
display: grid; |
||||
|
grid-template-columns:1fr 2fr ; |
||||
|
padding: 10px; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.box2 .items { |
||||
|
box-shadow: 60px 0px 100px #d7e3ee; |
||||
|
z-index: 50; |
||||
|
color: #9fa3a7; |
||||
|
} |
||||
|
.box2 .items span { |
||||
|
color: #000000; |
||||
|
} |
||||
|
.box2 .bcg { |
||||
|
background-image: url(inside.jpg); |
||||
|
background-size: 100% 100%; |
||||
|
margin: 20px 0px; |
||||
|
} |
||||
|
footer { |
||||
|
height: 80px; |
||||
|
width: 100%; |
||||
|
text-align: left; |
||||
|
color: #ffffff; |
||||
|
background-color: #2b4c6f; |
||||
|
vertical-align: middle; |
||||
|
line-height: 80px; |
||||
|
padding: 0px 15px; |
||||
|
} |
||||
|
|
||||
|
@media only screen and (max-width: 950px) { |
||||
|
.box { |
||||
|
grid-template-columns:none ; |
||||
|
} |
||||
|
.box2 { |
||||
|
grid-template-columns:none ; |
||||
|
} |
||||
|
|
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
@ -0,0 +1,72 @@ |
|||||
|
<template> |
||||
|
<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> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'SeatPicker', |
||||
|
data: function () { |
||||
|
return { |
||||
|
chosenSeats: [], |
||||
|
} |
||||
|
}, |
||||
|
props: [ |
||||
|
"seats", |
||||
|
"classType", |
||||
|
"personCount", |
||||
|
], |
||||
|
methods: { |
||||
|
addSeatClick: function(seat) { |
||||
|
if (this.chosenSeats.length < this.personCount) { |
||||
|
this.chosenSeats.push(seat) |
||||
|
} |
||||
|
else { |
||||
|
alert("Všichni cestující již sedí!") |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
|
||||
|
.col.second .seat { |
||||
|
display: inline-block; |
||||
|
width: 30px; |
||||
|
text-align: center; |
||||
|
border: 1px solid grey; |
||||
|
margin: 5px; |
||||
|
} |
||||
|
.col.first .seat { |
||||
|
display: inline-block; |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
.seatWrap .seat:hover { |
||||
|
cursor: pointer; |
||||
|
background-color: lightgray; |
||||
|
} |
||||
|
.seat .chosen { |
||||
|
background-color: #333333; |
||||
|
color: white; |
||||
|
} |
||||
|
.seat .disabled { |
||||
|
color: lightgray; |
||||
|
} |
||||
|
|
||||
|
.seat .disabled:hover { |
||||
|
cursor: default; |
||||
|
} |
||||
|
</style> |
||||
|
After Width: | Height: | Size: 269 KiB |
|
After Width: | Height: | Size: 144 KiB |
|
After Width: | Height: | Size: 18 KiB |
Loading…
Reference in new issue