Send data to the server functionality added

Gourav Dwivedi · Gourav Dwivedi · commit 7e3098ce72a3 · 2019-08-21T20:59:37.000+05:30
diff --git a/src/Index.html b/src/Index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title >Signal R JavaScript Client</title>
+    <link rel="icon" href="data:,">
 </head>
 <body>
     
diff --git a/src/js/components/srform.component.js b/src/js/components/srform.component.js
@@ -36,7 +36,7 @@ class SrFormComponent extends HTMLElement {
                                     <div class="form-group row">
                                         <label for="inputUrl" class="col-sm-2 col-form-label">Service Endpoint</label>
                                         <div class="col-sm-10">
-                                            <input type="text" class="form-control" id="inputUrl" placeholder="Url" value="http://localhost:53128/connect/app">
+                                            <input type="text" class="form-control inputUrl" id="inputUrl" placeholder="Url" value="https://localhost:5001/connect/app">
                                         </div>
                                     </div>
                                     <div class="form-group row">
@@ -89,8 +89,8 @@ class SrFormComponent extends HTMLElement {
                                     </div>
                                     <div class="form-group row onconnect">
                                         <div class="col-10 col-sm-5 col-md-5">
-                                            <input type="button" class="btn btn-primary" value="Send"/>
-                                            <input type="button" class="btn btn-primary disconnectbtn" id="btn-connect" value="Disconnect" />
+                                            <input type="button" class="btn btn-primary btn-send-payload" value="Send"/>
+                                            <input type="button" class="btn btn-primary disconnectbtn" id="btn-disconnectbtn" value="Disconnect" />
                                         </div>
                                     </div>
                                 </fieldset>
diff --git a/src/js/components/srform.js b/src/js/components/srform.js
@@ -24,6 +24,16 @@ export  function Init() {
         false);
     }
 
+        //Send Payload Button Events
+        var sendBtnClass = document.getElementsByClassName('btn-send-payload');
+        for (var i = 0; i < disconnectBtnClass.length; i++) {
+            sendBtnClass[i].addEventListener('click', 
+                function() {
+                    SendPayload();
+            }, 
+            false);
+        }
+
     NotConnected();
 }
 
@@ -64,11 +74,8 @@ export function connectToServer(url) {
 }
 
 export function OnConnect() {
-
-    //Try to setup connection
-    //work from here
-    var url = document.getElementById()
-    connectToServer();
+    var url = document.getElementById("inputUrl").value;
+    connectToServer(url);
 
 
     console.log("OnConnect");
@@ -79,6 +86,11 @@ export function OnConnect() {
 
     //Hide Connect Button
     DisableElementByClassName('connectbtn')
+
+    //Receive Data
+    connection.on("ReceiveData", function(data)  {
+        document.querySelector("#inputResponseData").value +=  JSON.stringify(data) + '\n';
+    });
 }
 
 export function DisableElementByClassName(className) {
@@ -99,6 +111,7 @@ export function EnableElementByClassName(className) {
 
 export function OnDisConnect() {
     console.log("OnDisConnect");
+    Disconnect();
     var onDisConnectClass = document.getElementsByClassName('disconnectbtn');
     var addEventOnDisconnect = function() {
         console.log('btn disconnect');
@@ -110,4 +123,28 @@ export function OnDisConnect() {
 
     EnableElementByClassName('connectbtn');
     NotConnected();
+}
+
+export function Disconnect() {
+    connection.stop()
+                .then(function () {
+                    console.log('Disconnected');
+                    //document.querySelector("#txt-output-area").value +=  "Disconnected..." + '\n'
+                })
+                .catch(function (err) {
+                    return console.error(err.toString());
+                });
+}
+
+export function SendPayload() {
+
+    var methodName = document.getElementById("inputServerMethod").value
+    var c = new Array();
+    var data = JSON.parse(document.getElementById("inputRequestData").value);
+    c.push(data);
+
+    connection.invoke(methodName, data)
+            .catch(function (err) {
+                return console.log(err);
+            });
 }
