Skip to content

Commit 8d04984

Browse files
Gourav DwivediGourav Dwivedi
Gourav Dwivedi
authored and
Gourav Dwivedi
committed
UI bug fixes
1 parent 65391c5 commit 8d04984

File tree

7 files changed

+237
-98
lines changed

7 files changed

+237
-98
lines changed

‎Samples/AspDotCore/WebApp/WebApp/Controllers/HomeController.cs‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
using Microsoft.AspNetCore.Mvc;
2-
using Microsoft.AspNetCore.SignalR;
32
using System.Diagnostics;
4-
using System.Threading.Tasks;
5-
using WebApp.Hubs;
63
using WebApp.Models;
74

85
namespace WebApp.Controllers

‎Samples/AspDotCore/WebApp/WebApp/Startup.cs‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,10 @@ public void Configure(IApplicationBuilder app, IHostingEnvironment env)
156156
app.UseAuthentication();
157157

158158
app.UseSignalR(option => {
159-
option.MapHub<SampleHub>(new PathString("/Test/Hub"));
159+
option.MapHub<SampleHub>(new PathString("/Test/Hub"), options =>
160+
{
161+
//options.Transports = Microsoft.AspNetCore.Http.Connections.HttpTransportType.ServerSentEvents;
162+
});
160163
});
161164

162165
//app.UseHttpsRedirection();

