Skip to content

Commit 113cce2

Browse files
erikn69erikn69
authored
Small fixes to queries widget (#1665)
1 parent aa600c9 commit 113cce2

File tree

1 file changed

+88
-108
lines changed

1 file changed

+88
-108
lines changed

‎src/Resources/queries/widget.js

Lines changed: 88 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
(function($) {
22

3-
var csscls = PhpDebugBar.utils.makecsscls('phpdebugbar-widgets-');
3+
let css = PhpDebugBar.utils.makecsscls('phpdebugbar-');
4+
let csscls = PhpDebugBar.utils.makecsscls('phpdebugbar-widgets-');
45

56
/**
67
* Widget for displaying sql queries.
@@ -83,33 +84,27 @@
8384
const $explainButton = $('<a>Visual Explain</a>')
8485
.addClass(csscls('visual-explain'))
8586
.on('click', () => {
86-
if (confirm(confirmMessage)) {
87-
fetch(statement.explain.url, {
88-
method: "POST",
89-
body: JSON.stringify({
90-
connection: statement.explain.connection,
91-
query: statement.explain.query,
92-
bindings: statement.bindings,
93-
hash: statement.explain.hash,
94-
mode: 'visual',
95-
}),
96-
}).then((response) => {
97-
if (response.ok) {
98-
response.json()
99-
.then((json) => {
100-
$explainLink.attr('href', json.data).text(json.data);
101-
window.open(json.data, '_blank', 'noopener');
102-
})
103-
.catch((err) => alert(`Response body could not be parsed. (${err})`));
104-
} else {
105-
response.json()
106-
.then((json) => alert(json.message))
107-
.catch((err) => alert(`Response body could not be parsed. (${err})`));
108-
}
109-
}).catch((e) => {
110-
alert(e.message);
111-
});
112-
}
87+
if (!confirm(statement.explain['visual-confirm'])) return;
88+
fetch(statement.explain.url, {
89+
method: "POST",
90+
body: JSON.stringify({
91+
connection: statement.explain.connection,
92+
query: statement.explain.query,
93+
bindings: statement.bindings,
94+
hash: statement.explain.hash,
95+
mode: 'visual',
96+
}),
97+
}).then(response => {
98+
response.json()
99+
.then(json => {
100+
if (!response.ok) return alert(json.message);
101+
$explainLink.attr('href', json.data).text(json.data);
102+
window.open(json.data, '_blank', 'noopener');
103+
})
104+
.catch(err => alert(`Response body could not be parsed. (${err})`));
105+
}).catch(e => {
106+
alert(e.message);
107+
});
113108
});
114109

115110
return $('<div/>').append([$explainButton, $explainLink]);
@@ -181,43 +176,40 @@
181176

182177
const filters = [];
183178
if (this.duplicateQueries.size > 0) {
184-
filters.push(
185-
$('<a />')
186-
.text('Show only duplicates')
187-
.addClass(csscls('duplicates'))
188-
.click((event) => {
189-
if ($(event.target).text() === 'Show only duplicates') {
190-
$(event.target).text('Show All');
191-
this.$el.find('[data-duplicate=false]').hide();
192-
} else {
193-
$(event.target).text('Show only duplicates');
194-
this.$el.find('[data-duplicate]').show();
195-
}
196-
})
179+
filters.push($('<a />')
180+
.text('Show only duplicates')
181+
.addClass(csscls('duplicates'))
182+
.click((event) => {
183+
if ($(event.target).text() === 'Show only duplicates') {
184+
$(event.target).text('Show All');
185+
this.$el.find('[data-duplicate=false]').hide();
186+
} else {
187+
$(event.target).text('Show only duplicates');
188+
this.$el.find('[data-duplicate]').show();
189+
}
190+
})
197191
);
198192
}
199193
if (connections.size > 1) {
200194
for (const connection of connections.values()) {
201-
filters.push(
202-
$('<a />')
203-
.text(connection)
204-
.attr('data-filter', connection)
205-
.attr('data-active', true)
206-
.addClass(csscls('connection'))
207-
.on('click', (event) => {
208-
if ($(event.target).attr('data-active') === 'true') {
209-
$(event.target).attr('data-active', false).css('opacity', 0.3);
210-
this.hiddenConnections.add($(event.target).attr('data-filter'));
211-
} else {
212-
$(event.target).attr('data-active', true).css('opacity', 1.0);
213-
this.hiddenConnections.delete($(event.target).attr('data-filter'));
214-
}
215-
216-
this.$el.find(`[data-connection]`).show();
217-
for (const hiddenConnection of this.hiddenConnections) {
218-
this.$el.find(`[data-connection="${hiddenConnection}"]`).hide();
219-
}
220-
})
195+
filters.push($('<a />')
196+
.addClass(csscls('connection'))
197+
.text(connection)
198+
.attr({'data-filter': connection, 'data-active': true})
199+
.on('click', (event) => {
200+
if ($(event.target).attr('data-active') === 'true') {
201+
$(event.target).attr('data-active', false).css('opacity', 0.3);
202+
this.hiddenConnections.add($(event.target).attr('data-filter'));
203+
} else {
204+
$(event.target).attr('data-active', true).css('opacity', 1.0);
205+
this.hiddenConnections.delete($(event.target).attr('data-filter'));
206+
}
207+
208+
this.$el.find(`[data-connection]`).show();
209+
for (const hiddenConnection of this.hiddenConnections) {
210+
this.$el.find(`[data-connection="${hiddenConnection}"]`).hide();
211+
}
212+
})
221213
);
222214
}
223215
}
@@ -233,44 +225,38 @@
233225

234226
renderQuery: function ($li, statement) {
235227
if (statement.type === 'transaction') {
236-
$li
237-
.attr('data-connection', statement.connection)
228+
$li.attr('data-connection', statement.connection)
238229
.attr('data-duplicate', false)
239-
.append($('<strong />').addClass(csscls('sql')).addClass(csscls('name')).text(statement.sql));
230+
.append($('<strong />').addClass(csscls('sql name')).text(statement.sql));
240231
} else {
241232
const $code = $('<code />').html(PhpDebugBar.Widgets.highlight(statement.sql, 'sql')).addClass(csscls('sql'));
242233
if (statement.show_copy) {
243-
$code.append(
244-
$('<span title="Copy to clipboard" />')
245-
.addClass(csscls('copy-clipboard'))
246-
.css('cursor', 'pointer')
247-
.html("&#8203;")
248-
.on('click', (event) => {
249-
event.stopPropagation();
250-
if (this.copyToClipboard($code.get(0))) {
251-
$(event.target).addClass(csscls('copy-clipboard-check'));
252-
setTimeout(function(){
253-
$(event.target).removeClass(csscls('copy-clipboard-check'));
254-
}, 2000)
255-
}
256-
})
257-
);
234+
$('<span title="Copy to clipboard" />')
235+
.addClass(csscls('copy-clipboard'))
236+
.css('cursor', 'pointer')
237+
.html("&#8203;")
238+
.on('click', (event) => {
239+
event.stopPropagation();
240+
if (this.copyToClipboard($code.get(0))) {
241+
$(event.target).addClass(csscls('copy-clipboard-check'));
242+
setTimeout(function(){
243+
$(event.target).removeClass(csscls('copy-clipboard-check'));
244+
}, 2000)
245+
}
246+
}).appendTo($code);
258247
}
259-
$li
260-
.attr('data-connection', statement.connection)
248+
$li.attr('data-connection', statement.connection)
261249
.attr('data-duplicate', this.duplicateQueries.has(statement))
262250
.append($code);
263251
}
264252

265253
if (statement.width_percent) {
266-
$li.append(
267-
$('<div />').addClass(csscls('bg-measure')).append(
268-
$('<div />').addClass(csscls('value')).css({
269-
left: `${statement.start_percent}%`,
270-
width: `${Math.max(statement.width_percent, 0.01)}%`,
271-
})
272-
)
273-
);
254+
$('<div />').addClass(csscls('bg-measure')).append(
255+
$('<div />').addClass(csscls('value')).css({
256+
left: `${statement.start_percent}%`,
257+
width: `${Math.max(statement.width_percent, 0.01)}%`,
258+
})
259+
).appendTo($li);
274260
}
275261

276262
if ('is_success' in statement && !statement.is_success) {
@@ -320,8 +306,7 @@
320306
}
321307

322308
if($details.children().length) {
323-
$li
324-
.addClass(csscls('expandable'))
309+
$li.addClass(csscls('expandable'))
325310
.on('click', (event) => {
326311
if ($(event.target).closest(`.${csscls('params')}`).length) {
327312
return;
@@ -340,15 +325,15 @@
340325

341326
renderDetail: function (caption, icon, $value) {
342327
return $('<tr />').append(
343-
$('<td />').addClass(csscls('name')).html(icon ? `${caption} <i class="phpdebugbar-fa phpdebugbar-fa-${icon} phpdebugbar-text-muted"></i>` : caption),
328+
$('<td />').addClass(csscls('name')).html(caption + ((icon || '') && `<i class="${css('text-muted fa fa-'+icon)}" />`)),
344329
$('<td />').addClass(csscls('value')).append($value),
345330
);
346331
},
347332

348333
renderDetailStrings: function (caption, icon, values, showLineNumbers = false) {
349334
const $ul = $('<ul />').addClass(csscls('table-list'));
350335
const $li = $('<li />').addClass(csscls('table-list-item'));
351-
const $muted = $('<span />').addClass('phpdebugbar-text-muted');
336+
const $muted = $('<span />').addClass(css('text-muted'));
352337

353338
for (const i in values) {
354339
if (showLineNumbers) {
@@ -366,7 +351,7 @@
366351
},
367352

368353
renderDetailBacktrace: function (caption, icon, traces) {
369-
const $muted = $('<span />').addClass('phpdebugbar-text-muted');
354+
const $muted = $('<span />').addClass(css('text-muted'));
370355

371356
const values = [];
372357
for (const trace of traces) {
@@ -397,20 +382,15 @@
397382
bindings: statement.bindings,
398383
hash: statement.explain.hash,
399384
}),
400-
}).then((response) => {
401-
if (response.ok) {
402-
response.json()
403-
.then((json) => {
404-
$detail.find(`.${csscls('value')}`).children().remove();
405-
explainFn($detail.find(`.${csscls('value')}`), statement, json.data, json.visual);
406-
})
407-
.catch((err) => alert(`Response body could not be parsed. (${err})`));
408-
} else {
409-
response.json()
410-
.then((json) => alert(json.message))
411-
.catch((err) => alert(`Response body could not be parsed. (${err})`));
412-
}
413-
}).catch((e) => {
385+
}).then(response => {
386+
response.json()
387+
.then(json => {
388+
if (!response.ok) return alert(json.message);
389+
$detail.find(`.${csscls('value')}`).children().remove();
390+
explainFn($detail.find(`.${csscls('value')}`), statement, json.data, json.visual);
391+
})
392+
.catch(err => alert(`Response body could not be parsed. (${err})`));
393+
}).catch(e => {
414394
alert(e.message);
415395
});
416396
});

0 commit comments

Comments
 (0)