Add "Clear all Rules/Events" button (#103)

* Add "Remove all Rules" button
* Add clear all events button

Author: erik-edling

src/main/resources/static/css/style.css

@@ -21,7 +21,8 @@ body {
 	width: 25rem;
 }
 .rule-button {
-    width: 150px;
+    width: auto;
+    min-width: 150px;
 }
 .display-inline-table {
     display: inline-table;

src/main/resources/static/js/testrules.js

@@ -152,6 +152,18 @@ jQuery(document).ready(
         self.addEvent = function(data) {
             self.eventsBindingList.push({'data': ko.observable(self.parsedToString(data))});
         };
+
+        // This function is used to remove all rules
+        self.clearAllRules = function(){
+            self.rulesBindingList([]);
+            self.addRule(ruleTemplate);
+        }
+
+	// This function is used to remove all events
+        self.clearAllEvents = function(){
+            self.eventsBindingList([]);
+            self.addEvent({});
+        }
         return self;
       }
 

src/main/resources/templates/testRules.html

@@ -32,6 +32,10 @@ <h1 id="test_rules_header">Test Rules</h1>
 	                   <button class="btn btn-primary add_rule rule-button mr-1 mt-1 d-inline-block" data-bind="click : $root.addRule.bind($data, ruleTemplate)">
                            Add Rule
                            <i class="fa fa-fw  fa-plus"></i>
+                       </button>
+                       <button class="btn btn-danger clear_all_rules rule-button mr-1 mt-1 d-inline-block" data-bind="click : $root.clearAllRules.bind()">
+                           Clear All Rules
+                           <i class="fa fa-fw  fa-trash"></i>
                        </button>
 	                </div>
                     <div>
@@ -74,6 +78,10 @@ <h6>
                            Add Event
                            <i class="fa fa-fw  fa-plus"></i>
                        </button>
+                       <button class="btn btn-danger clear_all_events rule-button mr-1 mt-1 d-inline-block" data-bind="click : $root.clearAllEvents.bind()">
+                           Clear All Events
+                           <i class="fa fa-fw  fa-trash"></i>
+                       </button>
                     </div>
                     <div>
                         <img class="cursor-pointer" id="uploadEventsInfo" alt="Upload Information" src="assets/images/information.png" data-toggle="tooltip" data-placement="top" title="Upload events must be in a json list, Ex: [{},{}]"/>