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>

2 files changed, 53 insertions, 1 deletions

diff --git a/test/monitoring/monitor.html b/test/monitoring/monitor.html
index 22f090ed..2c07c1ba 100644
--- 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 6ca75cc6..5b9dc0ea 100644
--- 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;
+}
+