Skip to content

U
ulakbus-ui
Commit 0dca3c1f authored by Vladimir Baranov's avatar Vladimir Baranov
Browse files
Options

rref #5392. Add header indicators for unread messages and notifications

parent 54e0861f
Hide whitespace changes
Inline Side-by-side
Showing with 58 additions and 101 deletions
app/shared/directives.js
View file @ 0dca3c1f
......@@ -32,78 +32,28 @@ angular.module('ulakbus')
* @ngdoc directive
* @name headerNotification
* @description This directive is responsible to get and show notification.
* It calls API's /notify path with given interval and broadcasts `notifications` application-wide.
* There are 4 types of notifications:
* 1: tasks, 2: messages, 3: announcements, 4: recents
* It calls API's '_zops_unread_count' view to init its state and updates state when 'message' or 'notifications' broadcast message received *
* - Notifications can be disabled in /dev/settings page
*/
.directive('headerNotification', function (WSOps, $rootScope, $cookies, $interval, RESTURL, $uibModal) {
.directive('headerNotification', function ($rootScope, $uibModal, MessagingService) {
return {
templateUrl: 'shared/templates/directives/header-notification.html',
restrict: 'E',
replace: true,
scope: {},
controller: function ($scope, $log) {
// notification categories:
// 1: tasks, 2: messages, 3: announcements, 4: recents
$scope.notifications = {1: [], 2: [], 3: [], 4: []};
/**
* Group notifications
* @param notifications
*/
$scope.popModal = function(item){
var modalInstance = $uibModal.open({
animation: true,
templateUrl: 'shared/templates/notificationsModalContent.html',
controller: function($scope){
$scope.notification = item;
$scope.cancel = function() {
modalInstance.dismiss('cancel');
};
},
size: 'lg'
});
}
$scope.groupNotifications = function (notifications) {
$scope.notifications = {1: [], 2: [], 3: [], 4: []};
angular.forEach(notifications, function (value, key) {
$scope.notifications[value.type].push(value);
});
$scope.$apply();
$scope.count = {
messages: 0,
notifications: 0
};
/**
* When "notifications" send via websocket, parse notifications by type.
*/
$scope.$on("notifications", function (event, data) {
$log.debug("Notification!", data);
$scope.groupNotifications(data);
});
/**
* When clicked mark the notification as read.
* @param items
* @todo: do it in detail page of notification
*/
$scope.markAsRead = function (event,item, group, index) {
//Added event parameter to stop propagate, so that behaviour of outsideClick won't be interrupted.
event.stopPropagation();
WSOps.doSend(angular.toJson({data: {view: 'notify', id:item.id}}));
$scope.notifications[group].splice(index,1);
$event.preventDefault();
$event.stopPropagation();
return false;
};
// if markasread triggered outside the directive
// $scope.$on("markasread", function (event, data) {
// $scope.markAsRead(data);
// });
function initCounters(){
MessagingService.get_unread_messages_count()
.then(function(result){
$scope.count.messages = result.messages;
$scope.count.notifiations = result.notifications;
})
}
initCounters();
}
};
})
......
app/shared/templates/directives/header-notification.html
View file @ 0dca3c1f
......@@ -32,9 +32,9 @@
</li>-->
<li uib-dropdown auto-close="outsideClick">
<a uib-dropdown-toggle>
<div class="badge" ng-show="notifications[2].length > 0">{{notifications[2].length}}</div>
<i class="fa fa-envelope fa-fw" tooltip-placement="bottom" uib-tooltip="Mesajlar"></i> <i
class="fa fa-caret-down"></i>
<div class="badge" ng-show="count.messages > 0">{{count.messages}}</div>
<i class="fa fa-envelope fa-fw" tooltip-placement="bottom" uib-tooltip="Mesajlar"></i>
<!--<i class="fa fa-caret-down"></i>-->
</a>
<ul class="dropdown-messages" uib-dropdown-menu ng-show="notifications[2].length > 0">
<li ng-repeat="notify in notifications[2] | limitTo: '8'">
......@@ -62,47 +62,47 @@
<!-- /.dropdown-messages -->
</li>
<!-- /.dropdown -->
<li uib-dropdown auto-close="outsideClick">
<a uib-dropdown-toggle>
<div class="badge" ng-if="notifications[1].length > 0">{{notifications[1].length}}</div>
<i class="fa fa-tasks fa-fw" tooltip-placement="bottom" uib-tooltip="Görevler"></i> <i
class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-tasks" uib-dropdown-menu ng-if="notifications[1].length > 0">
<li ng-repeat="notify in notifications[1] | limitTo: '8'">
<a href="{{notify.url}}">
<div>
<p>
<strong>{{notify.title}}</strong>
<span class="pull-right text-muted">{{notify.body}}</span>
<span ng-click="markAsRead($event,notify, 1, $index)" class="pull-right fa fa-times"></span>
</p>
<!-- todo: progress bar will be used in future developments-->
<!--<div class="progress progress-striped active">-->
<!--<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">-->
<!--<span class="sr-only">40% Complete (success)</span>-->
<!--</div>-->
<!--</div>-->
<!--<li uib-dropdown auto-close="outsideClick">-->
<!--<a uib-dropdown-toggle>-->
<!--<div class="badge" ng-if="notifications[1].length > 0">{{notifications[1].length}}</div>-->
<!--<i class="fa fa-tasks fa-fw" tooltip-placement="bottom" uib-tooltip="Görevler"></i> <i-->
<!--class="fa fa-caret-down"></i>-->
<!--</a>-->
<!--<ul class="dropdown-tasks" uib-dropdown-menu ng-if="notifications[1].length > 0">-->
<!--<li ng-repeat="notify in notifications[1] | limitTo: '8'">-->
<!--<a href="{{notify.url}}">-->
<!--<div>-->
<!--<p>-->
<!--<strong>{{notify.title}}</strong>-->
<!--<span class="pull-right text-muted">{{notify.body}}</span>-->
<!--<span ng-click="markAsRead($event,notify, 1, $index)" class="pull-right fa fa-times"></span>-->
<!--</p>-->
<!--&lt;!&ndash; todo: progress bar will be used in future developments&ndash;&gt;-->
<!--&lt;!&ndash;<div class="progress progress-striped active">&ndash;&gt;-->
<!--&lt;!&ndash;<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">&ndash;&gt;-->
<!--&lt;!&ndash;<span class="sr-only">40% Complete (success)</span>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center">
<strong>See All Tasks</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!--</div>-->
<!--</a>-->
<!--</li>-->
<!--<li class="divider"></li>-->
<!--<li>-->
<!--<a class="text-center">-->
<!--<strong>See All Tasks</strong>-->
<!--<i class="fa fa-angle-right"></i>-->
<!--</a>-->
<!--</li>-->
<!--</ul>-->
<!-- /.dropdown-tasks -->
</li>
<!-- /.dropdown -->
<li uib-dropdown auto-close="outsideClick">
<a uib-dropdown-toggle>
<div class="badge" ng-if="notifications[3].length > 0">{{notifications[3].length}}</div>
<i class="fa fa-bell fa-fw" tooltip-placement="bottom" uib-tooltip="Duyurular"></i> <i
class="fa fa-caret-down"></i>
<div class="badge" ng-if="count.notifications > 0">{{count.notifications}}</div>
<i class="fa fa-bell fa-fw" tooltip-placement="bottom" uib-tooltip="Duyurular"></i>
<!--<i class="fa fa-caret-down"></i>-->
</a>
<ul class="dropdown-alerts" uib-dropdown-menu ng-if="notifications[3].length > 0">
<li ng-repeat="notify in notifications[3] | limitTo: '8'">
......@@ -114,6 +114,13 @@
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center">
<strong>See All Notifications</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-alerts -->
</li>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment