You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
587 lines
14 KiB
587 lines
14 KiB
|
|
<template>
|
|
<div id="app">
|
|
<div class="hlava"><h1>Letenka</h1></div>
|
|
<div class="wrapper">
|
|
|
|
<div class="col1">
|
|
<div class="hlavni">
|
|
<div class="hlavni2">
|
|
<br>
|
|
|
|
<h2>Parametry letu</h2>
|
|
<p>
|
|
Tip cesty
|
|
<br>
|
|
|
|
<select class="vyber" v-model="travelType"> <!-- načtení výběru do travelType -->
|
|
|
|
<option value="" disabled>Vyberte jednu možnost</option> <!-- mrtvý výběr (je vidět,ale nejde vybrat) -->
|
|
<option v-for="(option, index) in travelTypes" :key="index" :value="option"> <!-- vypsání textu z travelTypes (option je jeden řádek v datech) -->
|
|
{{ option.text }}
|
|
</option>
|
|
</select>
|
|
</p>
|
|
|
|
|
|
<!-- volba destinace -->
|
|
<p>
|
|
Destinace
|
|
<br>
|
|
<select class="vyber" v-model="travelDestinaction">
|
|
<option value="" disabled>Vyberte jednu možnost</option>
|
|
<option v-for="(option, index) in travelDestinactions" :key="index" :value="option">
|
|
{{ option.text }}
|
|
</option>
|
|
</select>
|
|
</p>
|
|
|
|
|
|
<!-- datum odletu -->
|
|
|
|
|
|
|
|
<div v-if="travelType.value == 'O'" class="input-group">
|
|
<label for="inputDepartureDate"></label>
|
|
<p>Označte datum odletu</p>
|
|
<v-date-picker v-model="departureRangeDate" :min-date="new Date()" value="" id=""/>
|
|
</div>
|
|
<div v-else class="input-group">
|
|
<label for="inputDepartureRangeDate"> Označte datum příletu a odletu</label>
|
|
<v-date-picker v-model="departureRangeDate" :min-date="new Date()" is-range />
|
|
<!-- datum příletu pokud zpáteční -->
|
|
</div>
|
|
</div>
|
|
<div class="hlavni2">
|
|
<p>
|
|
<label for="inputPersonCount">Počet cestujících</label><br>
|
|
<!-- <input v-model="personCount" type="number" id="inputPersonCount" min="1" max="3"> výběr počtu cestujícich -->
|
|
<input class="vyber1" v-on:change="personCountChange()" v-model="personCount" type="number" id="inputPersonCount" min="1" max="3">
|
|
</p>
|
|
|
|
<!-- volba třídy E, B -->
|
|
<p>
|
|
<label for="inputClassType">Volba třídy</label><br>
|
|
<select class="vyber" 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>
|
|
<seat v-model="chosenSeats" :seats="seats" :classType = "classType" :personCount= "PersonCount" />
|
|
|
|
|
|
|
|
<br>
|
|
<button class="vyber" v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col">
|
|
<div class="hlavni1">
|
|
|
|
|
|
<div class="hlavni2">
|
|
<img class="foto" src="./assets/let.png" alt="">
|
|
<h2>Objednávka</h2>
|
|
<p v-if="travelType">
|
|
Typ cesty:
|
|
<span style="text-transform: lowercase"> <!-- vypsání výběru -->
|
|
{{ travelType.text }}
|
|
</span>
|
|
</p>
|
|
<p v-if="travelDestinaction">
|
|
Cílová destinace
|
|
<span style="text-transform: lowercase">
|
|
{{ travelDestinaction.text }}
|
|
</span>
|
|
</p>
|
|
<p>
|
|
Počet cestujích: {{ personCount}} <!-- vypsání počtu cestujích -->
|
|
</p>
|
|
<p v-if="classType">
|
|
Třída:
|
|
<span style="text-transform: lowercase">
|
|
{{ classType.text }}
|
|
</span>
|
|
</p>
|
|
|
|
<div v-if="chosenSeats.length">
|
|
|
|
Vybraná místa:
|
|
<div class="sedadlo"> <!-- Vypíše vybraná sedadla -->
|
|
<div class="seat" v-for="seat in chosenSeats" :key="seat">
|
|
{{ seat }}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
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 {
|
|
travelDestinaction: "",
|
|
travelDestinactions: [
|
|
{ value: "P", text: "Paris" }, /* označení a s ním svázaný text */
|
|
{ value: "L", text: "London" },
|
|
],
|
|
|
|
|
|
travelType: "",
|
|
travelTypes: [
|
|
{ value: "R", text: "Zpáteční" },
|
|
{ value: "O", text: "Jednosměrná" },
|
|
],
|
|
personCount: 1, /* minimální počet cestujicich */
|
|
|
|
classType: "",
|
|
classTypes: [
|
|
{ value: "E", text: "Ekonomi" },
|
|
{ value: "B", text: "Business" },
|
|
{ value: "F", text: "First" }
|
|
],
|
|
seats: [ /* definuji sedadla */
|
|
"F1", "F2", "F3",
|
|
"B1", "B2", "B3",
|
|
"E1", "E2", "E3", "E4", "E5", "E6",
|
|
],
|
|
chosenSeats: [],
|
|
departuredate: new Date(),
|
|
departurerangedate: {
|
|
start: new Date(),
|
|
end: 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: function() {
|
|
let diff = this.personCount - this.chosenSeats.length;
|
|
// diff je záporné číslo1
|
|
for (let i = diff; i < 0; i++) {
|
|
this.chosenSeats.pop();
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.vyber1{
|
|
background-color: #0563af;
|
|
width: 158px;
|
|
padding: 12px;
|
|
border: none;
|
|
color: white;
|
|
}
|
|
|
|
|
|
.vyber{
|
|
background-color: #0563af;
|
|
padding: 12px;
|
|
border: none;
|
|
color: white;
|
|
}
|
|
.kalen{
|
|
background-color: #0563af;
|
|
color: white;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wrapper {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
|
|
}
|
|
|
|
.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;
|
|
}
|
|
.col{
|
|
width: 90%;
|
|
background-color: rgb(255, 255, 255);
|
|
opacity: 0.99;
|
|
}
|
|
|
|
.hlavni{
|
|
width: 50%;
|
|
margin: 0 auto;
|
|
background-color: white;
|
|
|
|
}
|
|
.hlava{
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
#app{
|
|
background-image: url("./assets/leta.jpeg");
|
|
}
|
|
.obr{
|
|
width: 30px;
|
|
}
|
|
h1,h2,h3,p {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
.druha{
|
|
width: 30%;
|
|
float: left;
|
|
|
|
}
|
|
.col1{
|
|
width: 100%;
|
|
}
|
|
.hlavni2{
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
|
|
}
|
|
.foto{
|
|
float: right;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
@media (max-width: 1200px) {
|
|
.wrapper {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
|
|
}
|
|
|
|
.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;
|
|
}
|
|
.col{
|
|
width: 80%;
|
|
background-color: rgb(255, 255, 255);
|
|
opacity: 0.99;
|
|
}
|
|
|
|
.hlavni{
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
background-color: white;
|
|
|
|
}
|
|
.hlava{
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
#app{
|
|
background-image: url("./assets/leta.jpeg");
|
|
}
|
|
.obr{
|
|
width: 30px;
|
|
}
|
|
h1,h2,h3,p {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
.druha{
|
|
width: 30%;
|
|
float: left;
|
|
|
|
}
|
|
.col1{
|
|
width: 100%;
|
|
}
|
|
.hlavni2{
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
}
|
|
.foto{
|
|
float: right;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
@media (max-width: 800px) {
|
|
.wrapper {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
|
|
}
|
|
|
|
.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;
|
|
}
|
|
.col{
|
|
width: 80%;
|
|
background-color: rgb(255, 255, 255);
|
|
opacity: 0.99;
|
|
min-height: 100px;
|
|
|
|
}
|
|
|
|
.hlavni{
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
background-color: white;
|
|
|
|
}
|
|
.hlava{
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
#app{
|
|
background-image: url("./assets/leta.jpeg");
|
|
}
|
|
.obr{
|
|
width: 30px;
|
|
}
|
|
h1,h2,h3,p {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
.druha{
|
|
width: 30%;
|
|
float: left;
|
|
|
|
}
|
|
.col1{
|
|
width: 80%;
|
|
background-color: rgb(255, 255, 255);
|
|
opacity: 0.99;
|
|
|
|
}
|
|
.hlavni2{
|
|
width: 50%;
|
|
margin: 0 auto;
|
|
background-color: white;
|
|
|
|
}
|
|
.foto{
|
|
float: right;
|
|
width: 100%;
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
@media (max-width: 500px) {
|
|
|
|
.wrapper {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
|
|
}
|
|
|
|
.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;
|
|
}
|
|
.col{
|
|
width: 100%;
|
|
background-color: rgb(255, 255, 255);
|
|
opacity: 0.99;
|
|
min-height: 100px;
|
|
|
|
}
|
|
|
|
.hlavni{
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
background-color: white;
|
|
|
|
}
|
|
.hlava{
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
#app{
|
|
background-image: url("./assets/leta.jpeg");
|
|
}
|
|
.obr{
|
|
width: 30px;
|
|
}
|
|
h1,h2,h3,p {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
.druha{
|
|
width: 30%;
|
|
float: left;
|
|
|
|
}
|
|
.col1{
|
|
width: 100%;
|
|
background-color: rgb(255, 255, 255);
|
|
opacity: 0.99;
|
|
|
|
}
|
|
.hlavni2{
|
|
width: 50%;
|
|
margin: 0 auto;
|
|
background-color: white;
|
|
|
|
}
|
|
.foto{
|
|
float: right;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|