Separate network tab stylesheet

webui-src/app/network.css

@@ -1,15 +0,0 @@
-.friend {
-    color: #444;
-    font-size: 1.2em;
-    margin: 1em;
-    padding: 20px;
-    border-bottom: 1px solid #aaa;
-    border-radius: 20px;
-}.friend i {
-    float: left;
-    padding: 0 10px;
-    cursor: pointer;
-}.friend h4 {
-    margin-bottom: 5px;
-}
-

webui-src/app/network/network.css

@@ -0,0 +1,34 @@
+.friend {
+    color: #444;
+    font-size: 1.2em;
+    margin: 1em;
+    padding: 20px;
+    border-bottom: 1px solid #aaa;
+    border-radius: 20px;
+}
+.friend i {
+    float: left;
+    padding: 0 10px;
+    cursor: pointer;
+}
+.friend h4 {
+    margin-bottom: 5px;
+}
+.friend p {
+    margin: 0;
+}
+.friend button {
+    font-size: 0.9em;
+}
+
+.friend .location {
+    display: grid;
+    grid-template-columns: auto auto;
+    justify-content: start;
+}
+
+.friend .fa-times-circle {
+    color: #bd0909;
+}.friend .fa-check-circle {
+    color: green;
+}

webui-src/app/network/network.js

@@ -2,9 +2,32 @@ let m = require('mithril');
 let rs = require('rswebui');
 
 
+const ConfirmRemove = () => {
+  return {
+    view: (vnode) => [m('h3', 'Remove Friend'),
+      m('hr'),
+      m('p', 'Are you sure you want to end connections with this peer?'),
+      m('button', {
+        onclick: () => {
+          rs.rsJsonApiRequest('/rsPeers/removeFriend', {
+            pgpId: vnode.attrs.gpg
+          });
+          m.redraw();
+        }
+      }, 'Confirm'),
+    ],
+  };
+};
+
 const Node = () => {
   return {
+    isOnline: true,
     isExpanded: false,
+
+    oninit: (vnode) => rs.rsJsonApiRequest('/rsPeers/isOnline', {
+      sslId: vnode.attrs.data[0].id,
+    }, (data) => vnode.state.isOnline = data.retval),
+
     view: (vnode) => m('.friend', {
       key: vnode.attrs.data[0].gpg_id
     }, [
@@ -13,6 +36,7 @@ const Node = () => {
         onclick: () => {
           vnode.state.isExpanded = !vnode.state.isExpanded;
           console.log(vnode.attrs.data)
+          console.log(vnode.state)
         },
       }),
       m('i.fas.fa-2x.fa-user-circle'),
@@ -21,13 +45,24 @@ const Node = () => {
         style: "display:" + (vnode.state.isExpanded ? "block" : "none"),
       }, [
         m('.grid-2col', [
-          m('p', 'Last contact:'),
+          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('button.red', {
+          onclick: () => rs.popupMessage(m(ConfirmRemove, {
+            gpg: vnode.attrs.data[0].gpg_id
+          }))
+        }, 'Remove friend'),
       ])
     ]),
   };

webui-src/app/theme.css

@@ -273,27 +273,6 @@ a.tab-menu-item {
     color: white;
 }
 
-/* View for upload/download file information */
-.file-view {
-    width: 90%;
-    border-radius: 10px;
-    border: 1px solid #ccc;
-    margin-top: 2em;
-    padding: 1em;
-    animation: fadein 0.5s;
-}.file-view > p {
-    margin: 0.5em;
-    font-size: 1.1em;
-}.file-view > span {
-    margin: 0 1em;
-    font-size: 0.9em;
-}.file-view > .progressbar {
-    width: 70%;
-}.file-view button {
-    float: right;
-}
-
-/* Sidebar from config panel */
 .sidebar {
     position: fixed;
     height: 100%;

webui-src/make-src/build.sh

@@ -48,7 +48,7 @@ if [ "$2" = "" ]||[ "$2" = "app.css" ]; then
         #cat $src/app/theme.css >> $publicdest/app.css
 	cat $src/make-src/main.css >> $publicdest/app.css
 	#cat $src/make-src/chat.css >> $publicdest/app.css
-	for filename in $src/app/*.css; do
+	for filename in $src/app/**/*.css; do
 		fname=$(basename "$filename")
 		fname="${fname%.*}"
                 echo - adding $fname ...