From 9b96a355a4fddceeb33f1e6525aa2f6326abde26 Mon Sep 17 00:00:00 2001
From: jordi fita mas <jordi@tandem.blog>
Date: Sat, 13 Jan 2024 02:03:27 +0100
Subject: [PATCH] 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.
---
 web/templates/public/booking.gohtml       | 62 +++++++++++++++++------
 web/templates/public/campsite/type.gohtml | 27 ++++++++++
 2 files changed, 73 insertions(+), 16 deletions(-)

diff --git a/web/templates/public/booking.gohtml b/web/templates/public/booking.gohtml
index 4a8b729..6dc0c2c 100644
--- a/web/templates/public/booking.gohtml
+++ b/web/templates/public/booking.gohtml
@@ -147,7 +147,8 @@
                     <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>
+                        > {{ 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>
@@ -158,25 +159,54 @@
     {{- end }}
 
     <script>
-        const fieldSets = Array.from(document.querySelectorAll('fieldset[data-campsite]'));
-        const options = document.querySelectorAll('input[type="radio"]');
+        (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');
+            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);
+            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 }}
diff --git a/web/templates/public/campsite/type.gohtml b/web/templates/public/campsite/type.gohtml
index b0be5ef..a35dd91 100644
--- a/web/templates/public/campsite/type.gohtml
+++ b/web/templates/public/campsite/type.gohtml
@@ -142,6 +142,33 @@
             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()}`
+            })
+        })();
     </script>
 
 {{- end }}