var CLUBHOUSEWIDGET = { variables: { "venueTime": "2024-03-29T08:36:42.0773502", "bookingInterval": "30", "minimumBookingIntervals": "2", "formSubmitURL": "https://play.tennis.com.au/MeltonSouthTennisClub/court-hire/availability", "bookingSheetURL": "https://play.tennis.com.au/MeltonSouthTennisClub/court-hire/book-by-date", "layout": "Landscape3", //Options are "Landscape1", "Landscape2", "Landscape3", "Portrait1" "colourScheme": "FullColour", //Options are "FullColour", "Light", "Dark", "White", "Neutral" "dates": ["Today|2024-03-29","Tomorrow|2024-03-30"], "times": ["07:00","07:30","08:00","08:30","09:00","09:30","10:00","10:30","11:00","11:30","12:00","12:30","13:00","13:30","14:00","14:30","15:00","15:30","16:00","16:30","17:00","17:30","18:00","18:30","19:00","19:30","20:00","20:30","21:00","21:30"], "durations": ["30","60","90","120"], "surfaces": ["Cushioned Hard Court|CushionedHardCourt","Synthetic Grass|SyntheticGrass"], "target": null, "CSS": "https://play.tennis.com.au/Content/Public/Widget/ta2/CSS/core.css", "tomorrow": false }, HTMLLayouts: { "Landscape1": '

I want to play...

', "Landscape2": '

I want to play...

View schedule

', "Landscape3": '

I want to play...

', "Portrait1": '

I want to play...

' }, init: function() { var self = this; self.loadCSS(); //Write the HTML to the page var target = document.getElementById("CHW-availability-search"); if (!target) { return; } if (target) { //Get the scripts self.getScripts(); //Set the layout self.variables.target = target; self.variables.target.innerHTML = self.HTMLLayouts[this.variables.layout]; //Load the colour scheme by adding a class to the widget DIV target.className = self.variables.colourScheme; //Load layout specific style target.className += " " + self.variables.layout; var form = null; form = document.getElementById("CHW-AS-form"); //Update the form action (if our form is there and there is no pre-existing form) /*if (form != null) { form.action = self.variables.formSubmitURL; }*/ //(if our form doesn't exist (usually means there is a pre-existing form) var button = document.getElementById("CHW-AS-button"); button.onclick = function(e) { e.preventDefault(); self.submitForm(); return false; }; //Update the booking sheet URL var bookingSheet = document.getElementById("CHW-AS-booking-sheet"); bookingSheet.href = self.variables.bookingSheetURL; self.loadDates(); self.loadTimes(); self.loadDurations(); self.loadSurfaces(); } }, loadCSS: function() { var htmlTag = document.getElementsByTagName("head"); var newCSSFile = document.createElement("link"); newCSSFile.type = "text/css"; newCSSFile.media = "screen"; newCSSFile.rel = "stylesheet"; newCSSFile.href = this.variables.CSS; htmlTag[0].appendChild(newCSSFile); }, loadDates: function() { var datesOptions = document.getElementById("CHW-AS-Date"); var dateValues = this.variables.dates; var dateValuesL = dateValues.length; var self = this; //Loop through all the values in the dates variable and write in the option tags for (i = 0; i < dateValuesL; i++) { var parts = dateValues[i].split("|"); var newOption = document.createElement("option"); newOption.value = parts[1]; var textValue = document.createTextNode(parts[0]); newOption.appendChild(textValue); datesOptions.appendChild(newOption); } datesOptions.onchange = function() { //Reload the times self.loadTimes(); if (jQuery) { jQuery("#CHW-AS-Time").trigger("change"); } }; }, loadTimes: function() { var self = this; var venueTime = self.utilities.parseISO8601(self.variables.venueTime); var timeOption = self.utilities.parseISO8601(self.variables.venueTime); var selectedDate = self.utilities.parseISO8601(document.getElementById("CHW-AS-Date").value); var timesOptions = document.getElementById("CHW-AS-Time"); var timeValues = this.variables.times; var timeValuesL = timeValues.length; //Work out if the selected date is tomorrow or today (if the selected date is greater than the venue time, then it's definately tomorrow) if (selectedDate > venueTime) { self.variables.tomorrow = true; } else { self.variables.tomorrow = false; } //Empty the time select timesOptions.innerHTML = ""; function addOption(i) { var newOption = document.createElement("option"); newOption.value = timeValues[i]; var textValue = document.createTextNode("at " + timeValues[i]); newOption.appendChild(textValue); timesOptions.appendChild(newOption); } //Loop through all the values in the times variable and write in the option tags for (i = 0; i < timeValuesL; i++) { var timeStr = timeValues[i].split(":"); timeOption.setHours(timeStr[0]); timeOption.setMinutes(timeStr[1]); //If tomorrow is selected, output all the times if (self.variables.tomorrow == true) { addOption(i); } //If tomorrow is NOT selecetd, only output times in the future else { if (venueTime < timeOption) { addOption(i); } } } timesOptions.selectedIndex = "0"; function fireEvent(element, event) { if (document.createEventObject) { // dispatch for IE var evt = document.createEventObject(); return element.fireEvent('on' + event, evt) } else { // dispatch for firefox + others var evt = document.createEvent("HTMLEvents"); evt.initEvent(event, true, true); // event type,bubbling,cancelable return !element.dispatchEvent(evt); } } fireEvent(timesOptions, "change") }, loadDurations: function() { var durationOptions = document.getElementById("CHW-AS-Duration"); var durationValues = this.variables.durations; var durationValuesL = durationValues.length; //Loop through all the values in the times variable and write in the option tags for (i = 0; i < durationValuesL; i++) { var newOption = document.createElement("option"); newOption.value = durationValues[i]; var textValue = document.createTextNode("for " + durationValues[i] + " minutes"); newOption.appendChild(textValue); durationOptions.appendChild(newOption); } }, loadSurfaces: function() { var surfaceOptions = document.getElementById("CHW-AS-Surface"); var surfaceValues = this.variables.surfaces; var surfaceValuesL = surfaceValues.length; var newOption = document.createElement("option"); var textValue = document.createTextNode("on any surface"); newOption.appendChild(textValue); surfaceOptions.appendChild(newOption); //Loop through all the values in the times variable and write in the option tags for (i = 0; i < surfaceValuesL; i++) { newOption = document.createElement("option"); var parts = surfaceValues[i].split("|"); var textValue = ""; textValue = document.createTextNode("on " + parts[0].toLowerCase()); newOption.value = parts[1]; newOption.appendChild(textValue); surfaceOptions.appendChild(newOption); } }, submitForm: function() { var self = this; var dateVal = document.getElementById("CHW-AS-Date").value; var timeVal = document.getElementById("CHW-AS-Time").value; var durationVal = document.getElementById("CHW-AS-Duration").value; var surfaceVal = document.getElementById("CHW-AS-Surface").value; var minimumSelectedIntervals = self.getSelectedInterval(); var errorMsg = document.createElement('p'); var container = document.getElementsByClassName('CHW-AS-container')[0]; var submitString = self.variables.formSubmitURL + "?Date=" + dateVal + "&Time=" + timeVal + "&Duration=" + durationVal + "&Surface=" + surfaceVal; errorMsg.id = 'CHW-AS-minimum-booking-error-msg'; errorMsg.className = 'CHW-AS-minimum-booking-error-msg'; if(minimumSelectedIntervals >= parseInt(this.variables.minimumBookingIntervals, 10)) { document.location.href = submitString; } else if(!document.getElementById('CHW-AS-minimum-booking-error-msg')) { errorMsg.innerHTML = 'Your booking does not meet the minimum duration. Please extend finish time.'; container.appendChild(errorMsg); } }, getSelectedInterval: function(){ var selectedIntervalDuration = parseFloat(document.getElementById('CHW-AS-Duration').value, 10); var defaultIntervals = parseInt(this.variables.bookingInterval, 10); if (defaultIntervals !== null && typeof defaultIntervals !== 'undefined') { return Math.floor(selectedIntervalDuration / defaultIntervals); } else { return false; } }, getScripts: function(url, callback) { var thisPageUsingOtherJSLibrary = false, supportedVersion = null; var getScript = function(url, callback) { var script = document.createElement('script'); script.src = url; var body = document.getElementsByTagName('body')[0], done = false; // Attach handlers for all browsers script.onload = script.onreadystatechange = function() { if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) { done = true; // callback function provided as param callback(); script.onload = script.onreadystatechange = null; }; }; body.appendChild(script); }; var getjQueryVersion = function() { return jQuery.fn.jquery; }; var comparejQueryVersions = function(v1, v2) { //v1 is the existing version //v2 is the minimum spec //This function returns "true" if v1 meets the minimum spec (equal or greather than) //This function returns "false" if v2 DOES NOT meet the minimum spec var v1arr = v1.split("."), v2arr = v2.split("."), supported = false; if (v1arr[0] && v1arr[1] && v2arr[0] && v2arr[1]) { if (parseInt(v2arr[0]) < parseInt(v1arr[0])) { supported = true; } if (parseInt(v1arr[0]) == parseInt(v2arr[0])) { if (parseInt(v1arr[1]) >= parseInt(v2arr[1])) { supported = true; } } } return supported; }; var jQueryLoaded = function() { return (typeof jQuery == 'undefined') ? false : true; }; function getSelectTwo() { jQuery(function() { jQuery.noConflict(); //Get select2 - for styled selects var selectTwo = document.createElement("script"); selectTwo.src = "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"; var body = document.getElementsByTagName("body")[0]; //Select2 load event (once the JS file has loaded) selectTwo.onload = function() { jQuery("#CHW-availability-search select").select2({ minimumResultsForSearch: Infinity, width: "100%" }); } body.appendChild(selectTwo); }); } //Check for jQuery if (typeof jQuery === 'undefined') { if (typeof $ === 'function') { // warning, global var thisPageUsingOtherJSLibrary = true; } getScript('https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', function() { if (typeof jQuery === 'undefined') { // Super failsafe - still somehow failed... } else { // jQuery loaded! Make sure to use .noConflict just in case //fancyCode(); if (thisPageUsingOtherJSLibrary) { // Run your jQuery Code getSelectTwo(); } else { // Use .noConflict(), then run your jQuery Code getSelectTwo(); } } }); } else { supportedVersion = comparejQueryVersions(getjQueryVersion(), '1.8'); if (supportedVersion) { // Run your jQuery Code getSelectTwo(); } else { getScript('https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', function() { getSelectTwo(); }); } } }, utilities: { parseISO8601: function(dateStringInRange) { var isoExp1 = /(\d{4})-(\d{2})-(\d{2})/; var isoExp2 = /(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})/; var parts = isoExp2.exec(dateStringInRange); if (parts) return new Date(+parts[1], +parts[2] - 1, +parts[3], +parts[4], +parts[5], +parts[6]); parts = isoExp1.exec(dateStringInRange); if (parts) return new Date(+parts[1], +parts[2] - 1, +parts[3]); return new Date(NaN); } } } CLUBHOUSEWIDGET.init();