adding functionality to book a room widget (modular js)

diff --git a/js/app.js b/js/app.js
index 6708653..60fdd0d 100644 (file)
--- a/js/app.js
+++ b/js/app.js
@@ -33,8 +33,8 @@ $(document).ready(function () {
         //console.log('menu-id = ' + menuNum);
 
     });
-    // custom js / jquery
-  
+    
+    // custom js / jquery / modules
     var arrival_module = {
         init: function () {
            this.cacheDOM();
@@ -42,9 +42,30 @@ $(document).ready(function () {
         },
         cacheDOM: function() {
             this.$arrive = $("#arrive");
+            this.$currentDate = 0;
         },
         bindEvents: function () {
-            this.$arrive.datepicker();
+            this.$arrive.datepicker({
+                minDate: 0,
+                onSelect: function (date) {
+                this.$currentDate = arrival_module.$arrive.datepicker('getDate');
+                this.$extraDay = arrival_module.$arrive.datepicker('getDate');
+                this.$extraDay.setDate(this.$extraDay.getDate() + 1);
+                departure_module.$depart.datepicker("option", {minDate: new Date(this.$extraDay)});
+                this.$currentDate = new Date(this.$currentDate);
+                this.$currentDate  = new Date(this.$currentDate.getUTCFullYear(), this.$currentDate.getUTCMonth(), this.$currentDate.getUTCDate());
+                this.$currentDate.setDate(this.$currentDate.getDate());
+                this.d = this.$currentDate.getDate();
+                if (this.d <= 9) {
+                    this.d = '0' + this.d;
+                }
+                this.m = this.$currentDate.getMonth() + 1;
+                if (this.m <= 9) {
+                    this.m = '0' + this.m;
+                }
+                this.y = this.$currentDate.getFullYear();
+                }
+            });
         }
     };
     var departure_module = {
@@ -54,10 +75,18 @@ $(document).ready(function () {
         },
         cacheDOM: function (){
             this.$depart = $("#depart");
+            this.$nights = $("#nights");
+            this.$departure = 0;
         },
         bindEvents: function () {
-            this.$depart.datepicker();
-        }
+            this.$depart.datepicker({
+                minDate: 1,
+                onSelect: function (date) {
+                this.$departure = departure_module.$depart.datepicker('getDate');
+                this.$nights = Math.ceil(this.$departure - arrival_module.$currentDate) / (1000 * 60 * 60 * 24);
+            }
+        });
+    }
     };
     var restab_module = {
         init: function (){
@@ -71,11 +100,15 @@ $(document).ready(function () {
         },
         bindEvents: function () {
             this.$restab.on("click", function () {
-               this.$resContent.css("display", "block");
-            });
+                if (restab_module.$resContent.css("display") === "none") {
+                    restab_module.$resContent.slideDown(500);
+                } else {
+                    restab_module.$resContent.slideUp(500);
+                }
+          });
         }
     };
-//    restab_module.init();
+    restab_module.init();
     departure_module.init();
     arrival_module.init();
     
@@ -90,14 +123,6 @@ $(document).ready(function () {
         // $('.searchform').css("right", "5px");
         $("#search-icon").css("visibility", "visible");
     });
-    
-    $("#res-tab a").on('click', function () {
-        if ($("#resContent").css("display") === "none") {
-            $("#resContent").css("display", "inherit");
-        } else {
-            $("#resContent").css("display", "none");
-        }
-    });
     $(".search_result_context").children("br").remove();
 
 });

diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js
index 8a67a94..c7cd773 100644 (file)
--- a/js/custom/pageSetup.js
+++ b/js/custom/pageSetup.js
@@ -24,8 +24,8 @@ $(document).ready(function () {
         //console.log('menu-id = ' + menuNum);
 
     });