‎src/css/main.css‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -77,17 +77,13 @@ li:hover {
7777
.method-arguments {
7878
padding-top: 0px;
7979
}
80-
81-
.args-container {
82-
padding-top: 10px;
83-
}
8480

8581
.hr.div-splitter {
8682
height: 10px;
8783
border: 0;
8884
box-shadow: 0 10px 10px -10px #8c8b8b inset;
8985
}
90-
hr.style13 {
86+
hr.horizontal-line {
9187
height: 10px;
9288
border: 0;
9389
box-shadow: 0 10px 10px -10px #8c8b8b inset;
@@ -211,6 +207,26 @@ ul.nav .nav-link.active:hover {
211207
font-weight: 500;
212208
}
213209

210+
.skip-negotiation-desc {
211+
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
212+
font-size: 11px;
213+
color: rgba(0,0,0,.54);
214+
font-weight: 500;
215+
}
216+
217+
.args-container {
218+
margin-top: 10px;
219+
padding-top: 10px;
220+
border-radius: 5px 5px 5px 5px;
221+
box-sizing: border-box;
222+
border-style: solid;
223+
border-top-width: 1.5px;
224+
border-right-width: 1.5px;
225+
border-bottom-width: .5px;
226+
border-left-width: .5px;
227+
border-color: rgba(63, 81, 181, 1);
228+
}
229+
214230
/* .mdl-layout__header-row {
215231
padding: 0px 0px 0px 80px;
216232
margin: 0 0 0 0;

‎src/js/components/logic/app.logic.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,20 +22,20 @@ class AppLogic {
2222
sr.Init(options);
2323
}
2424

25-
OnConnect() {
26-
sr.OnConnect();
25+
OnConnect(onSuccess, onError) {
26+
sr.OnConnect(onSuccess, onError);
2727
}
2828

29-
OnSend(options) {
30-
sr.OnSend(options);
29+
OnSend(options, beforeInvoke, onError) {
30+
sr.OnSend(options, beforeInvoke, onError);
3131
}
3232

3333
OnReceive(callback) {
3434
sr.OnReceive(callback);
3535
}
3636

37-
OnDisConnect() {
38-
sr.OnDisConnect();
37+
OnDisconnect(onSuccess, onError) {
38+
sr.OnDisconnect(onSuccess, onError);
3939
}
4040

4141
EnableAuth() {

‎src/js/components/logic/lib/app.signalr.js‎

Lines changed: 34 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,33 @@ class SignalRApp {
1111

1212
Init(options) {
1313

14+
var confguration = {};
1415
if(options.isTokenRequired === true) {
15-
options.accessTokenFactory = () => options.getToken();
16+
// options.skipNegotiation = true;
17+
confguration.accessTokenFactory = () => options.getToken();
1618
}
17-
19+
20+
switch(options.transportType) {
21+
case "ws":
22+
confguration.transport = SignalR.HttpTransportType.WebSockets;
23+
break;
24+
case "lp":
25+
confguration.transport = SignalR.HttpTransportType.LongPolling;
26+
break;
27+
case "sse":
28+
confguration.transport = SignalR.HttpTransportType.ServerSentEvents;
29+
break;
30+
default:
31+
confguration.transport = SignalR.HttpTransportType.WebSockets;
32+
}
33+
34+
//confguration.logMessageContent = true;
35+
if(!!options.skipNegotiation) {
36+
confguration.skipNegotiation = options.skipNegotiation;
37+
}
38+
1839
this.connection = new SignalR.HubConnectionBuilder()
19-
.withUrl(options.url, options)
40+
.withUrl(options.url, confguration)
2041
.configureLogging(SignalR.LogLevel.Information)
2142
.withAutomaticReconnect([0, 3000, 5000, 10000, 15000, 30000])
2243
.build();
@@ -32,69 +53,49 @@ class SignalRApp {
3253
}
3354

3455
self.connection.onreconnecting((error) => {
35-
// disableUi(true);
36-
// const li = document.createElement("li");
37-
// li.textContent = `Connection lost due to error "${error}". Reconnecting.`;
38-
// document.getElementById("messagesList").appendChild(li);
3956
AppEvents.emit('Logger', `Connection lost due to error "${error}". Reconnecting.`);
4057
console.log('On Reconnecting...');
4158
});
4259

4360
self.connection.onreconnected((connectionId) => {
44-
// disableUi(false);
45-
// const li = document.createElement("li");
46-
// li.textContent = `Connection reestablished. Connected.`;
47-
// document.getElementById("messagesList").appendChild(li);
4861
AppEvents.emit('Logger', `Connection reestablished. Connected`);
4962
console.log('On Reconnected...');
5063
});
51-
52-
AppEvents.emit('Init', options);
53-
AppEvents.emit('Logger', "Init");
5464
}
5565

5666

57-
OnConnect() {
67+
OnConnect(onSuccess, onError) {
5868
var self = this;
5969
self.connection.start()
60-
.then(function () {
61-
AppEvents.emit('OnConnected', { url: self.url });
70+
.then(function (data) {
71+
onSuccess({ url: self.url });
6272
})
6373
.catch(function (err) {
64-
AppEvents.emit('ConnectionFailed', err.toString());
65-
return console.error(err.toString());
74+
onError(err)
6675
});
6776
}
6877

69-
OnSend(options) {
78+
OnSend(options, beforeInvoke, onError) {
7079
var methodArguments = new Array();
7180
methodArguments = options.methodArguments;
7281

73-
AppEvents.emit('OnSend', options);
74-
AppEvents.emit('Logger', "Calling... " + options.methodName);
82+
beforeInvoke(options);
7583
this.connection.invoke(options.methodName, ...methodArguments)
7684
.catch(function (err) {
77-
AppEvents.emit('Logger', err.toString());
78-
return console.log(err);
85+
onError(err);
7986
});
8087
}
8188

8289
OnReceive(callback) {
83-
// this.connection.on("ReceiveData", function (data) {
84-
// callback(data);
85-
// });
8690
}
8791

88-
OnDisConnect() {
92+
OnDisconnect(onSuccess, onError) {
8993
this.connection.stop()
9094
.then(function () {
91-
console.log('Disconnected');
92-
AppEvents.emit('Logger', "Disconnected...");
93-
AppEvents.emit('OnDisconnected');
95+
onSuccess();
9496
})
9597
.catch(function (err) {
96-
AppEvents.emit('Logger', err.toString());
97-
return console.error(err.toString());
98+
onError(err);
9899
});
99100
}
100101

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

Lines changed: 68 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -81,39 +81,86 @@ class SrFormComponent extends HTMLElement {
8181
</div>
8282
<div class="col-sm-10">
8383
<div class="form-check form-check-inline">
84-
<!--<input type="checkbox" id="chk-ws" class="form-check-input protocol-support" value="ws" checked/>
85-
<label class="form-check-label" for="chk-ws">
86-
WebSocket
87-
</label>-->
88-
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="chk-ws">
89-
<input type="checkbox" id="chk-ws" class="mdl-checkbox__input protocol-support" value="ws" checked />
90-
<span class="mdl-checkbox__label chk-text">WebSocket</span>
84+
<!--
85+
<input type="checkbox" id="chk-ws" class="form-check-input protocol-support" value="ws" checked/>
86+
<label class="form-check-label" for="chk-ws">
87+
WebSocket
88+
</label>
89+
-->
90+
<!--
91+
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="chk-ws">
92+
<input type="checkbox" id="chk-ws" class="mdl-checkbox__input protocol-support" value="ws" checked />
93+
<span class="mdl-checkbox__label chk-text">WebSocket</span>
94+
</label>
95+
-->
96+
97+
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="chk-ws">
98+
<input type="radio" id="chk-ws" class="mdl-radio__button protocol-support" name="transportType" value="ws" checked>
99+
<span class="mdl-radio__label">WebSocket</span>
91100
</label>
92101
</div>
93102
<div class="form-check form-check-inline">
94-
<!--<input type="checkbox" id="chk-lp" class="form-check-input protocol-support" disabled checked value="lp" />
95-
<label class="form-check-label" for="chk-lp">
103+
<!--
104+
<input type="checkbox" id="chk-lp" class="form-check-input protocol-support" disabled checked value="lp" />
105+
<label class="form-check-label" for="chk-lp">
96106
Long Pooling
97-
</label>-->
107+
</label>
108+
-->
109+
<!--
98110
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="chk-lp">
99111
<input type="checkbox" id="chk-lp" class="mdl-checkbox__input protocol-support" disabled checked value="lp" />
100112
<span class="mdl-checkbox__label chk-text">Long Pooling</span>
101113
</label>
114+
-->
115+
116+
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="chk-lp">
117+
<input type="radio" id="chk-lp" class="mdl-radio__button protocol-support" name="transportType" value="lp">
118+
<span class="mdl-radio__label">Long Pooling</span>
119+
</label>
102120
</div>
103121
<div class="form-check form-check-inline">
104-
<!--<input type="checkbox" id="chk-sse" class="form-check-input protocol-support" checked value="sse" />
105-
<label class="form-check-label" for="chk-sse">
106-
Server Send Event
107-
</label>-->
122+
<!--
123+
<input type="checkbox" id="chk-sse" class="form-check-input protocol-support" value="sse" />
124+
<label class="form-check-label" for="chk-sse">
125+
Server Send Event
126+
</label>
127+
-->
128+
<!--
108129
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="chk-sse">
109130
<input type="checkbox" id="chk-sse" class="mdl-checkbox__input protocol-support" checked value="sse" />
110131
<span class="mdl-checkbox__label chk-text">Server Send Event</span>
111132
</label>
133+
-->
134+
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="chk-sse">
135+
<input type="radio" id="chk-sse" class="mdl-radio__button protocol-support" name="transportType" value="sse">
136+
<span class="mdl-radio__label">Server Send Event</span>
137+
</label>
112138
</div>
113139
</div>
114140
</div>
115141
</div>
116142
143+
<div class="form-group scale-in-ver-top" ${divStyle} id="content-negotiation">
144+
<div class="row">
145+
<div class="col-sm-2">
146+
<label class="col-form-label label-title">Skip Negotiation</label>
147+
</div>
148+
<div class="col-sm-10">
149+
<div class="form-check">
150+
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="chk-skip-negotiation">
151+
<input type="checkbox" id="chk-skip-negotiation" class="mdl-switch__input skip-negotiation">
152+
<span class="mdl-switch__label"></span>
153+
</label>
154+
<p class="skip-negotiation-desc">
155+
Skip negotiation only supported when the WebSockets transport is the
156+
only enabled transport. This setting can't be enabled
157+
when using the Azure SignalR Service.</p>
158+
</div>
159+
160+
</div>
161+
</div>
162+
</div>
163+
117164
<div class="form-group">
118165
<div class="row">
119166
<div class="col-sm-10 offset-sm-2">
@@ -139,15 +186,14 @@ class SrFormComponent extends HTMLElement {
139186
<div class="col-sm-2">
140187
<label for="inputRequestData" class="col-form-label label-title">Request Payload</label>
141188
</div>
142-
<div class="col-sm-2">
189+
<div class="col-sm-10">
143190
<input type="button" value="Add Argument" id="inputRequestData" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary btn-add-argument" />
144-
</div>
145-
146-
</div>
147-
<div class="row">
148-
<div class="col-sm-8 offset-sm-2">
149-
<div id="method-arguments" class="form-group method-arguments"></div>
150-
</div>
191+
<div>
192+
<div class="col-sm-10">
193+
<div id="method-arguments" class="form-group method-arguments"></div>
194+
</div>
195+
</div>
196+
</div>
151197
</div>
152198
</div>
153199
<div class="form-group row onconnect scale-in-ver-top">

0 commit comments

Comments
 (0)