kalendar + sedadla

package-lock.json

@@ -3989,6 +3989,16 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "date-fns": {
+      "version": "2.17.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.17.0.tgz",
+      "integrity": "sha512-ZEhqxUtEZeGgg9eHNSOAJ8O9xqSgiJdrL0lzSSfMF54x6KXWJiOH/xntSJ9YomJPrYH/p08t6gWjGWq1SDJlSA=="
+    },
+    "date-fns-tz": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.1.1.tgz",
+      "integrity": "sha512-5PR604TlyvpiNXtvn+PZCcCazsI8fI1am3/aimNFN8CMqHQ0KRl+6hB46y4mDbB7bk3+caEx3qHhS7Ewac/FIg=="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -6913,8 +6923,7 @@
     "lodash": {
       "version": "4.17.20",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
-      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
-      "dev": true
+      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
     },
     "lodash.defaultsdeep": {
       "version": "4.6.1",
@@ -10787,6 +10796,17 @@
       "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
       "dev": true
     },
+    "v-calendar": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/v-calendar/-/v-calendar-2.2.3.tgz",
+      "integrity": "sha512-E4dByu3vDYtleIsZcciUJANpKn6zI0DCXzRsm6g3VsfV7Wpr49t+OQrrc6zVFtISardEUCabivzJOJ0NVdga/Q==",
+      "requires": {
+        "core-js": "^3.6.5",
+        "date-fns": "^2.8.1",
+        "date-fns-tz": "^1.0.12",
+        "lodash": "4.17.20"
+      }
+    },
     "v8-compile-cache": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.2.0.tgz",

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "v-calendar": "^2.2.3",
     "vue": "^2.6.11"
   },
   "devDependencies": {

src/App.vue

@@ -11,30 +11,36 @@
         </select>
         </p>
 
+        <v-date-picker v-model="departureDate" :min-date="new Date()" />
+
         <p>
           <label for="inputPersonCount">Počet cestujících</label><br>
-          <input v-model="personCount" type="number" id="inputPersonCount" min="1" max="10">
+          <input v-on:change="personCountChange()" v-model="personCount" type="number" id="inputPersonCount" min="1" max="10">
         </p>
         
         <p>
-          <label for="inputClassType">Volba třídy</label><br>
-          <select v-model="classType" id="inputClassType">
+          <label  for="inputClassType">Volba třídy</label><br>
+          <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 }}</option>
         </select>
         </p>
 
         <div class="seatWrap">
-          <div v-on:click="chosenSeats.push(seat)" class="seat" v-for="(seat, index) in seats" :key="index">
-            <div v-if="chosenSeats.indexOf(seat) >=0" class="chosen">
+          <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-if="seat.startsWith(classType.value)" v-on:click="addSeatClick(seat)">
               {{ seat }}
             </div>
-            <div v-else>
+            <div v-else class="disabled">
               {{ seat }}
             </div>
             
           </div>
         </div>
+        <button v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button>
 
       </div>
 
@@ -69,6 +75,11 @@
 </template>
 
 <script>
+import Vue from 'vue';
+import VCalendar from 'v-calendar';
+Vue.use(VCalendar, {});
+
+
 
 export default {
   name: 'App',
@@ -83,13 +94,34 @@ export default {
       classType: "",
       classTypes: [
         {value: "E", text: "Ekonomická"},
-        {válue: "B", text: "Byznys"}
+        {value: "B", text: "Byznys"}
       ],
       seats: [
         "B1", "B2", "B3",
         "E1", "E2", "E3", "E4", "E5" 
       ],
-      chosenSeats: []
+      chosenSeats: [],
+      departureDate: new Date()
+    }
+  },
+  methods: {
+    addSeatClick: function(seat) {
+      if (this.chosenSeats.length < this.personCount) {
+        this.chosenSeats.push(seat);
+      }
+      else {
+        alert("Všichni cestující již sedí!")
+      }
+      
+    },
+    personCountChange() {
+      let diff = this.personCount - this.chosenSeats.length
+      if (diff < 0) {
+        for (let i = diff; i < 0 ; i++) {
+          this.chosenSeats.pop() 
+          
+        }
+      }
     } 
   }
 }
@@ -109,10 +141,23 @@ export default {
     border: 1px solid grey;
   } 
 
-  .seat:hover{
+  .seat div:hover{
     cursor: pointer;
     background-color: lightgray;
   }
 
+  .seat .disabled{
+    color: lightgray;
+  }
+
+  .seat .disabled:hover{
+    cursor: default;
+    background-color: transparent;
+  }
+
+  .seat .chosen{
+    background-color: lightgreen;
+  }
+
 
 </style>