Skip to content

Commit ba81308

Browse files
author
Nikita Stepochkin
committed
feat: add selector for json or http call
1 parent f3734b1 commit ba81308

File tree

1 file changed

+115
-23
lines changed

1 file changed

+115
-23
lines changed

‎index.html‎

Lines changed: 115 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
}
1818

1919
.box {
20-
width: 300px;
21-
height: 300px;
20+
width: 600px;
21+
height: 600px;
2222
background-color: #fff;
2323
border: 1px solid lightblue;
2424
border-radius: 5px;
@@ -33,13 +33,15 @@
3333

3434
.box-header {
3535
color: #fff;
36+
background-color: white;
3637
padding: 5px 10px;
3738
display: flex;
3839
justify-content: space-between;
3940
align-items: center;
40-
cursor: pointer;
4141
height: 40px;
4242
flex-shrink: 0;
43+
position: relative;
44+
cursor: move;
4345
}
4446

4547
.header-buttons {
@@ -72,12 +74,11 @@
7274
top: 10px;
7375
left: 10px;
7476
cursor: pointer;
75-
z-index: 1000;
76-
color: lightblue;
77+
color: lightsteelblue;
7778
}
7879

7980
#add-box-btn:hover {
80-
color: lightskyblue;
81+
color: lightblue;
8182
}
8283

8384
#overlay-text {
@@ -88,7 +89,11 @@
8889
font-size: 24px;
8990
color: rgba(0, 0, 0, 0.5);
9091
pointer-events: none;
91-
z-index: -1000;
92+
z-index: 1000;
93+
}
94+
95+
.hidden {
96+
display: none;
9297
}
9398
</style>
9499
</head>
@@ -97,26 +102,55 @@
97102
<div id="overlay-text">Plotly JSON Visualizer</div>
98103

99104
<script>
105+
let highestZIndex = 1000;
106+
100107
document.getElementById('add-box-btn').addEventListener('click', addNewBox);
101108

