<!doctype html>
<html lang=en>
	<head>
		<meta charset=utf-8>
		<meta name=viewport content="width=device-width, initial-scale=1">
		<title>system output</title>
<style>
h1 { font-family: helvetica, sans-serif; margin: 0; }
h1+p { margin: 0; }
li { font-family: Courier; list-style-type: '>';}
pre { margin-top:0; margin-bottom:0;}
.term { background-color:black; color:white; font-weight:bold;padding-top:10px; padding-bottom:10px; max-height:400px; overflow: scroll;}
span.timestamp { font-family: monospace; white-space: pre;width: 50px;}
span.value_z { background-color: darkblue;}
span.value_1 { background-color: green;}
span.value_0 { background-color: yellow;}
span.value_x { background-color: red;}
</style>
	</head>
	<body>
		<h1>system output</h1>
		<div id="top">
		</div>
		<script>
		String.format = function() {
		    // The string containing the format items (e.g. "{0}")
		    // will and always has to be the first argument.
		    var theString = arguments[0];
		    // start with the second argument (i = 1)
		    for (var i = 1; i < arguments.length; i++) {
		        // "gm" = RegEx options for Global search (more than one instance)
		        // and for Multiline search
		        var regEx = new RegExp("\\{" + (i - 1) + "\\}", "gm");
		        theString = theString.replace(regEx, arguments[i]);
		    }
		    
		    return theString;
		}
		String.prototype.paddingLeft = function (paddingValue) {
			return String(paddingValue + this).slice(-paddingValue.length);
		};
		var log = function (n, m) {
			console.log(m);
	        var data = JSON.parse(m);
	        if( data.hasOwnProperty("message") ) {
				var ul = document.getElementById(n);
			    var li = document.createElement('li');
			    var p = document.createElement('pre');
		        // i.innerText = new Date().toISOString()+': '+m;
		        p.innerText = '['+data.time.paddingLeft('                    ')+'] '+ data.message;
		        li.appendChild(p);
			    ul.appendChild(li);
			    var objDiv = document.getElementById(n + '_container');
			    objDiv.scrollTop = objDiv.scrollHeight;
			} else if(data.hasOwnProperty("data")){
				var ul = document.getElementById(n);
			    var li = document.createElement('li');
			    var span = document.createElement('span');
			    span.className="timestamp";
			    span.innerText='['+data.time.paddingLeft('                    ')+']'
			    li.appendChild(span);
			    var s = data.data;
			    for ( var i = 0; i < s.length; i++ ){
				    var spani = document.createElement('span');
				    if(s.charAt(i) == 'Z')
				    	spani.className="value_z";
				    else if(s.charAt(i) == '1')
				    	spani.className="value_1";
				    else if(s.charAt(i) == '0')
				    	spani.className="value_0";
				    else if(s.charAt(i) == 'X')
				    	spani.className="value_x";
				    spani.appendChild(document.createTextNode('\u00A0'));
				    li.appendChild(spani);			    	
			    }
			    ul.appendChild(li);
			    var objDiv = document.getElementById(n + '_container');
			    objDiv.scrollTop = objDiv.scrollHeight;
			}
		}
		var open_connection = function(name){
			var s = new WebSocket('ws://'+window.location.host+'/ws/i_system.i_hifive1.i_'+name);
			s.addEventListener('error',   function (m) { log(name, new Date().toISOString()+': ===connection error ==='); });
			s.addEventListener('open',    function (m) { log(name, new Date().toISOString()+': ===connection opened==='); });
			s.addEventListener('message', function (m) { log(name, m.data); });
			s.addEventListener('close',   function (m) { log(name, new Date().toISOString()+': ===connection closed==='); });
		}
		var createElem = function(n){
			var top = document.getElementById('top');
			var p = document.createElement('p');
			p.innerText="Component " + n;
			var div = document.createElement('div');
			div.className = "term";
			div.id= n + '_container';
			var ul = document.createElement('ul');
			ul.id= n;
			div.appendChild(ul);
			top.appendChild(p);
			top.appendChild(div);
			open_connection(n);
		}
		createElem("terminal");
		</script>
	</body>
</html>