mirrors/easyappointments
1
0
Fork 1
mirror of https://github.com/alextselegidis/easyappointments.git synced 2024-12-22 14:42:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

Applied styling for the table view (#182).

Browse source
This commit is contained in:
Alex Tselegidis 2016-07-18 21:20:43 +02:00
parent 2ba5ca3db5
commit fa2dc2dd30
2 changed files with 79 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
src/assets/css/backend.css
View file

@ -416,6 +416,53 @@ body .form-horizontal .controls {
margin-left: 158px;
}
#calendar .calendar-view {
overflow-x: scroll;
}
#calendar .calendar-view > div {
width: 100%;
min-width: 1000%;
overflow: auto;
}
#calendar .calendar-view .date-column {
overflow: auto;
float: left;
margin-right: 20px;
}
#calendar .calendar-view .date-column .provider-column .not-working {
background: #eaeaea;
border-radius: 3px;
padding: 10px;
text-align: center;
}
#calendar .calendar-view .date-column .provider-column {
overflow: auto;
float: left;
margin-right: 10px;
}
#calendar .calendar-view .date-column .provider-column .event {
font-size: 10px;
border-radius: 3px;
padding: 2px 3px;
cursor: pointer;
}
#calendar .calendar-view .date-column .provider-column .event.appointment {
background: #4790CA;
color: #fff;
}
#calendar .calendar-view .date-column .provider-column .event.unavailability {
background: #409482;
color: #fff;
}
/* BACKEND CUSTOMERS PAGE
-------------------------------------------------------------------- */

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

@ -73,6 +73,8 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
$('#select-service').val(serviceId).trigger('change');
$('#select-provider').val(providerId).trigger('change');
});
$(window).on('resize', _setCalendarSize);
}
function _createHeader() {
@ -107,7 +109,7 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
* @param {Date} endDate End date to be displayed.
*/
function _createView(startDate, endDate) {
$('#calendar .calendar-view').empty();
$('#calendar .calendar-view').remove();
var $calendarView = $('<div class="calendar-view" />').appendTo('#calendar');
@ -116,6 +118,8 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
endDate: endDate.toString('yyyy-MM-dd')
});
var $wrapper = $('<div />').appendTo($calendarView);
_getCalendarEvents(startDate, endDate)
.done(function(response) {
if (!GeneralFunctions.handleAjaxExceptions(response)) {
@ -125,21 +129,21 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
var currentDate = startDate;
while(currentDate <= endDate) {
_createDateColumn($calendarView, currentDate, response);
_createDateColumn($wrapper, currentDate, response);
currentDate.add({days: 1});
}
_setCalendarSize();
})
.fail(GeneralFunctions.ajaxFailureHandler);
}
function _createDateColumn($calendarView, date, events) {
var $dateColumn = $('<div class="date-column" />').appendTo($calendarView);
function _createDateColumn($wrapper, date, events) {
var $dateColumn = $('<div class="date-column" />').appendTo($wrapper);
$dateColumn
.data('date', date.getTime())
.append('<h3>' + GeneralFunctions.formatDate(date, GlobalVariables.dateFormat) + '</h3>');
.append('<h5>' + GeneralFunctions.formatDate(date, GlobalVariables.dateFormat) + '</h5>');
for (var index in GlobalVariables.availableProviders) {
var provider = GlobalVariables.availableProviders[index];
@ -148,7 +152,7 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
}
function _createProviderColumn($dateColumn, date, provider, events) {
var $providerColumn = $('<div class="provider-column col-xs-12 col-sm-2" />').appendTo($dateColumn);
var $providerColumn = $('<div class="provider-column" />').appendTo($dateColumn);
$providerColumn.data('provider', provider);
@ -167,7 +171,8 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
var plan = JSON.parse(provider.settings.working_plan)[day];
if (!plan) {
$providerColumn.append('<div class="not-working">Not Working</div>');
$providerColumn.append('<div class="not-working">'
+ (provider.first_name + ' ' + provider.last_name).trim() +' <br> Not Working</div>');
return;
}
@ -263,6 +268,24 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
}
}
function _setCalendarSize() {
var height = window.innerHeight - $('#header').outerHeight() - $('#footer').outerHeight()
- $('#calendar-toolbar').outerHeight() - $('.calendar-header').outerHeight() - 50;
$('.calendar-view').height(height);
$('.calendar-view > div').css('min-width', '1000%');
var width = 0;
$('.date-column').each(function(index, dateColumn) {
width += $(dateColumn).outerWidth();
});
$('.calendar-view > div').css('min-width', width + 50);
$('.calendar-view .not-working').outerHeight(height - 70);
}
/**
* Get the calendar events.
*