a little better render of pubsub (with features !)

src/sidebar/panel.css

@@ -10,6 +10,21 @@ div.panel.enabled{
     display: block;
 }
 
+.features {
+    grid-template-columns: 1fr;
+    grid-gap: 1rem;
+}
+
+.features > div
+{
+    grid-column: 1;
+}
+
+.features > ul
+{
+    grid-column: 1;
+}
+
 #firstrunpanel > object {
     width: 100%;
     height: 72vh;

src/sidebar/panel.html

@@ -62,6 +62,20 @@
             <div id="xmppNet"></div>
         </script>
 
+        <script id="xmppNet-tmpl" type="x-tmpl-mustache">
+            {{#pubsub}}
+                <h2>{{name}} ({{jid}})</h2>
+                <div class='features'>
+                    <div>ⓘ</div>
+                    <ul>
+                        {{#features}}
+                            <li>{{feature}}</li>
+                        {{/features}}
+                    </ul>
+                </div>
+            {{/pubsub}}
+        </script>
+
         <script src="../3rdparty/mustache.js/mustache.js"></script>
         <script src="panel.js"></script>
     </body>

src/sidebar/panel.js

@@ -68,20 +68,23 @@ function checkConnection() {
 function refreshNetwork(response) {
     if (!response.error) {
         let xmppNet = document.getElementById('xmppNet');
-        let pubsubNet = {'pubsub': []}
+        let pubsubNet = {'pubsub': new Array()}
 
-        let pubsubIterator = response.network.pubsub.keys();
-        let isIteratorDone = false
-        while (!isIteratorDone) {
-            let pubsub = pubsubIterator.next();
-            isIteratorDone = pubsub.done;
+        response.network.pubsub.forEach( (entity, jid) => {
+            let features = new Array();
 
-            if (!isIteratorDone) {
-                pubsubNet['pubsub'].push({'name': pubsub.value});
-            }
-        }
+            entity['metadata']['features'].forEach( (feature) => {
+                features.push({'feature': feature});
+            });
+
+            pubsubNet['pubsub'].push({'name': entity['metadata']['name'] || jid,
+                'jid': jid,
+                'features': features
+            });
+
+        });
 
-        xmppNet.innerHTML = Mustache.render('{{#pubsub}}{{name}}<br>{{/pubsub}}', pubsubNet);
+        xmppNet.innerHTML = Mustache.render(document.querySelector('#xmppNet-tmpl').innerHTML, pubsubNet);
     }
     else {
         panel['error'].className = 'panel enabled';

src/xmpp/network.js

@@ -16,8 +16,8 @@ class Network {
         this.entities = new Map();
 
         // key: serviceid (jid?)
-        // object: array(metaData, nodeMap, collectionMap, leafMap)
-        // metaData:  name (string), features (set)
+        // object: array(metadata, nodeMap, collectionMap, leafMap)
+        // metadata:  array(name (string), features (set))
         this.pubsub = new Map();
 
         // key: serviceid
@@ -37,12 +37,13 @@ class Network {
                     // If pubsub service is discoverd save it on the pubsub/services path
                     if (idKey.type == "service"
                         && idKey.category == "pubsub") {
-                        let service = new Map();
-                        service.set("metaData", new Map());
-                        service.get("metaData").set("name", idValue);
-                        service.get("metaData").set("features", new Set());
-                        service.set("collections", new Map());
-                        service.set("leaves", new Map());
+                        let service = new Array();
+                        service["metadata"] = new Array();
+                        service["metadata"]["name"] = idValue;
+                        service["metadata"]["features"] = new Set();
+                        service["nodes"] = new Map();
+                        service["collections"] = new Map();
+                        service["leaves"] = new Map();
                         this.pubsub.set(_netElement.jid, service);
                     }
                 }
@@ -56,12 +57,12 @@ class Network {
                 for (let [idKey, idValue] of _netElement.identities) {
                     if (idKey.type == "pubsub"
                         && idKey.category == "collection") {
-                        service.get("collections").set(idKey.node, new Map());
+                        service["collections"].set(idKey.node, new Map());
                     }
 
                     if (idKey.type == "pubsub"
                         && idKey.category == "leaf") {
-                        service.get("leaves").set(idKey.node, new Map());
+                        service["leaves"].set(idKey.node, new Map());
                     }
                 }
             }
@@ -75,7 +76,7 @@ class Network {
             if (service) {
                 for (let feature of _netElement.featureSet) {
                     // TODO: decide which features to track and how to use them
-                    service.get("metaData").get("features").add(feature);
+                    service["metadata"]["features"].add(feature);
                 }
             }
         }