Skip to content

Commit cbd447f

Browse files
Gourav DwivediGourav Dwivedi
Gourav Dwivedi
authored and
Gourav Dwivedi
committed
added srform.js file
1 parent 8d1cc15 commit cbd447f

File tree

6 files changed

+148
-22
lines changed

6 files changed

+148
-22
lines changed

‎package-lock.json‎

Lines changed: 11 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"homepage": "https://github.com/gouravdwivedi6590/SignalR-JS-Client#readme",
2121
"dependencies": {
2222
"@aspnet/signalr": "^1.1.4",
23+
"@webcomponents/webcomponentsjs": "^2.2.10",
2324
"bootstrap": "^4.3.1",
2425
"jquery": "^3.4.1",
2526
"popper.js": "^1.15.0"

‎src/Index.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,14 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7-
8-
<!-- <script src="./js/components/basicView.js"></script> -->
97
<title >Signal R JavaScript Client</title>
108
</head>
119
<body>
1210

13-
<h1>Signal R JavaScript Client</h1>
14-
<!-- <hello-component data-name="James"></hello-component> -->
1511
<div class="container">
12+
<h1>Signal R JavaScript Client</h1>
1613
<src-app></src-app>
1714
</div>
18-
1915
<script src="./main.js"></script>
2016
</body>
2117
</html>

‎src/js/components/srform.component.js‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import * as abcTest from './srform';
2+
13
class SrFormComponent extends HTMLElement {
24
constructor() {
35
super();
@@ -13,6 +15,8 @@ class SrFormComponent extends HTMLElement {
1315
connectedCallback() {
1416
console.log('connected!');
1517
this.render();
18+
abcTest.Init();
19+
1620
}
1721

1822
disconnectedCallback() {
@@ -32,16 +36,16 @@ class SrFormComponent extends HTMLElement {
3236
<div class="form-group row">
3337
<label for="inputUrl" class="col-sm-2 col-form-label">Service Endpoint</label>
3438
<div class="col-sm-10">
35-
<input type="text" class="form-control" id="inputUrl" placeholder="Url">
39+
<input type="text" class="form-control" id="inputUrl" placeholder="Url" value="http://localhost:53128/connect/app">
3640
</div>
3741
</div>
3842
<div class="form-group row">
3943
<div class="col-sm-10 offset-sm-2">
40-
<input type="button" class="btn btn-primary" id="btn-connect" value="Connect" />
44+
<input type="button" class="btn btn-primary connectbtn" id="btn-connect" value="Connect" />
4145
</div>
4246
</div>
4347
44-
<div class="form-group row" ${divStyle}>
48+
<div class="form-group row onconnect" ${divStyle}>
4549
<label class="col-sm-2 col-form-label">Protocol Supported</label>
4650
<div class="col-sm-10 offset-sm-2">
4751
<div class="form-check form-check-inline">
@@ -65,35 +69,38 @@ class SrFormComponent extends HTMLElement {
6569
</div>
6670
</div>
6771
68-
<div class="form-group row">
72+
<div class="form-group row onconnect">
6973
<label for="inputServerMethod" class="col-sm-2 col-form-label">Server Method</label>
7074
<div class="col-sm-10">
7175
<input type="text" class="form-control" id="inputServerMethod" placeholder="Server Method Name">
7276
</div>
7377
</div>
74-
<div class="form-group row">
78+
<div class="form-group row onconnect">
7579
<label for="inputRequestData" class="col-sm-2 col-form-label">Request Payload</label>
7680
<div class="col-sm-10">
7781
<textarea rows="3" class="form-control" id="inputRequestData" placeholder="Request Payload"></textarea>
7882
</div>
7983
</div>
80-
<div class="form-group row">
84+
<div class="form-group row onconnect">
8185
<label for="inputResponseData" class="col-sm-2 col-form-label">Response Payload</label>
8286
<div class="col-sm-10">
8387
<textarea rows="3" class="form-control" id="inputResponseData" placeholder="Response Payload"></textarea>
8488
</div>
8589
</div>
86-
<div class="form-group row">
87-
<div class="col-sm-10 offset-sm-2">
88-
<button type="button" class="btn btn-primary">Send</button>
90+
<div class="form-group row onconnect">
91+
<div class="col-10 col-sm-5 col-md-5">
92+
<input type="button" class="btn btn-primary" value="Send"/>
93+
<input type="button" class="btn btn-primary disconnectbtn" id="btn-connect" value="Disconnect" />
8994
</div>
9095
</div>
9196
</fieldset>
9297
</form>
9398
`;
99+
100+
94101
}
95102
}
96103

97104
if(!window.customElements.get("sr-form")) {
98-
window.customElements.define("sr-form", SrFormComponent);
99-
}
105+
window.customElements.define("sr-form", SrFormComponent);
106+
}

‎src/js/components/srform.js‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import * as signalR from "@aspnet/signalr";
2+
3+
var connection = null;
4+
export function Init() {
5+
//Connect Button Events
6+
var connectBtnClass = document.getElementsByClassName('connectbtn');
7+
for (var i = 0; i < connectBtnClass.length; i++) {
8+
connectBtnClass[i].addEventListener('click',
9+
function() {
10+
console.log('btn connect');
11+
OnConnect();
12+
},
13+
false);
14+
}
15+
16+
//Disconnect Button Events
17+
var disconnectBtnClass = document.getElementsByClassName('disconnectbtn');
18+
for (var i = 0; i < disconnectBtnClass.length; i++) {
19+
disconnectBtnClass[i].addEventListener('click',
20+
function() {
21+
console.log('btn connect');
22+
OnDisConnect();
23+
},
24+
false);
25+
}
26+
27+
NotConnected();
28+
}
29+
30+
export function NotConnected() {
31+
console.log("notConnected");
32+
var onConnectClass = document.getElementsByClassName('onconnect');
33+
var tests = function() {
34+
console.log('btn connect');
35+
};
36+
37+
for (var i = 0; i < onConnectClass.length; i++) {
38+
onConnectClass[i].style.display = "none";
39+
}
40+
}
41+
42+
export function buildConnection(url) {
43+
connection = new signalR.HubConnectionBuilder()
44+
.withUrl(url)
45+
.build();
46+
}
47+
48+
export function start() {
49+
50+
connection
51+
.start()
52+
.then(function () {
53+
console.log('Connected');
54+
//document.querySelector("#txt-output-area").value += "Connected..." + '\n'
55+
})
56+
.catch(function (err) {
57+
return console.error(err.toString());
58+
});
59+
}
60+
61+
export function connectToServer(url) {
62+
buildConnection(url);
63+
start();
64+
}
65+
66+
export function OnConnect() {
67+
68+
//Try to setup connection
69+
//work from here
70+
var url = document.getElementById()
71+
connectToServer();
72+
73+
74+
console.log("OnConnect");
75+
var onConnectClass = document.getElementsByClassName('onconnect');
76+
for (var i = 0; i < onConnectClass.length; i++) {
77+
onConnectClass[i].style.display = "block";
78+
}
79+
80+
//Hide Connect Button
81+
DisableElementByClassName('connectbtn')
82+
}
83+
84+
export function DisableElementByClassName(className) {
85+
var el = document.getElementsByClassName(className);
86+
87+
for (var i = 0; i < el.length; i++) {
88+
el[i].disabled = true;
89+
}
90+
}
91+
92+
export function EnableElementByClassName(className) {
93+
var el = document.getElementsByClassName(className);
94+
95+
for (var i = 0; i < el.length; i++) {
96+
el[i].disabled = false;
97+
}
98+
}
99+
100+
export function OnDisConnect() {
101+
console.log("OnDisConnect");
102+
var onDisConnectClass = document.getElementsByClassName('disconnectbtn');
103+
var addEventOnDisconnect = function() {
104+
console.log('btn disconnect');
105+
};
106+
107+
for (var i = 0; i < onDisConnectClass.length; i++) {
108+
onDisConnectClass[i].style.display = "block";
109+
}
110+
111+
EnableElementByClassName('connectbtn');
112+
NotConnected();
113+
}

‎src/js/main.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
1+
import '@webcomponents/webcomponentsjs/webcomponents-bundle';//WebComponent Pollyfill
12
import 'bootstrap/dist/css/bootstrap.css'
23
import 'bootstrap/dist/js/bootstrap.js'
34
import '../css/main.css';
45
import './components/srform.component';
56
import './components/app.component';
67

8+
79
console.log("Hello Webpack111");
810

11+
12+
913
// class HelloComponent extends HTMLElement {
1014
// static get observedAttributes() {
1115
// return ['data-name'];

0 commit comments

Comments
 (0)