diff --git a/programs/server/play.html b/programs/server/play.html
index 0ce4cb9996e..21d288ea59d 100644
--- a/programs/server/play.html
+++ b/programs/server/play.html
@@ -186,7 +186,7 @@
color: var(--misc-text-color);
}
- #toggle-light, #toggle-dark
+ #toggle-light, #toggle-dark, #toggle-transpose
{
float: right;
padding-right: 0.5rem;
@@ -373,6 +373,7 @@
โ
๐๐
+ โคต๏ธ
@@ -409,6 +410,8 @@
/// This is to avoid race conditions.
let request_num = 0;
+ let last_response = null;
+
/// Save query in history only if it is different.
let previous_query = '';
@@ -548,6 +551,7 @@
function clear()
{
+ last_response = null;
let table = document.getElementById('data-table');
while (table.firstChild) {
table.removeChild(table.lastChild);
@@ -597,6 +601,7 @@
{
clear();
+ last_response = response;
let stats = document.getElementById('stats');
const seconds = response.statistics.elapsed.toFixed(3);
const rows = response.statistics.rows_read;
@@ -613,8 +618,41 @@
}
}
+ function renderTableTranspose(response)
+ {
+ let tbody = document.createElement('tbody');
+ for (let col_idx in response.meta) {
+ let tr = document.createElement('tr');
+ {
+ let td = document.createElement('td');
+ td.className = 'right';
+ td.style.fontWeight = 'bold';
+ td.style.width = '0';
+ td.appendChild(document.createTextNode(response.meta[col_idx].name));
+ tr.appendChild(td);
+ }
+
+ for (let row_idx in response.data)
+ {
+ let td = document.createElement('td');
+ td.className = 'left';
+ let node = document.createTextNode(response.data[row_idx][col_idx]);
+ td.appendChild(node);
+ tr.appendChild(td);
+ }
+ tbody.appendChild(tr);
+ }
+ let table = document.getElementById('data-table');
+ table.appendChild(tbody);
+ }
+
function renderTable(response)
{
+ if (window.localStorage.getItem('transpose') === 'true' && response.data.length < 16) {
+ renderTableTranspose(response)
+ return;
+ }
+
let thead = document.createElement('thead');
for (let idx in response.meta) {
let th = document.createElement('th');
@@ -787,6 +825,18 @@
document.documentElement.setAttribute('data-theme', theme);
}
+ function toggleTranspose() {
+ if (window.localStorage.getItem('transpose') === 'true') {
+ window.localStorage.setItem('transpose', 'false')
+ } else {
+ window.localStorage.setItem('transpose', 'true');
+ }
+
+ if (last_response) {
+ renderResult(last_response)
+ }
+ }
+
/**
* First we check if theme is set via the 'theme' GET parameter, if not, we check localStorage,
* otherwise we check OS preference
@@ -823,5 +873,9 @@
document.getElementById('toggle-dark').onclick = function() {
setColorTheme('dark');
}
+
+ document.getElementById('toggle-transpose').onclick = function() {
+ toggleTranspose();
+ }