display last seen, online for each node separately

This commit is contained in:
Mohammed Saud 2019-10-06 22:05:13 +05:30
parent 653d977130
commit 0fd9010dfc
3 changed files with 119 additions and 85 deletions

View File

@ -20,6 +20,9 @@
.friend button {
font-size: 0.9em;
}
.friend.hidden {
display: none;
}
.friend .location {
margin: 5px;

View File

@ -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),
])
}
};

View File

@ -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;
});
},
};