7 changed files with 433 additions and 21 deletions
@ -1,28 +1,290 @@ |
|||
<template> |
|||
<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> |
|||
</template> |
|||
|
|||
<script> |
|||
import HelloWorld from './components/HelloWorld.vue' |
|||
import Vue from 'vue'; |
|||
import VCalendar from 'v-calendar'; |
|||
|
|||
Vue.use(VCalendar, {}); |
|||
|
|||
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> |
|||
|
|||
<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; |
|||
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> |
|||
|
|||
@ -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