From 7aa854e1df5463e972da09199c1a355f0570d387 Mon Sep 17 00:00:00 2001
From: "vit.tlusty" <vitektlu@seznam.cz>
Date: Wed, 13 Oct 2021 09:25:54 +0200
Subject: [PATCH] hotovo

---
 src/App.vue | 213 ++++++++++++++++++++++++++++++----------------------
 1 file changed, 125 insertions(+), 88 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 10a8508..83f7620 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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 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 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>
-    
-<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>
   </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:hover{
-   background-color: transparent !important;
-}
-.neaktivniPocet:active, .neaktivniPocet:focus{
-box-shadow: none !important;
-}
-</style>
+  .neaktivniPocet {
+    cursor: default !important;
+    color: gray !important;
+    border-color: gray !important;
+  }
+
+  .neaktivniPocet:hover {
+    background-color: transparent !important;
+  }
+
+  .neaktivniPocet:active, 
+  .neaktivniPocet:focus {
+    box-shadow: none !important;
+  }
+</style>
\ No newline at end of file