monitoring: Add CSS/style/theme switch dynamically

This can be useful when presenting the monitoring
to switch from a dark theme to a light theme
dynamically.

Change-Id: I25beffe2071e7a71d7ad493099ab3bb674de8461
Signed-off-by: José Bollo <jose.bollo@iot.bzh>

diff --git a/test/monitoring/monitor.html b/test/monitoring/monitor.html
index 22f090e..2c07c1b 100644 (file)
--- a/test/monitoring/monitor.html
+++ b/test/monitoring/monitor.html
@@ -18,7 +18,8 @@
 -->
     <title>Monitoring</title>
     <link href="monitor-base.css" rel="stylesheet">
-    <link href="monitor-demo.css" rel="stylesheet">
+    <link href="monitor-demo.css" rel="stylesheet" title="demo">
+    <link href="monitor-pastel.css" rel="alternate stylesheet" title="pastel">
     <script type="text/javascript" src="underscore-min.js"></script>
     <script type="text/javascript" src="AFB.js"></script>
     <script type="text/javascript" src="monitor.js"></script>
@@ -67,6 +68,7 @@
       <div id="menu" class="-flex-v">
         <div id="connect" class="x-button">Connect</div>
         <div id="disconnect" class="x-button">Disconnect</div>
+        <div id="style" class="x-button">style</div>
         <div id="autoscroll" class="x-button">Stop scroll</div>
         <div id="addsep" class="x-button">Add separator</div>
         <div id="droptracevts" class="x-button">Clear traces</div>

diff --git a/test/monitoring/monitor.js b/test/monitoring/monitor.js
index 6ca75cc..5b9dc0e 100644 (file)
--- a/test/monitoring/monitor.js
+++ b/test/monitoring/monitor.js
@@ -39,6 +39,8 @@ var logmsgs_node;
 var apis_node;
 var all_node;
 
+var styles;
+
 /* flags */
 var show_perms = false;
 var show_monitor_events = false;
@@ -81,7 +83,14 @@ function on_connect(evt) {
        connect();
 }
 
+function next_style(evt) {
+       styles.next();
+}
+
 function init() {
+       styles = makecss();
+       at("style").onclick = next_style;
+
        /* prepare the DOM templates */
        t_api = at("t-api").content.firstElementChild;
        t_verb = at("t-verb").content.firstElementChild;
@@ -510,3 +519,44 @@ function obj2html(json) {
                });
 }
 
+function makecss()
+{
+       var i, l, a, links, x;
+
+       x = { idx: 0, byidx: [], byname: {}, names: [] };
+       links = document.getElementsByTagName("link");
+       for (i = 0 ; i < links.length ; i++) {
+               l = links[i];
+               if (l.title && l.rel.indexOf( "stylesheet" ) != -1) {
+                       if (!(l.title in x.byname)) {
+                               x.byname[l.title] = x.byidx.length;
+                               x.names.push(l.title);
+                               x.byidx.push([]);
+                       }
+                       x.byidx[x.byname[l.title]].push(l);
+               }
+       }
+
+       x.set = function(id) {
+               if (id in x.byname)
+                       id = x.byname[id];
+               if (id in x.byidx) {
+                       var i, j, a, b;
+                       x.idx = id;
+                       a = x.byidx;
+                       for (i = 0 ; i < a.length ; i++) {
+                               b = a[i];
+                               for (j = 0 ; j < b.length ; j++)
+                                       b[j].disabled = i != id;
+                       }
+               }
+       };
+
+       x.next = function() {
+               x.set((x.idx + 1) % x.byidx.length);
+       };
+
+       x.set(0);
+       return x;
+}
+