uprava vyberu tridy

src/App.vue

@@ -27,7 +27,7 @@
                 <!-- volba třídy E, B -->
                 <p>
                     <label for="inputClassType">Volba třídy</label><br>
-                    <select v-model="classType" id="inputClassType">
+                    <select v-on:change="chosenSeats = []" v-model="classType" id="inputClassType">
                         <option value="" disabled>Vyberte jednu možnost</option>
                         <option v-for="(option, index) in classTypes" :key="index" :value="option">
                             {{ option.text }}
@@ -40,7 +40,10 @@
                         <div v-if="chosenSeats.indexOf(seat) >= 0" v-on:click="chosenSeats.splice(chosenSeats.indexOf(seat), 1)" class="chosen">
                             {{ seat }}
                         </div>
-                        <div v-else v-on:click="addSeatClick(seat)">
+                        <div v-else-if="seat.startsWith(classType.value)" v-on:click="addSeatClick(seat)">
+                            {{ seat }}
+                        </div>
+                        <div v-else class="disabled">
                             {{ seat }}
                         </div>
                         
@@ -114,12 +117,11 @@ export default {
       },
       personCountChange: function() {
           let diff = this.personCount - this.chosenSeats.length;
-          if (diff < 0) {
               // diff je záporné číslo
               for (let i = diff; i < 0; i++) {
                   this.chosenSeats.pop();       
               }
-          }
+          
       }
   }
 }
@@ -144,6 +146,15 @@ export default {
       background-color: lightgray;
   }
 
+  .seat .disabled {
+      color: brown;
+  }
+
+  .seat .disabled:hover {
+      cursor: default;
+      background-color: transparent;
+  }
+
   .seat .chosen {
       background-color: lightgreen;
   }