|
|
|
@ -1,51 +1,59 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<h1>Letenka</h1> |
|
|
|
<div class="card" style="width: 18rem;"> |
|
|
|
<div class="card-body"> |
|
|
|
<h5 class="card-title">Vyhledejte si let</h5> |
|
|
|
<div class="form-check"> |
|
|
|
<input v-model="typLetu" value="Z" class="form-check-input" type="radio" name="typletu" id="typletu1" checked> |
|
|
|
<label class="form-check-label" for="typletu1"> |
|
|
|
Zpáteční |
|
|
|
</label> |
|
|
|
</div> |
|
|
|
<div class="form-check"> |
|
|
|
<input v-model="typLetu" value="J" class="form-check-input" type="radio" name="typletu" id="typletu2" > |
|
|
|
<label class="form-check-label" for="typletu2"> |
|
|
|
Jednosměrná |
|
|
|
</label> |
|
|
|
</div> |
|
|
|
<label for="letisteZ" class="form-label">Odkud:</label> |
|
|
|
<select v-model="letisteZ" id="letisteZ" class="form-select"> |
|
|
|
<option v-for="obj, i in letisteSeznam" :key="i" :value="obj.value">{{obj.text}}</option> |
|
|
|
</select> |
|
|
|
|
|
|
|
<label for="letisteKam" class="form-label">Kam:</label> |
|
|
|
<select v-model="letisteKam" id="letisteKam" class="form-select"> |
|
|
|
<option v-for="obj, i in letisteSeznam" :key="i" :value="obj.value">{{obj.text}}</option> |
|
|
|
</select> |
|
|
|
<div class="mt-3 d-flex justify-content-between align-items-center"> |
|
|
|
<span>Počet osob</span> |
|
|
|
<div> |
|
|
|
<button class="btn btn-outline-primary " v-on:click="nastavPocetOsob(-1)" v-bind:class="{neaktivniPocet: pocetOsob ==0}">-</button> |
|
|
|
{{pocetOsob}} |
|
|
|
<button class="btn btn-outline-primary" v-on:click="nastavPocetOsob(1)" v-bind:class="{neaktivniPocet: pocetOsob ==maxOsob}">+</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="card" style="width: 18rem;"> |
|
|
|
<div class="card-body"> |
|
|
|
<h5 class="card-title">Vyhledejte si let</h5> |
|
|
|
|
|
|
|
<label for="trida" class="form-label">Třída</label> |
|
|
|
<select v-model="trida" id="trida" class="form-select"> |
|
|
|
<option v-for="obj, i in tridySeznam" :key="i" :value="obj.value">{{obj.text}}</option> |
|
|
|
</select> |
|
|
|
<label class="form-label">Výběr sedadel</label> |
|
|
|
<div> |
|
|
|
<button v-for="obj, i in sedadlaSeznam" :key="i" class="¨btn" v-bind:class="{'btn-primary':obj.trida==trida}">{{obj.nazev}}</button> |
|
|
|
</div> |
|
|
|
<div class="form-check"> |
|
|
|
<input v-model="typLetu" value="Z" class="form-check-input" type="radio" name="typLetu" id="typLetu1" checked> |
|
|
|
<label class="form-check-label" for="typLetu1"> |
|
|
|
Zpáteční |
|
|
|
</label> |
|
|
|
</div> |
|
|
|
<div class="form-check"> |
|
|
|
<input v-model="typLetu" value="J" class="form-check-input" type="radio" name="typLetu" id="typLetu2"> |
|
|
|
<label class="form-check-label" for="typLetu2"> |
|
|
|
Jednosměrná |
|
|
|
</label> |
|
|
|
</div> |
|
|
|
<label for="letisteZ" class="form-label">Odkud</label> |
|
|
|
<select v-model="letisteZ" id="letisteZ" class="form-select"> |
|
|
|
<option v-for="obj, i in letisteSeznam" :key="i" :value="obj.value"> |
|
|
|
{{ obj.text }} |
|
|
|
</option> |
|
|
|
</select> |
|
|
|
<label for="letisteKam" class="form-label">Kam</label> |
|
|
|
<select v-model="letisteKam" id="letisteKam" class="form-select"> |
|
|
|
<option v-for="obj, i in letisteSeznam" :key="i" :value="obj.value"> |
|
|
|
{{ obj.text }} |
|
|
|
</option> |
|
|
|
</select> |
|
|
|
<div class="mt-3 d-flex justify-content-between align-items-center"> |
|
|
|
<span>Počet osob</span> |
|
|
|
<div> |
|
|
|
<button v-on:click="nastavPocetOsob(-1)" class="btn btn-outline-primary" v-bind:class="{neaktivniPocet: pocetOsob == 0}">-</button> |
|
|
|
{{ pocetOsob }} |
|
|
|
<button v-on:click="nastavPocetOsob(1)" class="btn btn-outline-primary" v-bind:class="{neaktivniPocet: pocetOsob == maxOsob}">+</button> |
|
|
|
</div> |
|
|
|
</div > |
|
|
|
<label for="trida" class="form-label">Třída</label> |
|
|
|
<select v-model="trida" id="trida" class="form-select"> |
|
|
|
<option v-for="obj, i in tridySeznam" :key="i" :value="obj.value"> |
|
|
|
{{ obj.text }} |
|
|
|
</option> |
|
|
|
</select> |
|
|
|
<label class="form-label">Výběr sedadel</label> |
|
|
|
<div> |
|
|
|
<button v-on:click="vyberSedadlo(obj)" v-for="obj, i in sedadlaSeznam" :key="i" class="btn" v-bind:class="{'btn-primary': obj.trida == trida, neaktivniPocet: obj.trida != trida, 'btn-success':obj.vybrano == true}"> |
|
|
|
{{ obj.nazev }} |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
@ -53,62 +61,91 @@ export default { |
|
|
|
name: "App", |
|
|
|
data: () => { |
|
|
|
return { |
|
|
|
letisteZ:"", |
|
|
|
letisteKam:"", |
|
|
|
letisteZ: "", |
|
|
|
letisteKam: "", |
|
|
|
letisteSeznam: [ |
|
|
|
{value:"PRG",text:"Letiště Václava Havla"}, |
|
|
|
{value:"PAR",text: "Paris"}, |
|
|
|
{value:"DWC",text:"AL Mohamed"}, |
|
|
|
{value: "PRG", text: "Prague - Letiště Václava Havla"}, |
|
|
|
{value: "PAR", text: "Paris"}, |
|
|
|
{value: "DWC", text: "Dubai, AL Mohamed"}, |
|
|
|
], |
|
|
|
typLetu:"Z", |
|
|
|
pocetOsob:0, |
|
|
|
maxOsob:9, |
|
|
|
trida:"", |
|
|
|
tridySeznam:[ |
|
|
|
{value:"ECO", text: "Ekonomická"}, |
|
|
|
{value:"BUS", text: "Obchodní"} |
|
|
|
typLetu: "Z", |
|
|
|
pocetOsob: 0, |
|
|
|
maxOsob: 9, |
|
|
|
trida: "", |
|
|
|
tridySeznam: [ |
|
|
|
{value: "ECO", text: "Ekonomická"}, |
|
|
|
{value: "BUS", text: "Obchodní"}, |
|
|
|
], |
|
|
|
sedadlaSeznam:[ |
|
|
|
{trida:"ECO", nazev:"E1"}, |
|
|
|
{trida:"ECO", nazev:"E2"}, |
|
|
|
{trida:"ECO", nazev:"E3"}, |
|
|
|
{trida:"ECO", nazev:"E4"}, |
|
|
|
{trida:"bus", nazev:"B1"}, |
|
|
|
{trida:"bus", nazev:"B2"}, |
|
|
|
{trida:"bus", nazev:"B3"}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
sedadlaSeznam: [ |
|
|
|
{trida: "ECO", nazev: "E1", vybrano:false}, |
|
|
|
{trida: "ECO", nazev: "E2", vybrano:false}, |
|
|
|
{trida: "ECO", nazev: "E3", vybrano:false}, |
|
|
|
{trida: "ECO", nazev: "E4", vybrano:false}, |
|
|
|
{trida: "BUS", nazev: "B1", vybrano:false}, |
|
|
|
{trida: "BUS", nazev: "B2", vybrano:false}, |
|
|
|
{trida: "BUS", nazev: "B3", vybrano:false}, |
|
|
|
], |
|
|
|
|
|
|
|
|
|
|
|
}; |
|
|
|
}, |
|
|
|
methods:{ |
|
|
|
nastavPocetOsob: function (prirustek) { |
|
|
|
this.pocetOsob+=prirustek |
|
|
|
if(this.pocetOsob<0){ |
|
|
|
this.pocetOsob=0 |
|
|
|
methods: { |
|
|
|
nastavPocetOsob: function(prirustek) { |
|
|
|
this.pocetOsob += prirustek |
|
|
|
if (this.pocetOsob < 0) { |
|
|
|
this.pocetOsob = 0 |
|
|
|
} |
|
|
|
if(this.pocetOsob>this.maxOsob){ |
|
|
|
this.pocetOsob=this.maxOsob |
|
|
|
if (this.pocetOsob > this.maxOsob) { |
|
|
|
this.pocetOsob = this.maxOsob |
|
|
|
} |
|
|
|
} |
|
|
|
if (this.pocetOsob< this.pocetVybranychSedadel()) { |
|
|
|
this.pocetOsob = this.pocetVybranychSedadel() |
|
|
|
} |
|
|
|
}, |
|
|
|
pocetVybranychSedadel: function () { |
|
|
|
let pocet = 0; |
|
|
|
for (let index = 0; index < this.sedadlaSeznam.length; index++) { |
|
|
|
const element = this.sedadlaSeznam[index]; |
|
|
|
if (element.vybrano == true) { |
|
|
|
pocet += 1 |
|
|
|
} |
|
|
|
} |
|
|
|
return pocet |
|
|
|
}, |
|
|
|
vyberSedadlo: function (obj) { |
|
|
|
if(this.trida!=""){ |
|
|
|
if (obj.vybrano == false) {if (this.pocetVybranychSedadel() < this.pocetOsob) { |
|
|
|
obj.vybrano = true |
|
|
|
} |
|
|
|
} |
|
|
|
else{ |
|
|
|
obj.vybrano = false |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
watch:{ |
|
|
|
trida: function () { |
|
|
|
for (let index = 0; index < this.sedadlaSeznam.length; index++) { |
|
|
|
const element = this.sedadlaSeznam[index]; |
|
|
|
element.vybrano = false; |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style> |
|
|
|
.neaktivniPocet{ |
|
|
|
cursor:default !important; |
|
|
|
color: gray !important; |
|
|
|
border-color: gray !important; |
|
|
|
.neaktivniPocet { |
|
|
|
cursor: default !important; |
|
|
|
color: gray !important; |
|
|
|
border-color: gray !important; |
|
|
|
} |
|
|
|
|
|
|
|
.neaktivniPocet:hover { |
|
|
|
background-color: transparent !important; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
.neaktivniPocet:hover{ |
|
|
|
background-color: transparent !important; |
|
|
|
} |
|
|
|
.neaktivniPocet:active, .neaktivniPocet:focus{ |
|
|
|
box-shadow: none !important; |
|
|
|
} |
|
|
|
.neaktivniPocet:active, |
|
|
|
.neaktivniPocet:focus { |
|
|
|
box-shadow: none !important; |
|
|
|
} |
|
|
|
</style> |
vit.tlusty
4 years ago