sedadla dokončení

README.md

@@ -1,4 +1,4 @@
-# letenka
+# Letenka
 
 ## Project setup
 ```
@@ -22,3 +22,69 @@ npm run lint
 
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
+
+
+## Teorie
+
+### data
+Slouží pro uchování informací ať už z pohledu uživatele, např. zvolené sedadlo nebo počet osob. Tak i z pohledu aplikace, např. maximální počet osob, seznam sedadel nebo letišť.
+
+Sekce data se zapisuje:
+
+    data: () => {
+        return {
+            mojeData: 123,
+            neboJinaData: "textový řetězec",
+        }
+    }
+
+### methods
+Jde prakticky o funkce, které lze volat odkudkoli v rámci komponmenty. Jak ze šablony (např. nastavPocetOsob), tak i z jiných metod (např. pocetVybranychSedadel). 
+
+Sekce methods se zapisuje:
+
+    methods: {
+        mojeFunkce: function() { /* kód funkce */ },
+        dalsiSpecialniFunkce: function() { /* kód funkce */ },
+    }
+
+V metodách se k datům přistupuje přes klíčové slovo this. Např.
+
+    this.mojeData
+
+
+### watch
+Hlídače mají funkci sledování dat (ze sekce data), 
+přičemž dojde-li ke změně hodnoty v datech, zavolá se odpovídající funkce watcheru.
+
+Sekce watch se zapisuje:
+
+    watch: {
+        nazevData: function() { },
+    }
+
+### Šablony
+
+#### výpis dat do HTML
+Pomocí dvojitých složených závorek:
+
+    <p>{{ mojeData }}</p>
+
+#### v-model
+Technika, která se používá při práci s formulářovými poli (input, select, ...).
+Jako parametr se zadaji data, do kterých se bude ukládat uživatelem zvolená/zadaná hodnota.
+
+    <select v-model="mojeData"></select>
+
+V sekci data je tedy třeba definovat mojeData.
+
+#### v-for
+Možno cyklicky vypsat html element(y) podle seznam (pole) v Javascriptu.
+
+#### v-on:click
+Událost kliknutí na element uživatelem.
+
+#### v-bind:class
+Podmíněné vložení/odebrání CSS třídy pro daný element.
+
+

src/App.vue

@@ -51,7 +51,11 @@
 
         <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, neaktivniPocet: obj.trida != trida}">
+          <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>
@@ -82,15 +86,16 @@ export default {
         {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"},
+        {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) {
@@ -101,6 +106,42 @@ export default {
       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 != "") {
+        // sedadlo nebylo dosud vybráno = false
+        if (obj.vybrano == false) {
+          // omezení možnosti výběru dle počtu osob
+          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;
+      }
     },
   },
 };