-    // custom js / jquery
-  
+    
+    // custom js / jquery / modules
     var arrival_module = {
         init: function () {
            this.cacheDOM();
@@ -33,9 +33,30 @@ $(document).ready(function () {
         },
         cacheDOM: function() {
             this.$arrive = $("#arrive");
+            this.$currentDate = 0;
         },
         bindEvents: function () {
-            this.$arrive.datepicker();
+            this.$arrive.datepicker({
+                minDate: 0,
+                onSelect: function (date) {
+                this.$currentDate = arrival_module.$arrive.datepicker('getDate');
+                this.$extraDay = arrival_module.$arrive.datepicker('getDate');
+                this.$extraDay.setDate(this.$extraDay.getDate() + 1);
+                departure_module.$depart.datepicker("option", {minDate: new Date(this.$extraDay)});
+                this.$currentDate = new Date(this.$currentDate);
+                this.$currentDate  = new Date(this.$currentDate.getUTCFullYear(), this.$currentDate.getUTCMonth(), this.$currentDate.getUTCDate());
+                this.$currentDate.setDate(this.$currentDate.getDate());
+                this.d = this.$currentDate.getDate();
+                if (this.d <= 9) {
+                    this.d = '0' + this.d;
+                }
+                this.m = this.$currentDate.getMonth() + 1;
+                if (this.m <= 9) {
+                    this.m = '0' + this.m;
+                }
+                this.y = this.$currentDate.getFullYear();
+                }
+            });
         }
     };
     var departure_module = {
@@ -45,10 +66,18 @@ $(document).ready(function () {
         },
         cacheDOM: function (){
             this.$depart = $("#depart");
+            this.$nights = $("#nights");
+            this.$departure = 0;
         },
         bindEvents: function () {
-            this.$depart.datepicker();
-        }
+            this.$depart.datepicker({
+                minDate: 1,
+                onSelect: function (date) {
+                this.$departure = departure_module.$depart.datepicker('getDate');
+                this.$nights = Math.ceil(this.$departure - arrival_module.$currentDate) / (1000 * 60 * 60 * 24);
+            }
+        });
+    }
     };
     var restab_module = {
         init: function (){
@@ -62,11 +91,15 @@ $(document).ready(function () {
         },
         bindEvents: function () {
             this.$restab.on("click", function () {
-               this.$resContent.css("display", "block");
-            });
+                if (restab_module.$resContent.css("display") === "none") {
+                    restab_module.$resContent.slideDown(500);
+                } else {
+                    restab_module.$resContent.slideUp(500);
+                }
+          });
         }
     };
-//    restab_module.init();
+    restab_module.init();
     departure_module.init();
     arrival_module.init();
     
@@ -81,14 +114,6 @@ $(document).ready(function () {
         // $('.searchform').css("right", "5px");
         $("#search-icon").css("visibility", "visible");
     });
-    
-    $("#res-tab a").on('click', function () {
-        if ($("#resContent").css("display") === "none") {
-            $("#resContent").css("display", "inherit");
-        } else {
-            $("#resContent").css("display", "none");
-        }
-    });
     $(".search_result_context").children("br").remove();
 
 });

diff --git a/parts/reservation-form-content.php b/parts/reservation-form-content.php
index c9c88c8..d3a3509 100644 (file)
--- a/parts/reservation-form-content.php
+++ b/parts/reservation-form-content.php
@@ -1,5 +1,5 @@
 <div id="resContent">
-    <form id="form" method="post">
+    <form id="form" method="post" action="https://saultstemarie.reservationsystems.com/English/Availability_Check.asp">
         <div class="row resDropdown">
             <div class="small-2 res-date columns resInput">
                 <input id="arrive" type="text" placeholder="Arrive" name="datepicker1" required="required"><img id="arriveCal" src="<?php echo get_template_directory_uri(); ?>/assets/calendar-icon.jpg">
@@ -38,7 +38,7 @@
                 </div>
 
                 <div class="small-2 small-centered columns resBtn">
-                    <input class="res-button" type="button" value="Book Now">
+                    <input class="res-button" type="submit" value="Book Now">
                 </div>
             </div>
         </div>