(js) Show events categories as color bands

This commit is contained in:
Francis Lachapelle
2015-11-14 14:29:21 -05:00
parent ace9fa9e4e
commit 4685c0ff2a
7 changed files with 61 additions and 52 deletions
@@ -288,6 +288,7 @@
var componentData = _.object(this.eventsFields, eventData),
start = new Date(componentData.c_startdate * 1000);
componentData.hour = start.getHourString();
componentData.categories = _.invoke(componentData.c_category, 'asCSSIdentifier');
componentData.blocks = [];
objects.push(new Component(componentData));
return objects;
@@ -18,7 +18,7 @@
url: '/calendar',
views: {
calendars: {
templateUrl: 'UIxCalMainFrame', // UI/Templates/SchedulerUI/UIxCalMainFrame.wox
templateUrl: 'UIxCalMainView', // UI/Templates/SchedulerUI/UIxCalMainView.wox
controller: 'CalendarsController',
controllerAs: 'app'
}
@@ -33,6 +33,10 @@
// Add a class while dragging
' ng-class="{\'sg-event--dragging\': block.dragging}">',
' <div class="eventInside" ng-click="clickBlock({clickEvent: $event, clickComponent: block.component})">',
// Categories color stripes
' <div class="category" ng-repeat="category in block.component.categories"',
' ng-class="\'bg-category\' + category"',
' ng-style="{ right: ($index * 10) + \'%\' }"></div>',
' <div class="text">{{ block.component.summary }}',
' <span class="icons">',
// Component is reccurent
@@ -44,7 +48,10 @@
// Component is private
' <md-icon ng-if="block.component.c_classification == 2" class="material-icons icon-vpn-key"></md-icon>',
' </span>',
' <div class="secondary" ng-if="block.component.c_location"><md-icon>place</md-icon> {{block.component.c_location}}</div>',
// Location
' <div class="secondary" ng-if="block.component.c_location">',
' <md-icon>place</md-icon> {{block.component.c_location}}',
' </div>',
' </div>',
' </div>',
'</div>'
@@ -22,8 +22,14 @@
template: [
'<div class="sg-event sg-event--ghost ng-hide">',
' <div class="eventInside">',
' <div class="text">{{ block.component.summary }}</span>',
// Categories color stripes
' <div class="category" ng-repeat="category in block.component.categories"',
' ng-class="\'bg-category\' + category"',
' ng-style="{ right: ($index * 10) + \'%\' }"></div>',
' <div class="text">{{ block.component.summary }}',
' <span class="icons">',
// Component is reccurent
' <md-icon ng-if="block.component.occurrenceId" class="material-icons icon-repeat"></md-icon>',
// Component has an alarm
' <md-icon ng-if="block.component.c_nextalarm" class="material-icons icon-alarm"></md-icon>',
// Component is confidential
@@ -31,6 +37,10 @@
// Component is private
' <md-icon ng-if="block.component.c_classification == 2" class="material-icons icon-vpn-key"></md-icon>',
' </span>',
// Location
' <div class="secondary" ng-if="block.component.c_location">',
' <md-icon>place</md-icon> {{block.component.c_location}}',
' </div>',
' </div>',
' </div>',
' <div class="ghostStartHour" ng-if="startHour">{{ startHour }}</div>',