Skip to content

Commit c006ff8

Browse files
Gourav DwivediGourav Dwivedi
Gourav Dwivedi
authored and
Gourav Dwivedi
committed
redesign response text area
1 parent cac8955 commit c006ff8

File tree

6 files changed

+85
-38
lines changed

6 files changed

+85
-38
lines changed

‎Samples/AspDotCore/WebApp/WebApp/Hubs/SampleHub.cs‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
using Microsoft.AspNetCore.Authorization;
2+
using Microsoft.AspNetCore.Http.Connections.Features;
23
using Microsoft.AspNetCore.SignalR;
34
using System;
45
using System.Threading.Tasks;
@@ -15,25 +16,29 @@ public override Task OnConnectedAsync()
1516

1617
public async Task SendMessage(string message)
1718
{
19+
var transportType = Context.Features.Get<IHttpTransportFeature>().TransportType.ToString();
1820
var connectionId = Context.ConnectionId;
19-
await Clients.Client(connectionId).SendAsync("Response", $"Data Received from SendMessage method: {message}");
21+
await Clients.Client(connectionId).SendAsync("Response", $"TransportType-{transportType} :: Data Received from SendMessage method: {message}");
2022
}
2123

2224
public async Task SendMessageWithId(string message, int id)
2325
{
26+
var transportType = Context.Features.Get<IHttpTransportFeature>().TransportType.ToString();
2427
var connectionId = Context.ConnectionId;
25-
await Clients.Client(connectionId).SendAsync("Response", $"Data Received from TestCall method: {message}- {id}");
28+
await Clients.Client(connectionId).SendAsync("Response", $"TransportType-{transportType} :: Data Received from SendMessageWithId method: {message}- {id}");
2629
}
2730

2831
public async Task NotifyAllClient(string message)
2932
{
30-
await Clients.All.SendAsync("Response", $"Data Received: {message}");
33+
var transportType = Context.Features.Get<IHttpTransportFeature>().TransportType.ToString();
34+
await Clients.All.SendAsync("Response", $"TransportType-{transportType} :: Data Received: {message}");
3135
}
3236

3337
public async Task ComplexData(User user)
3438
{
39+
var transportType = Context.Features.Get<IHttpTransportFeature>().TransportType.ToString();
3540
var connectionId = Context.ConnectionId;
36-
await Clients.Client(connectionId).SendAsync("Response", new { Msg = "Complex Data Received", User = user });
41+
await Clients.Client(connectionId).SendAsync("Response", new { Msg = $"TransportType-{transportType} :: Complex Data Received", User = user });
3742
}
3843

3944
public override Task OnDisconnectedAsync(Exception exception)
@@ -45,8 +50,9 @@ public override Task OnDisconnectedAsync(Exception exception)
4550
[Authorize]
4651
public async Task SendMessageWithAuth(string message)
4752
{
53+
var transportType = Context.Features.Get<IHttpTransportFeature>().TransportType.ToString();
4854
var connectionId = Context.ConnectionId;
49-
await Clients.Client(connectionId).SendAsync("Response", $"Data Received from SendMessageWithAuth method: {message}");
55+
await Clients.Client(connectionId).SendAsync("Response", $"TransportType-{transportType} :: Data Received from SendMessageWithAuth method: {message}");
5056
}
5157
}
5258
}

‎src/css/main.css‎

Lines changed: 50 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
1+
/* @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"); */
22

33
h1 {
44
color: rgb(51, 153, 97);
@@ -104,10 +104,6 @@ ul.nav .nav-item a:hover {
104104
}
105105
ul.nav .nav-link.active:hover {
106106
border-color: white !important;
107-
}
108-
109-
.logger-container {
110-
padding: 5px;
111107
}
112108

113109
.bg-gray {
@@ -118,8 +114,40 @@ ul.nav .nav-link.active:hover {
118114
padding: 10px;
119115
}
120116

121-
#app-logs {
117+
#loggerView {
122118
word-wrap: break-word;/*Used because long log messages going out of div.*/
119+
border-radius: 5px 5px 5px 5px;
120+
box-sizing: border-box;
121+
border-style: solid;
122+
border-top-width: 3px;
123+
border-right-width: 3px;
124+
border-bottom-width: .5px;
125+
border-left-width: .5px;
126+
border-color: rgba(63, 81, 181, 1);
127+
border-style: solid;
128+
background-color: rgb(255,255,255);
129+
130+
}
131+
132+
.logger-header {
133+
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
134+
text-transform: uppercase;
135+
font-size: 20px;
136+
color: rgba(0,0,0,.54);
137+
font-weight: 500;
138+
margin-bottom: 20px;
139+
}
140+
141+
#logger-container {
142+
padding: 10px;
143+
margin-top: 50px;
144+
}
145+
146+
#app-logs {
147+
overflow-x: hidden;
148+
overflow-y: auto;
149+
min-height: 50px;
150+
max-height: 400px;
123151
}
124152

125153
/* Align span text in center of the div */
@@ -144,6 +172,22 @@ ul.nav .nav-link.active:hover {
144172
padding: 0.3em;
145173
}
146174

