vue

README.md

@@ -22,3 +22,11 @@ npm run lint
 
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
+
+# instalace vue + projekt
+1 vytvoření složky
+2 npm install @vue/cli
+3 node_modules\.bin\vue create název_projektu
+4 Zvolíme [Vue 2]
+5 cd název_projektu\
+6 npm run serve

src/App.vue

@@ -68,22 +68,9 @@
                                     </option>
                                 </select>
                             </p>
+                             <seat v-model="chosenSeats" :seats="seats" :classType = "classType" :personCount= "PersonCount" />
                             
-                            <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-if="seat.startsWith(classType.value)" v-on:click="addSeatClick(seat)">
-                                        {{ seat }}
-                                    </div>
-                                    <div v-else class="disabled">
-                                        {{ seat }}
-                                    </div>
-                                    <img class="obr" src="./assets/sedadlo.png" alt="">
                             
-                                </div>
-                            </div>
                             
                             <br>
                             <button class="vyber" v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button>
@@ -128,7 +115,7 @@
                                 <div class="sedadlo">
                                     <div class="seat" v-for="seat in chosenSeats" :key="seat">
                                         {{ seat }}
-                                        <img class="obr" src="./assets/sedadlo.png" alt="">
+                                        
                                     </div>
                                 </div>
                             </div>
@@ -136,6 +123,7 @@
                             
                             
 
+                            
                         </div>
                     </div>
                         
@@ -156,9 +144,12 @@
 import Vue from 'vue';
 
 import VCalendar from 'v-calendar';
+import seat from './components/seat';
+
 Vue.use(VCalendar, {});
 
 export default {
+  components: { seat },
   name: 'App',
   data: function() {
       return {

src/components/seat.vue

@@ -0,0 +1,90 @@
+<template>
+ <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-if="seat.startsWith(classType.value)" v-on:click="addSeatClick(seat)">
+            {{ seat }}
+         </div>
+         <div v-else class="disabled">
+            {{ seat }}
+         </div>
+           
+                                        
+    </div>
+ </div>
+  
+
+</template>
+
+<script>
+export default {
+    name: "seat",
+    props:[
+        "seats",
+        "classType",
+        "personCount",
+        "value",
+        
+    ],
+    data: function() {
+        return {
+            chosenSeats: this.value 
+        }
+
+    },
+    methods: {
+         methods: {
+      addSeatClick: function(seat) {
+          if (this.chosenSeats.length < this.personCount) {
+              this.chosenSeats.push(seat);
+              this.$emit("input", this.chosenSeats);
+          
+          }
+          else {
+              alert("Všichni cestující již sedí!");
+          }
+      },
+      watch: {
+          value: function(value){
+              this.chosenSeats = value;
+          }
+      }
+    }
+    }
+
+}
+</script>
+
+<style>
+.seat {
+      display: inline-block;
+      width: 50px;
+      height: 50px;
+      text-align: center;
+      border: 1px solid gray;
+      margin: 2px;
+      background-color: rgb(62, 156, 53);
+      
+  }
+
+  .seat div:hover {
+      cursor: pointer;
+      background-color: lightgray;
+  }
+
+  .seat .disabled {
+      color: rgb(255, 255, 255);
+  }
+
+  .seat .disabled:hover {
+      cursor: default;
+      background-color: transparent;
+  }
+
+  .seat .chosen {
+      background-color: lightgreen;
+  }
+
+</style>