populated the other holiday home page tempates with js and reorganize…

…d js out of the base layout to a local folder and import from there
jagottsicher · Jul 13, 2023 · 890d810 · 890d810
1 parent b1a3ac9
commit 890d810
Show file tree

Hide file tree

Showing 5 changed files with 212 additions and 119 deletions.
diff --git a/internal/handlers/handlers.go b/internal/handlers/handlers.go
@@ -377,9 +377,8 @@ func (m *Repository) ChooseBungalow(w http.ResponseWriter, r *http.Request) {
 	http.Redirect(w, r, "/make-reservation", http.StatusSeeOther)
 }
 
-// BookBungalow takes URL parameters from get request,
-// builds a reservation, stores it in a session,
-// and redirects to make-reservation page
+// BookBungalow takes URL parameters from get request, builds a reservation,
+// stores it in a session, and redirects to make-reservation page
 func (m *Repository) BookBungalow(w http.ResponseWriter, r *http.Request) {
 
 	bungalowID, _ := strconv.Atoi(r.URL.Query().Get("id"))

diff --git a/static/js/app.js b/static/js/app.js
@@ -0,0 +1,115 @@
+function Prompt() {
+
+    let toast = function(c) {
+      const{
+        msg = '',
+        title = '',
+        footer = '',
+      } = c; 
+
+      const Toast = Swal.mixin({
+        toast: true,
+        position: 'top-end',
+        showConfirmButton: false,
+        timer: 3000,
+        timerProgressBar: true,
+        didOpen: (toast) => {
+          toast.addEventListener('mouseenter', Swal.stopTimer)
+          toast.addEventListener('mouseleave', Swal.resumeTimer)
+        }
+      })
+
+      Toast.fire({
+        icon: 'success',
+        title: title,
+        text: msg,
+        footer: footer,
+      })
+    }
+
+    let success = function(c) {
+      const {
+        msg = '',
+        title = '',
+        footer = '',
+      } = c;
+
+      Swal.fire({
+        icon: 'success',
+        title: title,
+        text: msg,
+        footer: footer,
+      })
+    }
+
+    let error = function(c) {
+      const {
+        msg = '',
+        title = '',
+        footer = '',
+      } = c;
+
+      Swal.fire({
+        icon: 'error',
+        title: title,
+        text: msg,
+        footer: footer,
+      })
+    }
+
+    async function custom(c) {
+      const {
+            icon ="",
+            msg = "",
+            title = "",
+            showConfirmButton = true,
+        } = c;
+
+      const { value: result } = await Swal.fire({
+        icon: icon,
+        title: title,
+        html: msg,
+        backdrop: false,
+        focusConfirm: false,
+        showCancelButton: true,
+        showConfirmButton: showConfirmButton,
+        willOpen: () => {
+          if (c.willOpen !== undefined) {
+            c.willOpen();
+          }
+        },
+        didOpen: () => {
+          if (c.didOpen !== undefined) {
+            c.didOpen();
+          }
+        },
+        preConfirm: () => {
+          return [
+            document.getElementById('start').value,
+            document.getElementById('end').value
+          ]
+        }
+      })
+
+      if (result) {
+        if (result.dismiss !== Swal.DismissReason.cancel) {
+          if (result.value !== "") {
+            if (c.callback !== undefined) {
+              c.callback(result);
+            } 
+          } else {
+            c.callback(false);
+          }
+        } else {
+           c.callback(false);
+        }
+      }
+    }
+
+    return {
+      toast: toast,
+      success: success,
+      error: error,
+      custom: custom,
+    }
+  }
diff --git a/templates/base-layout.tpml b/templates/base-layout.tpml
@@ -70,6 +70,7 @@
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/datepicker-full.min.js"></script>
         <script src="https://unpkg.com/notie"></script>
         <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+        <script src="/static/js/app.js"></script>
 
         {{block "js" .}}
 
@@ -126,122 +127,6 @@
           notify({{.}}, "warning")
           {{end}}
 
-          function Prompt() {
-
-            let toast = function(c) {
-              const{
-                msg = '',
-                title = '',
-                footer = '',
-              } = c; 
-
-              const Toast = Swal.mixin({
-                toast: true,
-                position: 'top-end',
-                showConfirmButton: false,
-                timer: 3000,
-                timerProgressBar: true,
-                didOpen: (toast) => {
-                  toast.addEventListener('mouseenter', Swal.stopTimer)
-                  toast.addEventListener('mouseleave', Swal.resumeTimer)
-                }
-              })
-
-              Toast.fire({
-                icon: 'success',
-                title: title,
-                text: msg,
-                footer: footer,
-              })
-            }
-
-            let success = function(c) {
-              const {
-                msg = '',
-                title = '',
-                footer = '',
-              } = c;
-
-              Swal.fire({
-                icon: 'success',
-                title: title,
-                text: msg,
-                footer: footer,
-              })
-            }
-
-            let error = function(c) {
-              const {
-                msg = '',
-                title = '',
-                footer = '',
-              } = c;
-
-              Swal.fire({
-                icon: 'error',
-                title: title,
-                text: msg,
-                footer: footer,
-              })
-            }
-
-            async function custom(c) {
-              const {
-                    icon ="",
-                    msg = "",
-                    title = "",
-                    showConfirmButton = true,
-                } = c;
-
-              const { value: result } = await Swal.fire({
-                icon: icon,
-                title: title,
-                html: msg,
-                backdrop: false,
-                focusConfirm: false,
-                showCancelButton: true,
-                showConfirmButton: showConfirmButton,
-                willOpen: () => {
-                  if (c.willOpen !== undefined) {
-                    c.willOpen();
-                  }
-                },
-                didOpen: () => {
-                  if (c.didOpen !== undefined) {
-                    c.didOpen();
-                  }
-                },
-                preConfirm: () => {
-                  return [
-                    document.getElementById('start').value,
-                    document.getElementById('end').value
-                  ]
-                }
-              })
-
-              if (result) {
-                if (result.dismiss !== Swal.DismissReason.cancel) {
-                  if (result.value !== "") {
-                    if (c.callback !== undefined) {
-                      c.callback(result);
-                    } 
-                  } else {
-                    c.callback(false);
-                  }
-                } else {
-                   c.callback(false);
-                }
-              }
-            }
-
-            return {
-              toast: toast,
-              success: success,
-              error: error,
-              custom: custom,
-            }
-          }
-
         </script>
 
     </body>

diff --git a/templates/couple-page.tpml b/templates/couple-page.tpml
@@ -65,6 +65,53 @@
     attention.custom({
       title: 'Check Bungalow\'s Availability',
       msg: html,
+      willOpen: () => {
+        const elem = document.getElementById("reservation-dates-modal");
+        const rp = new DateRangePicker(elem, {
+          format: 'yyyy-mm-dd',
+          minDate: new Date(),
+          showOnFocus: true,
+        })
+      },
+      didOpen: () => {
+        document.getElementById('start').removeAttribute("disabled"),
+        document.getElementById('end').removeAttribute("disabled");
+      },
+      callback: function(result) {
+        console.log("Wubba Lubba Dub Dub!");
+
+        let form = document.getElementById("check-availability-form");
+        let = formData = new FormData(form);
+        formData.append("csrf_token", "{{.CSRFToken}}");
+        formData.append("bungalow_id", "2")
+
+        fetch('/reservation-json', {
+          method: "POST",
+          body: formData,
+        })
+        .then(response => response.json())
+        .then (data => {
+          if (data.ok) {
+            attention.custom({
+              icon: 'success',
+              showConfirmButton: false,
+              msg: '<p>The bungalow is available!</p>'
+              + '<p><a href="/book-bungalow?id='
+              + data.bungalow_id
+              + '&s='
+              + data.start_date
+              + '&e='
+              + data.end_date
+              + '" class="btn btn-primary">'
+              + 'Book Now!</a></p>'
+            })
+          } else {
+            attention.error({
+              msg: ":( This holiday home is not available at that time.",
+            })
+          }
+        })
+      }
     });
   })
   </script>

