bpletzer/test.html

## test.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style media="screen" type="text/css">
      body {
        background: white;
        font-family: Roboto,Helvetica,Arial,sans-serif;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0;
      }
      th {
        text-align: left;
      }
    </style>
  </head>
  <body>
    <script>
      function getQueryParams(qs) {
          qs = qs.split('+').join(' ');
          var params = {},
              tokens,
              re = /[?&]?([^=]+)=([^&]*)/g;
          while (tokens = re.exec(qs)) {
              params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
          }
          return params;
      }

      function updateTimestamp() {
        var now = new Date();
        document.getElementById("timestamp").textContent = now.toLocaleTimeString();
      }

      function updateAnalyticsData(newData) {
        var el = document.createElement('div');
        var att = document.createAttribute("id");
        att.value = "data";
        el.setAttributeNode(att);
        el.innerHTML = newData;
        var data = document.getElementById("data");
        var parentDiv = data.parentNode;
        parentDiv.replaceChild(el, data);
      }

      if (!!window.EventSource) {
        var query = getQueryParams(document.location.search);
        var account = query.account;
        var user = query.user;
        var source = new EventSource('/amp-analytics/embed/listen?account=' + account + '&user=' + user);
        console.log('adding event listener for ' + account + ' and ' + user);
        source.onmessage = function(e) {
          updateAnalyticsData(e.data);
          updateTimestamp();
        };
      }
    </script>
    <div id="data">No data</div>
    <p>Last updated: <span id="timestamp">n/a</span></p>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<style media="screen" type="text/css">
	body {
	background: white;
	font-family: Roboto,Helvetica,Arial,sans-serif;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	}
	th {
	text-align: left;
	}
	</style>
	</head>
	<body>
	<script>
	function getQueryParams(qs) {
	qs = qs.split('+').join(' ');
	var params = {},
	tokens,
	re = /[?&]?([^=]+)=([^&]*)/g;
	while (tokens = re.exec(qs)) {
	params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
	}
	return params;
	}

	function updateTimestamp() {
	var now = new Date();
	document.getElementById("timestamp").textContent = now.toLocaleTimeString();
	}

	function updateAnalyticsData(newData) {
	var el = document.createElement('div');
	var att = document.createAttribute("id");
	att.value = "data";
	el.setAttributeNode(att);
	el.innerHTML = newData;
	var data = document.getElementById("data");
	var parentDiv = data.parentNode;
	parentDiv.replaceChild(el, data);
	}

	if (!!window.EventSource) {
	var query = getQueryParams(document.location.search);
	var account = query.account;
	var user = query.user;
	var source = new EventSource('/amp-analytics/embed/listen?account=' + account + '&user=' + user);
	console.log('adding event listener for ' + account + ' and ' + user);
	source.onmessage = function(e) {
	updateAnalyticsData(e.data);
	updateTimestamp();
	};
	}
	</script>
	<div id="data">No data</div>
	<p>Last updated: <span id="timestamp">n/a</span></p>
	</body>
	</html>