maket/MaketRandevu
1
1
Fork 0
Code Issues 15 Pull requests Projects Releases 4 Packages Wiki Activity

Refactored the frontend_book.js

Browse source
This commit is contained in:
Alex Tselegidis 2016-04-26 21:51:16 +02:00
parent ebfd04172c
commit e3eede1745
1 changed files with 91 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

178
src/assets/js/frontend_book.js
View file

@ -9,20 +9,28 @@
* @since v1.0.0 * @since v1.0.0
* ---------------------------------------------------------------------------- */ * ---------------------------------------------------------------------------- */
window.FrontendBook = window.FrontendBook || {};
/** /**
* This namespace contains functions that implement the book appointment page * Frontend Book
*
* This module contains functions that implement the book appointment page
* functionality. Once the initialize() method is called the page is fully * functionality. Once the initialize() method is called the page is fully
* functional and can serve the appointment booking process. * functional and can serve the appointment booking process.
* *
* @namespace FrontendBook * @module FrontendBook
*/ */
var FrontendBook = { (function(exports) {
'use strict';
/** /**
* Determines the functionality of the page. * Determines the functionality of the page.
* *
* @type {bool} * @type {bool}
*/ */
manageMode: false, exports.manageMode = false;
/** /**
* This method initializes the book appointment page. * This method initializes the book appointment page.
@ -32,14 +40,9 @@ var FrontendBook = {
* @param {bool} manageMode (OPTIONAL) Determines whether the customer is going * @param {bool} manageMode (OPTIONAL) Determines whether the customer is going
* to make changes to an existing appointment rather than booking a new one. * to make changes to an existing appointment rather than booking a new one.
*/ */
initialize: function(bindEventHandlers, manageMode) { exports.initialize = function(bindEventHandlers, manageMode) {
if (bindEventHandlers === undefined) { bindEventHandlers = bindEventHandlers || true;
bindEventHandlers = true; // Default Value manageMode = manageMode || false;
}
if (manageMode === undefined) {
manageMode = false; // Default Value
}
if (window.console === undefined) { if (window.console === undefined) {
window.console = function() {} // IE compatibility window.console = function() {} // IE compatibility
@ -82,13 +85,13 @@ var FrontendBook = {
closeText: EALang['close'], closeText: EALang['close'],
onSelect: function(dateText, instance) { onSelect: function(dateText, instance) {
FrontendBook.getAvailableHours(dateText); _getAvailableHours(dateText);
FrontendBook.updateConfirmFrame(); _updateConfirmFrame();
}, },
onChangeMonthYear: function(year, month, instance) { onChangeMonthYear: function(year, month, instance) {
var currentDate = new Date(year, month - 1, 1); var currentDate = new Date(year, month - 1, 1);
FrontendBook.getUnavailableDates($('#select-provider').val(), $('#select-service').val(), _getUnavailableDates($('#select-provider').val(), $('#select-service').val(),
currentDate.toString('yyyy-MM-dd')); currentDate.toString('yyyy-MM-dd'));
} }
}); });
@ -97,24 +100,23 @@ var FrontendBook = {
// Bind the event handlers (might not be necessary every time // Bind the event handlers (might not be necessary every time
// we use this class). // we use this class).
if (bindEventHandlers) { if (bindEventHandlers) {
FrontendBook.bindEventHandlers(); _bindEventHandlers();
} }
// If the manage mode is true, the appointments data should be // If the manage mode is true, the appointments data should be
// loaded by default. // loaded by default.
if (FrontendBook.manageMode) { if (FrontendBook.manageMode) {
FrontendBook.applyAppointmentData(GlobalVariables.appointmentData, _applyAppointmentData(GlobalVariables.appointmentData,
GlobalVariables.providerData, GlobalVariables.customerData); GlobalVariables.providerData, GlobalVariables.customerData);
} else { } else {
$('#select-service').trigger('change'); // Load the available hours. $('#select-service').trigger('change'); // Load the available hours.
} }
}, };
/** /**
* This method binds the necessary event handlers for the book * This method binds the necessary event handlers for the book appointments page.
* appointments page.
*/ */
bindEventHandlers: function() { function _bindEventHandlers() {
/** /**
* Event: Selected Provider "Changed" * Event: Selected Provider "Changed"
* *
@ -122,9 +124,9 @@ var FrontendBook = {
* date - time periods must be updated. * date - time periods must be updated.
*/ */
$('#select-provider').change(function() { $('#select-provider').change(function() {
FrontendBook.getUnavailableDates($(this).val(), $('#select-service').val(), _getUnavailableDates($(this).val(), $('#select-service').val(),
$('#select-date').datepicker('getDate').toString('yyyy-MM-dd')); $('#select-date').datepicker('getDate').toString('yyyy-MM-dd'));
FrontendBook.updateConfirmFrame(); _updateConfirmFrame();
}); });
/** /**
@ -155,10 +157,10 @@ var FrontendBook = {
$('#select-provider').append(new Option('- ' +EALang['any_provider'] + ' -', 'any-provider')); $('#select-provider').append(new Option('- ' +EALang['any_provider'] + ' -', 'any-provider'));
} }
FrontendBook.getUnavailableDates($('#select-provider').val(), $(this).val(), _getUnavailableDates($('#select-provider').val(), $(this).val(),
$('#select-date').datepicker('getDate').toString('yyyy-MM-dd')); $('#select-date').datepicker('getDate').toString('yyyy-MM-dd'));
FrontendBook.updateConfirmFrame(); _updateConfirmFrame();
FrontendBook.updateServiceDescription($('#select-service').val(), $('#service-description')); _updateServiceDescription($('#select-service').val(), $('#service-description'));
}); });
/** /**
@ -192,10 +194,10 @@ var FrontendBook = {
// If we are on the 3rd tab then we will need to validate the user's // If we are on the 3rd tab then we will need to validate the user's
// input before proceeding to the next step. // input before proceeding to the next step.
if ($(this).attr('data-step_index') === '3') { if ($(this).attr('data-step_index') === '3') {
if (!FrontendBook.validateCustomerForm()) { if (!_validateCustomerForm()) {
return; // Validation failed, do not continue. return; // Validation failed, do not continue.
} else { } else {
FrontendBook.updateConfirmFrame(); _updateConfirmFrame();
} }
} }
@ -234,7 +236,7 @@ var FrontendBook = {
$('#available-hours').on('click', '.available-hour', function() { $('#available-hours').on('click', '.available-hour', function() {
$('.selected-hour').removeClass('selected-hour'); $('.selected-hour').removeClass('selected-hour');
$(this).addClass('selected-hour'); $(this).addClass('selected-hour');
FrontendBook.updateConfirmFrame(); _updateConfirmFrame();
}); });
if (FrontendBook.manageMode) { if (FrontendBook.manageMode) {
@ -278,7 +280,7 @@ var FrontendBook = {
* another customer or event. * another customer or event.
*/ */
$('#book-appointment-submit').click(function(event) { $('#book-appointment-submit').click(function(event) {
FrontendBook.registerAppointment(); _registerAppointment();
}); });
/** /**
@ -287,7 +289,7 @@ var FrontendBook = {
$('.captcha-title small').click(function(event) { $('.captcha-title small').click(function(event) {
$('.captcha-image').attr('src', GlobalVariables.baseUrl + '/index.php/captcha?' + Date.now()); $('.captcha-image').attr('src', GlobalVariables.baseUrl + '/index.php/captcha?' + Date.now());
}); });
}, };
/** /**
* This function makes an ajax call and returns the available * This function makes an ajax call and returns the available
@ -296,11 +298,10 @@ var FrontendBook = {
* @param {string} selDate The selected date of which the available * @param {string} selDate The selected date of which the available
* hours we need to receive. * hours we need to receive.
*/ */
getAvailableHours: function(selDate) { function _getAvailableHours(selDate) {
$('#available-hours').empty(); $('#available-hours').empty();
// Find the selected service duration (it is going to // Find the selected service duration (it is going to be send within the "postData" object).
// be send within the "postData" object).
var selServiceDuration = 15; // Default value of duration (in minutes). var selServiceDuration = 15; // Default value of duration (in minutes).
$.each(GlobalVariables.availableServices, function(index, service) { $.each(GlobalVariables.availableServices, function(index, service) {
if (service['id'] == $('#select-service').val()) { if (service['id'] == $('#select-service').val()) {
@ -310,24 +311,24 @@ var FrontendBook = {
// If the manage mode is true then the appointment's start // If the manage mode is true then the appointment's start
// date should return as available too. // date should return as available too.
var appointmentId = (FrontendBook.manageMode) var appointmentId = (FrontendBook.manageMode) ? GlobalVariables.appointmentData['id'] : undefined;
? GlobalVariables.appointmentData['id'] : undefined;
// Make ajax post request and get the available hours. // Make ajax post request and get the available hours.
var postUrl = GlobalVariables.baseUrl + '/index.php/appointments/ajax_get_available_hours'; var postUrl = GlobalVariables.baseUrl + '/index.php/appointments/ajax_get_available_hours',
postData = {
var postData = { csrfToken: GlobalVariables.csrfToken,
'csrfToken': GlobalVariables.csrfToken, service_id: $('#select-service').val(),
'service_id': $('#select-service').val(), provider_id: $('#select-provider').val(),
'provider_id': $('#select-provider').val(), selected_date: selDate,
'selected_date': selDate, service_duration: selServiceDuration,
'service_duration': selServiceDuration, manage_mode: FrontendBook.manageMode,
'manage_mode': FrontendBook.manageMode, appointment_id: appointmentId
'appointment_id': appointmentId
}; };
$.post(postUrl, postData, function(response) { $.post(postUrl, postData, function(response) {
if (!GeneralFunctions.handleAjaxExceptions(response)) return; if (!GeneralFunctions.handleAjaxExceptions(response)) {
return;
}
// The response contains the available hours for the selected provider and // The response contains the available hours for the selected provider and
// service. Fill the available hours div with response data. // service. Fill the available hours div with response data.
@ -358,13 +359,13 @@ var FrontendBook = {
$('.available-hour:eq(0)').addClass('selected-hour'); $('.available-hour:eq(0)').addClass('selected-hour');
} }
FrontendBook.updateConfirmFrame(); _updateConfirmFrame();
} else { } else {
$('#available-hours').text(EALang['no_available_hours']); $('#available-hours').text(EALang['no_available_hours']);
} }
}, 'json').fail(GeneralFunctions.ajaxFailureHandler); }, 'json').fail(GeneralFunctions.ajaxFailureHandler);
}, }
/** /**
* This function validates the customer's data input. The user cannot contiue * This function validates the customer's data input. The user cannot contiue
@ -372,7 +373,7 @@ var FrontendBook = {
* *
* @return {bool} Returns the validation result. * @return {bool} Returns the validation result.
*/ */
validateCustomerForm: function() { function _validateCustomerForm() {
$('#wizard-frame-3 input').css('border', ''); $('#wizard-frame-3 input').css('border', '');
try { try {
@ -401,14 +402,14 @@ var FrontendBook = {
$('#form-message').text(exc); $('#form-message').text(exc);
return false; return false;
} }
}, }
/** /**
* Every time this function is executed, it updates the confirmation * Every time this function is executed, it updates the confirmation
* page with the latest customer settigns and input for the appointment * page with the latest customer settigns and input for the appointment
* booking. * booking.
*/ */
updateConfirmFrame: function() { function _updateConfirmFrame() {
// Appointment Details // Appointment Details
var selectedDate = $('#select-date').datepicker('getDate'); var selectedDate = $('#select-date').datepicker('getDate');
if (selectedDate !== null) { if (selectedDate !== null) {
@ -469,23 +470,23 @@ var FrontendBook = {
var postData = new Object(); var postData = new Object();
postData['customer'] = { postData['customer'] = {
'last_name': $('#last-name').val(), last_name: $('#last-name').val(),
'first_name': $('#first-name').val(), first_name: $('#first-name').val(),
'email': $('#email').val(), email: $('#email').val(),
'phone_number': $('#phone-number').val(), phone_number: $('#phone-number').val(),
'address': $('#address').val(), address: $('#address').val(),
'city': $('#city').val(), city: $('#city').val(),
'zip_code': $('#zip-code').val() zip_code: $('#zip-code').val()
}; };
postData['appointment'] = { postData['appointment'] = {
'start_datetime': $('#select-date').datepicker('getDate').toString('yyyy-MM-dd') start_datetime: $('#select-date').datepicker('getDate').toString('yyyy-MM-dd')
+ ' ' + $('.selected-hour').text() + ':00', + ' ' + $('.selected-hour').text() + ':00',
'end_datetime': FrontendBook.calcEndDatetime(), end_datetime: _calcEndDatetime(),
'notes': $('#notes').val(), notes: $('#notes').val(),
'is_unavailable': false, is_unavailable: false,
'id_users_provider': $('#select-provider').val(), id_users_provider: $('#select-provider').val(),
'id_services': $('#select-service').val() id_services: $('#select-service').val()
}; };
postData['manage_mode'] = FrontendBook.manageMode; postData['manage_mode'] = FrontendBook.manageMode;
@ -496,7 +497,7 @@ var FrontendBook = {
} }
$('input[name="csrfToken"]').val(GlobalVariables.csrfToken); $('input[name="csrfToken"]').val(GlobalVariables.csrfToken);
$('input[name="post_data"]').val(JSON.stringify(postData)); $('input[name="post_data"]').val(JSON.stringify(postData));
}, }
/** /**
* This method calculates the end datetime of the current appointment. * This method calculates the end datetime of the current appointment.
@ -504,7 +505,7 @@ var FrontendBook = {
* *
* @return {string} Returns the end datetime in string format. * @return {string} Returns the end datetime in string format.
*/ */
calcEndDatetime: function() { function _calcEndDatetime() {
// Find selected service duration. // Find selected service duration.
var selServiceDuration = undefined; var selServiceDuration = undefined;
@ -528,7 +529,7 @@ var FrontendBook = {
} }
return endDatetime.toString('yyyy-MM-dd HH:mm:ss'); return endDatetime.toString('yyyy-MM-dd HH:mm:ss');
}, }
/** /**
* This method applies the appointment's data to the wizard so * This method applies the appointment's data to the wizard so
@ -539,7 +540,7 @@ var FrontendBook = {
* @param {object} customer Selected customer's data. * @param {object} customer Selected customer's data.
* @returns {bool} Returns the operation result. * @returns {bool} Returns the operation result.
*/ */
applyAppointmentData: function(appointment, provider, customer) { function _applyAppointmentData(appointment, provider, customer) {
try { try {
// Select Service & Provider // Select Service & Provider
$('#select-service').val(appointment['id_services']).trigger('change'); $('#select-service').val(appointment['id_services']).trigger('change');
@ -548,7 +549,7 @@ var FrontendBook = {
// Set Appointment Date // Set Appointment Date
$('#select-date').datepicker('setDate', $('#select-date').datepicker('setDate',
Date.parseExact(appointment['start_datetime'], 'yyyy-MM-dd HH:mm:ss')); Date.parseExact(appointment['start_datetime'], 'yyyy-MM-dd HH:mm:ss'));
FrontendBook.getAvailableHours($('#select-date').val()); _getAvailableHours($('#select-date').val());
// Apply Customer's Data // Apply Customer's Data
$('#last-name').val(customer['last_name']); $('#last-name').val(customer['last_name']);
@ -562,13 +563,13 @@ var FrontendBook = {
? appointment['notes'] : ''; ? appointment['notes'] : '';
$('#notes').val(appointmentNotes); $('#notes').val(appointmentNotes);
FrontendBook.updateConfirmFrame(); _updateConfirmFrame();
return true; return true;
} catch(exc) { } catch(exc) {
return false; return false;
} }
}, }
/** /**
* This method updates a div's html content with a brief description of the * This method updates a div's html content with a brief description of the
@ -579,7 +580,7 @@ var FrontendBook = {
* @param {object} $div The destination div jquery object (e.g. provide $('#div-id') * @param {object} $div The destination div jquery object (e.g. provide $('#div-id')
* object as value). * object as value).
*/ */
updateServiceDescription: function(serviceId, $div) { function _updateServiceDescription(serviceId, $div) {
var html = ''; var html = '';
$.each(GlobalVariables.availableServices, function(index, service) { $.each(GlobalVariables.availableServices, function(index, service) {
@ -612,7 +613,7 @@ var FrontendBook = {
} else { } else {
$div.hide(); $div.hide();
} }
}, }
/** /**
* Register an appointment to the database. * Register an appointment to the database.
@ -620,7 +621,7 @@ var FrontendBook = {
* This method will make an ajax call to the appointments controller that will register * This method will make an ajax call to the appointments controller that will register
* the appointment to the database. * the appointment to the database.
*/ */
registerAppointment: function() { function _registerAppointment() {
var $captchaText = $('.captcha-text'); var $captchaText = $('.captcha-text');
if ($captchaText.length > 0) { if ($captchaText.length > 0) {
@ -658,13 +659,13 @@ var FrontendBook = {
$layer $layer
.appendTo('body') .appendTo('body')
.css({ .css({
'background': 'white', background: 'white',
'position': 'fixed', position: 'fixed',
'top': '0', top: '0',
'left': '0', left: '0',
'height': '100vh', height: '100vh',
'width': '100vw', width: '100vw',
'opacity': '0.5' opacity: '0.5'
}); });
} }
}) })
@ -699,21 +700,21 @@ var FrontendBook = {
}) })
.always(function() { .always(function() {
$layer.remove(); $layer.remove();
}) });
}, }
/** /**
* Get the unavailable dates of a provider. * Get the unavailable dates of a provider.
* *
* This method will fetch the unavailable dates of the selected provider and service and then it will * This method will fetch the unavailable dates of the selected provider and service and then it will
* select the first available date (if any). It uses the "getAvailableHours" method to fetch the appointment * select the first available date (if any). It uses the "_getAvailableHours" method to fetch the appointment
* hours of the selected date. * hours of the selected date.
* *
* @param {int} providerId The selected provider ID. * @param {int} providerId The selected provider ID.
* @param {int} serviceId The selected service ID. * @param {int} serviceId The selected service ID.
* @param {string} selectedDateString Y-m-d value of the selected date. * @param {string} selectedDateString Y-m-d value of the selected date.
*/ */
getUnavailableDates: function(providerId, serviceId, selectedDateString) { function _getUnavailableDates(providerId, serviceId, selectedDateString) {
var url = GlobalVariables.baseUrl + '/index.php/appointments/ajax_get_unavailable_dates', var url = GlobalVariables.baseUrl + '/index.php/appointments/ajax_get_unavailable_dates',
data = { data = {
provider_id: providerId, provider_id: providerId,
@ -737,7 +738,7 @@ var FrontendBook = {
var currentDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), i); var currentDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), i);
if ($.inArray(currentDate.toString('yyyy-MM-dd'), response) === -1) { if ($.inArray(currentDate.toString('yyyy-MM-dd'), response) === -1) {
$('#select-date').datepicker('setDate', currentDate); $('#select-date').datepicker('setDate', currentDate);
FrontendBook.getAvailableHours(currentDate.toString('yyyy-MM-dd')); _getAvailableHours(currentDate.toString('yyyy-MM-dd'));
break; break;
} }
} }
@ -759,4 +760,5 @@ var FrontendBook = {
}) })
.fail(GeneralFunctions.ajaxFailureHandler); .fail(GeneralFunctions.ajaxFailureHandler);
} }
};
})(window.FrontendBook);