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

Created the codebase for the new table view (#182).

Browse source
This commit is contained in:
Alex Tselegidis 2016-07-17 18:51:46 +02:00
parent 14c3112a08
commit 8f6cfb2dd2
3 changed files with 272 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/application/controllers/Backend_api.php
View file

@ -52,6 +52,49 @@ class Backend_api extends CI_Controller {
}
}
/**
* Get Calendar Events
*
* This method will return all the calendar events within a specified period.
*/
public function ajax_get_calendar_events() {
try {
$this->output->set_content_type('application/json');
$this->load->model('appointments_model');
$this->load->model('customers_model');
$this->load->model('services_model');
$this->load->model('providers_model');
$startDate = $_POST['startDate'] . ' 00:00:00';
$endDate = $_POST['endDate'] . ' 23:59:59';
$response = [
'appointments' => $this->appointments_model->get_batch([
'is_unavailable' => false,
'start_datetime >=' => $startDate,
'end_datetime <=' => $endDate
]),
'unavailabilities' => $this->appointments_model->get_batch([
'is_unavailable' => true,
'start_datetime >=' => $startDate,
'end_datetime <=' => $endDate
])
];
foreach($response['appointments'] as &$appointment) {
$appointment['provider'] = $this->providers_model->get_row($appointment['id_users_provider']);
$appointment['service'] = $this->services_model->get_row($appointment['id_services']);
$appointment['customer'] = $this->customers_model->get_row($appointment['id_users_customer']);
}
$this->output->set_output(json_encode($response));
} catch(Exception $exc) {
$this->output->set_output(json_encode([
'exceptions' => [exceptionToJavaScript($exc)]
]));
}
}
/**
* [AJAX] Get the registered appointments for the given date period and record.
*

4
src/assets/js/backend_calendar_default_view.js
View file

@ -1064,9 +1064,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
eventClick: _calendarEventClick,
eventResize: _calendarEventResize,
eventDrop: _calendarEventDrop,
eventAfterAllRender: function() {
_convertTitlesToHtml();
}
eventAfterAllRender: _convertTitlesToHtml
});
// Trigger once to set the proper footer position after calendar initialization.

229
src/assets/js/backend_calendar_table_view.js
View file

@ -19,14 +19,241 @@
window.BackendCalendarTableView = window.BackendCalendarTableView || {};
(function(exports) {
'use strict';
function _bindEventHandlers() {
var $calendarToolbar = $('#calendar-toolbar');
var $calendar = $('#calendar');
$calendar.on('click', '.calendar-header .btn.previous', function() {
var endDate = new Date($('#calendar .date-column:first').data('date')).add({days: -1});
var startDate = new Date(endDate.getTime()).add({days: -1 * (parseInt($('#select-filter-item').val()) - 1)});
_createView(startDate, endDate);
});
$calendar.on('click', '.calendar-header .btn.next', function() {
var startDate = new Date($('#calendar .date-column:last').data('date')).add({days: 1});
var endDate = new Date(startDate.getTime()).add({days: parseInt($('#select-filter-item').val()) - 1});
_createView(startDate, endDate);
});
// @todo reload appts event
// @todo click slot shows appointments modal
}
function _createHeader() {
var $calendarFilter = $('#calendar-filter');
$calendarFilter
.find('select')
.empty()
.append(new Option('1 Days', 1))
.append(new Option('4 Days', 4));
var $calendarHeader = $('<div class="calendar-header" />').appendTo('#calendar');
$calendarHeader
.html(
'<button class="btn btn-xs btn-default previous">' +
'<span class="glyphicon glyphicon-chevron-left"></span>' +
'</button>' +
'<button class="btn btn-xs btn-default next">' +
'<span class="glyphicon glyphicon-chevron-right"></span>' +
'</button>'
);
}
/**
* Create table schedule view.
*
* This method will destroy any previous instances and create a new view for displaying the appointments in
* a table format.
*
* @param {Date} startDate Start date to be displayed.
* @param {Date} endDate End date to be displayed.
*/
function _createView(startDate, endDate) {
$('#calendar .calendar-view').remove();
var $calendarView = $('<div class="calendar-view" />').appendTo('#calendar');
$calendarView.data({
startDate: startDate.toString('yyyy-MM-dd'),
endDate: endDate.toString('yyyy-MM-dd')
});
_getCalendarEvents(startDate, endDate)
.done(function(response) {
if (!GeneralFunctions.handleAjaxExceptions(response)) {
return;
}
var currentDate = startDate;
while(currentDate <= endDate) {
_createDateColumn($calendarView, currentDate, response);
currentDate.add({days: 1});
}
})
.fail(GeneralFunctions.ajaxFailureHandler);
}
exports.initialize = function() {
function _createDateColumn($calendarView, date, events) {
var $dateColumn = $('<div class="date-column" />').appendTo($calendarView);
$dateColumn
.data('date', date.getTime())
.append('<h3>' + GeneralFunctions.formatDate(date, GlobalVariables.dateFormat) + '</h3>');
for (var index in GlobalVariables.availableProviders) {
var provider = GlobalVariables.availableProviders[index];
_createProviderColumn($dateColumn, date, provider, events);
}
}
function _createProviderColumn($dateColumn, date, provider, events) {
var $providerColumn = $('<div class="provider-column col-xs-12 col-sm-2" />').appendTo($dateColumn);
$providerColumn.data('provider', provider);
// Create the table slots.
_createSlots($providerColumn, date, provider);
// Add the appointments to the column.
_createAppointments($providerColumn, events.appointments);
// Add the unavailabilities to the column.
_createUnavailabilities($providerColumn, events.unavailabilities);
}
function _createSlots($providerColumn, date, provider) {
var day = date.toString('dddd').toLowerCase();
var plan = JSON.parse(provider.settings.working_plan)[day];
if (!plan) {
$providerColumn.append('<div class="not-working">Not Working</div>');
return;
}
var $table = $('<table class="slots" />')
.appendTo($providerColumn)
.addClass('table table-condensed table-responsive table-hover table-striped')
.html(
'<thead>' +
'<tr>' +
'<th colspan="' + (provider.services.length + 1) + '">' +
(provider.first_name + ' ' + provider.last_name).trim() +
'</th>' +
'</tr>' +
'<tr>' +
'<th>Time</th>' +
'</tr>' +
'</thead>' +
'<tbody></tbody>'
);
for (var index in GlobalVariables.availableServices) {
var service = GlobalVariables.availableServices[index];
if (provider.services.indexOf(service.id) > -1) {
$table.find('thead tr:last').append('<th data-id="' + service.id + '">' + service.name + '</th>');
}
}
var start = parseInt(plan.start.split(':')[0]);
var end = parseInt(plan.end.split(':')[0]) + 1;
var current = start;
var $tbody = $table.find('tbody');
while(current <= end) {
var $tr = $('<tr/>').appendTo($tbody);
var time = (current < 10 ? '0' + parseInt(current) : parseInt(current)) + (current % 1 === 0 ? ':00' : ':30');
$tr
.append('<td>' + time + '</td>')
.append('<td/>'.repeat(provider.services.length));
current += 0.5;
}
}
function _createAppointments($providerColumn, appointments) {
if (appointments.length === 0) {
return;
}
var currentDate = new Date($providerColumn.parents('.date-column').data('date'));
var $tbody = $providerColumn.find('table tbody');
for (var index in appointments) {
var appointment = appointments[index];
if (appointment.id_users_provider !== $providerColumn.data('provider').id) {
continue;
}
var eventDate = Date.parse(appointment.start_datetime);
var $event = $('<div class="event appointment" />');
$event.html(
appointment.service.name + ' - ' +
(appointment.customer.first_name + ' ' + appointment.customer.last_name).trim()
);
$tbody.find('tr').each(function(index, tr) {
var $td = $(tr).find('td:first');
var cellDate = new Date(currentDate.getTime()).set({
hour: parseInt($td.text().split(':')[0]),
minute: parseInt($td.text().split(':')[1])
});
if (eventDate < cellDate) {
var cellIndex = $providerColumn
.find('thead tr:last th[data-id="' + appointment.service.id + '"]')
.index();
$event.appendTo($(tr).prev().find('td').eq(cellIndex));
return false;
}
});
}
}
function _createUnavailabilities($providerColumn, unavailabilities) {
if (unavailabilities.length === 0) {
return;
}
}
/**
* Get the calendar events.
*
* @param {Date} startDate
* @param {Date} endDate
*
* @return {jQuery.jqXHR}
*/
function _getCalendarEvents(startDate, endDate) {
var url = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_get_calendar_events';
var data = {
csrfToken: GlobalVariables.csrfToken,
startDate: startDate.toString('yyyy-MM-dd'),
endDate: endDate.toString('yyyy-MM-dd')
};
return $.post(url, data);
}
exports.initialize = function() {
_createHeader();
_createView(Date.today(), Date.today().add({days: parseInt($('#select-filter-item').val() - 1)}));
_bindEventHandlers();
};
})(window.BackendCalendarTableView);