tomas.patolan
/
letenka
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

predposledni krok

master
Patolán 4 years ago
parent
a4afb6e7ca
commit
4ae7a7887a
1 changed files with 152 additions and 120 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 282
      src/App.vue

282
src/App.vue
View File

@ -1,131 +1,163 @@
<template>
<div id="app">
<h1>Letenka</h1>
<div class="wrapper">
<div class="col">
<h2>Parametry letu</h2>
<p>
<select v-model="travelType" >
<option value="" disabled>Vyberte z možností</option>
<option v-for="(option, index) in TravelTypes" :key="index" value="option">{{ option.text }}</option>
</select>
</p>
<input type="date">
<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="">
</p>
<p>
<label for="inputClassType">Volba třídy</label><br>
<select v-model="classType" id="inputClassType">
<option value="" disabled>Vyberte z 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 v-on:click="addSeatClick(seat)">
{{ seat }}
<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">
{{ 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>
</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">
Vybraná místa:
<div class="seat" v-for="seat in chosenSeats" :key="seat">
{{ seat }}
</div>
</div>
</div>
</div> </div>
</div>
</div> </div>
<button v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button>
</div>
<div class="col">
<h2>Objednávka</h2>
<p v-if="travelType">
Typ Letu:
<span style="text-transform: lowercase">
{{ travelType.text }}
</span>
</p>
<p>
Počet cestujícíh : {{ personCount }}
</p>
<p v-if="classType">
Třída:
<span style="text-transform: lowercase">
{{ 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: "TwoWay"},
{ value: "O", text: "OneWay"},
],
personCount: 1,
classType: "",
classTypes:[
{ value: "E", text: "Economy"},
{ value: "E", text: "Business"},
],
seats:[
"B1", "B2", "B3",
"E1", "E2", "E3",
],
chosenSeats: []
</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();
}
}
}
} }
},
methods:{
addSeatClick: function(seat){
if (this.chosenSeats.length < this.personCount){
this.chosenSeats.push(seat);
</script>
<style>
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
} }
else{
alert("MAXIMÁLNÍ POČET SEDADEL DOSAŽEN")
.seat {
display: inline-block;
width: 30px;
text-align: center;
border: 1px solid gray;
margin: 2px;
} }
},
personCountChange: function(){
let diff = this.personCount - this.chosenSeats.length;
if (diff < 0){
for (let i = 0; i < diff * -1; i++) {
this.chosenSeats.pop();
}
.seat div:hover {
cursor: pointer;
background-color: lightgray;
} }
}
}
}
</script>
<style>
.wrapper{
display: grid;
grid-template-columns: 1fr 1fr;
}
.seat{
display: inline-block;
width: 30px;
text-align: center;
border: 1px solid grey;
margin: 2px;
}
.seat:hover{
cursor: pointer;
background-color: grey;
}
.seat .chosen{
background-color: lightgreen;
}
</style>
.seat .disabled {
color: lightgray;
}
.seat .disabled:hover {
cursor: default;
background-color: transparent;
}
.seat .chosen {
background-color: lightgreen;
}
</style>
Write Preview
Loading…
Cancel
Save