sedadla + tridy

src/App.vue

@@ -4,16 +4,59 @@
   <div class="wrapper">
     <div class="col">
     <h2>Parametry letu</h2>
-    <select v-model="travelType" >
+    <p>
+      <select v-model="travelType" >
       <option value="" disabled>Vyberte z možností</option>
       <option v-for="(option, index) in TravelTypes" :key="index" value="option">{{ option.text }}</option>
     </select>
+    </p>
+    <input type="date">
+    <p>
+      <label for="inputPersonCount">Počet cestujících</label><br>
+      <input v-on:change="personCountChange()" v-model="personCount" type="number" id="inputPersonCount" min="1" max="">
+    </p>
+    <p>
+      <label for="inputClassType">Volba třídy</label><br>
+        <select v-model="classType" id="inputClassType">
+        <option value="" disabled>Vyberte z možností</option>
+        <option v-for="(option, index) in classTypes" :key="index" value="option">{{ option.text }}</option>
+      </select>
+    </p>
+    <div class="seatWrap">
+          <div class="seat" v-for="(seat, index) in seats" :key="index">
+            <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)">
+              {{ seat }}
+            </div>
+          </div>
+        </div>
+        <button v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button>
   </div>
     <div class="col">
       <h2>Objednávka</h2>
       <p v-if="travelType">
-         Typ Letu: {{ travelType.text }}
-      </p>
+         Typ Letu: 
+         <span style="text-transform: lowercase">
+          {{ travelType.text }}
+          </span>
+        </p>
+        <p>
+          Počet cestujícíh : {{ personCount }}
+        </p>
+        <p v-if="classType">
+          Třída: 
+            <span style="text-transform: lowercase">
+              {{ classType.text }}
+            </span>
+        </p>
+        <div v-if="chosenSeats.length">
+          Vybraná místa:
+          <div class="seat" v-for="seat in chosenSeats" :key="seat">
+            {{ seat }}
+          </div>
+        </div>
     </div>
   </div>
 </div>
@@ -26,13 +69,63 @@ export default{
     return{
       travelType:"",
       TravelTypes:[
-        { value: "R", text: "Zpáteční"},
-        { value: "O", text: "Jednosměrný"},
-      ]
+        { value: "R", text: "TwoWay"},
+        { value: "O", text: "OneWay"},
+      ],
+      personCount: 1,
+      classType: "",
+      classTypes:[
+        { value: "E", text: "Economy"},
+        { value: "E", text: "Business"},
+      ],
+      seats:[
+        "B1", "B2", "B3",
+        "E1", "E2", "E3",
+      ],
+      chosenSeats: []
+    }
+  },
+  methods:{
+    addSeatClick: function(seat){
+      if (this.chosenSeats.length < this.personCount){
+        this.chosenSeats.push(seat);
+      }
+      else{
+        alert("MAXIMÁLNÍ POČET SEDADEL DOSAŽEN")
+      }
+    },
+    personCountChange: function(){
+      let diff = this.personCount - this.chosenSeats.length;
+      if (diff < 0){
+        for (let i = 0; i < diff * -1; i++) {
+        this.chosenSeats.pop();
+        }
+      }
     }
   }
 }
 </script>
 
 <style>
+.wrapper{
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+.seat{
+  display: inline-block;
+  width: 30px;
+  text-align: center;
+  border: 1px solid grey;
+  margin: 2px;
+}
+
+.seat:hover{
+  cursor: pointer;
+  background-color: grey;
+}
+
+.seat .chosen{
+  background-color: lightgreen;
+}
 </style>