Add modal for inlcuded services

This commit is contained in:
Björn Fromme
2018-10-01 17:14:24 +02:00
parent 56eac1eb7e
commit 6937465012
5 changed files with 42 additions and 6 deletions
@@ -17,15 +17,44 @@
<tr>
<th>Zimmerart</th>
<th>Preis</th>
<th>inkl.</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="entry of availableRooms">
<td>{{entry.label}}</td>
<td style="white-space: nowrap">ab {{entry.price * selectedNumberOfDays}} &euro;</td>
<tr v-for="(row, index) of availableRooms">
<td>{{ row.label }}</td>
<td style="white-space: nowrap">ab {{ row.price * selectedNumberOfDays }} &euro;</td>
<td>
<a :href="entry.bookingUrl" target="_blank"
<i v-if="row.skipassIncluded" data-placement="top" title="Skipass inklusive" class="fa fa-tag tooltiptoggle"></i>
<a href="#" data-toggle="modal"
:data-target="'#services' + index"><i class="fa fa-info-circle"></i></a>
<div class="modal fade" :id="'services' + index" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button button--small" class="close" data-dismiss="modal">
<span>&times;</span>
</button>
<h5 class="modal-title">Inklusivleistungen</h5>
</div>
<div class="modal-body">
<div class="table-responsive">
<table class="table table-striped">
<tbody>
<tr v-for="service of row.servicesIncluded">
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> {{ service }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</td>
<td>
<a :href="row.bookingUrl" target="_blank"
class="button button--small button--action">Buchen</a>
</td>
</tr>
@@ -41,6 +70,7 @@
<script>
import $ from 'jquery'
import Vue from 'vue'
import EventBus from '../_bus'
import flatpickr from 'flatpickr'
import { German } from 'flatpickr/dist/l10n/de'
import dayjs from 'dayjs'
@@ -164,6 +194,7 @@
$.post(this.roomsEndpointUri, query, (json) => {
this.loading = false;
this.availableRooms = json;
EventBus.$emit('ajaxContentLoaded');
}, 'json');
}
},