Add replace/append functionality in TestRules (#105)

* Implemented the functionality for replacing and appending loaded rules.

Author: J-Binieda-ericsson

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

@@ -1,6 +1,7 @@
 // Global vars
 var frontendServiceUrl;
 var i = 0;
+var isReplacing = true;
 var ruleTemplate = {
   "TemplateName" : "",
   "Type" : "",
@@ -189,91 +190,105 @@ jQuery(document).ready(
               sticky : false,
               theme : 'Notify'
             });
-            
+
             var list = JSON.parse(fileContent);
-            if (isRules == true) {
-                vm.rulesBindingList([]);
+            if (isRules) {
+                if (isReplacing) {
+                    vm.rulesBindingList([]);
+                }
                 list.forEach(function(element) {
                     vm.addRule(element);
                 });
             } else {
-                vm.eventsBindingList([]);
+                if (isReplacing) {
+                    vm.eventsBindingList([]);
+                }
                 list.forEach(function(element) {
                     vm.addEvent(element);
                 });
             }
           };
-          
+
           if (subscriptionFile != null){
             reader.readAsText(subscriptionFile);
           }
        }
 
-        //Set onchange event on the input element "uploadRulesFile" and "uploadEventsFile"
-        var pomRules = document.getElementById('uploadRulesFile');
-        pomRules.onchange = function uploadFinished() {
-            var subscriptionFile = pomRules.files[0];
-            validateJSONAndUpload(subscriptionFile, true);
-            $(this).val("");
-        };
-        
-        var pomEvents = document.getElementById('uploadEventsFile');
-        pomEvents.onchange = function uploadFinished() {
-            var subscriptionFile = pomEvents.files[0];
-            validateJSONAndUpload(subscriptionFile, false);
-            $(this).val("");
-        };
-          
+      //Set onchange event on the input element "uploadRulesFile" and "uploadEventsFile"
+      var pomRules = document.getElementById('uploadRulesFile');
+      pomRules.onchange = function uploadFinished() {
+        var subscriptionFile = pomRules.files[0];
+        validateJSONAndUpload(subscriptionFile, true);
+        $(this).val("");
+      };
+
+      var pomEvents = document.getElementById('uploadEventsFile');
+      pomEvents.onchange = function uploadFinished() {
+        var subscriptionFile = pomEvents.files[0];
+        validateJSONAndUpload(subscriptionFile, false);
+        $(this).val("");
+      };
+
       //Upload events list json data
       $(".container").on("click", "button.upload_rules", function(event) {
         event.stopPropagation();
         event.preventDefault();
+        var isRules = true;
+        replaceAppendModal(isRules);
 
-        function createRulesUploadWindow() {
-          if (document.createEvent) {
-            var event = document.createEvent('MouseEvents');
-            event.initEvent('click', true, true);
-            pomRules.dispatchEvent(event);
-          } else {
-            pomRules.click();
-          }
-        }
-        
-        function createUploadWindowMSExplorer() {
-          $('#upload_rules').click();
-          var file = $('#upload_rules').prop('files')[0];
-          validateJSONAndUpload(file, true);
-        }
-
-        // HTML5 Download File window handling
-        createRulesUploadWindow();
       });
 
-      //Upload list of events json data
+       //Upload list of events json data
       $(".container").on("click", "button.upload_events", function(event) {
         event.stopPropagation();
         event.preventDefault();
+        var isRules = false;
+        replaceAppendModal(isRules);
+      });
 
-        function createUploadWindow() {
-          if (document.createEvent) {
-            var event = document.createEvent('MouseEvents');
-            event.initEvent('click', true, true);
-            pomEvents.dispatchEvent(event);
-          } else {
-            pomEvents.click();
-          }
-        }
+      function replaceAppendModal(isRules){
+        $('#AppendReplaceModal').modal('show');
 
-        function createUploadWindowMSExplorer() {
-          $('#upload_events').click();
-          var file = $('#upload_events').prop('files')[0];
-          validateJSONAndUpload(file, false);
-        }
+        document.getElementById('replaceButton').onclick = function(){
+            $('#AppendReplaceModal').modal('hide');
+            isReplacing = true;
+            if(isRules){
+                createRulesUploadWindow();
+            }else{
+                createUploadWindow();
+            }
+        };
 
+        document.getElementById('appendButton').onclick = function(){
+            $('#AppendReplaceModal').modal('hide');
+            isReplacing = false;
+            if(isRules){
+                createRulesUploadWindow();
+            }else{
+                createUploadWindow();
+            }
+        };
+      }
 
-        // HTML5 Download File window handling
-        createUploadWindow();
-      });
+     function createRulesUploadWindow() {
+        if (document.createEvent) {
+          var event = document.createEvent('MouseEvents');
+          event.initEvent('click', true, true);
+          pomRules.dispatchEvent(event);
+        } else {
+          pomRules.click();
+        }
+      }
+
+      function createUploadWindow() {
+        if (document.createEvent) {
+          var event = document.createEvent('MouseEvents');
+          event.initEvent('click', true, true);
+          pomEvents.dispatchEvent(event);
+        } else {
+          pomEvents.click();
+        }
+      }
 
       // Download the modified rule
       $('.container').on('click', 'button.download_rules', function() {

src/main/resources/templates/testRules.html

@@ -20,8 +20,8 @@ <h1 id="test_rules_header">Test Rules</h1>
             <div class="p-1 col-lg-6 col-md-6 col-12 border border-right border-success" id="testRulesDOMObject">
                 <div class="d-flex flex-wrap">
 	                <div class="col-11">
-	                   <button class="btn btn-primary upload_rules rule-button mr-1 mt-1 d-inline-block">
-                           Upload Rules
+	                   <button class="btn btn-primary upload_rules mr-1 mt-1 d-inline-block">
+                           Load Rules from file
                            <i class="fa fa-fw  fa-upload"></i>
                        </button>
                        <input class="hide" type='file' id='uploadRulesFile' name='file'/>
@@ -65,8 +65,8 @@ <h6>
             <div class="p-1 col-lg-6 col-md-6 col-12 border border-right border-success" id="testEventsDOMObject">
                 <div class="d-flex flex-wrap">
                     <div class="col-11">
-                       <button class="btn btn-primary upload_events rule-button mr-1 mt-1 d-inline-block">
-                           Upload Events
+                       <button class="btn btn-primary upload_events mr-1 mt-1 d-inline-block">
+                           Load Events from file
                            <i class="fa fa-fw  fa-upload"></i>
                        </button>
                        <input class="hide" type='file' id='uploadEventsFile' name='file'/>
@@ -128,6 +128,19 @@ <h6>
             </div>
         </div>
     </div>
+    <div id="AppendReplaceModal" class="modal fade" role="dialog">
+	  <div class="modal-dialog" role="document">
+	    <div class="modal-content">
+	      <div class="modal-header justify-content-center">
+	        <h5 class="modal-title">Do you want to replace or append?</h5>
+	      </div>
+	      <div class="modal-footer justify-content-center">
+            <button id="replaceButton" type="button" class="btn btn-primary">Replace</button>
+            <button id="appendButton" type="button" class="btn btn-info">Append</button>
+	      </div>
+	    </div>
+	  </div>
+	</div>
     <div id="aggregatedObjectModal" class="modal fade" role="dialog">
 	  <div class="modal-dialog modal-width-aggregated" role="document">
 	    <div class="modal-content">