Finalize implementation, wording and styles
This commit is contained in:
Björn Fromme
+72
-22
@@ -31,16 +31,42 @@
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Preise</div>
|
||||
<div class="panel-body">
|
||||
<div v-show="nightsCount > 0">
|
||||
Zeitraum: {{ rangeFormatted }}, {{ nightsCount }} Nächte<br>
|
||||
Basispreis: {{ pricePax.base | money }} €<br>
|
||||
<span v-if="pricePax.additional > 0">Aufpreis Personenzahl: {{ pricePax.additional | money }} €<br></span>
|
||||
<span v-if="priceShortTerm > 0">Aufpreis Kurzzeit: {{ priceShortTerm | money }} €<br></span>
|
||||
<span v-if="selectedOptions.length > 0">Zusatzleistungen: {{ priceOptions | money }} €<br></span>
|
||||
<span v-if="priceBoard > 0">Verpflegung: {{ priceBoard | money }} €<br></span>
|
||||
<span v-if="priceRunningCosts > 0">Strom- und Abfallgebühren: {{ priceRunningCosts | money }} €<br></span>
|
||||
<span><strong>Gesamtpreis: {{ totalPrice | money }} €</strong></span>
|
||||
</div>
|
||||
<table class="table table-striped" v-show="nightsCount > 0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Zeitraum</th>
|
||||
<td>{{ rangeFormatted }}, {{ nightsCount }} Nächte</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Basispreis</th>
|
||||
<td>{{ formatCurrency(pricePax.base) }}</td>
|
||||
</tr>
|
||||
<tr v-if="pricePax.additional > 0">
|
||||
<th>Aufpreis Personenzahl</th>
|
||||
<td>{{ formatCurrency(pricePax.additional) }}</td>
|
||||
</tr>
|
||||
<tr v-if="priceShortTerm > 0">
|
||||
<th>Aufpreis Kurzzeit</th>
|
||||
<td>{{ formatCurrency(priceShortTerm) }}</td>
|
||||
</tr>
|
||||
<tr v-if="selectedOptions.length > 0">
|
||||
<th>Zusatzleistungen</th>
|
||||
<td>{{ formatCurrency(priceOptions) }}</td>
|
||||
</tr>
|
||||
<tr v-if="priceBoard > 0">
|
||||
<th>Verpflegung</th>
|
||||
<td>{{ formatCurrency(priceBoard) }}</td>
|
||||
</tr>
|
||||
<tr v-if="priceRunningCosts > 0">
|
||||
<th>Strom- und Abfallgebühren</th>
|
||||
<td>{{ formatCurrency(priceRunningCosts) }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Gesamtpreis</th>
|
||||
<td><strong>{{ formatCurrency(priceTotal) }}</strong><br><small>zzgl. vor Ort zu entrichtender Ortstaxe</small></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div v-show="nightsCount === 0">
|
||||
<span class="label label-warning">Bitte wählen Sie einen Zeitraum</span>
|
||||
</div>
|
||||
@@ -61,6 +87,16 @@
|
||||
<div class="help-block"
|
||||
v-show="formErrors.email" v-html="formErrors.email"></div>
|
||||
</div>
|
||||
<div class="form-group" :class="{ 'has-error': formErrors.phone }">
|
||||
<label>Telefon*</label>
|
||||
<input type="text" class="form-control" v-model="phone">
|
||||
<div class="help-block"
|
||||
v-show="formErrors.phone" v-html="formErrors.phone"></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Bemerkungen/Wünsche</label>
|
||||
<textarea class="form-control" cols="30" rows="3" v-model="remarks"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button class="button" type="submit" @click.prevent="submitForm()">Abschicken</button>
|
||||
</div>
|
||||
@@ -68,7 +104,7 @@
|
||||
</div>
|
||||
<div class="panel panel-default" v-show="submitted">
|
||||
<div class="panel-body">
|
||||
Vielen Dank für Ihre Anfrage. Wir werden Sie schnellstmöglich bearbeiten.
|
||||
<strong>Vielen Dank für Ihre Anfrage. Wir werden Sie schnellstmöglich bearbeiten.</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-overlay" v-show="processing">
|
||||
@@ -124,18 +160,18 @@
|
||||
selectedOptions: [],
|
||||
selectedBoard: null,
|
||||
name: null,
|
||||
email: null
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
money (value) {
|
||||
if (0 === value) {
|
||||
return '-';
|
||||
}
|
||||
return parseFloat(value).toFixed(2).replace(/\./, ',');
|
||||
email: null,
|
||||
phone: null,
|
||||
remarks: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatCurrency (value) {
|
||||
if (0 === value) {
|
||||
return '-';
|
||||
}
|
||||
return parseFloat(value).toFixed(2).replace(/\./, ',') + '€';
|
||||
},
|
||||
initSelectableRanges () {
|
||||
let enabledDates = [];
|
||||
for (let config of this.configs) {
|
||||
@@ -174,11 +210,14 @@
|
||||
let formData = {
|
||||
'tx_epproducts_ajax[name]': this.name,
|
||||
'tx_epproducts_ajax[email]': this.email,
|
||||
'tx_epproducts_ajax[phone]': this.phone,
|
||||
'tx_epproducts_ajax[remarks]': this.remarks,
|
||||
'tx_epproducts_ajax[dateFrom]': this.selectedFrom.format('DD.MM.YYYY'),
|
||||
'tx_epproducts_ajax[dateTo]': this.selectedTo.format('DD.MM.YYYY'),
|
||||
'tx_epproducts_ajax[pax]': this.selectedPax,
|
||||
'tx_epproducts_ajax[board]': this.selectedBoard ? this.selectedBoard.uid : null,
|
||||
'tx_epproducts_ajax[options]': options
|
||||
'tx_epproducts_ajax[options]': options,
|
||||
'tx_epproducts_ajax[summary]': this.priceSummary
|
||||
};
|
||||
this.processing = true;
|
||||
this.submitted = false;
|
||||
@@ -266,9 +305,20 @@
|
||||
}
|
||||
return this.nightsCount * this.selectedPax * 1.7;
|
||||
},
|
||||
totalPrice () {
|
||||
priceTotal () {
|
||||
return this.pricePax.base + this.pricePax.additional + this.priceOptions
|
||||
+ this.priceBoard + this.priceShortTerm + this.priceRunningCosts;
|
||||
},
|
||||
priceSummary () {
|
||||
return {
|
||||
paxBase: this.formatCurrency(this.pricePax.base),
|
||||
paxAdditional: this.formatCurrency(this.pricePax.additional),
|
||||
shortTerm: this.formatCurrency(this.priceShortTerm),
|
||||
options: this.formatCurrency(this.priceOptions),
|
||||
board: this.formatCurrency(this.priceBoard),
|
||||
runningCosts: this.formatCurrency(this.priceRunningCosts),
|
||||
total: this.formatCurrency(this.priceTotal)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
@@ -78,6 +78,9 @@
|
||||
<trans-unit id="tx_eptheme.message.name.1221560718">
|
||||
<source>Bitte angeben</source>
|
||||
</trans-unit>
|
||||
<trans-unit id="tx_eptheme.message.phone.1221560718">
|
||||
<source>Bitte angeben</source>
|
||||
</trans-unit>
|
||||
<trans-unit id="tx_eptheme.message.contactForm.firstName.1221560718">
|
||||
<source>Bitte angeben</source>
|
||||
</trans-unit>
|
||||
|
||||
@@ -1,4 +1,9 @@
|
||||
<div class="ep-headbar">Konzept</div>
|
||||
<f:if condition="{product.calendarHotel}">
|
||||
<a class="button button--full" data-fancybox data-type="iframe" href="{f:uri.action(action: 'index', controller: 'GroupsPrice', arguments: '{hotel: hotel}', pageUid: settings.groupsPricePopupPageUid)}">
|
||||
Preisberechnung
|
||||
</a>
|
||||
</f:if>
|
||||
<div class="product-details product-details--concept">
|
||||
{product.conceptDescription -> f:format.html()}
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
|
||||
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<f:layout name="Email/Default"/>
|
||||
@@ -18,6 +19,10 @@
|
||||
<th>E-Mail</th>
|
||||
<td>{email}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Telefon</th>
|
||||
<td>{phone -> v:or(alternative: '-')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Zeitraum</th>
|
||||
<td>{dateFrom} - {dateTo}</td>
|
||||
@@ -53,6 +58,20 @@
|
||||
</f:if>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Kostenübersicht</th>
|
||||
<td>
|
||||
Grundpreis: {summary.paxBase}<br>
|
||||
Aufpreis Personen: {summary.paxAdditional -> v:or(alternative: '-')}<br>
|
||||
Zusatzleistungen: {summary.options}<br>
|
||||
Strom- und Abfallgebühren: {summary.runningCosts -> v:or(alternative: '-')}<br>
|
||||
<strong>Gesamtpreis: {summary.total}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Bemerkungen/Wünsche</th>
|
||||
<td>{remarks -> f:format.nl2br()}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</f:section>
|
||||
|
||||
|
||||
@@ -6,7 +6,20 @@
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<h1>Preiskalkulator {hotel.name}</h1>
|
||||
<div class="page-header">
|
||||
<div class="media">
|
||||
<div class="media-left media-middle">
|
||||
<f:image class="media-object" width="128" src="EXT:ep_theme/Resources/Public/images/logo_wide.svg" alt=""/>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<h1 class="media-heading">Preisberechnung <small>{hotel.name}</small></h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<groups-price-calculator
|
||||
:configs='{configs -> f:format.raw()}'
|
||||
:boards='{boards -> f:format.raw()}'
|
||||
|
||||
@@ -249,7 +249,7 @@
|
||||
<f:section name="Calendar">
|
||||
<f:if condition="{product.calendarHotel}">
|
||||
<a class="button button--full" data-fancybox data-type="iframe" href="{f:uri.action(action: 'index', controller: 'GroupsPrice', arguments: '{hotel: hotel}', pageUid: settings.groupsPricePopupPageUid)}">
|
||||
Preiskalkulator
|
||||
Preisberechnung
|
||||
</a>
|
||||
<div class="ep-sidebar ep-facts">
|
||||
<p><strong>Belegungskalender</strong></p>
|
||||
|
||||
Reference in New Issue
Block a user