trida

src/App.vue

@@ -25,11 +25,23 @@
     <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>
-    <button class="btn btn-outline-primary" v-on:click="pocetOsob-=1">-</button>
+    <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="pocetOsob+=1">+</button>
-
+    <button class="btn btn-outline-primary" v-on:click="nastavPocetOsob(1)" 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-for="obj, i in sedadlaSeznam" :key="i" class="¨btn" v-bind:class="{'btn-primary':obj.trida==trida}">{{obj.nazev}}</button>
+    </div>
 
   </div>
   </div>
@@ -50,10 +62,53 @@ export default {
       ],
       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"},
+       
+
+
+      ],
+      
+
     };
   },
+  methods:{
+    nastavPocetOsob: function (prirustek) {
+      this.pocetOsob+=prirustek
+      if(this.pocetOsob<0){
+        this.pocetOsob=0
+      }
+      if(this.pocetOsob>this.maxOsob){
+        this.pocetOsob=this.maxOsob
+      }
+    }
+  },
 };
 </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>