|
|
|
@ -6,6 +6,7 @@ |
|
|
|
<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"> |
|
|
|
@ -15,8 +16,22 @@ |
|
|
|
</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 --> |
|
|
|
<input type="date"> |
|
|
|
<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í --> |
|
|
|
|
|
|
|
|
|
|
|
@ -54,20 +69,30 @@ |
|
|
|
</form> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div class="col order"> |
|
|
|
<h2>Objednávka</h2> |
|
|
|
<p v-if="travelType"> |
|
|
|
Typ cesty: |
|
|
|
<span style="text-transform: lowercase"> |
|
|
|
<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 style="text-transform: lowercase"> |
|
|
|
<span> |
|
|
|
{{ classType.text }} |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
@ -78,22 +103,32 @@ |
|
|
|
{{ seat }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</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: "Zpáteční" }, |
|
|
|
{ value: "O", text: "Jednosměrná" }, |
|
|
|
{ value: "R", text: "TwoWay" }, |
|
|
|
{ value: "O", text: "OneWay" }, |
|
|
|
], |
|
|
|
personCount: 1, |
|
|
|
classType: "", |
|
|
|
@ -105,7 +140,19 @@ |
|
|
|
"B1", "B2", "B3", |
|
|
|
"E1", "E2", "E3", "E4", "E5" |
|
|
|
], |
|
|
|
chosenSeats: [] |
|
|
|
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: { |
|
|
|
@ -130,6 +177,7 @@ |
|
|
|
|
|
|
|
<style> |
|
|
|
.wrapper { |
|
|
|
background-color: lightgreen; |
|
|
|
display: grid; |
|
|
|
grid-template-columns: 1fr 1fr; |
|
|
|
} |
|
|
|
|
