SentinelSixSpy SentinelSixSpy - 1 year ago 31
HTML Question

Display message if there are no applications available

I want to display a message that says "No Notifications or Alerts Available". I want this to be displayed if no apps are contained on the page. So if the page is black then the message should be displayed. Not sure how to go about doing this.

Controller

$scope.dismissAppNotifications = function(app, ev) {
var confirm = $mdDialog.confirm()
.title('Confirm Dismiss All')
.content('Are you sure you want to dismiss all notifications?')
.ariaLabel('Confirm Dismiss All')
.ok('Confirm')
.cancel('Cancel')
.targetEvent(ev);

$mdDialog.show(confirm).then(function() {
var notifications = app.notifications;
for (var id in notifications) {
EcosystemService.dismissNotification(notifications[id].id).then(function(notificationId) {
return function (response) {
delete app.notifications[notificationId];
}
});
}
}, function() {
return false;
});
};

$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: {}
}
}

// -- I could/should see subscribe setting up
RealtimeService.connect(function(err) {
if(!err) {
listenForNotifications();
RealtimeService.emit('subscribe',
{
id: 'notificationsApp', // Publish channel id
filter: {
type: 'system.notification'
}
});
}
});

});

EcosystemService.getUserApps(EcosystemService.currentUser.email).then(function (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];
}
}
});
}

if (EcosystemService.initialized) {
$scope.init();
}
else {
$scope.ecosystemServiceInitialized = function () {
return EcosystemService.initialized;
};
$scope.$watch($scope.ecosystemServiceInitialized, function(newValue, oldValue) {
if (newValue) {
$scope.init();
}
});
}

}
}());

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;
}
})

angular.module('notifications').filter('NotificationsExistFilter',
function () {
return function (apps) {
if (!apps) {
return false;
}

angular.forEach(apps, function (app, index) {
angular.forEach(app.notifications, function (value, index) {
return true;
})
});

return false;
};
});


HTML

<md-content flex="100">
<div class="m2" style="color: #FFFFFF; padding: 24px 36px;" ng-if="!(appList | NotificationsExistFilter)">No Notifications or Alerts Available</div>
<div ng-repeat="app in appList" ng-show="(app.notifications | AssociativeArrayFilter) > 0">
<!--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, $event)"></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>
</md-content>






Answer Source

This will fix what I was trying to accomplish. Adding a filter is the easiest fix in this case.

Add this in the HTML

<div class="m2" style="color: #FFFFFF; padding: 24px 36px;" ng-if="!(appList | NotificationsExistFilter)">No Notifications or Alerts Available</div>

Add this filter in the Controller

angular.module('notifications').filter('NotificationsExistFilter', function () {
return function (apps) {
if (!apps) {
  return false;
}

var retVal = false;
angular.forEach(apps, function (app, index) {
  if (!retVal) {
    angular.forEach(app.notifications, function (value, index) {
      if (!retVal) {
        retVal = true;
      }
    })
  }
});

return retVal;
};
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download