From 0fd9010dfc60de0c547bc82a55bb8cd4df9f1d29 Mon Sep 17 00:00:00 2001 From: Mohammed Saud Date: Sun, 6 Oct 2019 22:05:13 +0530 Subject: [PATCH] display last seen, online for each node separately --- webui-src/app/network/network.css | 3 + webui-src/app/network/network.js | 165 ++++++++++++++------------ webui-src/app/network/network_data.js | 36 ++++-- 3 files changed, 119 insertions(+), 85 deletions(-) diff --git a/webui-src/app/network/network.css b/webui-src/app/network/network.css index a3b62cf..b04c0f0 100644 --- a/webui-src/app/network/network.css +++ b/webui-src/app/network/network.css @@ -20,6 +20,9 @@ .friend button { font-size: 0.9em; } +.friend.hidden { + display: none; +} .friend .location { margin: 5px; diff --git a/webui-src/app/network/network.js b/webui-src/app/network/network.js index a78d06e..075641e 100644 --- a/webui-src/app/network/network.js +++ b/webui-src/app/network/network.js @@ -1,119 +1,128 @@ -let m = require('mithril'); -let rs = require('rswebui'); -let widget = require('widgets'); -let data = require('network_data'); +const m = require('mithril'); +const rs = require('rswebui'); +const widget = require('widgets'); +const Data = require('network_data'); const ConfirmRemove = () => { return { - view: (vnode) => [m('h3', 'Remove Friend'), + view: vnode => [ + m('h3', 'Remove Friend'), m('hr'), m('p', 'Are you sure you want to end connections with this node?'), - m('button', { - onclick: () => { - rs.rsJsonApiRequest('/rsPeers/removeFriend', { - pgpId: vnode.attrs.gpg - }); - m.redraw(); - } - }, 'Confirm'), + m( + 'button', + { + onclick: () => { + rs.rsJsonApiRequest('/rsPeers/removeFriend', { + pgpId: vnode.attrs.gpg_id, + }); + m.redraw(); + }, + }, + 'Confirm', + ), ], }; }; -const Node = () => { +const Locations = () => { + return { + view: v => [ + m('h4', 'Locations'), + v.attrs.locations.map(loc => + m('.location', [ + m('i.fas.fa-user-tag'), + m('span', loc.name), + m('p', 'ID :'), + m('p', loc.id), + m('p', 'Last contacted :'), + m('p', new Date(loc.lastSeen * 1000).toDateString()), + m('p', 'Online :'), + m('i.fas', { + class: loc.isOnline ? 'fa-check-circle' : 'fa-times-circle', + }), + m( + 'button.red', + { + onclick: () => + widget.popupMessage( + m(ConfirmRemove, { + gpg: loc.gpg_id, + }), + ), + }, + 'Remove node', + ), + ]), + ), + ], + }; +}; + +const Friend = () => { return { - isOnline: false, isExpanded: false, - oninit(v) { - v.state.isOnline = false; - // check if any one location is online - v.attrs.data.map(node => rs.rsJsonApiRequest( - '/rsPeers/isOnline', { - sslId: node.id - }, (data) => data.retval ? v.state.isOnline = true : undefined)); - }, - view: (vnode) => m('.friend', { - key: vnode.attrs.data[0].gpg_id, - style: "display:" + (vnode.attrs.isSearched ? "block" : "none"), + key: vnode.attrs.id, + class: Data.gpgDetails[vnode.attrs.id].isSearched ? "" : "hidden", }, [ m('i.fas.fa-angle-right', { class: 'fa-rotate-' + (vnode.state.isExpanded ? '90' : '0'), onclick: () => vnode.state.isExpanded = !vnode.state.isExpanded, }), m('i.fas.fa-2x.fa-user-circle'), - m('span', vnode.attrs.data[0].name), + m('span', Data.gpgDetails[vnode.attrs.id].name), m('i.fas', { - class: vnode.state.isOnline ? 'fa-check-circle' : 'fa-times-circle' + class: Data.gpgDetails[vnode.attrs.id].isOnline ? 'fa-check-circle' : 'fa-times-circle' }), m('.details', { style: "display:" + (vnode.state.isExpanded ? "block" : "none"), }, [ - m('.grid-2col', [ - m('p', 'Last contacted :'), - m('p', new Date(vnode.attrs.data[0].lastConnect * 1000).toDateString()), - m('p', 'Online :'), - m('i.fas', { - class: vnode.state.isOnline ? 'fa-check-circle' : 'fa-times-circle' - }), - ]), - m('h4', 'Locations'), - vnode.attrs.data.map((loc) => m('.location', [ - m('i.fas.fa-user-tag'), m('span', loc.location), - m('p', 'ID :'), - m('p', loc.id), - m('p', 'Online :'), - m('i.fas', { - class: vnode.state.isOnline ? 'fa-check-circle' : 'fa-times-circle' - }), - m('button.red', { - onclick: () => widget.popupMessage(m(ConfirmRemove, { - gpg: loc.gpg_id, - })) - }, 'Remove node'), - ])), + m(Locations, {locations: Data.gpgDetails[vnode.attrs.id].locations}), ]) ]), }; }; -let FriendNodes = {}; - -let searchString = ''; const SearchBar = () => { + let searchString = ''; return { - view: () => m('input[type=text][placeholder=search].searchbar', { - value: searchString, - oninput: (e) => { - searchString = e.target.value.toLowerCase(); - for(let id in FriendNodes) { - if(FriendNodes[id].locations[0].name.toLowerCase().indexOf( - searchString) > -1) { - FriendNodes[id].isSearched = true; - } else { - FriendNodes[id].isSearched = false; + view: () => + m('input.searchbar', { + type: 'text', + placeholder: 'search', + value: searchString, + oninput: e => { + searchString = e.target.value.toLowerCase(); + for (let id in Data.gpgDetails) { + if ( + Data.gpgDetails[id].name.toLowerCase().indexOf(searchString) > -1 + ) { + Data.gpgDetails[id].isSearched = true; + } else { + Data.gpgDetails[id].isSearched = false; + } } - } - }, - }) + }, + }), }; }; -const Friends = () => { +const FriendsList = () => { return { oninit: () => { - data.refreshGpgDetails(); + Data.refreshGpgDetails(); }, - view: () => m('.widget', [ - m('h3', 'Friend nodes'), - m('hr'), - Object.keys(data.gpgDetails).map((id) => m(Node, { - data: data.gpgDetails[id].locations, - isSearched: data.gpgDetails[id].isSearched, - })), - ]), + view: () => + m('.widget', [ + m('h3', 'Friend nodes'), + m('hr'), + Object.keys(Data.gpgDetails).map(id => + m(Friend, {id}), + ), + ]), }; }; @@ -121,7 +130,7 @@ const Layout = () => { return { view: () => m('.tab-page', [ m(SearchBar), - m(Friends), + m(FriendsList), ]) } }; diff --git a/webui-src/app/network/network_data.js b/webui-src/app/network/network_data.js index 45c8540..a2e67de 100644 --- a/webui-src/app/network/network_data.js +++ b/webui-src/app/network/network_data.js @@ -32,14 +32,36 @@ module.exports = { .then(() => this.loadSslDetails()) .then(() => { this.sslDetails.map(data => { - if (details[data.gpg_id] === undefined) { - details[data.gpg_id] = {isSearched: true, locations: [data]}; - console.log(data); - } else { - details[data.gpg_id].locations.push(data); - } + let isOnline = false; + rs.rsJsonApiRequest( + '/rsPeers/isOnline', + {sslId: data.id}, + stat => (isOnline = stat.retval), + ).then(() => { + loc = { + name: data.location, + id: data.id, + lastSeen: data.lastConnect, + isOnline, + gpg_id: data.gpg_id, + }; + + if (details[data.gpg_id] === undefined) { + details[data.gpg_id] = { + name: data.name, + isSearched: true, + isOnline, + locations: [loc], + }; + } else { + details[data.gpg_id].locations.push(loc); + } + details[data.gpg_id].isOnline = + details[data.gpg_id].isOnline || isOnline; + + this.gpgDetails = details; + }); }); - this.gpgDetails = details; }); }, };