3 changed files with 222 additions and 153 deletions
@ -1,163 +1,211 @@ |
|||
<template> |
|||
<div id="app"> |
|||
<h1>Letenka</h1> |
|||
<div class="wrapper"> |
|||
<div class="col form"> |
|||
<h2>Parametry letu</h2> |
|||
<form action=""> |
|||
<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 --> |
|||
<input type="date"> |
|||
<!-- 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> |
|||
|
|||
<!-- 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"> |
|||
<template> |
|||
<div id="app"> |
|||
<h1>Letenka</h1> |
|||
<div class="wrapper"> |
|||
<div class="col form"> |
|||
<h2>Parametry letu</h2> |
|||
<form action=""> |
|||
<p> |
|||
<label for="">Třída: </label> |
|||
<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> |
|||
|
|||
<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> |
|||
</form> |
|||
|
|||
</div> |
|||
<div class="col order"> |
|||
<h2>Objednávka</h2> |
|||
<p v-if="travelType"> |
|||
Typ cesty: |
|||
<span style="text-transform: lowercase"> |
|||
{{ travelType.text }} |
|||
</span> |
|||
</option> |
|||
</select> |
|||
</p> |
|||
|
|||
<!-- volba destinace --> |
|||
<p> |
|||
Počet cestujích: {{ personCount}} |
|||
</p> |
|||
<p v-if="classType"> |
|||
Třída: |
|||
<span style="text-transform: lowercase"> |
|||
{{ classType.text }} |
|||
</span> |
|||
<label for="">Destinace: </label> |
|||
<select v-model="travelDest"> |
|||
<option value="" disabled>Vyberte jednu možnost</option> |
|||
<option v-for="(option, index) in travelDests" :key="index" :value="option"> |
|||
{{ option.text }} |
|||
</option> |
|||
</select> |
|||
</p> |
|||
<!-- datum odletu --> |
|||
<div v-if="travelType.value == 'R'"> |
|||
<v-date-picker v-model="departureRangeDate" :min-date="new Date()" value="" is-range/> |
|||
</div> |
|||
<div v-else> |
|||
<v-date-picker v-model="departureDate" :min-date="new Date()" /> |
|||
</div> |
|||
<!-- datum příletu pokud zpáteční --> |
|||
|
|||
|
|||
<div v-if="chosenSeats.length"> |
|||
Vybraná místa: |
|||
<div class="seat" v-for="seat in chosenSeats" :key="seat"> |
|||
{{ seat }} |
|||
<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="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> |
|||
</form> |
|||
|
|||
</div> |
|||
<div> |
|||
<div class="col order"> |
|||
<h2>Objednávka</h2> |
|||
<p v-if="travelType"> |
|||
Typ cesty: |
|||
<span> |
|||
{{ travelType.text }} |
|||
</span> |
|||
</p> |
|||
<p> |
|||
Počet cestujích: {{ personCount }} |
|||
</p> |
|||
<p v-if="travelDest"> |
|||
Destinace: {{ travelDest.text }} |
|||
</p> |
|||
<p v-if="travelType.value == 'R'"> |
|||
Datum odletu: |
|||
{{ departureRangeDate.start }} <br> |
|||
Datum příletu: |
|||
{{ departureRangeDate.end }} |
|||
</p> |
|||
<p v-if="classType"> |
|||
Třída: |
|||
<span> |
|||
{{ classType.text }} |
|||
</span> |
|||
</p> |
|||
|
|||
<div v-if="chosenSeats.length"> |
|||
Vybraná místa: |
|||
<div class="seat" v-for="seat in chosenSeats" :key="seat"> |
|||
{{ seat }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</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; |
|||
// diff je záporné číslo |
|||
for (let i = diff; i < 0; i++) { |
|||
this.chosenSeats.pop(); |
|||
} |
|||
} |
|||
} |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Vue from 'vue'; |
|||
import VCalendar from 'v-calendar'; |
|||
|
|||
// Use v-calendar & v-date-picker components |
|||
Vue.use(VCalendar, {}); |
|||
|
|||
|
|||
|
|||
export default { |
|||
name: 'App', |
|||
data: function() { |
|||
const date = new Date(); |
|||
const year = date.getFullYear(); |
|||
const month = date.getMonth(); |
|||
return { |
|||
travelType: "", |
|||
travelTypes: [ |
|||
{ value: "R", text: "TwoWay" }, |
|||
{ value: "O", text: "OneWay" }, |
|||
], |
|||
personCount: 1, |
|||
classType: "", |
|||
classTypes: [ |
|||
{ value: "E", text: "Ekonomická" }, |
|||
{ value: "B", text: "Byznys" } |
|||
], |
|||
seats: [ |
|||
"B1", "B2", "B3", |
|||
"E1", "E2", "E3", "E4", "E5" |
|||
], |
|||
chosenSeats: [], |
|||
travelDest: "", |
|||
travelDests:[ |
|||
{ value:"Pg", text:"Prague"}, |
|||
{ value:"Ps", text:"Paris"}, |
|||
{ value:"LA", text:"Los Angeles"}, |
|||
{ value:"Pe", text:"Peking"}, |
|||
{ value:"T", text:"Tokio"}, |
|||
], |
|||
departureDate: new Date(year, month, 12), |
|||
departureRangeDate: { |
|||
start: new Date(year, month, 12) |
|||
}, |
|||
} |
|||
}, |
|||
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; |
|||
// diff je záporné číslo |
|||
for (let i = diff; i < 0; i++) { |
|||
this.chosenSeats.pop(); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.wrapper { |
|||
background-color: lightgreen; |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr; |
|||
} |
|||
|
|||
.seat { |
|||
display: inline-block; |
|||
width: 30px; |
|||
text-align: center; |
|||
border: 1px solid gray; |
|||
margin: 2px; |
|||
} |
|||
|
|||
.seat div:hover { |
|||
cursor: pointer; |
|||
background-color: lightgray; |
|||
} |
|||
|
|||
.seat .disabled { |
|||
color: lightgray; |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.wrapper { |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr; |
|||
} |
|||
|
|||
.seat { |
|||
display: inline-block; |
|||
width: 30px; |
|||
text-align: center; |
|||
border: 1px solid gray; |
|||
margin: 2px; |
|||
} |
|||
|
|||
.seat div:hover { |
|||
cursor: pointer; |
|||
background-color: lightgray; |
|||
} |
|||
|
|||
.seat .disabled { |
|||
color: lightgray; |
|||
} |
|||
|
|||
.seat .disabled:hover { |
|||
cursor: default; |
|||
background-color: transparent; |
|||
} |
|||
|
|||
.seat .chosen { |
|||
background-color: lightgreen; |
|||
} |
|||
|
|||
</style> |
|||
|
|||
.seat .disabled:hover { |
|||
cursor: default; |
|||
background-color: transparent; |
|||
} |
|||
|
|||
.seat .chosen { |
|||
background-color: lightgreen; |
|||
} |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue