From 6c4a82571ce54207973855c9a19244d9590ad415 Mon Sep 17 00:00:00 2001 From: Francis Lachapelle Date: Wed, 1 Apr 2015 11:18:19 -0400 Subject: [PATCH] Calendar module: add day view --- UI/Templates/SchedulerUI/UIxCalDayView.wox | 37 +++++++------- UI/Templates/SchedulerUI/UIxCalMainView.wox | 8 ++- .../js/Appointments/component-model.js | 49 +++++++++++++------ UI/WebServerResources/js/SchedulerUI.js | 25 ++++++---- .../scss/views/SchedulerUI.scss | 6 +++ 5 files changed, 81 insertions(+), 44 deletions(-) diff --git a/UI/Templates/SchedulerUI/UIxCalDayView.wox b/UI/Templates/SchedulerUI/UIxCalDayView.wox index 83cf7c21c..30645f47d 100644 --- a/UI/Templates/SchedulerUI/UIxCalDayView.wox +++ b/UI/Templates/SchedulerUI/UIxCalDayView.wox @@ -6,35 +6,34 @@ xmlns:rsrc="OGo:url" xmlns:label="OGo:label"> - --> +
+
+ + + +
- - - - - - - - - -
- - + +
diff --git a/UI/WebServerResources/js/Appointments/component-model.js b/UI/WebServerResources/js/Appointments/component-model.js index d7b46661f..aa648e983 100644 --- a/UI/WebServerResources/js/Appointments/component-model.js +++ b/UI/WebServerResources/js/Appointments/component-model.js @@ -74,25 +74,46 @@ }; /** - * @function $eventsBlocksForWeek + * @function $eventsBlocksForView * @memberof Component.prototype * @desc Events blocks for a specific week - * @param {Date} type - Date of any day of the week - * @returns a promise of a collection of Components instances + * @param {string} view - Either 'day' or 'week' + * @param {Date} type - Date of any day of the desired period + * @returns a promise of a collection of objects describing the events blocks */ - Component.$eventsBlocksForWeek = function(date) { - var startDate, endDate, params, i, + Component.$eventsBlocksForView = function(view, date) { + var viewAction, startDate, endDate, params; + + if (view == 'day') { + viewAction = 'dayView'; + startDate = endDate = date; + } + else if (view == 'week') { + viewAction = 'weekView'; + startDate = date.beginOfWeek(); + endDate = new Date(); + endDate.setTime(startDate.getTime()); + endDate.addDays(6); + } + return this.$eventsBlocks(viewAction, startDate, endDate); + }; + + /** + * @function $eventsBlocks + * @memberof Component.prototype + * @desc Events blocks for a specific view and period + * @param {string} view - Either 'day' or 'week' + * @param {Date} startDate - period's start date + * @param {Date} endDate - period's end date + * @returns a promise of a collection of objects describing the events blocks + */ + Component.$eventsBlocks = function(view, startDate, endDate) { + var params, futureComponentData, i, deferred = Component.$q.defer(); - - startDate = date.beginOfWeek(); - endDate = new Date(); - endDate.setTime(startDate.getTime()); - endDate.addDays(6); - params = { view: 'weekView', sd: startDate.getDayString(), ed: endDate.getDayString() }; + params = { view: view, sd: startDate.getDayString(), ed: endDate.getDayString() }; Component.$log.debug('eventsblocks ' + JSON.stringify(params, undefined, 2)); - - var futureComponentData = this.$$resource.fetch(null, 'eventsblocks', params); + futureComponentData = this.$$resource.fetch(null, 'eventsblocks', params); futureComponentData.then(function(data) { Component.$timeout(function() { var components = [], blocks = {}; @@ -112,7 +133,7 @@ }); // Convert array of blocks to object with days as keys - for (i = 0; i < 7; i++) { + for (i = 0; i < data.blocks.length; i++) { blocks[startDate.getDayString()] = data.blocks[i]; startDate.addDays(1); } diff --git a/UI/WebServerResources/js/SchedulerUI.js b/UI/WebServerResources/js/SchedulerUI.js index c91e6dc70..d0a6738e8 100644 --- a/UI/WebServerResources/js/SchedulerUI.js +++ b/UI/WebServerResources/js/SchedulerUI.js @@ -37,12 +37,14 @@ }] } }) - .state('calendars.weekView', { - url: '/weekView/:day', + .state('calendars.view', { + url: '/{view:(?:day|week)}/:day', views: { calendarView: { - templateUrl: function ($stateParams) { - return 'weekview?day=' + $stateParams.day; // UI/Templates/SchedulerUI/UIxCalWeekView.wox + templateUrl: function($stateParams) { + // UI/Templates/SchedulerUI/UIxCalDayView.wox or + // UI/Templates/SchedulerUI/UIxCalWeekView.wox + return $stateParams.view + 'view?day=' + $stateParams.day; }, controller: 'CalendarController', controllerAs: 'calendar' @@ -50,15 +52,20 @@ }, resolve: { stateEventsBlocks: ['$stateParams', 'sgComponent', function($stateParams, Component) { - return Component.$eventsBlocksForWeek($stateParams.day.asDate()); + return Component.$eventsBlocksForView($stateParams.view, $stateParams.day.asDate()); }] } }); - $urlRouterProvider.when('/calendar/weekView', function() { + $urlRouterProvider.when('/calendar/day', function() { + // If no date is specified, show today + var now = new Date(); + return '/calendar/day/' + now.getDayString(); + }) + $urlRouterProvider.when('/calendar/week', function() { // If no date is specified, show today's week var now = new Date(); - return '/calendar/weekView/' + now.getDayString(); + return '/calendar/week/' + now.getDayString(); }); // if none of the above states are matched, use this as the fallback @@ -127,13 +134,13 @@ // Change calendar's view this.changeView = function($event) { var date = angular.element($event.currentTarget).attr('date'); - $state.go('calendars.weekView', { day: date }); + $state.go('calendars.view', { view: $stateParams.view, day: date }); }; // Refresh current view when the list of calendars is modified $scope.$on('calendars:list', angular.bind(this, function() { var ctrl = this; - Component.$eventsBlocksForWeek($stateParams.day.asDate()).then(function(data) { + Component.$eventsBlocksForView($stateParams.view, $stateParams.day.asDate()).then(function(data) { ctrl.blocks = data; }); })); diff --git a/UI/WebServerResources/scss/views/SchedulerUI.scss b/UI/WebServerResources/scss/views/SchedulerUI.scss index 55afadf42..b41c314fa 100644 --- a/UI/WebServerResources/scss/views/SchedulerUI.scss +++ b/UI/WebServerResources/scss/views/SchedulerUI.scss @@ -28,6 +28,12 @@ } } +.daysViewFor1Days { + .day { + width: 100%; + } +} + #daysView { position: relative; top: 0;