layerinfo in sortable table

public/info.html

@@ -6,17 +6,85 @@
     <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}&geom_type=${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=> {
-                    const list = document.querySelector('#layerlist');
-                    for (item of json) {
-                        const li = document.createElement('li');
-                        li.innerHTML = `<a href="tableinfo.html?table=${item.f_table_schema}.${item.f_table_name}&geom_column=${item.f_geometry_column}&srid=${item.srid}&geom_type=${item.type}&dimensions=${item.coord_dimension}">${item.f_table_schema}.${item.f_table_name}</a> geom: ${item.f_geometry_column}, srid:${item.srid}, geom_type:${item.type}, ${item.coord_dimension}D, count: ${item.estimated_rows}`
-                        list.appendChild(li);
-                    }
+                    layerInfo  = json;
+                    sortBy('schema');
                 })
             }
         })
@@ -25,6 +93,6 @@
 </head>
 <body onload="init()">
     <h1>Vector layers in database</h1>
-    <ul id="layerlist"></ul>
+    <table id="layerinfo"></table>
 </body>
 </html>
\ No newline at end of file