102109
function addNewBox() {
103110
const box = document.createElement('div');
104111
box.className = 'box';
112+
box.style.zIndex = ++highestZIndex;
105113
box.innerHTML = `
106114
<div class="box-header" data-drag-handle="true">
107115
<div class="header-buttons">
108-
<button class="btn btn-generate">Generate</button>
109116
<button class="btn btn-back" style="display:none;">Back</button>
117+
<button class="btn btn-generate">Generate</button>
110118
</div>
111119
<span class="btn btn-close">X</span>
112120
</div>
113121
<div class="box-body">
122+
<div class="view-input-type">
123+
<label for="input-type">Input Type:</label>
124+
<select id="input-type" class="form-control">
125+
<option value="json">JSON Text</option>
126+
<option value="http">HTTP Request</option>
127+
</select><br>
128+
</div>
114129
<div class="view-json">
115130
<label for="json-input">JSON Data:</label><br>
116131
<textarea class="json-input form-control" rows="10"></textarea><br>
117132
<button class="btn btn-beautify">Beautify JSON</button><br><br>
118133
<label for="json-path">JSON Path (optional):</label><br>
119-
<input type="text" class="json-path form-control" placeholder="e.g., data.chart"><br><br>
134+
<input type="text" class="json-path form-control" placeholder="e.g., data.chart"><br>
135+
</div>
136+
<div class="view-http hidden">
137+
<form id="requestForm">
138+
<label for="url">URL:</label>
139+
<input type="text" class="http-url form-control" required><br>
140+
<label for="method">HTTP Method:</label>
141+
<select class="http-method form-control">
142+
<option value="GET">GET</option>
143+
<option value="POST">POST</option>
144+
</select><br>
145+
<div class="paramsContainer">
146+
<label for="params">Query Parameters</label><br>
147+
<textarea class="http-params form-control" placeholder="key1=value1&key2=value2"></textarea><br>
148+
</div>
149+
<div class="bodyContainer">
150+
<label for="body">Body</label><br>
151+
<textarea class="http-body form-control" placeholder='{"key1": "value1", "key2": "value2"}'></textarea><br>
152+
</div>
153+
</form>
120154
</div>
121155
<div class="view-chart" style="display:none;">
122156
<div class="chart" style="width: 100%; height: 100%;"></div>
@@ -133,42 +167,100 @@
133167
box.querySelector('.btn-back').addEventListener('click', () => switchToJson(box));
134168
box.querySelector('.btn-close').addEventListener('click', () => box.remove());
135169
box.querySelector('.btn-beautify').addEventListener('click', () => beautifyJson(box));
170+
171+
box.querySelector('#input-type').addEventListener('change', (event) => switchInputType(box, event.target.value));
172+
}
173+
174+
function switchInputType(box, type) {
175+
const viewJson = box.querySelector('.view-json');
176+
const viewHttp = box.querySelector('.view-http');
177+
if (type === 'json') {
178+
viewJson.style.display = 'block';
179+
viewHttp.style.display = 'none';
180+
} else {
181+
viewJson.style.display = 'none';
182+
viewHttp.style.display = 'block';
183+
}
136184
}
137185

138186
function switchToChart(box) {
139187
const viewJson = box.querySelector('.view-json');
188+
const viewHttp = box.querySelector('.view-http');
140189
const viewChart = box.querySelector('.view-chart');
141190
const btnGenerate = box.querySelector('.btn-generate');
142191
const btnBack = box.querySelector('.btn-back');
192+
const viewInputType = box.querySelector('.view-input-type');
143193
viewJson.style.display = 'none';
194+
viewHttp.style.display = 'none';
144195
viewChart.style.display = 'block';
145-
btnGenerate.style.display = 'none';
196+
btnGenerate.textContent = 'Reload';
146197
btnBack.style.display = 'block';
198+
viewInputType.style.display = 'none';
147199
updatePlotSize(box);
148200
}
149201

150202
function switchToJson(box) {
203+
const inputType = box.querySelector('#input-type').value;
151204
const viewJson = box.querySelector('.view-json');
205+
const viewHttp = box.querySelector('.view-http');
152206
const viewChart = box.querySelector('.view-chart');
153207
const btnGenerate = box.querySelector('.btn-generate');
154208
const btnBack = box.querySelector('.btn-back');
155-
viewJson.style.display = 'block';
209+
const viewInputType = box.querySelector('.view-input-type');
156210
viewChart.style.display = 'none';
157-
btnGenerate.style.display = 'block';
211+
btnGenerate.textContent = 'Generate';
212+
viewInputType.style.display = 'block';
158213
btnBack.style.display = 'none';
214+
if (inputType === 'json') {
215+
viewJson.style.display = 'block';
216+
viewHttp.style.display = 'none';
217+
} else {
218+
viewJson.style.display = 'none';
219+
viewHttp.style.display = 'block';
220+
}
159221
}
160222

161-
function reloadPlot(box) {
162-
const jsonData = box.querySelector('.json-input').value;
163-
const jsonPath = box.querySelector('.json-path').value;
223+
async function reloadPlot(box) {
224+
const inputType = box.querySelector('#input-type').value;
225+
let plotData;
164226

165227
try {
166-
let plotData = JSON.parse(jsonData);
228+
if (inputType === 'json') {
229+
const jsonData = box.querySelector('.json-input').value;
230+
const jsonPath = box.querySelector('.json-path').value;
231+
plotData = JSON.parse(jsonData);
232+
if (jsonPath) {
233+
const pathParts = jsonPath.split('.');
234+
for (const part of pathParts) {
235+
plotData = plotData[part];
236+
}
237+
}
238+
} else {
239+
const url = box.querySelector('.http-url').value;
240+
const method = box.querySelector('.http-method').value;
241+
const params = box.querySelector('.http-params').value;
242+
const body = box.querySelector('.http-body').value;
243+
244+
let fullUrl = url;
245+
if (method === 'GET' && params) {
246+
fullUrl += '?' + params;
247+
}
167248

168-
if (jsonPath) {
169-
const pathParts = jsonPath.split('.');
170-
for (const part of pathParts) {
171-
plotData = plotData[part];
249+
const response = await fetch(fullUrl, {
250+
method: method,
251+
headers: {
252+
'Content-Type': 'application/json'
253+
},
254+
body: method === 'POST' ? body : null
255+
});
256+
const jsonData = await response.json();
257+
const jsonPath = box.querySelector('.json-path').value;
258+
plotData = jsonData;
259+
if (jsonPath) {
260+
const pathParts = jsonPath.split('.');
261+
for (const part of pathParts) {
262+
plotData = plotData[part];
263+
}
172264
}
173265
}
174266

@@ -187,7 +279,7 @@
187279
switchToChart(box); // Switch to chart view immediately after generating the plot
188280
} catch (error) {
189281
console.error('Error:', error);
190-
alert('Invalid JSON data or JSON path');
282+
alert('Invalid JSON data or HTTP request');
191283
}
192284
}
193285

@@ -214,6 +306,7 @@
214306
function dragStart(event) {
215307
dragEl = box;
216308
dragEl.style.setProperty('position', 'absolute');
309+
dragEl.style.setProperty('z-index', ++highestZIndex); // Bring to front on drag
217310
lastPosition.left = event.clientX;
218311
lastPosition.top = event.clientY;
219312
dragHandleEl.classList.add('dragging');
@@ -250,8 +343,7 @@
250343

251344
function setupZIndex(box) {
252345
box.addEventListener('mousedown', () => {
253-
document.querySelectorAll('.box').forEach(b => b.style.zIndex = 0);
254-
box.style.zIndex = 10;
346+
box.style.zIndex = ++highestZIndex;
255347
});
256348
}
257349

0 commit comments

Comments
 (0)