-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
130 lines (106 loc) · 4.23 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
let addedParamsCount = 0;
//UTILITY FUNCTIONS
// 1 . Function to get DOM element from string
function getElementFromString(string) {
let div = document.createElement('div');
div.innerHTML = string;
return div.firstElementChild;
}
let radioJson = document.getElementById('radioJson');
let Jsontxt = document.getElementById('requestJsonBox');
let radioParams = document.getElementById('radioParams');
let paramsBox = document.getElementById('parametersBox');
// If user clicks JSON, show JSON textarea
radioJson.addEventListener('click', () => {
Jsontxt.style.display = 'block';
paramsBox.style.display = 'none';
})
// If user clicks Params, show params Bpx
radioParams.addEventListener('click', () => {
paramsBox.style.display = 'block';
Jsontxt.style.display = 'none';
})
// Add new Parameters
let addParams = document.getElementById('addParam');
addParams.addEventListener('click', () => {
let newParams = document.getElementById('params');
let str = `<div class="form-row my-2">
<div class="d-flex">
<label for="url" class="col-sm-2 col-form-label">Parameter ${addedParamsCount + 2}</label>
<div class="col-md-4">
<input type="text" class="form-control" id="parameterKey${addedParamsCount + 2}"
placeholder="Enter Parameter ${addedParamsCount + 2} Key">
</div>
<div class="col-md-4 mx-3">
<input type="text" class="form-control" id="parameterValue${addedParamsCount + 2}"
placeholder="Enter Parameter ${addedParamsCount + 2} Value">
</div>
<button class="btn btn-primary dltParam">-</button>
</div>
</div>`;
//convert element to DOM node
let paramElement = getElementFromString(str);
newParams.appendChild(paramElement);
//Delete parameters
let dltParams = document.getElementsByClassName('dltParam');
for (item of dltParams) {
item.addEventListener('click', (e) => {
e.target.parentElement.remove();
})
}
addedParamsCount++;
})
//If user clicks on submit Button
let submit = document.getElementById('submit');
submit.addEventListener('click', () => {
console.log('Clicked');
document.getElementById('responseJsonText').innerHTML = 'Please Wait... Fetching Response...';
// Fetch all the values user have entered
let url = document.getElementById('url').value;
let requestType = document.querySelector("input[name='request']:checked").value;
let contentType = document.querySelector("input[name='contentType']:checked").value;
// if user has used Parameters instead of JSON, get all the parameters in an Object
if (contentType == 'params') {
data = {};
for (i = 0; i < addedParamsCount + 1; i++) {
if (document.getElementById(`parameterKey${i + 1}`) != undefined) {
let key = document.getElementById(`parameterKey${i + 1}`).value;
let value = document.getElementById(`parameterValue${i + 1}`).value;
data[key] = value;
}
}
data = JSON.stringify(data);
console.log('String is: ',data);
}
else{
data = document.getElementById('requestJsonText').value;
console.log('String is: ',data);
}
// if request Type is GET, invoke fetch api to create a GET request
if(requestType == 'get'){
console.log('get');
fetch(url, {
method:'GET',
})
.then(response => response.text())
.then((text) => {
document.getElementById('responseJsonText').innerHTML = text;
Prism.highlightAll();
console.log('yes');
})
}else{
fetch(url, {
method:'POST',
body:data,
headers:{
"Content-type": "application/json; charset=UTF-8"
}
})
.then(response => response.text())
.then(text => {
document.getElementById('responseJsonText').innerHTML = text;
Prism.highlightAll();
console.log('yes');
})
}
})