Commit 6f1a7ae7 authored by Anne Blankert's avatar Anne Blankert

add filter to layer UI

parent 169d5717
...@@ -6,8 +6,9 @@ ...@@ -6,8 +6,9 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Info</title> <title>Info</title>
<script> <script>
let layerInfo = null; let layerInfo = allLayerInfo = null;
let prevFieldname = ''; let sortFieldName = '';
let sortAscending = true;
function sortBy(name) { function sortBy(name) {
let fieldname; let fieldname;
...@@ -36,12 +37,14 @@ ...@@ -36,12 +37,14 @@
default: default:
fieldname = name; fieldname = name;
} }
updateLayerInfo(fieldname, fieldname != prevFieldname);
if (prevFieldname != fieldname) { if (sortFieldName != fieldname) {
prevFieldname = fieldname; sortFieldName = fieldname;
sortAscending = true;
} else { } else {
prevFieldname = ''; sortAscending = !sortAscending;
} }
updateLayerInfo(fieldname, sortAscending);
} }
function updateLayerInfo(field, ascending) { function updateLayerInfo(field, ascending) {
...@@ -84,20 +87,46 @@ ...@@ -84,20 +87,46 @@
} }
} }
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() { function init() {
fetch('data/list_layers').then(response=>{ fetch('data/list_layers').then(response=>{
if (response.ok) { if (response.ok) {
response.json().then(json=> { response.json().then(json=> {
layerInfo = json; layerInfo = allLayerInfo = json;
filterLayerInfo();
sortBy('schema'); 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> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1>Vector layers in database</h1> <h1>Layers in database</h1>
<input id="filter" type="text" placeholder="Filter.." size="20" oninput="filterLayerInfo()"><br>
<table id="layerinfo"></table> <table id="layerinfo"></table>
</body> </body>
</html> </html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment