info.html

<!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>