hotovo

src/App.vue

@@ -1,46 +1,54 @@
 <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">
+          <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">
+          <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>
+        <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>
+          <option v-for="obj, i in letisteSeznam" :key="i" :value="obj.value">
+            {{ obj.text }}
+          </option>
         </select>
-    
-    <label for="letisteKam" class="form-label">Kam:</label>
+        <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>
+          <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>
+            <button v-on:click="nastavPocetOsob(-1)" class="btn btn-outline-primary" 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>
+            <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>
+          <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>
+          <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>
@@ -56,9 +64,9 @@ export default {
       letisteZ: "",
       letisteKam: "",
       letisteSeznam: [
-        {value:"PRG",text:"Letiště Václava Havla"},
+        {value: "PRG", text: "Prague - Letiště Václava Havla"},
         {value: "PAR", text: "Paris"},
-        {value:"DWC",text:"AL Mohamed"},
+        {value: "DWC", text: "Dubai, AL Mohamed"},
       ],
       typLetu: "Z",
       pocetOsob: 0,
@@ -66,22 +74,17 @@ export default {
       trida: "",
       tridySeznam: [
         {value: "ECO", text: "Ekonomická"},
-        {value:"BUS", text: "Obchodní"}
+        {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: {
@@ -93,8 +96,40 @@ 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!=""){
+        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>
 
@@ -103,12 +138,14 @@ export default {
     cursor: default !important;
     color: gray !important;
     border-color: gray !important;
- 
   }
+
   .neaktivniPocet:hover {
     background-color: transparent !important;
   }
-.neaktivniPocet:active, .neaktivniPocet:focus{
+
+  .neaktivniPocet:active, 
+  .neaktivniPocet:focus {
     box-shadow: none !important;
   }
 </style>