Skip to content

Commit 36dc73c

Browse files
nikita715nikita715
committed
fix: header dragging
1 parent 7cc75df commit 36dc73c

File tree

1 file changed

+32
-24
lines changed

1 file changed

+32
-24
lines changed

‎index.html‎

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,7 @@
146146
<script src="https://unpkg.com/moveable@latest/dist/moveable.min.js"></script>
147147
<script>
148148
let highestZIndex = 1000;
149+
let boxIndex = 0;
149150

150151
const jsonExample = "{\r\n \"data\": [\r\n {\r\n \"x\": [\r\n \"giraffes\",\r\n \"orangutans\",\r\n \"monkeys\"\r\n ],\r\n \"y\": [\r\n 20,\r\n 14,\r\n 23\r\n ],\r\n \"type\": \"bar\"\r\n }\r\n ]\r\n}";
151152

@@ -155,6 +156,7 @@
155156
const box = document.createElement('div');
156157
box.className = 'box';
157158
box.style.zIndex = ++highestZIndex;
159+
let currentBoxIndex = ++boxIndex;
158160
box.innerHTML = `
159161
<div class="box-header" data-drag-handle="true">
160162
<div class="header-buttons">
@@ -165,39 +167,39 @@
165167
</div>
166168
<div class="box-body">
167169
<div class="view-input-type">
168-
<label for="input-type" class="input-label-required">Input Type:</label>
169-
<select id="input-type" class="form-control">
170+
<label for="form-input-type-${currentBoxIndex}" class="input-label-required">Input Type</label>
171+
<select id="form-input-type-${currentBoxIndex}" class="form-control input-type">
170172
<option value="json">JSON Text</option>
171173
<option value="http">HTTP Request</option>
172174
</select><br>
173175
</div>
174176
<div class="view-json">
175-
<label for="form-json-input" class="input-label-required">JSON Data:</label><br>
176-
<textarea id="form-json-input" class="json-input form-control" rows="10"></textarea><br>
177+
<label for="form-json-input-${currentBoxIndex}" class="input-label-required">JSON Data</label><br>
178+
<textarea id="form-json-input-${currentBoxIndex}" class="json-input form-control" rows="10"></textarea><br>
177179
<button class="btn btn-beautify">Beautify JSON</button><br><br>
178-
<label for="form-json-path">JSON Path</label><br>
179-
<input id="form-json-path" type="text" class="json-path-json form-control" placeholder="data.chart"><br>
180+
<label for="form-json-path-${currentBoxIndex}">JSON Path</label><br>
181+
<input id="form-json-path-${currentBoxIndex}" type="text" class="json-path-json form-control" placeholder="data.chart"><br>
180182
</div>
181183
<div class="view-http hidden">
182184
<form id="requestForm">
183-
<label for="form-http-url" class="input-label-required">URL:</label>
184-
<input id="form-http-url" type="text" class="http-url form-control" required placeholder="http://localhost:8080/generate?key1=value1&key2=value2"><br>
185-
<label for="form-http-method" class="input-label-required">HTTP Method:</label>
186-
<select id="form-http-method" class="http-method form-control">
185+
<label for="form-http-url-${currentBoxIndex}" class="input-label-required">URL</label>
186+
<input id="form-http-url-${currentBoxIndex}" type="text" class="http-url form-control" required placeholder="http://localhost:8080/generate?key1=value1&key2=value2"><br>
187+
<label for="form-http-method-${currentBoxIndex}" class="input-label-required">HTTP Method</label>
188+
<select id="form-http-method-${currentBoxIndex}" class="http-method form-control">
187189
<option value="GET">GET</option>
188190
<option value="POST">POST</option>
189191
</select><br>
190192
<div class="headersContainer">
191-
<label for="form-http-headers">Headers</label><br>
192-
<textarea id="form-http-headers" class="http-headers form-control" placeholder='Content-Type=application/json\nAccept=*/*'></textarea><br>
193+
<label for="form-http-headers-${currentBoxIndex}">Headers</label><br>
194+
<textarea id="form-http-headers-${currentBoxIndex}" class="http-headers form-control" placeholder='Content-Type=application/json\nAccept=*/*'></textarea><br>
193195
</div>
194196
<div class="bodyContainer">
195-
<label for="form-http-body">Body</label><br>
196-
<textarea id="form-http-body" class="http-body form-control" placeholder='{"key1": "value1", "key2": "value2"}'></textarea><br>
197+
<label for="form-http-body-${currentBoxIndex}">Body</label><br>
198+
<textarea id="form-http-body-${currentBoxIndex}" class="http-body form-control" placeholder='{"key1": "value1", "key2": "value2"}'></textarea><br>
197199
</div>
198200
<div class="jsonPathContainer">
199-
<label for="form-http-json-path">JSON Path</label><br>
200-
<input id="form-http-json-path" type="text" class="json-path-http form-control" placeholder="data.chart"><br>
201+
<label for="form-http-json-path-${currentBoxIndex}">JSON Path</label><br>
202+
<input id="form-http-json-path-${currentBoxIndex}" type="text" class="json-path-http form-control" placeholder="data.chart"><br>
201203
</div>
202204
</form>
203205
</div>
@@ -208,23 +210,23 @@
208210
`;
209211
document.body.appendChild(box);
210212

