tomas.patolan
/
letenka
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

finalni upravy

master
Patolán 4 years ago
parent
d700666502
commit
193e577d92
3 changed files with 114 additions and 70 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      hotovo.zip
  2. 138
      src/App.vue
  3. 46
      src/components/SeatPicker.vue

BIN
hotovo.zip
View File

Binary file not shown.

138
src/App.vue
View File

@ -3,71 +3,59 @@
<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>
<!-- volba destinace -->
<p>
<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í -->
<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 class="wrapper2">
<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>
<!-- volba destinace -->
<p>
<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 class="disabled">
{{ seat }}
<div v-else>
<v-date-picker v-model="departureDate" :min-date="new Date()" />
</div>
</div>
</div>
<button v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button>
</form>
<!-- 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">
{{ option.text }}
</option>
</select>
</p>
<Seat-picker v-model= "chosenSeats" :seats= "seats" :classType= "classType" :personCount= "personCount" />
<button v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button>
</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;
}

46
src/components/SeatPicker.vue
View File

@ -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>
Write Preview
Loading…
Cancel
Save