diff --git a/templates/family-page.tpml b/templates/family-page.tpml
@@ -65,6 +65,53 @@
     attention.custom({
       title: 'Check Bungalow\'s Availability',
       msg: html,
+      willOpen: () => {
+        const elem = document.getElementById("reservation-dates-modal");
+        const rp = new DateRangePicker(elem, {
+          format: 'yyyy-mm-dd',
+          minDate: new Date(),
+          showOnFocus: true,
+        })
+      },
+      didOpen: () => {
+        document.getElementById('start').removeAttribute("disabled"),
+        document.getElementById('end').removeAttribute("disabled");
+      },
+      callback: function(result) {
+        console.log("Wubba Lubba Dub Dub!");
+
+        let form = document.getElementById("check-availability-form");
+        let = formData = new FormData(form);
+        formData.append("csrf_token", "{{.CSRFToken}}");
+        formData.append("bungalow_id", "3")
+
+        fetch('/reservation-json', {
+          method: "POST",
+          body: formData,
+        })
+        .then(response => response.json())
+        .then (data => {
+          if (data.ok) {
+            attention.custom({
+              icon: 'success',
+              showConfirmButton: false,
+              msg: '<p>The bungalow is available!</p>'
+              + '<p><a href="/book-bungalow?id='
+              + data.bungalow_id
+              + '&s='
+              + data.start_date
+              + '&e='
+              + data.end_date
+              + '" class="btn btn-primary">'
+              + 'Book Now!</a></p>'
+            })
+          } else {
+            attention.error({
+              msg: ":( This holiday home is not available at that time.",
+            })
+          }
+        })
+      }
     });
   })
   </script>