sedadla

src/App.vue

@@ -33,9 +33,29 @@
           </option>
         </select>
 
-        <button v-on:click="pocetOsob -= 1" class="btn btn-outline-primary">-</button>
-        {{ pocetOsob }}
-        <button v-on:click="pocetOsob += 1" class="btn btn-outline-primary">+</button>
+        <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-for="obj, i in sedadlaSeznam" :key="i" class="btn" v-bind:class="{'btn-primary': obj.trida == trida, neaktivniPocet: obj.trida != trida}">
+            {{ obj.nazev }}
+          </button>
+        </div>
+        
       </div>
     </div>
   </div>
@@ -55,10 +75,50 @@ 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>