funkcni verze

public/style.css

@@ -2,7 +2,3 @@
     width: 20rem;
     left: 225px;
 }
-.col1 {
-    background-image: url(assets/objednavka.png);
-    background-color: #cccccc;
-}

src/App.vue

@@ -1,4 +1,6 @@
-<template>
+Letenka
+
+ <template>
   <div id="app">
     <h1 style="text-align: center;">Letenka</h1>
     <div class="wrapper">
@@ -32,7 +34,7 @@
             </div>
             <div v-if="travelType.value == 'O'">
               <label for="inputdeparatureDate">vyberte datum odletu: </label>
-              <v-date-picker v-model="deparatureDate" :min-date="new Date()" id="inputdeperatureDate" />
+              <v-date-picker v-model="departureDate" :min-date="new Date()" id="inputdeperatureDate" />
             </div>
             <div v-else>
               <label for="inputdeparatureRangeDate">vyberte datum odletu: </label>
@@ -44,17 +46,7 @@
                 <input v-on:change="personCountChange()" v-model="personCount" type="number" id="inputPersonCount" min="1" max="10">
               </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-if="seat.startsWith(classType.value)" v-on:click="addSeatClick(seat)">
-                  {{ seat }}
-                </div>
-                <div v-else class="disabled">
-                  {{ seat }}
-                </div>
-              </div>
-            </div>
+            <SeatPicker v-model="chosenSeats" :seats="seats" :classType="classType" :personCount="personCount" />
             <button v-on:klick="chosenSeats=[]">Odebrat všechna sedadla</button>
           </div>
           </div>
@@ -77,20 +69,24 @@
             <p v-if="classType">
               Třída: <span style="text-transform: lowercase;">{{ classType.text }}</span>
             </p>
-            <p>
+            <p v-if="travelType.value == 'O'">
               Datum odletu: 
-              {{ departureDate.start }}
+              {{ departureDate.getDate() }}. {{ departureDate.getMonth() + 1 }}. {{ departureDate.getFullYear() }}
             </p>
-            <p>
-              Datum příletu: 
-              <span style="text-transform: uppercase;">{{ deparatureRangeDate.end }}</span>
+            <p v-else-if="travelType.value == 'R'">
+              Datum odletu: 
+              {{ deparatureRangeDate.start.getDate() }}. {{ deparatureRangeDate.start.getMonth() + 1 }}. {{ deparatureRangeDate.start.getFullYear() }}
+
+              Datum příletu:
+              {{ deparatureRangeDate.end.getDate() }}. {{ deparatureRangeDate.end.getMonth() + 1 }}. {{ deparatureRangeDate.end.getFullYear() }}
             </p>
             <p>
               Počet cestujcích: {{ personCount }}
             </p>
-            <div v-if="chosenSeats.length">
-              Vybraná místa:
-              <div class="seat" v-for="seat in chosenSeats" :key="seat">{{ seat }}</div>
+            
+              <div v-if="chosenSeats.length">
+                  Vybraná místa:
+            <div class="seat" v-for="seat in chosenSeats" :key="seat">{{ seat }}</div>
             </div>
           </div>
         </div>     
@@ -102,12 +98,19 @@
 <script>
 import Vue from 'vue';
 import VCalendar from 'v-calendar';
+import SeatPicker from './components/SeatPicker';
 
 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: [
@@ -137,21 +140,14 @@ export default {
 
       departureDate: new Date(),
       deparatureRangeDate: {
-        start: new Date(),
-        end: new Date(),
+        start: new Date(year, month, 12),
+        end: new Date(year, month, 12),
       },
 
     }
   },
   methods: {
-    addSeatClick: function(seat) {
-      if (this.chosenSeats.length < this.personCount){
-          this.chosenSeats.push(seat);
-      }
-      else {
-        alert("Všichni cestujcí již sedí!");
-      }
-    },
+
     personCountChange: function() {
       let diff = this.personCount - this.chosenSeats.length;
         //diff je záporné číslo
@@ -165,36 +161,13 @@ export default {
 </script>
 
 <style>
-  .wrapper {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    text-align: center;
-  }
-  .seat {
-    display: inline-block;
-    width: 30px;
-    border: 1px solid gray;
-    margin: 2px;
-  }
-  .seat div:hover {
-    cursor: pointer;
-    background-color: lightgray;
-  }
 
-  .seat .disabled {
-    color: lightgray;
-  }
-
-  .seat .disabled:hover {
-    cursor: default;
-    background-color: transparent;
-  }
+.card {
+    margin-left: 100px;
+}
 
-  .seat .chosen {
-    background-color: lightgreen;
-  }
 
-  @media only screen and (max-width: 1000px;) {
+  @media only screen and (max-width: 1000px) {
     .wrapper {
       display: block;
     }

src/components/SeatPicker.vue

@@ -0,0 +1,74 @@
+<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 {
+    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 cestujcí již sedí!");
+        }
+    },
+    },
+    watch: {
+        value: function(value) {
+            this.chosenSeats = value;
+        }
+    }
+}
+</script>
+
+<style>
+.wrapper {
+display: grid;
+grid-template-columns: 1fr 1fr;
+text-align: center;
+}
+.seat {
+display: inline-block;
+width: 30px;
+border: 1px solid gray;
+margin: 2px;
+}
+.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>