tandem
/
camper
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Automatically select the departure date when arrival changes 

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.
This commit is contained in:
jordi fita mas 2024-01-13 02:03:27 +01:00
parent a226d17aa7
commit 9b96a355a4
2 changed files with 73 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
web/templates/public/booking.gohtml
View File

@ -147,7 +147,8 @@
<label> <label>
<input type="checkbox" required name="{{ .Name }}" {{ if .Checked}}checked{{ end }} <input type="checkbox" required name="{{ .Name }}" {{ if .Checked}}checked{{ end }}
{{ template "error-attrs" . }} {{ 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> > {{ 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" . }} {{ template "error-message" . }}
{{- end }} {{- end }}
</fieldset> </fieldset>
@ -158,25 +159,54 @@
{{- end }} {{- end }}
<script> <script>
const fieldSets = Array.from(document.querySelectorAll('fieldset[data-campsite]')); (function () {
const options = document.querySelectorAll('input[type="radio"]'); 'use strict';
const fieldSets = Array.from(document.querySelectorAll('fieldset[data-campsite]'));
const options = document.querySelectorAll('input[type="radio"]');
function toggleFieldSets(input) { function toggleFieldSets(input) {
const campsite = input.value; const campsite = input.value;
for (const fieldSet of fieldSets) { for (const fieldSet of fieldSets) {
if (fieldSet.dataset.campsite === campsite) { if (fieldSet.dataset.campsite === campsite) {
fieldSet.classList.add('is-visible'); fieldSet.classList.add('is-visible');
} else { } else {
fieldSet.classList.remove('is-visible'); fieldSet.classList.remove('is-visible');
}
} }
} }
}
for (const option of Array.from(options)) { for (const option of Array.from(options)) {
option.addEventListener('change', (e) => toggleFieldSets(e.target)); option.addEventListener('change', (e) => toggleFieldSets(e.target));
if (option.checked) { if (option.checked) {
toggleFieldSets(option); 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> </script>
{{- end }} {{- end }}

27
web/templates/public/campsite/type.gohtml
View File

@ -142,6 +142,33 @@
const right = calendar.querySelector('header button:last-of-type'); const right = calendar.querySelector('header button:last-of-type');
right.addEventListener('click', () => carousel.scrollLeft += month.clientWidth); right.addEventListener('click', () => carousel.scrollLeft += month.clientWidth);
})(); })();
(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;
}
console.log('fuck you', departureDate);
arrivalDate.setUTCDate(arrivalDate.getUTCDate() + 1);
departureDateField.value = `${arrivalDate.getFullYear()}-${arrivalDate.getMonth() < 9 ? '0' : ''}${(arrivalDate.getMonth() + 1)}-${arrivalDate.getDate()}`
})
})();
</script> </script>
{{- end }} {{- end }}