jedi nerd jedi nerd - 4 months ago 17
HTML Question

Remove Applications if there are no Notifications connected to the Apps using JavaScript

I have a 'Notifications' application that displays different apps (rules, notifications, alerts, etc.) within it that may have notifications/alerts associated with them. If the apps don't have notifications/alerts then just the apps themselves will be displayed. Upon the apps being loaded I want a check to be done to see if there are notifications/alerts associated with the apps. If no notifications/alerts exist then I want the apps to not be displayed or removed. I am not sure what is wrong with my code. I may be missing the solution by a long shot. I will include a pic as well.

So if everything works properly, on the loading of the app, the only application that should be displayed in this pic is just alerts and map, notifications, and rules would not be displayed because they don't have any alerts/notifications to display.

Any help would be appreciated. I believe I need to add some code in

listenForNotifications
or
getUserApps
to check and see if there are any and if there isn't then 'delete' the apps.
getUserApps
gets hit first and pulls in apps the user may have. So maybe a check in there to see if any notifications are associated with the app? I thought I was on the right track, but it still isn't working.

Controller (section of code)

function NotificationsCtrl($scope, $state, AuthService, EcosystemService, RealtimeService) {
var vm = this;
vm.ctrlName = 'NotificationsCtrl';

$scope.showAppsMenu = false;

$scope.appList = {};

$scope.dismissNotification = function(notification) {
EcosystemService.dismissNotification(notification.id).then(
function (response) {
delete $scope.appList[notification.appId].notifications[notification.id];
});
};

$scope.dismissAppNotifications = function(app) {
var notifications = app.notifications;
for (var id in notifications) {
EcosystemService.dismissNotification(notifications[id].id).then(
function(notificationId) {
return function (response) {
delete app.notifications[notificationId];
}
}(id));
}
};

$scope.init = function () {
//$stateParams.userId
//AuthService.authState.username
EcosystemService.getUserAppsByEmail(AuthService.authState.username).then(function (response) {
var apps = response.applications;
$scope.appList['alerts'] = {
name: 'Alerts',
notifications: {}
} ;
for(var i = 0; i < apps.length; i++) {
$scope.appList[apps[i].appId] = {
name: apps[i].name,
icon: apps[i].icon,
notifications: {}
}
}
}); EcosystemService.getUserApps(EcosystemService.currentUser.email).then(func tion (response) {
angular.forEach(response.apps, function(app, index) {
if ($state.current.name.indexOf(app.state) > -1) {
$scope.appIcon = app.icon;
}
});
});
};

function listenForNotifications() {
RealtimeService.on("notificationsApp", function (data) {
var app = $scope.appList[data.body.appId];
if (app != null) {
if(!data.body.dismissed) {
data.body.unixEpoch = Date.parse(data.body.whenCreated);
app.notifications[data.body.id] = data.body;
}
else {
delete app.notifications[data.body.id];
delete app.appList[data.body.appId];
}
}
else {
delete app.appList[data.body.appId];
}
});
}


ECOSYSTEM-SERVICE

//********** Application **********

self.saveApplication = function (application) {
return self.genericPost(self.apiUrl + "/application/update", application);
};

self.getUserAppsByEmail = function (email) {
return self.genericGet(self.apiUrl + "/application/getByUserEmail?email=" + email);
};

self.getUserApps = function (email) {
var deferred = $q.defer();

if (email == AuthService.authState.username && self.currentUserApps.length > 0) {
deferred.resolve({ apps: self.currentUserApps });
}
else {
self.getUserAppsByEmail(email).then(function (response) {
deferred.resolve({ apps: response.applications });
})
}


HTML (if needed)

<md-content flex="100">
<div ng-repeat="app in appList">
<!--APP SECTION HEADER ROW-->
<div layout="row" layout-align="start center" style="background-color: #3F454b; padding: 8px 16px;">
<!--APP ICON-->
<img ng-src="{{app.icon}}" style="width: 36px;" ng-show="app.icon">
<md-icon style="width: 36px; height: 36px; color: #FFFFFF;" md-svg-icon="images/icons/error.svg" ng-hide="app.icon"></md-icon>

<!--APP NAME-->
<p class="m2" style="color: #FFFFFF; margin-left: 16px;">{{app.name}}</p>

<!--SPACER DIV-->
<div flex></div>

<!--CLEAR BUTTON-->
<md-icon class="rotate-clockwise-45 no-outline" style="color: #FFFFFF; cursor: pointer;" md-svg-icon="images/icons/add_circle.svg" ng-click="dismissAppNotifications(app)"></md-icon>
</div>

<!--NOTIFICATIONS ROWS-->
<div class="alerts" ng-repeat="notification in app.notifications | orderObjectBy: 'unixEpoch' : true" layout="row" layout-align="start center" style="padding: 8px 16px; border-bottom: 1px solid rgba(255, 255, 255, .2);">
<!--DESCRIPTION && TIME-->
<p flex class="m2" style="color: #FFFFFF; margin-left: 16px;">{{notification.message}} - <span class="m3"; style="color: #FFFFFF"; style="opacity: .3;"; am-time-ago="notification.whenCreated"></span></p>

<!--DELETE BUTTON-->
<md-icon style="color: #FFFFFF; cursor: pointer;" class="no-outline" md-svg-icon="images/icons/close.svg" ng-click="dismissNotification(notification)"></md-icon>
</div>
</div>



Answer

This is what finally fixed the issue... Adding this in the HTML

<div ng-repeat="app in appList" ng-show="(app.notifications | AssociativeArrayFilter) > 0">

And adding this in the Controller

angular.module('notifications').filter('AssociativeArrayFilter', function () {
return function (collection) {
  if (!collection) {
    return 0;
  }

  var reCount = 0;
  angular.forEach(collection, function (val, index) {
    reCount++;
  });

  return reCount;
  }
})
Comments