<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Info</title>
<script>
let layerInfo = allLayerInfo = null;
let sortFieldName = '';
let sortAscending = true;
function sortBy(name) {
let fieldname;
switch(name) {
case 'schema':
fieldname = 'f_table_schema';
break;
case 'name':
fieldname = 'f_table_name';
break;
case 'geom_column':
fieldname = 'f_geometry_column';
break;
case 'geom_type':
fieldname = 'type';
break;
case 'dim':
fieldname = 'coord_dimension';
break;
case 'type':
fieldname = 'table_type';
break;
case 'count':
fieldname = 'estimated_rows'
break;
default:
fieldname = name;
}
if (sortFieldName != fieldname) {
sortFieldName = fieldname;
sortAscending = true;
} else {
sortAscending = !sortAscending;
}
updateLayerInfo(fieldname, sortAscending);
}
function updateLayerInfo(field, ascending) {
const table = document.querySelector('#layerinfo');
switch (field) {
case 'f_table_schema':
layerInfo.sort((item1, item2) => ('' + item1.f_table_schema + item1.f_table_name).localeCompare(item2.f_table_schema + item2.f_table_name))
break;
case 'f_table_name':
layerInfo.sort((item1, item2) => ('' + item1[field]).localeCompare(item2[field]));
break;
case 'f_geometry_column':
case 'type':
case 'table_type':
case 'coord_dimension':
layerInfo.sort((item1, item2) => ('' + item1[field] + '.' + item1.f_table_schema + '.' + item1.f_table_name).localeCompare(item2[field] + '.' + item2.f_table_schema + '.' + item2.f_table_name));
break;
case 'srid':
layerInfo.sort((item1, item2)=>item1.srid-item2.srid?item1.srid-item2.srid:('' + item1.f_table_schema + item1.f_table_name).localeCompare(item2.f_table_schema + item2.f_table_name));
break;
case 'estimated_rows':
layerInfo.sort((item1, item2)=>item1.estimated_rows-item2.estimated_rows);
}
if (!ascending) {
layerInfo.reverse();
}
table.innerHTML = '<tr><th>schema</th><th>name</th><th>geom_column</th><th>srid</th><th>geom_type</th><th>dim</th><th>type</th><th>count</th></tr>' +
layerInfo.map(item=>`<tr>
<td>${item.f_table_schema}</td>
<td><a href="tableinfo.html?table=${item.f_table_schema}.${item.f_table_name}&geom_column=${item.f_geometry_column}&srid=${item.srid}&geomtype=${item.type}&dimensions=${item.coord_dimension}&estimated_rows=${item.estimated_rows}">${item.f_table_name}</a></td>
<td>${item.f_geometry_column}</td>
<td>${item.srid}</td>
<td>${item.type}</td>
<td>${item.coord_dimension}D</td>
<td>${item.table_type}</td>
<td>${item.estimated_rows}</td></tr>`).join('\n');
const tableHeaders = document.querySelectorAll('tr > th');
for (let i = 0; i < tableHeaders.length; i++) {
tableHeaders[i].innerHTML = `<a href="#" onclick="sortBy('${tableHeaders[i].textContent}')">${tableHeaders[i].textContent}</a>`
}
}
function filterLayerInfo() {
const filterWords = document.querySelector('#filter')
.value.split(' ')
.filter(word=>word !== '')
.map(word=>word.toLocaleLowerCase());
if (filterWords.length) {
layerInfo = allLayerInfo.filter(layer=>{
const layerText = Object.values(layer).join(' ').toLocaleLowerCase();
return filterWords.filter(word=>layerText.indexOf(word)>-1).length == filterWords.length;
})
} else {
layerInfo = allLayerInfo;
}
updateLayerInfo(sortFieldName, sortAscending);
}
function init() {
fetch('data/list_layers').then(response=>{
if (response.ok) {
response.json().then(json=> {
layerInfo = allLayerInfo = json;
filterLayerInfo();
sortBy('schema');
})
} else {
layerInfo = allLayerInfo = [];
response.json().then(json =>{
document.querySelector('#layerinfo').innerHTML = `<tr><td>Error fetching layers: ${json.error}</td></tr>`
}).catch(err => {
document.querySelector('#layerinfo').innerHTML = `<tr><td>Error fetching layers: ${err}</td></tr>`
});
}
})
}
</script>
</head>
<body onload="init()">
<h1>Layers in database</h1>
<input id="filter" type="text" placeholder="Search..." size="20" oninput="filterLayerInfo()"><br>
<table id="layerinfo"></table>
</body>
</html>