Skip to content

Commit 36edd81

Browse files
Gourav DwivediGourav Dwivedi
Gourav Dwivedi
authored and
Gourav Dwivedi
committed
Dynamic adding textbox functionality
1 parent 7e3098c commit 36edd81

File tree

4 files changed

+93
-21
lines changed

4 files changed

+93
-21
lines changed

‎src/css/main.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,10 @@ li:hover {
6161
/* background-color: #428bca; */
6262
padding : 5px 15px;
6363
}
64+
65+
.method-arguments {
66+
padding-top: 10px;
67+
}
6468

6569

6670

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

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,11 @@ class AppComponent extends HTMLElement {
2222
<div id="tab-header" class="container">
2323
<div class="panel panel-primary">
2424
<ul class="nav nav-tabs justify-content-end nav-justified" id="tabheader">
25-
<li class="nav-item active">
26-
<a class="nav-link active" data-toggle="tab" href="#basicview">Basic</a>
25+
<li class="nav-item">
26+
<a class="nav-link active" data-tab-type="basic" data-toggle="tab" href="#basicview">Basic</a>
2727
</li>
2828
<li class="nav-item">
29-
<a class="nav-link" data-toggle="tab" href="#advanceview">Advance</a>
29+
<a class="nav-link" data-tab-type="advance" data-toggle="tab" href="#basicview">Advance</a>
3030
</li>
3131
</ul>
3232
@@ -36,10 +36,7 @@ class AppComponent extends HTMLElement {
3636
<sr-form></sr-form>
3737
</div>
3838
39-
<div id="advanceview" class="tab-pane fade">
40-
<h2>Advance</h2>
41-
<sr-form type="advance"></sr-form>
42-
</div>
39+
4340
</div>
4441
</div>
4542
</div>

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

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ class SrFormComponent extends HTMLElement {
4545
</div>
4646
</div>
4747
48-
<div class="form-group row onconnect" ${divStyle}>
48+
<div class="form-group row onconnect" ${divStyle} id="protocol-support">
4949
<label class="col-sm-2 col-form-label">Protocol Supported</label>
5050
<div class="col-sm-10 offset-sm-2">
5151
<div class="form-check form-check-inline">
@@ -71,20 +71,22 @@ class SrFormComponent extends HTMLElement {
7171
7272
<div class="form-group row onconnect">
7373
<label for="inputServerMethod" class="col-sm-2 col-form-label">Server Method</label>
74-
<div class="col-sm-10">
74+
<div class="col-sm-10 offset-sm-2">
7575
<input type="text" class="form-control" id="inputServerMethod" placeholder="Server Method Name">
7676
</div>
7777
</div>
7878
<div class="form-group row onconnect">
79-
<label for="inputRequestData" class="col-sm-2 col-form-label">Request Payload</label>
80-
<div class="col-sm-10">
81-
<textarea rows="3" class="form-control" id="inputRequestData" placeholder="Request Payload"></textarea>
82-
</div>
79+
<label for="inputRequestData" class="col-sm-2 col-form-label">Request Payload</label>
80+
<div class="col-sm-10 offset-sm-2">
81+
82+
<input type="button" value="Add Argument" id="inputRequestData" class="btn-primary btn-xs btn-add-argument" />
83+
<div id="method-arguments" class="method-arguments"></div>
84+
</div>
8385
</div>
8486
<div class="form-group row onconnect">
8587
<label for="inputResponseData" class="col-sm-2 col-form-label">Response Payload</label>
86-
<div class="col-sm-10">
87-
<textarea rows="3" class="form-control" id="inputResponseData" placeholder="Response Payload"></textarea>
88+
<div class="col-sm-10 offset-sm-2">
89+
<textarea rows="2" class="form-control" id="inputResponseData" placeholder="Response Payload"></textarea>
8890
</div>
8991
</div>
9092
<div class="form-group row onconnect">

‎src/js/components/srform.js‎

Lines changed: 75 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as signalR from "@aspnet/signalr";
22

33
var connection = null;
4+
var isConnected = false;
45
export function Init() {
56
//Connect Button Events
67
var connectBtnClass = document.getElementsByClassName('connectbtn');
@@ -9,7 +10,7 @@ export function Init() {
910
function() {
1011
console.log('btn connect');
1112
OnConnect();
12-
},
13+
},
1314
false);
1415
}
1516

@@ -35,6 +36,59 @@ export function Init() {
3536
}
3637

3738
NotConnected();
39+
40+
Test();
41+
42+
}
43+
44+
export function Test() {
45+
46+
var navLinkClass = document.getElementsByClassName('nav-link');
47+
for (var i = 0; i < navLinkClass.length; i++) {
48+
navLinkClass[i].addEventListener('click',
49+
function() {
50+
//debugger;
51+
console.log(this.getAttribute('data-tab-type'));
52+
OnTabChange(this.getAttribute('data-tab-type'));
53+
},
54+
false);
55+
}
56+
}
57+
58+
export function OnTabChange(tabName) {
59+
if(tabName == 'basic') {
60+
document.getElementById('protocol-support').style = 'display:none';
61+
62+
}
63+
else {
64+
if(isConnected) {
65+
document.getElementById('protocol-support').style = 'display:block';
66+
}
67+
}
68+
}
69+
70+
export function AddArguments() {
71+
72+
//Add Arguments Button Events
73+
var addArgBtnClass = document.getElementsByClassName('btn-add-argument');
74+
for (var i = 0; i < addArgBtnClass.length; i++) {
75+
addArgBtnClass[i].addEventListener('click',
76+
function() {
77+
78+
var parentDiv = document.getElementsByClassName('method-arguments');
79+
80+
for (var i = 0; i < parentDiv.length; i++) {
81+
var inputTxtElement = document.createElement('textarea');
82+
inputTxtElement.setAttribute("row", "1");
83+
inputTxtElement.setAttribute("value", "");
84+
inputTxtElement.setAttribute("class", "form-control req-arg");
85+
inputTxtElement.setAttribute("placeholder", "Request Payload");
86+
parentDiv[i].appendChild(inputTxtElement);
87+
parentDiv[i].append(document.createElement('br'))
88+
}
89+
},
90+
false);
91+
}
3892
}
3993

4094
export function NotConnected() {
@@ -77,8 +131,8 @@ export function OnConnect() {
77131
var url = document.getElementById("inputUrl").value;
78132
connectToServer(url);
79133

80-
81134
console.log("OnConnect");
135+
isConnected = true;
82136
var onConnectClass = document.getElementsByClassName('onconnect');
83137
for (var i = 0; i < onConnectClass.length; i++) {
84138
onConnectClass[i].style.display = "block";
@@ -91,6 +145,8 @@ export function OnConnect() {
91145
connection.on("ReceiveData", function(data) {
92146
document.querySelector("#inputResponseData").value += JSON.stringify(data) + '\n';
93147
});
148+
149+
AddArguments();
94150
}
95151

96152
export function DisableElementByClassName(className) {
@@ -111,6 +167,7 @@ export function EnableElementByClassName(className) {
111167

112168
export function OnDisConnect() {
113169
console.log("OnDisConnect");
170+
isConnected = false;
114171
Disconnect();
115172
var onDisConnectClass = document.getElementsByClassName('disconnectbtn');
116173
var addEventOnDisconnect = function() {
@@ -138,12 +195,24 @@ export function Disconnect() {
138195

139196
export function SendPayload() {
140197

141-
var methodName = document.getElementById("inputServerMethod").value
198+
var methodName = document.getElementById("inputServerMethod").value;
142199
var c = new Array();
143-
var data = JSON.parse(document.getElementById("inputRequestData").value);
144-
c.push(data);
200+
//var data = JSON.parse(document.getElementById("inputRequestData").value);
201+
var argsTextAreaClass = document.getElementsByClassName('req-arg');
202+
debugger;
203+
for (var i = 0; i < argsTextAreaClass.length; i++) {
204+
205+
if(argsTextAreaClass[i].value !== "") {
206+
207+
//Star from Here
208+
//Support different type of data format
209+
//c.push(JSON.parse(argsTextAreaClass[i].value));
210+
c.push(argsTextAreaClass[i].value);
211+
}
212+
}
213+
145214

146-
connection.invoke(methodName, data)
215+
connection.invoke(methodName, ...c)
147216
.catch(function (err) {
148217
return console.log(err);
149218
});

0 commit comments

Comments
 (0)