Modern JavaScript

This commit is contained in:
Alexey Milovidov 2021-03-16 19:31:25 +03:00
parent 0ffea300ac
commit 9f05fc22d0

View File

@ -306,10 +306,10 @@
/// Incremental request number. When response is received,
/// if it's request number does not equal to the current request number, response will be ignored.
/// This is to avoid race conditions.
var request_num = 0;
let request_num = 0;
/// Save query in history only if it is different.
var previous_query = '';
let previous_query = '';
/// Substitute the address of the server where the page is served.
if (location.protocol != 'file:') {
@ -317,7 +317,7 @@
}
/// Substitute user name if it's specified in the query string
var user_from_url = (new URL(window.location)).searchParams.get('user');
let user_from_url = (new URL(window.location)).searchParams.get('user');
if (user_from_url) {
document.getElementById('user').value = user_from_url;
}
@ -326,10 +326,10 @@
{
/// TODO: Check if URL already contains query string (append parameters).
var user = document.getElementById('user').value;
var password = document.getElementById('password').value;
let user = document.getElementById('user').value;
let password = document.getElementById('password').value;
var url = document.getElementById('url').value +
let url = document.getElementById('url').value +
/// Ask server to allow cross-domain requests.
'?add_http_cors_header=1' +
'&user=' + encodeURIComponent(user) +
@ -338,7 +338,7 @@
/// Safety settings to prevent results that browser cannot display.
'&max_result_rows=1000&max_result_bytes=10000000&result_overflow_mode=break';
var xhr = new XMLHttpRequest;
let xhr = new XMLHttpRequest;
xhr.open('POST', url, true);
@ -352,13 +352,13 @@
/// The query is saved in browser history (in state JSON object)
/// as well as in URL fragment identifier.
if (query != previous_query) {
var state = {
let state = {
query: query,
status: this.status,
response: this.response.length > 100000 ? null : this.response /// Lower than the browser's limit.
};
var title = "ClickHouse Query: " + query;
var url = window.location.pathname + '?user=' + encodeURIComponent(user) + '#' + window.btoa(query);
let title = "ClickHouse Query: " + query;
let url = window.location.pathname + '?user=' + encodeURIComponent(user) + '#' + window.btoa(query);
if (previous_query == '') {
history.replaceState(state, title, url);
} else {
@ -382,7 +382,7 @@
document.getElementById('hourglass').style.display = 'none';
if (status === 200) {
var json;
let json;
try { json = JSON.parse(response); } catch (e) {}
if (json !== undefined && json.statistics !== undefined) {
renderResult(json);
@ -415,7 +415,7 @@
function post()
{
++request_num;
var query = document.getElementById('query').value;
let query = document.getElementById('query').value;
postImpl(request_num, query);
}
@ -434,7 +434,7 @@
function clear()
{
var table = document.getElementById('data-table');
let table = document.getElementById('data-table');
while (table.firstChild) {
table.removeChild(table.lastChild);
}
@ -456,30 +456,30 @@
//console.log(response);
clear();
var stats = document.getElementById('stats');
let stats = document.getElementById('stats');
stats.innerText = 'Elapsed: ' + response.statistics.elapsed.toFixed(3) + " sec, read " + response.statistics.rows_read + " rows.";
var thead = document.createElement('thead');
for (var idx in response.meta) {
var th = document.createElement('th');
var name = document.createTextNode(response.meta[idx].name);
let thead = document.createElement('thead');
for (let idx in response.meta) {
let th = document.createElement('th');
let name = document.createTextNode(response.meta[idx].name);
th.appendChild(name);
thead.appendChild(th);
}
/// To prevent hanging the browser, limit the number of cells in a table.
/// It's important to have the limit on number of cells, not just rows, because tables may be wide or narrow.
var max_rows = 10000 / response.meta.length;
var row_num = 0;
let max_rows = 10000 / response.meta.length;
let row_num = 0;
var tbody = document.createElement('tbody');
for (var row_idx in response.data) {
var tr = document.createElement('tr');
for (var col_idx in response.data[row_idx]) {
var td = document.createElement('td');
var cell = response.data[row_idx][col_idx];
var is_null = (cell === null);
var content = document.createTextNode(is_null ? 'ᴺᵁᴸᴸ' : cell);
let tbody = document.createElement('tbody');
for (let row_idx in response.data) {
let tr = document.createElement('tr');
for (let col_idx in response.data[row_idx]) {
let td = document.createElement('td');
let cell = response.data[row_idx][col_idx];
let is_null = (cell === null);
let content = document.createTextNode(is_null ? 'ᴺᵁᴸᴸ' : cell);
td.appendChild(content);
/// TODO: Execute regexp only once for each column.
td.className = response.meta[col_idx].type.match(/^(U?Int|Decimal|Float)/) ? 'right' : 'left';
@ -496,7 +496,7 @@
}
}
var table = document.getElementById('data-table');
let table = document.getElementById('data-table');
table.appendChild(thead);
table.appendChild(tbody);
}
@ -505,7 +505,7 @@
function renderUnparsedResult(response)
{
clear();
var data = document.getElementById('data-unparsed')
let data = document.getElementById('data-unparsed')
if (response === '') {
/// TODO: Fade or remove previous result when new request will be performed.
@ -531,12 +531,12 @@
}
/// The choice of color theme is saved in browser.
var theme = window.localStorage.getItem('theme');
let theme = window.localStorage.getItem('theme');
if (theme) {
setColorTheme(theme);
} else {
/// Obtain system-level user preference
var media_query_list = window.matchMedia('prefers-color-scheme: dark')
let media_query_list = window.matchMedia('prefers-color-scheme: dark')
if (media_query_list.matches) {
/// Set without saving to localstorage