2013-05-20 20:21:58 +03:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
2013-06-13 19:25:34 +03:00
|
|
|
<title>JSDoc: Source: frontend_book.js</title>
|
2013-05-20 20:21:58 +03:00
|
|
|
|
|
|
|
|
<script src="scripts/prettify/prettify.js"> </script>
|
|
|
|
|
<script src="scripts/prettify/lang-css.js"> </script>
|
|
|
|
|
<!--[if lt IE 9]>
|
|
|
|
|
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
|
|
|
<![endif]-->
|
|
|
|
|
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
|
|
|
|
|
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<div id="main">
|
|
|
|
|
|
2013-06-13 19:25:34 +03:00
|
|
|
<h1 class="page-title">Source: frontend_book.js</h1>
|
2013-05-20 20:21:58 +03:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<section>
|
|
|
|
|
<article>
|
|
|
|
|
<pre class="prettyprint source"><code>/**
|
2013-09-13 16:21:03 +03:00
|
|
|
* This namespace contains functions that implement the book appointment page
|
|
|
|
|
* functionality. Once the initialize() method is called the page is fully
|
|
|
|
|
* functional and can serve the appointment booking process.
|
2013-05-20 20:21:58 +03:00
|
|
|
*
|
2013-06-13 19:25:34 +03:00
|
|
|
* @namespace FrontendBook
|
2013-05-20 20:21:58 +03:00
|
|
|
*/
|
2013-06-13 19:25:34 +03:00
|
|
|
var FrontendBook = {
|
2013-06-08 12:54:45 +03:00
|
|
|
/**
|
|
|
|
|
* Determines the functionality of the page.
|
|
|
|
|
*
|
2013-09-13 16:21:03 +03:00
|
|
|
* @type {bool}
|
2013-06-08 12:54:45 +03:00
|
|
|
*/
|
2013-09-13 16:21:03 +03:00
|
|
|
manageMode: false,
|
2013-06-08 12:54:45 +03:00
|
|
|
|
2013-05-20 20:21:58 +03:00
|
|
|
/**
|
|
|
|
|
* This method initializes the book appointment page.
|
|
|
|
|
*
|
2013-09-13 16:21:03 +03:00
|
|
|
* @param {bool} bindEventHandlers (OPTIONAL) Determines whether the default
|
|
|
|
|
* event handlers will be binded to the dom elements.
|
|
|
|
|
* @param {bool} manageMode (OPTIONAL) Determines whether the customer is going
|
|
|
|
|
* to make changes to an existing appointment rather than booking a new one.
|
2013-05-20 20:21:58 +03:00
|
|
|
*/
|
2013-09-13 16:21:03 +03:00
|
|
|
initialize: function(bindEventHandlers, manageMode) {
|
2013-06-08 12:54:45 +03:00
|
|
|
if (bindEventHandlers === undefined) {
|
|
|
|
|
bindEventHandlers = true; // Default Value
|
2013-05-20 20:21:58 +03:00
|
|
|
}
|
|
|
|
|
|
2013-06-08 12:54:45 +03:00
|
|
|
if (manageMode === undefined) {
|
|
|
|
|
manageMode = false; // Default Value
|
|
|
|
|
}
|
|
|
|
|
|
2013-06-13 19:25:34 +03:00
|
|
|
FrontendBook.manageMode = manageMode;
|
2013-06-08 12:54:45 +03:00
|
|
|
|
2013-05-20 20:21:58 +03:00
|
|
|
// Initialize page's components (tooltips, datepickers etc).
|
|
|
|
|
$('.book-step').qtip({
|
|
|
|
|
position: {
|
|
|
|
|
my: 'top center',
|
|
|
|
|
at: 'bottom center'
|
|
|
|
|
},
|
|
|
|
|
style: {
|
|
|
|
|
classes: 'qtip-green qtip-shadow custom-qtip'
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$('#select-date').datepicker({
|
2013-09-13 16:21:03 +03:00
|
|
|
dateFormat: 'dd-mm-yy',
|
|
|
|
|
minDate: 0,
|
|
|
|
|
defaultDate: Date.today(),
|
|
|
|
|
onSelect: function(dateText, instance) {
|
2013-06-13 19:25:34 +03:00
|
|
|
FrontendBook.getAvailableHours(dateText);
|
|
|
|
|
FrontendBook.updateConfirmFrame();
|
2013-05-20 20:21:58 +03:00
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Bind the event handlers (might not be necessary every time
|
|
|
|
|
// we use this class).
|
|
|
|
|
if (bindEventHandlers) {
|
2013-06-13 19:25:34 +03:00
|
|
|
FrontendBook.bindEventHandlers();
|
2013-05-20 20:21:58 +03:00
|
|
|
}
|
2013-06-08 12:54:45 +03:00
|
|
|
|
|
|
|
|
// If the manage mode is true, the appointments data should be
|
|
|
|
|
// loaded by default.
|
2013-06-13 19:25:34 +03:00
|
|
|
if (FrontendBook.manageMode) {
|
|
|
|
|
FrontendBook.applyAppointmentData(GlobalVariables.appointmentData,
|
2013-06-08 12:54:45 +03:00
|
|
|
GlobalVariables.providerData, GlobalVariables.customerData);
|
|
|
|
|
} else {
|
|
|
|
|
$('#select-service').trigger('change'); // Load the available hours.
|
|
|
|
|
}
|
2013-05-20 20:21:58 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
2013-06-08 12:54:45 +03:00
|
|
|
* This method binds the necessary event handlers for the book
|
|
|
|
|
* appointments page.
|
2013-05-20 20:21:58 +03:00
|
|
|
*/
|
2013-09-13 16:21:03 +03:00
|
|
|
bindEventHandlers: function() {
|
2013-05-20 20:21:58 +03:00
|
|
|
/**
|
2013-09-13 16:21:03 +03:00
|
|
|
* Event: Selected Provider "Changed"
|
2013-06-08 12:54:45 +03:00
|
|
|
*
|
|
|
|
|
* Whenever the provider changes the available appointment
|
|
|
|
|
* date - time periods must be updated.
|
2013-05-20 20:21:58 +03:00
|
|
|
*/
|
|
|
|
|
$('#select-provider').change(function() {
|
2013-06-13 19:25:34 +03:00
|
|
|
FrontendBook.getAvailableHours(Date.today().toString('dd-MM-yyyy'));
|
|
|
|
|
FrontendBook.updateConfirmFrame();
|
2013-05-20 20:21:58 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
/**
|
2013-09-13 16:21:03 +03:00
|
|
|
* Event: Selected Service "Changed"
|
2013-05-20 20:21:58 +03:00
|
|
|
*
|
|
|
|
|
* When the user clicks on a service, its available providers should
|
|
|
|
|
* become visible.
|
|
|
|
|
*/
|
|
|
|
|
$('#select-service').change(function() {
|
|
|
|
|
var currServiceId = $('#select-service').val();
|
|
|
|
|
$('#select-provider').empty();
|
|
|
|
|
|
2013-06-08 12:54:45 +03:00
|
|
|
$.each(GlobalVariables.availableProviders, function(indexProvider, provider) {
|
2013-05-20 20:21:58 +03:00
|
|
|
$.each(provider['services'], function(indexService, serviceId) {
|
2013-06-08 12:54:45 +03:00
|
|
|
// If the current provider is able to provide the selected service,
|
|
|
|
|
// add him to the listbox.
|
2013-05-20 20:21:58 +03:00
|
|
|
if (serviceId == currServiceId) {
|
|
|
|
|
var optionHtml = '<option value="' + provider['id'] + '">'
|
2013-06-08 12:54:45 +03:00
|
|
|
+ provider['last_name'] + ' ' + provider['first_name']
|
|
|
|
|
+ '</option>';
|
2013-05-20 20:21:58 +03:00
|
|
|
$('#select-provider').append(optionHtml);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
2013-06-13 19:25:34 +03:00
|
|
|
FrontendBook.getAvailableHours(Date.today().toString('dd-MM-yyyy'));
|
|
|
|
|
FrontendBook.updateConfirmFrame();
|
2013-09-13 16:21:03 +03:00
|
|
|
FrontendBook.updateServiceDescription($('#select-service').val(), $('#service-description'));
|
2013-05-20 20:21:58 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
/**
|
2013-09-13 16:21:03 +03:00
|
|
|
* Event: Next Step Button "Clicked"
|
2013-05-20 20:21:58 +03:00
|
|
|
*
|
|
|
|
|
* This handler is triggered every time the user pressed the
|
|
|
|
|
* "next" button on the book wizard. Some special tasks might
|
|
|
|
|
* be perfomed, depending the current wizard step.
|
|
|
|
|
*/
|
|
|
|
|
$('.button-next').click(function() {
|
2013-09-13 16:21:03 +03:00
|
|
|
// If we are on the 2nd tab then the user should have an appointment hour
|
|
|
|
|
// selected.
|
2013-06-08 12:54:45 +03:00
|
|
|
if ($(this).attr('data-step_index') === '2') {
|
|
|
|
|
if ($('.selected-hour').length == 0) {
|
|
|
|
|
if ($('#select-hour-prompt').length == 0) {
|
|
|
|
|
$('#available-hours').append('<br><br>'
|
|
|
|
|
+ '<strong id="select-hour-prompt" class="text-error">'
|
|
|
|
|
+ 'Please select an appointment hour before continuing!'
|
|
|
|
|
+ '</strong>');
|
|
|
|
|
}
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2013-05-20 20:21:58 +03:00
|
|
|
// If we are on the 3rd tab then we will need to validate the user's
|
|
|
|
|
// input before proceeding to the next step.
|
2013-06-08 12:54:45 +03:00
|
|
|
if ($(this).attr('data-step_index') === '3') {
|
2013-06-13 19:25:34 +03:00
|
|
|
if (!FrontendBook.validateCustomerForm()) {
|
2013-05-20 20:21:58 +03:00
|
|
|
return; // Validation failed, do not continue.
|
|
|
|
|
} else {
|
2013-06-13 19:25:34 +03:00
|
|
|
FrontendBook.updateConfirmFrame();
|
2013-05-20 20:21:58 +03:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Display the next step tab (uses jquery animation effect).
|
|
|
|
|
var nextTabIndex = parseInt($(this).attr('data-step_index')) + 1;
|
|
|
|
|
|
|
|
|
|
$(this).parents().eq(1).hide('fade', function() {
|
|
|
|
|
$('.active-step').removeClass('active-step');
|
|
|
|
|
$('#step-' + nextTabIndex).addClass('active-step');
|
2013-06-08 12:54:45 +03:00
|
|
|
$('#wizard-frame-' + nextTabIndex).show('fade');
|
2013-05-20 20:21:58 +03:00
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
/**
|
2013-09-13 16:21:03 +03:00
|
|
|
* Event: Back Step Button "Clicked"
|
2013-05-20 20:21:58 +03:00
|
|
|
*
|
|
|
|
|
* This handler is triggered every time the user pressed the
|
|
|
|
|
* "back" button on the book wizard.
|
|
|
|
|
*/
|
|
|
|
|
$('.button-back').click(function() {
|
|
|
|
|
var prevTabIndex = parseInt($(this).attr('data-step_index')) - 1;
|
|
|
|
|
|
|
|
|
|
$(this).parents().eq(1).hide('fade', function() {
|
|
|
|
|
$('.active-step').removeClass('active-step');
|
|
|
|
|
$('#step-' + prevTabIndex).addClass('active-step');
|
2013-06-08 12:54:45 +03:00
|
|
|
$('#wizard-frame-' + prevTabIndex).show('fade');
|
2013-05-20 20:21:58 +03:00
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
/**
|
2013-09-13 16:21:03 +03:00
|
|
|
* Event: Available Hour "Click"
|
2013-05-20 20:21:58 +03:00
|
|
|
*
|
|
|
|
|
* Triggered whenever the user clicks on an available hour
|
|
|
|
|
* for his appointment.
|
|
|
|
|
*/
|
|
|
|
|
$('#available-hours').on('click', '.available-hour', function() {
|
|
|
|
|
$('.selected-hour').removeClass('selected-hour');
|
|
|
|
|
$(this).addClass('selected-hour');
|
2013-06-13 19:25:34 +03:00
|
|
|
FrontendBook.updateConfirmFrame();
|
2013-05-20 20:21:58 +03:00
|
|
|
});
|
2013-06-13 19:25:34 +03:00
|
|
|
|
|
|
|
|
if (FrontendBook.manageMode) {
|
|
|
|
|
/**
|
|
|
|
|
* Event: Cancel Appointment Button "Click"
|
|
|
|
|
*
|
|
|
|
|
* When the user clicks the "Cancel" button this form is going to
|
|
|
|
|
* be submitted. We need the user to confirm this action because
|
|
|
|
|
* once the appointment is cancelled, it will be delete from the
|
|
|
|
|
* database.
|
|
|
|
|
*/
|
|
|
|
|
$('#cancel-appointment').click(function() {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
|
|
var dialogButtons = {
|
2013-09-13 16:21:03 +03:00
|
|
|
'OK': function() {
|
|
|
|
|
if ($('#cancel-reason').val() === '') {
|
|
|
|
|
$('#cancel-reason').css('border', '2px solid red');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
$('#cancel-appointment-form textarea').val($('#cancel-reason').val());
|
2013-06-13 19:25:34 +03:00
|
|
|
$('#cancel-appointment-form').submit();
|
|
|
|
|
},
|
2013-09-13 16:21:03 +03:00
|
|
|
'Cancel': function() {
|
2013-06-13 19:25:34 +03:00
|
|
|
$('#message_box').dialog('close');
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
2013-09-13 16:21:03 +03:00
|
|
|
GeneralFunctions.displayMessageBox('Cancel Appointment', 'Please take a '
|
|
|
|
|
+ 'minute to write the reason you are cancelling the appointment:',
|
|
|
|
|
dialogButtons);
|
|
|
|
|
|
|
|
|
|
$('#message_box').append('<textarea id="cancel-reason"></textarea>');
|
|
|
|
|
$('#cancel-reason').css('width', '300px');
|
2013-06-13 19:25:34 +03:00
|
|
|
});
|
|
|
|
|
}
|
2013-09-13 16:21:03 +03:00
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Event: Book Appointment Form "Submit"
|
|
|
|
|
*
|
|
|
|
|
* 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
|
|
|
|
|
* another customer or event.
|
|
|
|
|
*/
|
|
|
|
|
$('#book-appointment-form').submit(function() {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
|
|
var formData = jQuery.parseJSON($('input[name="post_data"]').val());
|
|
|
|
|
|
|
|
|
|
var postData = {
|
|
|
|
|
'id_users_provider': formData['appointment']['id_users_provider'],
|
|
|
|
|
'id_services': formData['appointment']['id_services'],
|
|
|
|
|
'start_datetime': formData['appointment']['start_datetime']
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var postUrl = GlobalVariables.baseUrl + 'appointments/ajax_check_datetime_availability';
|
|
|
|
|
|
|
|
|
|
$.post(postUrl, postData, function(response) {
|
|
|
|
|
////////////////////////////////////////////////////////////////////////
|
|
|
|
|
console.log('Check Date/Time Availability Post Response :', response);
|
|
|
|
|
////////////////////////////////////////////////////////////////////////
|
|
|
|
|
|
|
|
|
|
if (response.exceptions) {
|
|
|
|
|
response.exceptions = GeneralFunctions.parseExceptions(response.exceptions);
|
|
|
|
|
GeneralFunctions.displayMessageBox('Unexpected Issues', 'Unfortunately '
|
|
|
|
|
+ 'the check appointment time availability could not be completed. '
|
|
|
|
|
+ 'The following issues occured:');
|
|
|
|
|
$('#message_box').append(GeneralFunctions.exceptionsToHtml(response.exceptions));
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (response === true) {
|
|
|
|
|
$('#book-appointment-form').submit();
|
|
|
|
|
} else {
|
|
|
|
|
GeneralFunctions.displayMessageBox('Appointment Hour Taken', 'Unfortunately '
|
|
|
|
|
+ 'the selected appointment hour is not available anymore. Please select '
|
|
|
|
|
+ 'another hour.');
|
|
|
|
|
FrontendBook.getAvailableHours($('#select-date').val());
|
|
|
|
|
}
|
|
|
|
|
}, 'json');
|
|
|
|
|
});
|
2013-05-20 20:21:58 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* This function makes an ajax call and returns the available
|
|
|
|
|
* hours for the selected service, provider and date.
|
|
|
|
|
*
|
|
|
|
|
* @param {string} selDate The selected date of which the available
|
|
|
|
|
* hours we need to receive.
|
|
|
|
|
*/
|
2013-09-13 16:21:03 +03:00
|
|
|
getAvailableHours: function(selDate) {
|
2013-05-20 20:21:58 +03:00
|
|
|
// Find the selected service duration (it is going to
|
|
|
|
|
// be send within the "postData" object.
|
|
|
|
|
var selServiceDuration = 15; // Default value of duration (in minutes).
|
2013-06-08 12:54:45 +03:00
|
|
|
$.each(GlobalVariables.availableServices, function(index, service) {
|
2013-05-20 20:21:58 +03:00
|
|
|
if (service['id'] == $('#select-service').val()) {
|
|
|
|
|
selServiceDuration = service['duration'];
|
|
|
|
|
}
|
|
|
|
|
});
|
2013-06-08 12:54:45 +03:00
|
|
|
|
|
|
|
|
// If the manage mode is true then the appointment's start
|
|
|
|
|
// date should return as available too.
|
2013-06-13 19:25:34 +03:00
|
|
|
var appointmentId = (FrontendBook.manageMode)
|
2013-06-08 12:54:45 +03:00
|
|
|
? GlobalVariables.appointmentData['id'] : undefined;
|
2013-05-20 20:21:58 +03:00
|
|
|
|
|
|
|
|
var postData = {
|
2013-09-13 16:21:03 +03:00
|
|
|
'service_id': $('#select-service').val(),
|
|
|
|
|
'provider_id': $('#select-provider').val(),
|
|
|
|
|
'selected_date': selDate,
|
|
|
|
|
'service_duration': selServiceDuration,
|
|
|
|
|
'manage_mode': FrontendBook.manageMode,
|
|
|
|
|
'appointment_id': appointmentId
|
|
|
|
|
}
|
2013-05-20 20:21:58 +03:00
|
|
|
|
|
|
|
|
// Make ajax post request and get the available hours.
|
|
|
|
|
var ajaxurl = GlobalVariables.baseUrl + 'appointments/ajax_get_available_hours';
|
2013-09-13 16:21:03 +03:00
|
|
|
jQuery.post(ajaxurl, postData, function(response) {
|
|
|
|
|
///////////////////////////////////////////////////////////////
|
|
|
|
|
//console.log('Get Available Hours JSON Response :', response);
|
|
|
|
|
///////////////////////////////////////////////////////////////
|
2013-05-20 20:21:58 +03:00
|
|
|
|
2013-09-13 16:21:03 +03:00
|
|
|
if (response.exceptions) {
|
|
|
|
|
// Display a friendly message to the user with the exceptions information.
|
|
|
|
|
response.exceptions = GeneralFunctions.parseExceptions(response.exceptions);
|
|
|
|
|
GeneralFunctions.displayMessageBox('Unexpected Error', 'An unexpected '
|
|
|
|
|
+ 'error occured during the available hours calculation. Please '
|
|
|
|
|
+ 'refresh the page and try again.');
|
|
|
|
|
$('#message_box').append(GeneralFunctions.exceptionsToHtml(response.exceptions));
|
|
|
|
|
console.log('Get Available Hours Exceptions:', response.exceptions);
|
|
|
|
|
return;
|
|
|
|
|
}
|
2013-05-20 20:21:58 +03:00
|
|
|
|
2013-09-13 16:21:03 +03:00
|
|
|
// The response contains the available hours for the selected provider and
|
|
|
|
|
// service. Fill the available hours div with response data.
|
|
|
|
|
if (response.length > 0) {
|
|
|
|
|
|
|
|
|
|
var currColumn = 1;
|
|
|
|
|
$('#available-hours').html('<div style="width:50px; float:left;"></div>');
|
2013-05-20 20:21:58 +03:00
|
|
|
|
2013-09-13 16:21:03 +03:00
|
|
|
$.each(response, function(index, availableHour) {
|
|
|
|
|
if ((currColumn * 10) < (index + 1)) {
|
|
|
|
|
currColumn++;
|
|
|
|
|
$('#available-hours').append('<div style="width:50px; float:left;"></div>');
|
2013-06-08 12:54:45 +03:00
|
|
|
}
|
2013-09-13 16:21:03 +03:00
|
|
|
|
|
|
|
|
$('#available-hours div:eq(' + (currColumn - 1) + ')').append(
|
|
|
|
|
'<span class="available-hour">' + availableHour + '</span><br/>');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (FrontendBook.manageMode) {
|
|
|
|
|
// Set the appointment's start time as the default selection.
|
|
|
|
|
$('.available-hour').removeClass('selected-hour');
|
|
|
|
|
$('.available-hour').filter(function() {
|
|
|
|
|
return $(this).text() === Date.parseExact(
|
|
|
|
|
GlobalVariables.appointmentData['start_datetime'],
|
|
|
|
|
'yyyy-MM-dd HH:mm:ss').toString('HH:mm');
|
|
|
|
|
}).addClass('selected-hour');
|
2013-06-08 12:54:45 +03:00
|
|
|
} else {
|
2013-09-13 16:21:03 +03:00
|
|
|
// Set the first available hour as the default selection.
|
|
|
|
|
$('.available-hour:eq(0)').addClass('selected-hour');
|
2013-06-08 12:54:45 +03:00
|
|
|
}
|
2013-09-13 16:21:03 +03:00
|
|
|
|
|
|
|
|
FrontendBook.updateConfirmFrame();
|
2013-06-08 12:54:45 +03:00
|
|
|
|
2013-09-13 16:21:03 +03:00
|
|
|
} else {
|
|
|
|
|
$('#available-hours').text('There are no available appointment '
|
|
|
|
|
+ 'hours for the selected date. Please choose another date.');
|
2013-05-20 20:21:58 +03:00
|
|
|
}
|
2013-09-13 16:21:03 +03:00
|
|
|
}, 'json');
|
2013-05-20 20:21:58 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
2013-09-13 16:21:03 +03:00
|
|
|
* This function validates the customer's data input. The user cannot contiue
|
|
|
|
|
* without passing all the validation checks.
|
2013-05-20 20:21:58 +03:00
|
|
|
*
|
|
|
|
|
* @return {bool} Returns the validation result.
|
|
|
|
|
*/
|
2013-09-13 16:21:03 +03:00
|
|
|
validateCustomerForm: function() {
|
|
|
|
|
$('#wizard-frame-3 input').css('border', '');
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
// Validate required fields.
|
|
|
|
|
var missingRequiredField = false;
|
|
|
|
|
$('.required').each(function() {
|
|
|
|
|
if ($(this).val() == '') {
|
|
|
|
|
$(this).css('border', '2px solid red');
|
|
|
|
|
missingRequiredField = true;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
if (missingRequiredField) {
|
|
|
|
|
throw 'Fields with * are required!';
|
2013-05-20 20:21:58 +03:00
|
|
|
}
|
2013-09-13 16:21:03 +03:00
|
|
|
|
|
|
|
|
// Validate email address.
|
|
|
|
|
if (!GeneralFunctions.validateEmail($('#email').val())) {
|
|
|
|
|
$('#email').css('border', '2px solid red');
|
|
|
|
|
throw 'Invalid email address!';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return true;
|
|
|
|
|
} catch(exc) {
|
|
|
|
|
$('#form-message').text(exc);
|
|
|
|
|
return false;
|
|
|
|
|
}
|
2013-05-20 20:21:58 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Every time this function is executed, it updates the confirmation
|
|
|
|
|
* page with the latest customer settigns and input for the appointment
|
|
|
|
|
* booking.
|
|
|
|
|
*/
|
2013-09-13 16:21:03 +03:00
|
|
|
updateConfirmFrame: function() {
|
|
|
|
|
// Appointment Details
|
2013-05-20 20:21:58 +03:00
|
|
|
var selectedDate = $('#select-date').datepicker('getDate');
|
|
|
|
|
if (selectedDate !== null) {
|
2013-09-13 16:21:03 +03:00
|
|
|
selectedDate = Date.parse(selectedDate).toString('dd/MM/yyyy');
|
2013-05-20 20:21:58 +03:00
|
|
|
}
|
|
|
|
|
|
2013-09-13 16:21:03 +03:00
|
|
|
var selServiceId = $('#select-service').val();
|
|
|
|
|
var servicePrice, serviceCurrency;
|
|
|
|
|
$.each(GlobalVariables.availableServices, function(index, service) {
|
|
|
|
|
if (service.id == selServiceId) {
|
|
|
|
|
servicePrice = '<br>' + service.price;
|
|
|
|
|
serviceCurrency = service.currency;
|
|
|
|
|
return false; // break loop
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$('#appointment-details').html(
|
|
|
|
|
'<h4>' + $('#select-service option:selected').text() + '</h4>' +
|
|
|
|
|
'<p>'
|
|
|
|
|
+ '<strong class="text-info">'
|
|
|
|
|
+ $('#select-provider option:selected').text() + '<br>'
|
|
|
|
|
+ selectedDate + ' ' + $('.selected-hour').text()
|
|
|
|
|
+ servicePrice + ' ' + serviceCurrency
|
|
|
|
|
+ '</strong>' +
|
|
|
|
|
'</p>'
|
2013-05-20 20:21:58 +03:00
|
|
|
);
|
|
|
|
|
|
2013-09-13 16:21:03 +03:00
|
|
|
// Customer Details
|
|
|
|
|
$('#customer-details').html(
|
|
|
|
|
'<h4>' + $('#first-name').val() + ' ' + $('#last-name').val() + '</h4>' +
|
|
|
|
|
'<p>' +
|
|
|
|
|
'Phone: ' + $('#phone-number').val() +
|
|
|
|
|
'<br/>' +
|
|
|
|
|
'Email: ' + $('#email').val() +
|
|
|
|
|
'<br/>' +
|
|
|
|
|
'Address: ' + $('#address').val() +
|
|
|
|
|
'<br/>' +
|
|
|
|
|
'City: ' + $('#city').val() +
|
|
|
|
|
'<br/>' +
|
|
|
|
|
'Zip Code: ' + $('#zip-code').val() +
|
|
|
|
|
'</p>'
|
2013-05-20 20:21:58 +03:00
|
|
|
);
|
|
|
|
|
|
2013-09-13 16:21:03 +03:00
|
|
|
// Update appointment form data for submission to server when the user confirms
|
|
|
|
|
// the appointment.
|
2013-05-20 20:21:58 +03:00
|
|
|
var postData = new Object();
|
|
|
|
|
|
|
|
|
|
postData['customer'] = {
|
2013-09-13 16:21:03 +03:00
|
|
|
'last_name': $('#last-name').val(),
|
|
|
|
|
'first_name': $('#first-name').val(),
|
|
|
|
|
'email': $('#email').val(),
|
|
|
|
|
'phone_number': $('#phone-number').val(),
|
|
|
|
|
'address': $('#address').val(),
|
|
|
|
|
'city': $('#city').val(),
|
|
|
|
|
'zip_code': $('#zip-code').val()
|
2013-05-20 20:21:58 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
postData['appointment'] = {
|
2013-09-13 16:21:03 +03:00
|
|
|
'start_datetime': $('#select-date').datepicker('getDate').toString('yyyy-MM-dd')
|
|
|
|
|
+ ' ' + $('.selected-hour').text() + ':00',
|
|
|
|
|
'end_datetime': FrontendBook.calcEndDatetime(),
|
|
|
|
|
'notes': $('#notes').val(),
|
|
|
|
|
'is_unavailable': false,
|
|
|
|
|
'id_users_provider': $('#select-provider').val(),
|
|
|
|
|
'id_services': $('#select-service').val()
|
2013-05-20 20:21:58 +03:00
|
|
|
};
|
|
|
|
|
|
2013-06-13 19:25:34 +03:00
|
|
|
postData['manage_mode'] = FrontendBook.manageMode;
|
2013-06-08 12:54:45 +03:00
|
|
|
|
2013-06-13 19:25:34 +03:00
|
|
|
if (FrontendBook.manageMode) {
|
2013-06-08 12:54:45 +03:00
|
|
|
postData['appointment']['id'] = GlobalVariables.appointmentData['id'];
|
|
|
|
|
postData['customer']['id'] = GlobalVariables.customerData['id'];
|
|
|
|
|
}
|
|
|
|
|
|
2013-05-20 20:21:58 +03:00
|
|
|
$('input[name="post_data"]').val(JSON.stringify(postData));
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* This method calculates the end datetime of the current appointment.
|
|
|
|
|
* End datetime is depending on the service and start datetime fieldss.
|
|
|
|
|
*
|
|
|
|
|
* @return {string} Returns the end datetime in string format.
|
|
|
|
|
*/
|
2013-09-13 16:21:03 +03:00
|
|
|
calcEndDatetime: function() {
|
2013-05-20 20:21:58 +03:00
|
|
|
// Find selected service duration.
|
|
|
|
|
var selServiceDuration = undefined;
|
|
|
|
|
|
2013-06-08 12:54:45 +03:00
|
|
|
$.each(GlobalVariables.availableServices, function(index, service) {
|
2013-05-20 20:21:58 +03:00
|
|
|
if (service.id == $('#select-service').val()) {
|
|
|
|
|
selServiceDuration = service.duration;
|
|
|
|
|
return; // Stop searching ...
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Add the duration to the start datetime.
|
|
|
|
|
var startDatetime = $('#select-date').datepicker('getDate').toString('dd-MM-yyyy')
|
|
|
|
|
+ ' ' + $('.selected-hour').text();
|
|
|
|
|
startDatetime = Date.parseExact(startDatetime, 'dd-MM-yyyy HH:mm');
|
|
|
|
|
var endDatetime = undefined;
|
|
|
|
|
|
|
|
|
|
if (selServiceDuration !== undefined && startDatetime !== null) {
|
|
|
|
|
endDatetime = startDatetime.add({ 'minutes' : parseInt(selServiceDuration) });
|
|
|
|
|
} else {
|
|
|
|
|
endDatetime = new Date();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return endDatetime.toString('yyyy-MM-dd HH:mm:ss');
|
2013-06-08 12:54:45 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* This method applies the appointment's data to the wizard so
|
|
|
|
|
* that the user can start making changes on an existing record.
|
|
|
|
|
*
|
2013-09-13 16:21:03 +03:00
|
|
|
* @param {object} appointment Selected appointment's data.
|
|
|
|
|
* @param {object} provider Selected provider's data.
|
|
|
|
|
* @param {object} customer Selected customer's data.
|
2013-06-08 12:54:45 +03:00
|
|
|
* @returns {bool} Returns the operation result.
|
|
|
|
|
*/
|
2013-09-13 16:21:03 +03:00
|
|
|
applyAppointmentData: function(appointment, provider, customer) {
|
2013-06-08 12:54:45 +03:00
|
|
|
try {
|
|
|
|
|
// Select Service & Provider
|
2013-09-13 16:21:03 +03:00
|
|
|
$('#select-service').val(appointment['id_services']).trigger('change');
|
|
|
|
|
$('#select-provider').val(appointment['id_users_provider']);
|
2013-06-08 12:54:45 +03:00
|
|
|
|
|
|
|
|
// Set Appointment Date
|
|
|
|
|
$('#select-date').datepicker('setDate', Date.parseExact(
|
2013-09-13 16:21:03 +03:00
|
|
|
appointment['start_datetime'], 'yyyy-MM-dd HH:mm:ss'));
|
2013-06-13 19:25:34 +03:00
|
|
|
FrontendBook.getAvailableHours($('#select-date').val());
|
2013-06-08 12:54:45 +03:00
|
|
|
|
|
|
|
|
// Apply Customer's Data
|
2013-09-13 16:21:03 +03:00
|
|
|
$('#last-name').val(customer['last_name']);
|
|
|
|
|
$('#first-name').val(customer['first_name']);
|
|
|
|
|
$('#email').val(customer['email']);
|
|
|
|
|
$('#phone-number').val(customer['phone_number']);
|
|
|
|
|
$('#address').val(customer['address']);
|
|
|
|
|
$('#city').val(customer['city']);
|
|
|
|
|
$('#zip-code').val(customer['zip_code']);
|
|
|
|
|
var appointmentNotes = (appointment['notes'] !== null)
|
|
|
|
|
? appointment['notes'] : '';
|
2013-06-08 12:54:45 +03:00
|
|
|
$('#notes').val(appointmentNotes);
|
|
|
|
|
|
2013-06-13 19:25:34 +03:00
|
|
|
FrontendBook.updateConfirmFrame();
|
2013-06-08 12:54:45 +03:00
|
|
|
|
|
|
|
|
return true;
|
|
|
|
|
} catch(exc) {
|
2013-09-13 16:21:03 +03:00
|
|
|
console.log(exc); // log exception
|
2013-06-08 12:54:45 +03:00
|
|
|
return false;
|
|
|
|
|
}
|
2013-09-13 16:21:03 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* This method updates a div's html content with a brief description of the
|
|
|
|
|
* user selected service (only if available in db). This is usefull for the
|
|
|
|
|
* customers upon selecting the correct service.
|
|
|
|
|
*
|
|
|
|
|
* @param {int} serviceId The selected service record id.
|
|
|
|
|
* @param {object} $div The destination div jquery object (e.g. provide $('#div-id')
|
|
|
|
|
* object as value).
|
|
|
|
|
*/
|
|
|
|
|
updateServiceDescription: function(serviceId, $div) {
|
|
|
|
|
var html = '';
|
|
|
|
|
|
|
|
|
|
$.each(GlobalVariables.availableServices, function(index, service) {
|
|
|
|
|
if (service.id == serviceId) { // Just found the service.
|
|
|
|
|
html = '<strong>' + service.name + ':</strong> ';
|
|
|
|
|
|
|
|
|
|
if (service.description != '' && service.description != null) {
|
|
|
|
|
html += service.description;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (service.price != '' && service.price != null) {
|
|
|
|
|
html += ' [Price ' + service.price + ' ' + service.currency + ']';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html += '<br>';
|
|
|
|
|
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$div.html(html);
|
|
|
|
|
|
|
|
|
|
if (html != '') {
|
|
|
|
|
$div.show();
|
|
|
|
|
} else {
|
|
|
|
|
$div.hide();
|
|
|
|
|
}
|
|
|
|
|
|
2013-05-20 20:21:58 +03:00
|
|
|
}
|
2013-09-13 16:21:03 +03:00
|
|
|
|
|
|
|
|
};</code></pre>
|
2013-05-20 20:21:58 +03:00
|
|
|
</article>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<nav>
|
2013-09-13 16:21:03 +03:00
|
|
|
<h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="AdminsHelper.html">AdminsHelper</a></li><li><a href="CategoriesHelper.html">CategoriesHelper</a></li><li><a href="ProvidersHelper.html">ProvidersHelper</a></li><li><a href="SecretariesHelper.html">SecretariesHelper</a></li><li><a href="ServicesHelper.html">ServicesHelper</a></li></ul><h3>Namespaces</h3><ul><li><a href="Backend.html">Backend</a></li><li><a href="Customers.html">Backend Customers</a></li><li><a href="BackendCalendar.html">BackendCalendar</a></li><li><a href="BackendServices.html">BackendServices</a></li><li><a href="BackendUsers..html">BackendUsers.</a></li><li><a href="FrontendBook.html">FrontendBook</a></li><li><a href="GeneralFunctions.html">GeneralFunctions</a></li></ul>
|
2013-05-20 20:21:58 +03:00
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
<br clear="both">
|
|
|
|
|
|
|
|
|
|
<footer>
|
2013-09-13 16:21:03 +03:00
|
|
|
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.0-dev</a> on Fri Sep 13 2013 11:50:16 GMT+0300 (EEST)
|
2013-05-20 20:21:58 +03:00
|
|
|
</footer>
|
|
|
|
|
|
|
|
|
|
<script> prettyPrint(); </script>
|
|
|
|
|
<script src="scripts/linenumber.js"> </script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
