ifl/iflrandevu
1
1
Fork 0
forked from mirrors/easyappointments
Code Issues 6 Pull requests Releases 3 Activity

Enhancements in the fronted_book.js comments.

Browse source
This commit is contained in:
Alex Tselegidis 2016-05-14 12:07:16 +02:00
parent 5da94d88a6
commit 90bcd361da
1 changed files with 37 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -14,9 +14,9 @@ window.FrontendBook = window.FrontendBook || {};
/** /**
* Frontend Book * Frontend Book
* *
* This module contains functions that implement the book appointment page * This module contains functions that implement the book appointment page functionality. Once the
* functionality. Once the initialize() method is called the page is fully * initialize() method is called the page is fully functional and can serve the appointment booking
* functional and can serve the appointment booking process. * process.
* *
* @module FrontendBook * @module FrontendBook
*/ */
@ -27,16 +27,16 @@ window.FrontendBook = window.FrontendBook || {};
/** /**
* Determines the functionality of the page. * Determines the functionality of the page.
* *
* @type {bool} * @type {Boolean}
*/ */
exports.manageMode = false; exports.manageMode = false;
/** /**
* This method initializes the book appointment page. * This method initializes the book appointment page.
* *
* @param {bool} bindEventHandlers (OPTIONAL) Determines whether the default * @param {Boolean} bindEventHandlers (OPTIONAL) Determines whether the default
* event handlers will be binded to the dom elements. * event handlers will be binded to the dom elements.
* @param {bool} manageMode (OPTIONAL) Determines whether the customer is going * @param {Boolean} 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.
*/ */
exports.initialize = function(bindEventHandlers, manageMode) { exports.initialize = function(bindEventHandlers, manageMode) {
@ -66,7 +66,9 @@ window.FrontendBook = window.FrontendBook || {};
minDate: 0, minDate: 0,
defaultDate: Date.today(), defaultDate: Date.today(),
dayNames: [EALang['sunday'], EALang['monday'], EALang['tuesday'], EALang['wednesday'], EALang['thursday'], EALang['friday'], EALang['saturday']], dayNames: [
EALang['sunday'], EALang['monday'], EALang['tuesday'], EALang['wednesday'],
EALang['thursday'], EALang['friday'], EALang['saturday']],
dayNamesShort: [EALang['sunday'].substr(0,3), EALang['monday'].substr(0,3), dayNamesShort: [EALang['sunday'].substr(0,3), EALang['monday'].substr(0,3),
EALang['tuesday'].substr(0,3), EALang['wednesday'].substr(0,3), EALang['tuesday'].substr(0,3), EALang['wednesday'].substr(0,3),
EALang['thursday'].substr(0,3), EALang['friday'].substr(0,3), EALang['thursday'].substr(0,3), EALang['friday'].substr(0,3),
@ -119,8 +121,7 @@ window.FrontendBook = window.FrontendBook || {};
/** /**
* Event: Selected Provider "Changed" * Event: Selected Provider "Changed"
* *
* Whenever the provider changes the available appointment * Whenever the provider changes the available appointment date - time periods must be updated.
* date - time periods must be updated.
*/ */
$('#select-provider').change(function() { $('#select-provider').change(function() {
FrontendBookApi.getUnavailableDates($(this).val(), $('#select-service').val(), FrontendBookApi.getUnavailableDates($(this).val(), $('#select-service').val(),
@ -165,9 +166,8 @@ window.FrontendBook = window.FrontendBook || {};
/** /**
* Event: Next Step Button "Clicked" * Event: Next Step Button "Clicked"
* *
* This handler is triggered every time the user pressed the * This handler is triggered every time the user pressed the "next" button on the book wizard.
* "next" button on the book wizard. Some special tasks might * Some special tasks might be perfomed, depending the current wizard step.
* be perfomed, depending the current wizard step.
*/ */
$('.button-next').click(function() { $('.button-next').click(function() {
// If we are on the first step and there is not provider selected do not continue // If we are on the first step and there is not provider selected do not continue
@ -213,8 +213,8 @@ window.FrontendBook = window.FrontendBook || {};
/** /**
* Event: Back Step Button "Clicked" * Event: Back Step Button "Clicked"
* *
* This handler is triggered every time the user pressed the * This handler is triggered every time the user pressed the "back" button on the
* "back" button on the book wizard. * book wizard.
*/ */
$('.button-back').click(function() { $('.button-back').click(function() {
var prevTabIndex = parseInt($(this).attr('data-step_index')) - 1; var prevTabIndex = parseInt($(this).attr('data-step_index')) - 1;
@ -242,10 +242,11 @@ window.FrontendBook = window.FrontendBook || {};
/** /**
* Event: Cancel Appointment Button "Click" * Event: Cancel Appointment Button "Click"
* *
* When the user clicks the "Cancel" button this form is going to * When the user clicks the "Cancel" button this form is going to be submitted. We need
* be submitted. We need the user to confirm this action because * the user to confirm this action because once the appointment is cancelled, it will be
* once the appointment is cancelled, it will be delete from the * delete from the database.
* database. *
* @param {jQuery.Event} event
*/ */
$('#cancel-appointment').click(function(event) { $('#cancel-appointment').click(function(event) {
var dialogButtons = {}; var dialogButtons = {};
@ -277,6 +278,8 @@ window.FrontendBook = window.FrontendBook || {};
* Before the form is submitted to the server we need to make sure that * Before the form is submitted to the server we need to make sure that
* in the meantime the selected appointment date/time wasn't reserved by * in the meantime the selected appointment date/time wasn't reserved by
* another customer or event. * another customer or event.
*
* @param {jQuery.Event} event
*/ */
$('#book-appointment-submit').click(function(event) { $('#book-appointment-submit').click(function(event) {
FrontendBookApi.registerAppointment(); FrontendBookApi.registerAppointment();
@ -284,6 +287,8 @@ window.FrontendBook = window.FrontendBook || {};
/** /**
* Event: Refresh captcha image. * Event: Refresh captcha image.
*
* @param {jQuery.Event} event
*/ */
$('.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());
@ -294,7 +299,7 @@ window.FrontendBook = window.FrontendBook || {};
* This function validates the customer's data input. The user cannot contiue * This function validates the customer's data input. The user cannot contiue
* without passing all the validation checks. * without passing all the validation checks.
* *
* @return {bool} Returns the validation result. * @return {Boolean} Returns the validation result.
*/ */
function _validateCustomerForm() { function _validateCustomerForm() {
$('#wizard-frame-3 input').css('border', ''); $('#wizard-frame-3 input').css('border', '');
@ -334,12 +339,15 @@ window.FrontendBook = window.FrontendBook || {};
exports.updateConfirmFrame = function() { exports.updateConfirmFrame = function() {
// Appointment Details // Appointment Details
var selectedDate = $('#select-date').datepicker('getDate'); var selectedDate = $('#select-date').datepicker('getDate');
if (selectedDate !== null) { if (selectedDate !== null) {
selectedDate = GeneralFunctions.formatDate(selectedDate, GlobalVariables.dateFormat); selectedDate = GeneralFunctions.formatDate(selectedDate, GlobalVariables.dateFormat);
} }
var selServiceId = $('#select-service').val(); var selServiceId = $('#select-service').val(),
var servicePrice, serviceCurrency; servicePrice,
serviceCurrency;
$.each(GlobalVariables.availableServices, function(index, service) { $.each(GlobalVariables.availableServices, function(index, service) {
if (service.id == selServiceId) { if (service.id == selServiceId) {
servicePrice = '<br>' + service.price; servicePrice = '<br>' + service.price;
@ -348,7 +356,6 @@ window.FrontendBook = window.FrontendBook || {};
} }
}); });
var html = var html =
'<h4>' + $('#select-service option:selected').text() + '</h4>' + '<h4>' + $('#select-service option:selected').text() + '</h4>' +
'<p>' '<p>'
@ -424,7 +431,7 @@ window.FrontendBook = window.FrontendBook || {};
* This method calculates the end datetime of the current appointment. * This method calculates the end datetime of the current appointment.
* End datetime is depending on the service and start datetime fieldss. * End datetime is depending on the service and start datetime fieldss.
* *
* @return {string} Returns the end datetime in string format. * @return {String} Returns the end datetime in string format.
*/ */
function _calcEndDatetime() { function _calcEndDatetime() {
// Find selected service duration. // Find selected service duration.
@ -456,10 +463,11 @@ window.FrontendBook = window.FrontendBook || {};
* This method applies the appointment's data to the wizard so * This method applies the appointment's data to the wizard so
* that the user can start making changes on an existing record. * that the user can start making changes on an existing record.
* *
* @param {object} appointment Selected appointment's data. * @param {Object} appointment Selected appointment's data.
* @param {object} provider Selected provider's data. * @param {Object} provider Selected provider's data.
* @param {object} customer Selected customer's data. * @param {Object} customer Selected customer's data.
* @returns {bool} Returns the operation result. *
* @return {Boolean} Returns the operation result.
*/ */
function _applyAppointmentData(appointment, provider, customer) { function _applyAppointmentData(appointment, provider, customer) {
try { try {
@ -497,8 +505,8 @@ window.FrontendBook = window.FrontendBook || {};
* user selected service (only if available in db). This is usefull for the * user selected service (only if available in db). This is usefull for the
* customers upon selecting the correct service. * customers upon selecting the correct service.
* *
* @param {int} serviceId The selected service record id. * @param {Number} serviceId The selected service record id.
* @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).
*/ */
function _updateServiceDescription(serviceId, $div) { function _updateServiceDescription(serviceId, $div) {