175+
#inputResponseData {
176+
height: 150px;
177+
overflow-x: hidden;
178+
overflow-y: auto;
179+
text-align: left;
180+
padding: 5px;
181+
border-radius: 5px 5px 5px 5px;
182+
box-sizing: border-box;
183+
border-style: solid;
184+
border-top-width: 3px;
185+
border-right-width: 3px;
186+
border-bottom-width: .5px;
187+
border-left-width: .5px;
188+
border-color: rgba(63, 81, 181, 1);
189+
}
190+
147191
/* .mdl-layout__header-row {
148192
padding: 0px 0px 0px 80px;
149193
margin: 0 0 0 0;

‎src/js/components/app.component.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ class AppComponent extends HTMLElement {
3030
3131
<div class="tab-content container clearfix tabcontent">
3232
<div id="appview" class="tab-pane active">
33-
<h4>Basic</h4>
33+
<h4 style="display: none">Basic</h4> <br/><br/>
3434
<sr-form></sr-form>
3535
</div>
3636
</div>

‎src/js/components/dialogbox/custompopup.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,6 @@ import './custompopupStyle.css';
2222
document.getElementById('dialogboxfoot').innerHTML = '<button class="pure-material-button-contained active" id="custom-popup-ok-btn">OK</button>';
2323
document.getElementById('custom-popup-ok-btn')
2424
.addEventListener('click', function() {
25-
console.log('event added');
26-
2725
document.getElementById('dialogbox').style.display = "none";
2826
document.getElementById('dialogoverlay').style.display = "none";
2927
})

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

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -122,31 +122,31 @@ class SrFormComponent extends HTMLElement {
122122
<div id="method-arguments" class="form-group method-arguments"></div>
123123
</div>
124124
</div>
125-
<div class="form-group row onconnect scale-in-ver-top">
126-
<label for="inputResponseData" class="col-sm-2 col-form-label">Response Payload</label>
127-
<div class="col-sm-10 offset-sm-2">
128-
<textarea rows="2" class="form-control" id="inputResponseData" placeholder="Response Payload"></textarea>
129-
</div>
130-
</div>
131125
<div class="form-group row onconnect scale-in-ver-top">
132126
<div class="col-sm-4 offset-sm-2 btn-group">
133127
<input type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary btn-send-payload" id="btn-send-payload" value="Send"/>
134128
<input type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary disconnectbtn" id="btn-disconnectbtn" value="Disconnect" />
135129
</div>
136130
</div>
131+
<div class="form-group row onconnect scale-in-ver-top">
132+
<label for="inputResponseData" class="col-sm-2 col-form-label">Response Payload</label>
133+
<div class="col-sm-10 offset-sm-2">
134+
<div rows="2" id="inputResponseData"></div>
135+
</div>
136+
</div>
137137
<div class="form-group row logger-container scale-in-ver-top" style="display:none" id="logger-container">
138-
<fieldset class="bg-gray" id="loggerView">
138+
<div class="bg-gray" id="loggerView">
139139
<div class="text-right">
140140
<input type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary " id="btn-clearlogs" value="Clear" />
141141
<br/>
142142
</div>
143-
<legend class="col-form-label">
144-
<h4>Logs</h4>
145-
</legend>
146-
<div class="container" id="app-logs">
147-
148-
<div>
149-
</fieldset>
143+
<div class="col-form-label logger-header">
144+
Logs
145+
</div>
146+
<div class="container" id="app-logs">
147+
148+
<div>
149+
</div>
150150
</div>
151151
</fieldset>
152152
</form>

‎src/js/components/srform.js‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,9 @@ export function Init() {
8080

8181
AppCommon.AppEvents.on('Logger', (message) => {
8282
var msg = "[" + new Date().toISOString() + "] :: " + message;
83-
var temp = document.getElementById("app-logs").innerHTML;
84-
document.getElementById("app-logs").innerHTML = '<p>' + msg + '</p>' + temp;
83+
var loggerElement = document.getElementById("app-logs");
84+
var oldLogs = loggerElement.innerHTML;
85+
document.getElementById("app-logs").innerHTML = '<p>' + msg + '</p>' + oldLogs;
8586
});
8687

8788
AppCommon.AppEvents.on('ConnectionFailed', (message) => {
@@ -373,15 +374,12 @@ export function OnConnected() {
373374
}
374375

375376
export function HandleResponse(data) {
376-
document.querySelector("#inputResponseData").value += JSON.stringify(data) + '\n';
377-
var isNotificationMute = window.localStorage.getItem('muteNotification');
377+
var responseDiv = document.querySelector("#inputResponseData");
378+
responseDiv.innerText += JSON.stringify(data) + '\n';
379+
responseDiv.scrollTop = responseDiv.scrollHeight;
378380

379-
// if((!!isNotificationMute) === false) {
380-
// window.localStorage.setItem('muteNotification', 1);
381-
// isNotificationMute = 1
382-
// }
381+
var isNotificationMute = window.localStorage.getItem('muteNotification');
383382

384-
debugger;
385383
if(parseInt(isNotificationMute) === 1) {
386384
let sound = new Audio(notificationSound);
387385
sound.play();
@@ -431,7 +429,8 @@ export function Reset() {
431429
addArgBtnClass[i].removeEventListener('click', AddArgumentsCallBack, false);
432430
}
433431
document.getElementById('method-arguments').innerHTML = "";
434-
inputResponseData.value = "";
432+
var responseDiv = document.querySelector("#inputResponseData");
433+
responseDiv.innerText = "";
435434
}
436435

437436
export function Disconnect() {

0 commit comments

Comments
 (0)