Make subscription display more clear

This commit is contained in:
Alex DeBrie 2016-03-23 18:47:16 +00:00
parent 601010e44e
commit df2067eec1
5 changed files with 40 additions and 30 deletions

View File

@ -178,13 +178,13 @@
return {
restrict: 'E',
replace: true,
template: '<button class="btn btn-default btn-xs" ng-click="toggleSubscription()"><i ng-class="class"></i></button>',
template: '<button class="btn btn-primary col-xs-4" ng-click="toggleSubscription()" ng-bind="message"></i></button>',
controller: function ($scope) {
var updateClass = function() {
var updateMessage = function() {
if ($scope.subscription) {
$scope.class = "fa fa-eye-slash";
$scope.message = "Unsubscribe";
} else {
$scope.class = "fa fa-eye";
$scope.message = "Subscribe";
}
}
@ -193,7 +193,7 @@
return (subscription.user.email == currentUser.email);
});
updateClass();
updateMessage();
});
$scope.toggleSubscription = function() {
@ -201,7 +201,7 @@
$scope.subscription.$delete(function() {
$scope.subscribers = _.without($scope.subscribers, $scope.subscription);
$scope.subscription = undefined;
updateClass();
updateMessage();
}, function() {
growl.addErrorMessage("Failed saving subscription.");
});
@ -209,7 +209,7 @@
$scope.subscription = new AlertSubscription({alert_id: $scope.alertId});
$scope.subscription.$save(function() {
$scope.subscribers.push($scope.subscription);
updateClass();
updateMessage();
}, function() {
growl.addErrorMessage("Unsubscription failed.");
});

View File

@ -581,3 +581,8 @@ div.table-name {
padding-left: 5px;
padding-right: 5px;
}
hr.subscription {
height: 2px;
background: #333;
}

View File

@ -1,25 +1,27 @@
<div class="row">
<strong>Destination subscriptions</strong>
<p><i>Destination subscriptions will send a notification to the configured destination</i></p>
<form name="subscribeForm" ng-submit="saveSubscriber()" class="form">
<div class="form-group">
<label>Add a destination subscription</label>
<ui-select ng-model="subscription.destination">
<ui-select-match>{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="d in destinations">
<span ng-bind-html=destinationsDisplay(d)></span>
</ui-select-choices>
</ui-select>
</div>
<div class="form-group">
<button class="btn btn-primary">Subscribe</button>
</div>
</form>
<div class="list-group">
<label>Currently subscribed</label>
<div class="list-group-item" ng-repeat="subscriber in subscribers">
<span ng-bind-html=destinationsDisplay(subscriber.destination)></span>
<button class="btn btn-xs btn-danger pull-right" ng-click="unsubscribe(subscriber)">Unsubscribe</button>
<div class="col-xs-12">
<strong>Destination subscriptions</strong>
<p><i>Destination subscriptions will send a notification to the configured destination</i></p>
<form name="subscribeForm" ng-submit="saveSubscriber()" class="form-inline">
<h4>Add a destination subscription</h4>
<div class="form-group col-xs-9">
<ui-select ng-model="subscription.destination">
<ui-select-match>{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="d in destinations">
<span ng-bind-html=destinationsDisplay(d)></span>
</ui-select-choices>
</ui-select>
</div>
<div class="form-group col-xs-3">
<button class="btn btn-primary">Subscribe</button>
</div>
</form>
<div class="list-group">
<label>Currently subscribed</label>
<div class="list-group-item" ng-repeat="subscriber in subscribers">
<span ng-bind-html=destinationsDisplay(subscriber.destination)></span>
<button class="btn btn-xs btn-danger pull-right" ng-click="unsubscribe(subscriber)">Unsubscribe</button>
</div>
</div>
</div>
</div>

View File

@ -62,6 +62,7 @@
<div class="col-md-4" ng-if="alert.id">
<h3><i>Subscriptions</i></h3>
<user-subscribers alert-id="alertId"></user-subscribers>
<hr class="subscription">
<destination-subscribers alert-id="alertId"></destination-subscribers>
</div>
</div>

View File

@ -1,5 +1,7 @@
<div ng-style='{"min-height":"100px"}' class="row">
<strong>User subscriptions</strong> <subscribe-button alert-id="alertId" subscribers="subscribers"></subscribe-button><br/>
<div class="container">
<div class="row">
<label class="col-xs-8">User subscriptions</label> <subscribe-button alert-id="alertId" subscribers="subscribers"></subscribe-button><br><br>
</div>
<p><i>User subscriptions will send a notification to your email</i></p>
<img ng-src="{{s.user.gravatar_url}}" class="img-circle" alt="{{s.id}}" ng-repeat="s in subscribers"/>
</div>