From 4f04d973c253c8cf96633541992aa16bf2ae1c06 Mon Sep 17 00:00:00 2001 From: jordi fita mas Date: Wed, 31 Jan 2024 20:00:38 +0100 Subject: [PATCH] Dynamically set min and max to arrival and departure date inputs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The departure must be at list one day after the arrival, but no longer than seven, due to campground’s policy. --- pkg/template/render.go | 6 +++ web/static/booking-dates.js | 48 +++++++++++++++++++++++ web/templates/public/booking.gohtml | 28 ++----------- web/templates/public/campsite/type.gohtml | 33 ++-------------- 4 files changed, 60 insertions(+), 55 deletions(-) create mode 100644 web/static/booking-dates.js diff --git a/pkg/template/render.go b/pkg/template/render.go index 3770c3b..a8d6b41 100644 --- a/pkg/template/render.go +++ b/pkg/template/render.go @@ -107,6 +107,12 @@ func mustRenderLayout(w io.Writer, user *auth.User, company *auth.Company, templ "formatDate": func(time time.Time) template.HTML { return template.HTML(`") }, + "tomorrow": func() string { + return time.Now().AddDate(0, 0, 1).Format(database.ISODateFormat) + }, + "overmorrow": func() string { + return time.Now().AddDate(0, 0, 2).Format(database.ISODateFormat) + }, "queryEscape": func(s string) string { return url.QueryEscape(s) }, diff --git a/web/static/booking-dates.js b/web/static/booking-dates.js new file mode 100644 index 0000000..84f002d --- /dev/null +++ b/web/static/booking-dates.js @@ -0,0 +1,48 @@ +(function () { + 'use strict'; + + function updateDepartureDate(arrivalDateField) { + const arrivalDate = new Date(arrivalDateField.value); + if (isNaN(arrivalDate)) { + return; + } + const departureDateField = document.querySelector('[name="departure_date"]'); + if (!departureDateField) { + return; + } + + arrivalDate.setUTCDate(arrivalDate.getUTCDate() + 1); + const minDate = formatDate(arrivalDate); + + departureDateField.setAttribute('min', minDate); + const departureDate = new Date(departureDateField.value); + if (isNaN(departureDate) || departureDate < arrivalDate) { + departureDateField.value = minDate; + } + + arrivalDate.setUTCDate(arrivalDate.getUTCDate() + 6); + const maxDate = formatDate(arrivalDate); + departureDateField.setAttribute('max', maxDate); + if (!isNaN(departureDate) && departureDate >= arrivalDate) { + departureDateField.value = maxDate; + } + } + + function formatDate(date) { + return `${date.getFullYear()}-${zeroPad(date.getMonth() + 1)}-${zeroPad(date.getDate())}`; + } + + function zeroPad(num) { + return `${num < 10 ? '0' : ''}${num}` + } + + const arrivalDateField = document.querySelector('[name="arrival_date"]'); + if (!arrivalDateField) { + return; + } + arrivalDateField.addEventListener('change', function (event) { + updateDepartureDate(event.target); + }); + + updateDepartureDate(arrivalDateField); +})(); diff --git a/web/templates/public/booking.gohtml b/web/templates/public/booking.gohtml index 152e3d3..71fa0be 100644 --- a/web/templates/public/booking.gohtml +++ b/web/templates/public/booking.gohtml @@ -128,6 +128,7 @@ @@ -137,6 +138,7 @@ @@ -196,30 +198,6 @@ } })(); - (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()}` - }) - })(); + {{- end }} diff --git a/web/templates/public/campsite/type.gohtml b/web/templates/public/campsite/type.gohtml index 7261cc0..d99ae92 100644 --- a/web/templates/public/campsite/type.gohtml +++ b/web/templates/public/campsite/type.gohtml @@ -40,13 +40,13 @@ @@ -163,33 +163,6 @@ const right = calendar.querySelector('header button:last-of-type'); 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()}` - }) - })(); - + {{- end }}