<!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 = null;
let prevFieldname = '';
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 'count':
fieldname = 'estimated_rows'
break;
default:
fieldname = name;
}
updateLayerInfo(fieldname, fieldname != prevFieldname);
if (prevFieldname != fieldname) {
prevFieldname = fieldname;
} else {
prevFieldname = '';
}
}
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 '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>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.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 init() {
fetch('data/list_layers').then(response=>{
if (response.ok) {
response.json().then(json=> {
layerInfo = json;
sortBy('schema');
})
}
})
}
</script>
</head>
<body onload="init()">
<h1>Vector layers in database</h1>
<table id="layerinfo"></table>
</body>
</html>