mirror of
https://github.com/alextselegidis/easyappointments.git
synced 2024-12-29 01:52:24 +03:00
358 lines
14 KiB
HTML
358 lines
14 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>JSDoc: Source: backend_calendar.js</title>
|
||
|
|
|
||
|
|
<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">
|
||
|
|
|
||
|
|
<h1 class="page-title">Source: backend_calendar.js</h1>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<article>
|
||
|
|
<pre class="prettyprint source"><code>/**
|
||
|
|
* This namespace contains functions that are used by the backend calendar page.
|
||
|
|
*
|
||
|
|
* @namespace BackendCalendar
|
||
|
|
*/
|
||
|
|
var BackendCalendar = {
|
||
|
|
FILTER_TYPE_PROVIDER : 'provider',
|
||
|
|
FILTER_TYPE_SERVICE : 'service',
|
||
|
|
|
||
|
|
lastFocusedEvent : undefined, // Contain event data for later use.
|
||
|
|
|
||
|
|
/**
|
||
|
|
* This function makes the necessary initialization for the default backend
|
||
|
|
* calendar page. If this namespace is used in another page then this function
|
||
|
|
* might not be needed.
|
||
|
|
*
|
||
|
|
* @param {bool} defaultEventHandlers (OPTIONAL = TRUE) Determines whether the
|
||
|
|
* default event handlers will be set for the current page.
|
||
|
|
*/
|
||
|
|
initialize: function(defaultEventHandlers) {
|
||
|
|
if (defaultEventHandlers === undefined) defaultEventHandlers = true;
|
||
|
|
|
||
|
|
// :: INITIALIZE THE DOM ELEMENTS OF THE PAGE
|
||
|
|
$('#calendar').fullCalendar({
|
||
|
|
defaultView : 'agendaWeek',
|
||
|
|
height : BackendCalendar.getCalendarHeight(),
|
||
|
|
editable : true,
|
||
|
|
columnFormat : {
|
||
|
|
month : 'ddd',
|
||
|
|
week : 'ddd d/M',
|
||
|
|
day : 'dddd d/M'
|
||
|
|
},
|
||
|
|
titleFormat : {
|
||
|
|
month : 'MMMM yyyy',
|
||
|
|
week : "MMMM d[ yyyy]{ '—'[ MMM] d, yyyy}",
|
||
|
|
day : 'dddd, MMM d, yyyy'
|
||
|
|
},
|
||
|
|
header : {
|
||
|
|
left : 'prev,next today',
|
||
|
|
center : 'title',
|
||
|
|
right : 'agendaDay,agendaWeek,month'
|
||
|
|
},
|
||
|
|
windowResize : function(view) {
|
||
|
|
$('#calendar').fullCalendar('option', 'height',
|
||
|
|
BackendCalendar.getCalendarHeight());
|
||
|
|
},
|
||
|
|
dayClick : function(date, allDay, jsEvent, view) {
|
||
|
|
if (allDay) {
|
||
|
|
// Switch to day view
|
||
|
|
$('#calendar').fullCalendar('gotoDate', date);
|
||
|
|
$('#calendar').fullCalendar('changeView', 'agendaDay');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
eventClick : function(event, jsEvent, view) {
|
||
|
|
// Display a popover with the event details.
|
||
|
|
var html =
|
||
|
|
'<style type="text/css">'
|
||
|
|
+ '.popover-content strong {min-width: 80px; display:inline-block;}'
|
||
|
|
+ '.popover-content button {margin-right: 10px;}'
|
||
|
|
+ '</style>' +
|
||
|
|
'<strong>Start</strong> '
|
||
|
|
+ event.start.toString('dd-MM-yyyy HH:mm')
|
||
|
|
+ '<br>' +
|
||
|
|
'<strong>End</strong> '
|
||
|
|
+ event.end.toString('dd-MM-yyyy HH:mm')
|
||
|
|
+ '<br>' +
|
||
|
|
'<strong>Service</strong> '
|
||
|
|
+ event.title
|
||
|
|
+ '<br>' +
|
||
|
|
'<strong>Provider</strong> '
|
||
|
|
+ event.data['provider']['first_name'] + ' '
|
||
|
|
+ event.data['provider']['last_name']
|
||
|
|
+ '<br>' +
|
||
|
|
'<strong>Customer</strong> '
|
||
|
|
+ event.data['customer']['first_name'] + ' '
|
||
|
|
+ event.data['customer']['last_name']
|
||
|
|
+ '<hr>' +
|
||
|
|
'<center>' +
|
||
|
|
'<button class="edit-popover btn btn-primary">Edit</button>' +
|
||
|
|
'<button class="close-popover btn" data-po=' + jsEvent.target + '>Close</button>' +
|
||
|
|
'</center>';
|
||
|
|
|
||
|
|
$(jsEvent.target).popover({
|
||
|
|
placement : 'top',
|
||
|
|
title : event.title,
|
||
|
|
content : html,
|
||
|
|
html : true,
|
||
|
|
container : 'body',
|
||
|
|
trigger : 'manual'
|
||
|
|
});
|
||
|
|
|
||
|
|
$(jsEvent.target).popover('show');
|
||
|
|
|
||
|
|
BackendCalendar.lastFocusedEvent = event;
|
||
|
|
},
|
||
|
|
eventResize : function(event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
|
||
|
|
// @task Display confirmation modal.
|
||
|
|
|
||
|
|
},
|
||
|
|
eventDrop : function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
|
||
|
|
// @task Display confirmation modal.
|
||
|
|
|
||
|
|
},
|
||
|
|
viewDisplay : function(view) {
|
||
|
|
// Place the footer into correct position because the calendar
|
||
|
|
// height might change.
|
||
|
|
BackendCalendar.refreshCalendarAppointments(
|
||
|
|
$('#calendar'),
|
||
|
|
$('#select-filter-item').val(),
|
||
|
|
$('#select-filter-item option:selected').attr('type'),
|
||
|
|
$('#calendar').fullCalendar('getView').visStart,
|
||
|
|
$('#calendar').fullCalendar('getView').visEnd);
|
||
|
|
$(window).trigger('resize');
|
||
|
|
|
||
|
|
$('.fv-events').each(function(index, eventHandle) {
|
||
|
|
$(eventHandle).popover();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// :: FILL THE SELECT ELEMENTS OF THE PAGE
|
||
|
|
var optgroupHtml = '<optgroup label="Providers">';
|
||
|
|
$.each(GlobalVariables.availableProviders, function(index, provider) {
|
||
|
|
optgroupHtml += '<option value="' + provider['id'] + '" ' +
|
||
|
|
'type="' + BackendCalendar.FILTER_TYPE_PROVIDER + '">' +
|
||
|
|
provider['first_name'] + ' ' + provider['last_name'] + '</option>';
|
||
|
|
});
|
||
|
|
optgroupHtml += '</optgroup>';
|
||
|
|
$('#select-filter-item').append(optgroupHtml)
|
||
|
|
|
||
|
|
optgroupHtml = '<optgroup label="Services">';
|
||
|
|
$.each(GlobalVariables.availableServices, function(index, service) {
|
||
|
|
optgroupHtml += '<option value="' + service['id'] + '" ' +
|
||
|
|
'type="' + BackendCalendar.FILTER_TYPE_SERVICE + '">'
|
||
|
|
+ service['name'] + '</option>';
|
||
|
|
});
|
||
|
|
optgroupHtml += '</optgroup>';
|
||
|
|
$('#select-filter-item').append(optgroupHtml)
|
||
|
|
|
||
|
|
// :: BIND THE DEFAULT EVENT HANDLERS
|
||
|
|
if (defaultEventHandlers === true) {
|
||
|
|
BackendCalendar.bindEventHandlers();
|
||
|
|
$('#select-filter-item').trigger('change');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* This method binds the default event handlers for the backend calendar
|
||
|
|
* page. If you do not need the default handlers then initialize the page
|
||
|
|
* by setting the "defaultEventHandlers" argument to "false".
|
||
|
|
*/
|
||
|
|
bindEventHandlers: function() {
|
||
|
|
/**
|
||
|
|
* Event: Calendar filter item "Changed"
|
||
|
|
*
|
||
|
|
* Load the appointments that correspond to the select filter item and
|
||
|
|
* display them on the calendar.
|
||
|
|
*/
|
||
|
|
$('#select-filter-item').change(function() {
|
||
|
|
BackendCalendar.refreshCalendarAppointments(
|
||
|
|
$('#calendar'),
|
||
|
|
$('#select-filter-item').val(),
|
||
|
|
$('#select-filter-item option:selected').attr('type'),
|
||
|
|
$('#calendar').fullCalendar('getView').visStart,
|
||
|
|
$('#calendar').fullCalendar('getView').visEnd);
|
||
|
|
|
||
|
|
// @task If current value is service, then the sync buttons must be disabled.
|
||
|
|
});
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Event: Popover close button "Clicked"
|
||
|
|
*
|
||
|
|
* Hides the open popover element.
|
||
|
|
*/
|
||
|
|
$(document).on('click', '.close-popover', function() {
|
||
|
|
$(this).parents().eq(2).remove();
|
||
|
|
});
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Event: Popover edit button "Clicked"
|
||
|
|
*
|
||
|
|
* Enables the edit dialog of the selected calendar event.
|
||
|
|
*/
|
||
|
|
$(document).on('click', '.edit-popover', function() {
|
||
|
|
$(this).parents().eq(2).remove();
|
||
|
|
|
||
|
|
// :: APPLY APPOINTMENT DATA AND SHOW TO MODAL DIALOG
|
||
|
|
$('.manage-appointment').find('input, textarea').val('');
|
||
|
|
|
||
|
|
// Fill the services listbox and select the appointment service.
|
||
|
|
$.each(GlobalVariables.availableServices, function(index, service) {
|
||
|
|
var option = new Option(service['name'], service['id']);
|
||
|
|
$('.manage-appointment #select-service').append(option);
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.manage-appointment #select-service').val(
|
||
|
|
BackendCalendar.lastFocusedEvent.data['id_services']);
|
||
|
|
|
||
|
|
// Fill the providers listbox with providers that can serve the appointment's
|
||
|
|
// service and then select the user's provider.
|
||
|
|
$.each(GlobalVariables.availableProviders, function(index, provider) {
|
||
|
|
var canProvide = false;
|
||
|
|
|
||
|
|
$.each(provider['services'], function(index, service) {
|
||
|
|
if (service['id'] == BackendCalendar.lastFocusedEvent['id_services']) {
|
||
|
|
canProvide = true;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
if (canProvide) {
|
||
|
|
var option = new Option(provider['first_name'] + ' '
|
||
|
|
+ provider['last_name'], provider['id']);
|
||
|
|
$('#manage-appointments #select-provider').append(option);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// .... more stuff here
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#manage-appointments #cancel-button').click(function() {
|
||
|
|
$('#manage-appointments').modal('hide');
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#manage-appointments #save-button').click(function() {
|
||
|
|
// :: PREPARE APPOINTMENT DATA FOR AJAX CALL
|
||
|
|
var appointmentData = {};
|
||
|
|
|
||
|
|
// :: CALL THE UPDATE APPOINTMENT METHOD
|
||
|
|
BackendCalendar.updateAppointment(appointmentData);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* This method calculates the proper calendar height, in order to be displayed
|
||
|
|
* correctly, even when the browser window is resizing.
|
||
|
|
*
|
||
|
|
* @return {int} Returns the calendar element height in pixels.
|
||
|
|
*/
|
||
|
|
getCalendarHeight: function () {
|
||
|
|
var result = window.innerHeight - $('#footer').height() - $('#header').height()
|
||
|
|
- $('#calendar-toolbar').height() - 80; // 80 for fine tuning
|
||
|
|
return (result > 500) ? result : 500; // Minimum height is 500px
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* This method reloads the registered appointments for the selected date period
|
||
|
|
* and filter type.
|
||
|
|
*
|
||
|
|
* @param {object} calendarHandle The calendar jQuery object.
|
||
|
|
* @param {int} recordId The selected record id.
|
||
|
|
* @param {string} filterType The filter type, could be either FILTER_TYPE_PROVIDER
|
||
|
|
* or FILTER_TYPE_SERVICE
|
||
|
|
* @param {date} startDate Visible start date of the calendar.
|
||
|
|
* @param {type} endDate Visible end date of the calendar.
|
||
|
|
*/
|
||
|
|
refreshCalendarAppointments: function(calendarHandle, recordId, filterType,
|
||
|
|
startDate, endDate) {
|
||
|
|
var ajaxUrl = GlobalVariables.baseUrl + 'backend/ajax_get_calendar_appointments';
|
||
|
|
|
||
|
|
var postData = {
|
||
|
|
record_id : recordId,
|
||
|
|
start_date : startDate.toString('yyyy-MM-dd'),
|
||
|
|
end_date : endDate.toString('yyyy-MM-dd'),
|
||
|
|
filter_type : filterType
|
||
|
|
};
|
||
|
|
|
||
|
|
$.post(ajaxUrl, postData, function(response) {
|
||
|
|
////////////////////////////////////////////////////////////////////
|
||
|
|
//console.log('Refresh Calendar Appointments Response :', response);
|
||
|
|
////////////////////////////////////////////////////////////////////
|
||
|
|
|
||
|
|
// Add the appointments to the calendar.
|
||
|
|
var calendarEvents = new Array();
|
||
|
|
|
||
|
|
$.each(response, function(index, appointment){
|
||
|
|
var event = {
|
||
|
|
id : appointment['id'],
|
||
|
|
title : appointment['service']['name'],
|
||
|
|
start : appointment['start_datetime'],
|
||
|
|
end : appointment['end_datetime'],
|
||
|
|
allDay : false,
|
||
|
|
data : appointment // For later use
|
||
|
|
};
|
||
|
|
|
||
|
|
calendarEvents.push(event);
|
||
|
|
});
|
||
|
|
|
||
|
|
calendarHandle.fullCalendar('removeEvents');
|
||
|
|
calendarHandle.fullCalendar('addEventSource', calendarEvents);
|
||
|
|
|
||
|
|
}, 'json');
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* This method stores the changes of an already registered appointment
|
||
|
|
* into the database, via an ajax call.
|
||
|
|
*
|
||
|
|
* @param {object} appointmentData Contain the new appointment data. The
|
||
|
|
* id of the appointment MUST be already included.
|
||
|
|
*/
|
||
|
|
updateAppointment: function(appointmentData) {
|
||
|
|
|
||
|
|
}
|
||
|
|
};</code></pre>
|
||
|
|
</article>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<nav>
|
||
|
|
<h2><a href="index.html">Index</a></h2><h3>Namespaces</h3><ul><li><a href="Backend.html">Backend</a></li><li><a href="BackendCalendar.html">BackendCalendar</a></li><li><a href="FrontendBook.html">FrontendBook</a></li><li><a href="GeneralFunctions.html">GeneralFunctions</a></li></ul>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<br clear="both">
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.0-dev</a> on Thu Jun 13 2013 16:52:47 GMT+0300 (EEST)
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
<script> prettyPrint(); </script>
|
||
|
|
<script src="scripts/linenumber.js"> </script>
|
||
|
|
</body>
|
||
|
|
</html>
|