Make silences editable in UI

ui/app/css/main.css

@@ -73,10 +73,14 @@ header #logo a {
 	padding: .8em;
 }
 
-.silence-item .delete-button, .alert-item .silence-button {
-	opacity: 0.2;
+.silence-item .delete-button,
+.silence-item .edit-button,
+.alert-item .silence-button {
+	opacity: 0.25;
 }
-.silence-item:hover .delete-button, .alert-item:hover .silence-button {
+.silence-item:hover .delete-button,
+.silence-item:hover .edit-button,
+.alert-item:hover .silence-button {
 	opacity: 1.0;
 }
 
@@ -112,7 +116,7 @@ header #logo a {
 	margin-bottom: 24px;
 }
 
-.alert-item .silence-alert {
+.alert-item .silence-alert, .silence-item .edit-silence {
 	padding: 1em 2em;
 }
 

ui/app/js/app.js

@@ -215,14 +215,21 @@ angular.module('am.controllers').controller('SilenceCtrl',
   function($scope, $location, Silence) {
 
     $scope.highlight = $location.search()['hl'] == $scope.sil.id;
-    $scope.showDetails = false;
 
+    $scope.showDetails = false;
+    $scope.showSilenceForm = false;
+
+    $scope.toggleSilenceForm = function() {
+      $scope.showSilenceForm = !$scope.showSilenceForm
+    }
     $scope.toggleDetails = function() {
       $scope.showDetails = !$scope.showDetails
     }
 
-    $scope.delete = function(sil) {
-      Silence.delete({id: sil.id},
+    var silCopy = angular.copy($scope.sil);
+
+    $scope.delete = function(id) {
+      Silence.delete({id: id},
         function(data) {
           $scope.$emit('silence-deleted');
         },
@@ -230,6 +237,10 @@ angular.module('am.controllers').controller('SilenceCtrl',
           $scope.error = data.data;
         });
     };
+
+    $scope.$on('silence-created', function(evt) {
+      $scope.delete(silCopy.id);
+    });
   }
 );
 

ui/app/partials/silence.html

@@ -13,10 +13,15 @@
 
 		<div class="right">
 			<button type="black" disabled small>Until {{ sil.endsAt | amCalendar }}</button>
-			<button class="delete-button" type="black" ng-click="delete(sil)" small upper>Delete</button>
+			<button class="delete-button" type="black" ng-click="delete(sil.id)" small upper>Delete</button>
+			<button class="edit-button" type="black" ng-click="toggleSilenceForm()" small upper>Edit</button>
 		</div>
 	</div>
 
+	<div class="edit-silence" ng-show="showSilenceForm">
+		<silence-form silence="sil"></silence-form>
+	</div>
+
 	<div class="detail group" ng-show="showDetails">
 		<table class="table-flat">
 			<tbody>