Implement multiple matchers in Silence creation

ui/app/js/app.js

@@ -24,8 +24,10 @@ angular.module('am.controllers').controller('SilencesCtrl',
     $scope.refresh = function() {
       Silence.query({},
         function(data) {
-          console.log(data);
           $scope.silences = data.data || [];
+        },
+        function(data) {
+
         }
       );
     }
@@ -54,13 +56,29 @@ angular.module('am.controllers').controller('SilenceCreateCtrl',
     $scope.silence = {
       startsAt: now,
       endsAt: end,
-      matchers: []
+      matchers: [{}]
     }
 
     $scope.create = function() {
-      Silence.create($scope.silence);
-      $scope.$parent.refresh();
+      Silence.create($scope.silence,
+        function(data) {
+          $scope.refresh();
+        },
+        function(data) {
+          $scope.error = data.data;
+        }
+      );
     }
+
+    $scope.error = null;
+
+    $scope.newMatcher = function() {
+      $scope.silence.matchers.push({});
+    }
+    $scope.delMatcher = function(i) {
+      $scope.silence.matchers.splice(i, 1);
+    }
+
   }
 );
 

ui/app/partials/silences.html

@@ -1,11 +1,17 @@
 <div id="silence-create" ng-controller="SilenceCreateCtrl">
-	<form>
+	<form novalidate>
 		Start: <input ng-model="silence.startsAt" type="datetime-local">
 		End: <input ng-model="silence.endsAt" type="datetime-local">
 
-		<input placeholder="name" ng-model="silence.matchers[0].name">
-		<input placeholder="value" ng-model="silence.matchers[0].value">
-		regex: <input type="checkbox" ng-model="silence.matchers[0].isRegex">
+		<div ng-repeat="m in silence.matchers">
+			<input placeholder="name" ng-model="m.name">
+			<input placeholder="value" ng-model="m.value">
+			regex: <input type="checkbox" ng-model="m.isRegex">
+			<button ng-hide="$first" ng-click="delMatcher($index)">-</button>
+			<button ng-show="$last" ng-click="newMatcher()">+</button>
+		</div>
+
+		<div ng-show="error != null">Error: {{ error }}</div>
 
 		<button ng-click="create()">Create</button>
 	</form>