jordi fita mas
9b96a355a4
By default, it selects the next day, unless the new arrival date is before the current departure, in which case is left as is, because the idea is to help people avoid useless calendar selections when booking for next three or four months: they would need to change the month twice, and now only at most one.
213 lines
9.8 KiB
Plaintext
213 lines
9.8 KiB
Plaintext
<!--
|
|
SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
-->
|
|
{{ define "title" -}}
|
|
{{( pgettext "Booking" "title" )}}
|
|
{{- end }}
|
|
|
|
{{ define "content" -}}
|
|
{{- /*gotype: dev.tandem.ws/tandem/camper/pkg/booking.publicPage*/ -}}
|
|
<h2>{{( pgettext "Booking" "title" )}}</h2>
|
|
{{ with .Form -}}
|
|
<form id="booking" action="/{{ currentLocale }}/booking" method="post">
|
|
<fieldset>
|
|
<legend>{{( pgettext "Customer Details" "title" )}}</legend>
|
|
{{ with .FullName -}}
|
|
<label>
|
|
{{( pgettext "Full name" "input" )}}<br>
|
|
<input type="text" required autocomplete="name" minlength="2"
|
|
name="{{ .Name }}" value="{{ .Val }}" {{ template "error-attrs" . }}
|
|
><br>
|
|
</label>
|
|
{{ template "error-message" . }}
|
|
{{- end }}
|
|
{{ with .Address -}}
|
|
<label>
|
|
{{( pgettext "Address (optional)" "input" )}}<br>
|
|
<input type="text" autocomplete="billing street-address"
|
|
name="{{ .Name }}" value="{{ .Val }}" {{ template "error-attrs" . }}
|
|
><br>
|
|
</label>
|
|
{{ template "error-message" . }}
|
|
{{- end }}
|
|
{{ with .PostalCode -}}
|
|
<label>
|
|
{{( pgettext "Postcode (optional)" "input" )}}<br>
|
|
<input type="text" autocomplete="billing postal-code"
|
|
name="{{ .Name }}" value="{{ .Val }}" {{ template "error-attrs" . }}
|
|
><br>
|
|
</label>
|
|
{{ template "error-message" . }}
|
|
{{- end }}
|
|
{{ with .City -}}
|
|
<label>
|
|
{{( pgettext "Town or village (optional)" "input" )}}<br>
|
|
<input type="text"
|
|
name="{{ .Name }}" value="{{ .Val }}" {{ template "error-attrs" . }}
|
|
><br>
|
|
</label>
|
|
{{ template "error-message" . }}
|
|
{{- end }}
|
|
{{ with .Country -}}
|
|
<label>
|
|
{{( pgettext "Country" "input" )}}<br>
|
|
<select name="{{ .Name }}"
|
|
required autocomplete="country">
|
|
<option>{{( gettext "Choose a country" )}}</option>
|
|
{{ template "error-attrs" . }}>{{ template "list-options" . }}
|
|
</select><br>
|
|
</label>
|
|
{{ template "error-message" . }}
|
|
{{- end }}
|
|
{{ with .Email -}}
|
|
<label>
|
|
{{( pgettext "Email" "input" )}}<br>
|
|
<input type="email" required autocomplete="email"
|
|
name="{{ .Name }}" value="{{ .Val }}" {{ template "error-attrs" . }}
|
|
><br>
|
|
</label>
|
|
{{ template "error-message" . }}
|
|
{{- end }}
|
|
{{ with .Phone -}}
|
|
<label>
|
|
{{( pgettext "Phone" "input" )}}<br>
|
|
<input type="tel" required autocomplete="tel"
|
|
name="{{ .Name }}" value="{{ .Val }}" {{ template "error-attrs" . }}
|
|
><br>
|
|
</label>
|
|
{{ template "error-message" . }}
|
|
{{- end }}
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>{{( pgettext "Accommodation" "title" )}}</legend>
|
|
{{ range .CampsiteType.Options -}}
|
|
<label><input type="radio" name="{{ $.Form.CampsiteType.Name }}" value="{{ .Value }}"
|
|
{{ if $.Form.CampsiteType.IsSelected .Value }}checked{{ end }}
|
|
> {{ .Label }}</label><br>
|
|
{{- end }}
|
|
{{ template "error-message" .CampsiteType }}
|
|
</fieldset>
|
|
{{ range $campsiteType := .CampsiteType.Options -}}
|
|
{{ $options := index $.Form.CampsiteTypeOptions .Value }}
|
|
{{ if $options -}}
|
|
<fieldset class="campsite-options" data-campsite="{{ $campsiteType.Value }}">
|
|
<legend>{{ .Label }}</legend>
|
|
{{ with $.Form.AreaPreferences -}}
|
|
<label>
|
|
{{( pgettext "Area preferences (optional)" "input" )}}<br>
|
|
<input type="text"
|
|
name="{{ .Name }}" value="{{ .Val }}" {{ template "error-attrs" . }}
|
|
><br>
|
|
</label>
|
|
{{ template "error-message" . }}
|
|
{{- end }}
|
|
{{ range $options -}}
|
|
<label>
|
|
{{ .Label }}<br>
|
|
<input type="number" required
|
|
name="{{ .Input.Name }}" value="{{ .Input.Val }}"
|
|
min="{{ .Min }}" max="{{ .Max }}"
|
|
{{ template "error-attrs" .Input }}
|
|
><br>
|
|
</label>
|
|
{{ template "error-message" .Input }}
|
|
{{- end }}
|
|
</fieldset>
|
|
{{- end }}
|
|
{{- end }}
|
|
<fieldset>
|
|
<legend>{{( pgettext "Booking Period" "title" )}}</legend>
|
|
{{ with .ArrivalDate -}}
|
|
<label>
|
|
{{( pgettext "Arrival date" "input" )}}<br>
|
|
<input type="date" required
|
|
name="{{ .Name }}" value="{{ .Val }}" {{ template "error-attrs" . }}
|
|
><br>
|
|
</label>
|
|
{{ template "error-message" . }}
|
|
{{- end }}
|
|
{{ with .DepartureDate -}}
|
|
<label>
|
|
{{( pgettext "Departure date" "input" )}}<br>
|
|
<input type="date" required
|
|
name="{{ .Name }}" value="{{ .Val }}" {{ template "error-attrs" . }}
|
|
><br>
|
|
</label>
|
|
{{ template "error-message" . }}
|
|
{{- end }}
|
|
{{ with .ACSICard -}}
|
|
<label>
|
|
<input type="checkbox" name="{{ .Name }}" {{ if .Checked}}checked{{ end }}
|
|
{{ template "error-attrs" . }}
|
|
> {{( pgettext "ACSI card? (optional)" "input" )}}</label><br>
|
|
{{ template "error-message" . }}
|
|
{{- end }}
|
|
{{ with .Agreement -}}
|
|
<label>
|
|
<input type="checkbox" required name="{{ .Name }}" {{ if .Checked}}checked{{ end }}
|
|
{{ template "error-attrs" . }}
|
|
> {{ printf ( pgettext "I have read and I accept <a href=\"%s\" target=\"_blank\">the reservation conditions</a>" "input" ) (print "/" currentLocale "/legal/reservation") | raw }}
|
|
</label><br>
|
|
{{ template "error-message" . }}
|
|
{{- end }}
|
|
</fieldset>
|
|
<footer>
|
|
<button type="submit">{{( pgettext "Book" "action" )}} <span>→</span></button>
|
|
</footer>
|
|
</form>
|
|
{{- end }}
|
|
|
|
<script>
|
|
(function () {
|
|
'use strict';
|
|
const fieldSets = Array.from(document.querySelectorAll('fieldset[data-campsite]'));
|
|
const options = document.querySelectorAll('input[type="radio"]');
|
|
|
|
function toggleFieldSets(input) {
|
|
const campsite = input.value;
|
|
for (const fieldSet of fieldSets) {
|
|
if (fieldSet.dataset.campsite === campsite) {
|
|
fieldSet.classList.add('is-visible');
|
|
} else {
|
|
fieldSet.classList.remove('is-visible');
|
|
}
|
|
}
|
|
}
|
|
|
|
for (const option of Array.from(options)) {
|
|
option.addEventListener('change', (e) => toggleFieldSets(e.target));
|
|
if (option.checked) {
|
|
toggleFieldSets(option);
|
|
}
|
|
}
|
|
})();
|
|
|
|
(function () {
|
|
'use strict';
|
|
|
|
const arrivalDateField = document.querySelector('[name="arrival_date"]');
|
|
if (!arrivalDateField) {
|
|
return;
|
|
}
|
|
|
|
arrivalDateField.addEventListener('change', function (event) {
|
|
const arrivalDate = new Date(event.target.value);
|
|
if (isNaN(arrivalDate)) {
|
|
return;
|
|
}
|
|
const departureDateField = document.querySelector('[name="departure_date"]');
|
|
if (!departureDateField) {
|
|
return;
|
|
}
|
|
const departureDate = new Date(departureDateField.value);
|
|
if (!isNaN(departureDate) && departureDate >= arrivalDate) {
|
|
return;
|
|
}
|
|
arrivalDate.setUTCDate(arrivalDate.getUTCDate() + 1);
|
|
departureDateField.value = `${arrivalDate.getFullYear()}-${arrivalDate.getMonth() < 9 ? '0' : ''}${(arrivalDate.getMonth() + 1)}-${arrivalDate.getDate()}`
|
|
})
|
|
})();
|
|
</script>
|
|
{{- end }}
|