[TASK] Add node filter

This commit is contained in:
Xaver Maierhofer 2017-02-01 22:13:06 +01:00 committed by GitHub
parent f53dc243f1
commit 9628409409
13 changed files with 90 additions and 2 deletions

View File

@ -10,3 +10,4 @@ rules:
"guard-for-in": 0 "guard-for-in": 0
"no-undefined": 0 "no-undefined": 0
"no-nested-ternary": 0 "no-nested-ternary": 0
"no-extend-native": ["error", { "exceptions": ["String"] }]

View File

@ -5,6 +5,7 @@
- Add modes - For example add a night layer and style - Add modes - For example add a night layer and style
- Updates selected node or list (incl. image stats cache-breaker) - not only overview tables - Updates selected node or list (incl. image stats cache-breaker) - not only overview tables
- Node filter is implemented
- Zoom level if you click a node (`nodeZoom`) - Zoom level 22 available, but it is to close for a click - Zoom level if you click a node (`nodeZoom`) - Zoom level 22 available, but it is to close for a click
- Formatted Code - Formatted Code
- Translation support - https://crowdin.com/project/meshviewer - Translation support - https://crowdin.com/project/meshviewer

6
app.js
View File

@ -1,4 +1,10 @@
'use strict'; 'use strict';
// Node search polyfill for mobile browsers and IE
if (!String.prototype.includes) {
String.prototype.includes = function () {
return String.prototype.indexOf.apply(this, arguments) !== -1;
};
}
require.config({ require.config({
baseUrl: 'lib', baseUrl: 'lib',

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -43,3 +43,4 @@
@include icon('android-remove', '\f2f4'); @include icon('android-remove', '\f2f4');
@include icon('ios-person', '\f47e'); @include icon('ios-person', '\f47e');
@include icon('layer', '\f229'); @include icon('layer', '\f229');
@include icon('filter', '\f38B');

41
lib/filters/hostname.js Normal file
View File

@ -0,0 +1,41 @@
define(function () {
'use strict';
return function () {
var refreshFunctions = [];
var timer;
var input = document.createElement('input');
function refresh() {
clearTimeout(timer);
timer = setTimeout(function () {
refreshFunctions.forEach(function (f) {
f();
});
}, 250);
}
function run(d) {
return (d.nodeinfo !== undefined ? d.nodeinfo.hostname.toLowerCase().includes(input.value.toLowerCase()) : '');
}
function setRefresh(f) {
refreshFunctions.push(f);
}
function render(el) {
input.type = 'search';
input.placeholder = _.t('sidebar.nodeFilter');
input.addEventListener('input', refresh);
el.classList.add('filter-node');
el.classList.add('ion-filter');
el.appendChild(input);
}
return {
run: run,
setRefresh: setRefresh,
render: render
};
};
});

View File

@ -1,10 +1,10 @@
define(['chroma-js', 'map', 'sidebar', 'tabs', 'container', 'legend', define(['chroma-js', 'map', 'sidebar', 'tabs', 'container', 'legend',
'linklist', 'nodelist', 'simplenodelist', 'infobox/main', 'linklist', 'nodelist', 'simplenodelist', 'infobox/main',
'proportions', 'forcegraph', 'title', 'about', 'datadistributor', 'proportions', 'forcegraph', 'title', 'about', 'datadistributor',
'filters/filtergui'], 'filters/filtergui', 'filters/hostname'],
function (chroma, Map, Sidebar, Tabs, Container, Legend, Linklist, function (chroma, Map, Sidebar, Tabs, Container, Legend, Linklist,
Nodelist, SimpleNodelist, Infobox, Proportions, ForceGraph, Nodelist, SimpleNodelist, Infobox, Proportions, ForceGraph,
Title, About, DataDistributor, FilterGUI) { Title, About, DataDistributor, FilterGUI, HostnameFilter) {
'use strict'; 'use strict';
return function (config, router) { return function (config, router) {
@ -105,6 +105,9 @@ define(['chroma-js', 'map', 'sidebar', 'tabs', 'container', 'legend',
fanout.watchFilters(filterGUI); fanout.watchFilters(filterGUI);
header.add(filterGUI); header.add(filterGUI);
var hostnameFilter = new HostnameFilter();
fanout.addFilter(hostnameFilter);
sidebar.add(tabs); sidebar.add(tabs);
tabs.add('sidebar.actual', overview); tabs.add('sidebar.actual', overview);
tabs.add('node.nodes', nodelist); tabs.add('node.nodes', nodelist);

View File

@ -39,6 +39,7 @@
"copy":"Kopieren" "copy":"Kopieren"
}, },
"sidebar":{ "sidebar":{
"nodeFilter": "Knotenfilter",
"nodes":"%{total} Knoten, davon %{online} Knoten online", "nodes":"%{total} Knoten, davon %{online} Knoten online",
"clients":"mit %{smart_count} Nutzer |||| mit %{smart_count} Nutzern", "clients":"mit %{smart_count} Nutzer |||| mit %{smart_count} Nutzern",
"gateway":"auf %{smart_count} Gateway |||| auf %{smart_count} Gateways", "gateway":"auf %{smart_count} Gateway |||| auf %{smart_count} Gateways",

View File

@ -39,6 +39,7 @@
"copy": "Copy" "copy": "Copy"
}, },
"sidebar": { "sidebar": {
"nodeFilter": "Node filter",
"nodes": "%{total} nodes, including %{online} nodes online", "nodes": "%{total} nodes, including %{online} nodes online",
"clients": "with %{smart_count} client |||| with %{smart_count} clients", "clients": "with %{smart_count} client |||| with %{smart_count} clients",
"gateway": "on %{smart_count} gateway |||| on %{smart_count} gateways", "gateway": "on %{smart_count} gateway |||| on %{smart_count} gateways",

View File

@ -37,4 +37,30 @@
} }
} }
} }
.filter-node {
border: 0;
padding: 0 5px;
width: 100%;
&::before {
font-size: 1.8em;
}
input {
background: transparent;
border: 0;
border-bottom: 1px solid $color-primary;
font-family: $font-family;
font-size: $font-size;
margin: 0 15px 0 3px;
outline: none;
padding: 0 2px;
width: 100%;
}
button {
display: none;
}
}
} }

View File

@ -35,6 +35,13 @@ html {
} }
} }
//@import 'modules/filter';
.filter-node {
input {
color: $color-black;
}
}
//@import 'modules/sidebar'; //@import 'modules/sidebar';
.sidebar { .sidebar {
.infobox, .container { .infobox, .container {