finalni upravy

src/App.vue

@@ -3,6 +3,7 @@
         <h1>Letenka</h1>
         <div class="wrapper">
             <div class="col form">
+                <div class="wrapper2">
                     <h2>Parametry letu</h2>
                         <form action="">
                             <p>
@@ -50,24 +51,11 @@
                                     </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-if="seat.startsWith(classType.value)" v-on:click="addSeatClick(seat)">
-                                {{ seat }}
-                            </div>
-                            <div v-else class="disabled">
-                                {{ seat }}
-                            </div>
-                            
-                        </div>
-                    </div>
+                            <Seat-picker v-model= "chosenSeats" :seats= "seats" :classType= "classType" :personCount= "personCount" />
                             <button v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button>
-                </form>
                             
+                        </form>
+                </div>
             </div>
             <div>
                 <div class="col order">
@@ -86,9 +74,13 @@
                 </p>
                 <p v-if="travelType.value == 'R'">
                     Datum odletu:
-                    {{  departureRangeDate.start }} <br>
+                    {{  departureRangeDate.start.getDate() }}. {{  departureRangeDate.start.getMonth() }}. {{  departureRangeDate.start.getFullYear() }} <br>
                     Datum příletu:
-                    {{  departureRangeDate.end }}
+                    {{  departureRangeDate.end }} <br>
+                </p>
+                <p v-else-if="travelType.value == 'O'">
+                    Datum odletu:
+                    {{  departureDate.getDate() }}. {{  departureDate.start.getMonth() }}. {{  departureDate.start.getFullYear() }} <br>
                 </p>
                 <p v-if="classType">
                     Třída: 
@@ -112,6 +104,7 @@
 <script>
 import Vue from 'vue';
 import VCalendar from 'v-calendar';
+import SeatPicker from './components/SeatPicker'
 
 // Use v-calendar & v-date-picker components
 Vue.use(VCalendar, {});
@@ -120,10 +113,10 @@ Vue.use(VCalendar, {});
 
 export default {
     name: 'App',
+    components : {
+        SeatPicker,
+    },
     data: function() {
-        const date = new Date();
-        const year = date.getFullYear();
-        const month = date.getMonth();
         return {
             travelType: "",
             travelTypes: [
@@ -149,9 +142,9 @@ export default {
                 { value:"Pe", text:"Peking"},
                 { value:"T", text:"Tokio"},
             ],
-            departureDate: new Date(year, month, 12),
+            departureDate: new Date(),
             departureRangeDate: {
-                start: new Date(year, month, 12)
+                start: new Date()
             },
         }
     },
@@ -176,8 +169,13 @@ export default {
 </script>
 
 <style>
+    html{
+        background-color: lightskyblue;
+    }
     .wrapper {
-    background-color: lightgreen;
+    box-shadow: 10px 10px 5px grey;
+    padding: 10px;
+    background-color: white;
     display: grid;
     grid-template-columns: 1fr 1fr;
     }

src/components/SeatPicker.vue

@@ -0,0 +1,46 @@
+<template>
+    <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-if="seat.startsWith(classType.value)" v-on:click="addSeatClick(seat)">
+                {{ seat }}
+            </div>
+            <div v-else class="disabled">
+                {{ seat }}
+            </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+
+
+<script>
+export default {
+    props: ["seats", "classType", "personCount", "value" ],
+    data: function(){
+        return{
+            chosenSeats: this.value
+        }
+    },
+    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í!");
+            }
+        },
+    }
+}
+</script>
+
+
+<style scoped>
+
+</style>