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": '
',
"Landscape2": '',
"Landscape3": '',
"Portrait1": ''
},
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();