211-
const headerEl = box.querySelector('[data-drag-handle]');
213+
const dragHeader = box.querySelector('[data-drag-handle]');
212214

213215
const moveable = new Moveable(document.body, {
214216
target: box,
217+
dragTarget: dragHeader,
215218
resizable: true,
216219
keepRatio: false,
217220
edge: true,
218221
draggable: true,
219222
checkInput: true,
220-
checkSelect: true,
221223
});
222224

223-
box.querySelector('#input-type').addEventListener("mousedown", (e) => {
225+
box.querySelector('.input-type').addEventListener("mousedown", (e) => {
224226
e.stopPropagation();
225227
});
226228

227-
box.querySelector('#form-http-method').addEventListener("mousedown", (e) => {
229+
box.querySelector('.http-method').addEventListener("mousedown", (e) => {
228230
e.stopPropagation();
229231
});
230232

@@ -261,7 +263,7 @@
261263
});
262264
box.querySelector('.btn-beautify').addEventListener('click', () => beautifyJson(box));
263265

264-
box.querySelector('#input-type').addEventListener('change', (event) => switchInputType(box, event.target.value));
266+
box.querySelector('.input-type').addEventListener('change', (event) => switchInputType(box, event.target.value));
265267

266268
box.querySelector('.json-input').value = jsonExample;
267269
}
@@ -295,7 +297,7 @@
295297
}
296298

297299
function switchToJson(box) {
298-
const inputType = box.querySelector('#input-type').value;
300+
const inputType = box.querySelector('.input-type').value;
299301
const viewJson = box.querySelector('.view-json');
300302
const viewHttp = box.querySelector('.view-http');
301303
const viewChart = box.querySelector('.view-chart');
@@ -316,7 +318,7 @@
316318
}
317319

318320
async function reloadPlot(box) {
319-
const inputType = box.querySelector('#input-type').value;
321+
const inputType = box.querySelector('.input-type').value;
320322
let plotData;
321323

322324
try {
@@ -369,7 +371,13 @@
369371
switchToChart(box); // Switch to chart view immediately after generating the plot
370372
} catch (error) {
371373
console.error('Error:', error);
372-
alert('Invalid JSON data or HTTP request');
374+
const inputType = box.querySelector('.input-type').value;
375+
376+
if (inputType === 'json') {
377+
alert('Invalid JSON data');
378+
} else {
379+
alert('Invalid HTTP request');
380+
}
373381
}
374382
}
375383

0 commit comments

Comments
 (0)