From d70066650289e102ab23ddaf9c2f036b19c119c1 Mon Sep 17 00:00:00 2001
From: "tomas.patolan" <sirkollin@seznam.cz>
Date: Fri, 12 Feb 2021 13:07:02 +0100
Subject: [PATCH] konec

---
 package-lock.json |  24 +++-
 package.json      |   1 +
 src/App.vue       | 350 ++++++++++++++++++++++++++--------------------
 3 files changed, 222 insertions(+), 153 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5312bc8..10f5345 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4001,6 +4001,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",
@@ -6924,8 +6934,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",
@@ -10798,6 +10807,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",
diff --git a/package.json b/package.json
index b372f5a..a13bda1 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "v-calendar": "^2.2.3",
     "vue": "^2.6.11"
   },
   "devDependencies": {
diff --git a/src/App.vue b/src/App.vue
index 6f5eea9..dd08763 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,163 +1,211 @@
-    <template>
-        <div id="app">
-            <h1>Letenka</h1>
-            <div class="wrapper">
-                <div class="col form">
-                    <h2>Parametry letu</h2>
-                    <form action="">
-                        <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-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">
+<template>
+    <div id="app">
+        <h1>Letenka</h1>
+        <div class="wrapper">
+            <div class="col form">
+                <h2>Parametry letu</h2>
+                <form action="">
+                    <p>
+                        <label for="">Třída: </label>
+                        <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>
-                        
-                        <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>
-                        <button v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button>
-                    </form>
-
-                </div>
-                <div class="col order">
-                    <h2>Objednávka</h2>
-                    <p v-if="travelType">
-                        Typ cesty: 
-                        <span style="text-transform: lowercase">
-                            {{ travelType.text }}
-                        </span>
+                            </option>
+                        </select>
                     </p>
+                    
+                    <!-- volba destinace -->
                     <p>
-                        Počet cestujích: {{ personCount}}
-                    </p>
-                    <p v-if="classType">
-                        Třída: 
-                        <span style="text-transform: lowercase">
-                            {{ classType.text }}
-                        </span>
+                        <label for="">Destinace: </label>
+                        <select v-model="travelDest">
+                            <option value="" disabled>Vyberte jednu možnost</option>
+                            <option v-for="(option, index) in travelDests" :key="index" :value="option">
+                                 {{ option.text }}
+                            </option>
+                        </select>
                     </p>
+                    <!-- datum odletu -->
+                    <div v-if="travelType.value == 'R'">
+                        <v-date-picker v-model="departureRangeDate" :min-date="new Date()" value="" is-range/>
+                    </div>
+                    <div v-else>
+                        <v-date-picker v-model="departureDate" :min-date="new Date()" />
+                    </div>
+                    <!-- datum příletu pokud zpáteční -->
+
 
-                    <div v-if="chosenSeats.length">
-                        Vybraná místa: 
-                        <div class="seat" v-for="seat in chosenSeats" :key="seat">
-                            {{ seat }}
+                    <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-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 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>
+                    <button v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button>
+                </form>
+
+            </div>
+            <div>
+                <div class="col order">
+                <h2>Objednávka</h2>
+                <p v-if="travelType">
+                    Typ cesty: 
+                    <span>
+                        {{ travelType.text }}
+                    </span>
+                </p>
+                <p>
+                    Počet cestujích: {{ personCount }}
+                </p>
+                <p v-if="travelDest">
+                    Destinace: {{ travelDest.text }}
+                </p>
+                <p v-if="travelType.value == 'R'">
+                    Datum odletu:
+                    {{  departureRangeDate.start }} <br>
+                    Datum příletu:
+                    {{  departureRangeDate.end }}
+                </p>
+                <p v-if="classType">
+                    Třída: 
+                    <span>
+                        {{ 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á" },
-              ],
-              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;
-              // diff je záporné číslo
-              for (let i = diff; i < 0; i++) {
-                  this.chosenSeats.pop();       
-              }
-          }
-      }
+    </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import VCalendar from 'v-calendar';
+
+// Use v-calendar & v-date-picker components
+Vue.use(VCalendar, {});
+
+
+
+export default {
+    name: 'App',
+    data: function() {
+        const date = new Date();
+        const year = date.getFullYear();
+        const month = date.getMonth();
+        return {
+            travelType: "",
+            travelTypes: [
+                { value: "R", text: "TwoWay" },
+                { value: "O", text: "OneWay" },
+            ],
+            personCount: 1,
+            classType: "",
+            classTypes: [
+                { value: "E", text: "Ekonomická" },
+                { value: "B", text: "Byznys" }
+            ],
+            seats: [
+                "B1", "B2", "B3", 
+                "E1", "E2", "E3", "E4", "E5"
+            ],
+            chosenSeats: [],
+            travelDest: "",
+            travelDests:[
+                { value:"Pg", text:"Prague"},
+                { value:"Ps", text:"Paris"},
+                { value:"LA", text:"Los Angeles"},
+                { value:"Pe", text:"Peking"},
+                { value:"T", text:"Tokio"},
+            ],
+            departureDate: new Date(year, month, 12),
+            departureRangeDate: {
+                start: new Date(year, month, 12)
+            },
+        }
+    },
+    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;
+            // diff je záporné číslo
+            for (let i = diff; i < 0; i++) {
+                this.chosenSeats.pop();       
+            }
+        }
+    }
+}
+</script>
+
+<style>
+    .wrapper {
+    background-color: lightgreen;
+    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 .disabled {
+        color: lightgray;
     }
-    </script>
-
-    <style>
-      .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 .disabled {
-          color: lightgray;
-      }
-
-      .seat .disabled:hover {
-          cursor: default;
-          background-color: transparent;
-      }
-
-      .seat .chosen {
-          background-color: lightgreen;
-      }
-
-    </style>
\ No newline at end of file
+
+    .seat .disabled:hover {
+        cursor: default;
+        background-color: transparent;
+    }
+
+    .seat .chosen {
+        background-color: lightgreen;
+    }
+
+</style>
\ No newline at end of file