uprava 2

4 years ago · a12b803af2
1 changed files with 139 additions and 37 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -1,49 +1,151 @@
 <template>
-  <div id="app">
-    <h1>Letenka</h1>
-    <div class="wrapper"></div>
-    <div class="col">
-      <h2>Parametry letu</h2>
-      <select v-model="travelType" >
-        <option value="" disabled>Vyberte jednu požnost</option>
-        <option v-for="(option, index) in travelTypes" :key="index" :value="option">
-          {{option.text}}
-        </option>
-        
-      </select>
-    </div>
-    <div class="col">
-      <h2>Objednávka</h2>
-      <p v-if="travelType">
-        Typ cesty: 
-        <span style="text-transform:lowercase">{{travelType.text}}
-          </span> 
-      </p>
-    </div>
+    <div id="app">
+        <h1>Letenka</h1>
+        <div class="wrapper">
+            <div class="col">
+                <h2>Parametry letu</h2>
+                <p>
+                    <select v-model="travelType">
+                        <option value="" disabled>Vyberte jednu možnost</option>
+                        <option v-for="(option, index) in travelTypes" :key="index" :value="option">
+                            {{ option.text }}
+                        </option>
+                    </select>
+                </p>
+                
+                <!-- volba destinace -->
+                <!-- datum odletu -->
+                <input type="date">
+                <!-- datum příletu pokud zpáteční -->
+
+
+                <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="10">
+                </p>
                
+                <!-- volba třídy E, B -->
+                <p>
+                    <label for="inputClassType">Volba třídy</label><br>
+                    <select 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 }}
+                        </option>
+                    </select>
+                </p>
                
-  </div>
+                <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 cesty: 
+                    <span style="text-transform: lowercase">
+                        {{ travelType.text }}
+                    </span>
+                </p>
+                <p>
+                    Počet cestujích: {{ 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>
 </template>

 <script>

 export default {
-  name: "App",
-  data: function(){
-    return {
-      travelType: "",
-      travelTypes: [
-        { value: "R", text: "Zpáteční"},
-        { value: "O", text: "Jednosměrná"},
-      ]
-    }
+  name: 'App',
+  data: function() {
+      return {
+          travelType: "",
+          travelTypes: [
+              { value: "R", text: "Zpáteční" },
+              { value: "O", text: "Jednosměrná" },
+          ],
+          personCount: 1,
+          classType: "",
+          classTypes: [
+              { value: "E", text: "Ekonomická" },
+              { value: "B", text: "Byznys" }
+          ],
+          seats: [
+              "B1", "B2", "B3", 
+              "E1", "E2", "E3", "E4", "E5"
+          ],
+          chosenSeats: []
+      }
+  },
+  methods: {
+      addSeatClick: function(seat) {
+          if (this.chosenSeats.length < this.personCount) {
+              this.chosenSeats.push(seat);
+          }
+          else {
+              alert("Všichni cestující již sedí!");
+          }
+      },
+      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();       
+              }
+          }
+      }
  }
 }
 </script>

 <style>
-.wrapper {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
+  .wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .seat {
+      display: inline-block;
+      width: 30px;
+      text-align: center;
+      border: 1px solid gray;
+      margin: 2px;
+  }
+
+  .seat div:hover {
+      cursor: pointer;
+      background-color: lightgray;
+  }
+
+  .seat .chosen {
+      background-color: lightgreen;
+  }
+
 </style>