petr
4 years ago
commit
dd3cea445e
22 changed files with 780 additions and 0 deletions
@ -0,0 +1 @@ |
|||||
|
node_modules |
||||
@ -0,0 +1 @@ |
|||||
|
.vyber1{width:158px}.vyber,.vyber1{padding:12px;border:none}.kalen,.vyber,.vyber1{background-color:#0563af;color:#fff}.wrapper{display:grid;grid-template-columns:1fr 1fr}.seat{display:inline-block;width:50px;height:50px;text-align:center;border:1px solid grey;margin:2px;background-color:#3e9c35}.seat div:hover{cursor:pointer;background-color:#d3d3d3}.seat .disabled{color:#fff}.seat .disabled:hover{cursor:default;background-color:transparent}.seat .chosen{background-color:#90ee90}.col{width:90%;opacity:.99}.col,.hlavni{background-color:#fff}.hlavni{width:50%;margin:0 auto}.hlava{width:100%;margin:0 auto;text-align:center}#app{background-image:url(../img/leta.f93aa404.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 grey;margin:2px;background-color:#3e9c35}.seat div:hover{cursor:pointer;background-color:#d3d3d3}.seat .disabled{color:#fff}.seat .disabled:hover{cursor:default;background-color:transparent}.seat .chosen{background-color:#90ee90}.col{width:80%;background-color:#fff;opacity:.99}.hlavni{background-color:#fff}.hlava,.hlavni{width:90%;margin:0 auto}.hlava{text-align:center}#app{background-image:url(../img/leta.f93aa404.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 grey;margin:2px;background-color:#3e9c35}.seat div:hover{cursor:pointer;background-color:#d3d3d3}.seat .disabled{color:#fff}.seat .disabled:hover{cursor:default;background-color:transparent}.seat .chosen{background-color:#90ee90}.col{width:80%;opacity:.99;min-height:100px}.col,.hlavni{background-color:#fff}.hlavni{width:90%;margin:0 auto}.hlava{width:100%;margin:0 auto;text-align:center}#app{background-image:url(../img/leta.f93aa404.jpeg)}.obr{width:30px}h1,h2,h3,p{font-family:Arial,Helvetica,sans-serif}.druha{width:30%;float:left}.col1{width:80%;opacity:.99}.col1,.hlavni2{background-color:#fff}.hlavni2{width:50%;margin:0 auto}.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 grey;margin:2px;background-color:#3e9c35}.seat div:hover{cursor:pointer;background-color:#d3d3d3}.seat .disabled{color:#fff}.seat .disabled:hover{cursor:default;background-color:transparent}.seat .chosen{background-color:#90ee90}.col{width:100%;opacity:.99;min-height:100px}.col,.hlavni{background-color:#fff}.hlavni{width:90%;margin:0 auto}.hlava{width:100%;margin:0 auto;text-align:center}#app{background-image:url(../img/leta.f93aa404.jpeg)}.obr{width:30px}h1,h2,h3,p{font-family:Arial,Helvetica,sans-serif}.druha{width:30%;float:left}.col1{width:100%;opacity:.99}.col1,.hlavni2{background-color:#fff}.hlavni2{width:50%;margin:0 auto}.foto{float:right;width:100%}} |
||||
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 136 KiB |
|
After Width: | Height: | Size: 89 KiB |
|
After Width: | Height: | Size: 7.7 KiB |
@ -0,0 +1 @@ |
|||||
|
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>letenka</title><link href="/css/app.542a1608.css" rel="preload" as="style"><link href="/js/app.85d40bdc.js" rel="preload" as="script"><link href="/js/chunk-vendors.11f5230c.js" rel="preload" as="script"><link href="/css/app.542a1608.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but letenka doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.11f5230c.js"></script><script src="/js/app.85d40bdc.js"></script></body></html> |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,17 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang=""> |
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
||||
|
<title><%= htmlWebpackPlugin.options.title %></title> |
||||
|
</head> |
||||
|
<body> |
||||
|
<noscript> |
||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||
|
</noscript> |
||||
|
<div id="app"></div> |
||||
|
<!-- built files will be auto injected --> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,587 @@ |
|||||
|
|
||||
|
<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> |
||||
|
After Width: | Height: | Size: 136 KiB |
|
After Width: | Height: | Size: 89 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 7.7 KiB |
@ -0,0 +1,58 @@ |
|||||
|
<template> |
||||
|
<div class="hello"> |
||||
|
<h1>{{ msg }}</h1> |
||||
|
<p> |
||||
|
For a guide and recipes on how to configure / customize this project,<br> |
||||
|
check out the |
||||
|
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>. |
||||
|
</p> |
||||
|
<h3>Installed CLI Plugins</h3> |
||||
|
<ul> |
||||
|
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li> |
||||
|
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li> |
||||
|
</ul> |
||||
|
<h3>Essential Links</h3> |
||||
|
<ul> |
||||
|
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li> |
||||
|
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li> |
||||
|
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li> |
||||
|
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li> |
||||
|
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li> |
||||
|
</ul> |
||||
|
<h3>Ecosystem</h3> |
||||
|
<ul> |
||||
|
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li> |
||||
|
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li> |
||||
|
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li> |
||||
|
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li> |
||||
|
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'HelloWorld', |
||||
|
props: { |
||||
|
msg: String |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<!-- Add "scoped" attribute to limit CSS to this component only --> |
||||
|
<style scoped> |
||||
|
h3 { |
||||
|
margin: 40px 0 0; |
||||
|
} |
||||
|
ul { |
||||
|
list-style-type: none; |
||||
|
padding: 0; |
||||
|
} |
||||
|
li { |
||||
|
display: inline-block; |
||||
|
margin: 0 10px; |
||||
|
} |
||||
|
a { |
||||
|
color: #42b983; |
||||
|
} |
||||
|
</style> |
||||
@ -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> |
||||
@ -0,0 +1,13 @@ |
|||||
|
import Vue from 'vue' |
||||
|
import App from './App.vue' |
||||
|
|
||||
|
|
||||
|
Vue.config.productionTip = false |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
new Vue({ |
||||
|
render: h => h(App), |
||||
|
}).$mount('#app') |
||||
Loading…
Reference in new issue