- Added clear log buttong

- Latest error logs come on the top

Author: Gourav Dwivedi

src/css/main.css

@@ -111,3 +111,6 @@ ul.nav .nav-link.active:hover {
   padding: 10px;
 }
 
+#app-logs {
+  word-wrap: break-word;/*Used because long log messages going out of div.*/
+}

src/js/components/srform.component.js

@@ -116,10 +116,14 @@ class SrFormComponent extends HTMLElement {
                                             <input type="button" class="btn btn-primary disconnectbtn" id="btn-disconnectbtn" value="Disconnect" />
                                         </div>
                                     </div>
-                                    <div class="form-group row logger-container" style="display:none" id="logger-container">
+                                    <div class="form-group row logger-container" style="display:none" id="logger-container">                                    
                                         <fieldset class="bg-gray" id="loggerView">
+                                            <div class="text-right"> 
+                                                <input type="button" class="btn btn-primary btn-sm" id="btn-clearlogs" value="Clear" />
+                                                <br/>
+                                            </div>
                                             <legend class="col-form-label">
-                                            <h3>Logs</h3>
+                                            <h4>Logs</h4>
                                             </legend>
                                         <div class="container" id="app-logs">
                                             

src/js/components/srform.js

@@ -41,9 +41,16 @@ export function Init() {
                 }
             });
 
+    document.getElementById('btn-clearlogs')
+            .addEventListener('click', (event) => {
+                document.getElementById("app-logs").innerHTML = "";
+            },
+            false);
+
     AppCommon.AppEvents.on('Logger', (message) => {
         var msg = "[" + new Date().toISOString() + "] :: " + message;
-        document.getElementById("app-logs").innerHTML += '<p>' + msg + '</p>'; 
+        var temp = document.getElementById("app-logs").innerHTML;
+        document.getElementById("app-logs").innerHTML = '<p>' + msg + '</p>' + temp;
     } );
 
     AppCommon.AppEvents.on('ConnectionFailed', (message) => {
@@ -313,7 +320,7 @@ export function OnConnected() {
 }
 
 export function HandleResponse(data) {
-    document.querySelector("#inputResponseData").value = JSON.stringify(data) + '\n' + document.querySelector("#inputResponseData").value; 
+    document.querySelector("#inputResponseData").value += JSON.stringify(data) + '\n'; 
 }
 
 export function SetConnectionProtocol() {