rcrichton/demo.html

## demo.html
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Le styles -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <style>
      body { padding-top: 60px; /* 60px to make the container go all the way
      to the bottom of the topbar */ }
    </style>
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
      </script>
    <![endif]-->
    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
    <style>
    </style>
  </head>
  <body>
    <h1>
      <div style="text-align: center;">
        OpenHIE HIMSS Showcase Demo
      </div>
    </h1>
    <hr>
    <div class="container">
      <div class="hero-unit">
        <div>
          <h1 id="date" style="text-align: center;">
          </h1>
          <div id="time" style="text-align: center;">
          </div>
        </div>
      </div>
      <h3>
        <div style="text-align: center;">
          Time travel!
        </div>
      </h3>
      <div>
        <p style="text-align: center;">
          Take me to...
        </p>
      </div>
      <center>
        <div class="btn-group">
          <a class="btn btn-primary" href="#" onclick="timeWarp(0)">
            Clinic visit 1
          </a>
          <a class="btn btn-info" href="#" onclick="timeWarp(1)">
            CHW visit
          </a>
          <a class="btn btn-primary" href="#" onclick="timeWarp(2)">
            Clinic visit 2
          </a>
          <a class="btn btn-success" href="#" onclick="timeWarp(3)">
            Hospital visit
          </a>
        </div>
      </center>
      <hr>
      <a class="btn btn-danger btn-large" href="#" onclick="resetDemo()">
        <div style="text-align: center;">
          Reset Demo!
        </div>
      </a>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
    </script>
    <script src="assets/js/bootstrap.js">
    </script>
    <script>
      var ntp_host = 'http://localhost';
      var openmrs_clinic_host = 'http://localhost';
      var openmrs_hosp_host = 'http://localhost';
      var openxds_host = 'http://localhost';

      function updateDateTime() {
        var today = new Date();

        var dd = today.getDate();
        if(dd<10){dd='0'+dd};

        var mm = today.getMonth()+1; //January is 0!
        if(mm<10){mm='0'+mm};

        var yyyy = today.getFullYear();

        var date = mm+'/'+dd+'/'+yyyy;

        var hh = today.getHours();
        if(hh<10){hh='0'+hh};

        var MM = today.getMinutes();
        if(MM<10){MM='0'+MM};

        var ss = today.getSeconds();
        if(ss<10){ss='0'+ss};

        var time = hh+':'+MM+':'+ss;

        $("#date").html(date);
        $("#time").html(time);
      }

      updateDateTime();
      setInterval("updateDateTime()", 1000);

      function timeWarp(n) {
        var date;
        if (n == 0)
          date = '03041000';
        if (n == 1)
          date = '04081100';
        if (n == 2)
          date = '04091300';
        if (n == 3)
          date = '04121300';

        $.get(
          ntp_host+"/demo.php",
          {type : 'clockset', date : date},
          function(data) {
            if (data == 0) {
              alert('Successful time warp!');
            } else {
              alert('Failed time warp...');
            }
          }
        );
      }

      function resetDemo() {
        // reset OpenMRS Clinic
        $.get(
          openmrs_clinic_host+"/demo.php",
          {type : 'cleanopenmrs'},
          function(data) {
            if (data == 0) {
              alert('Success: reset OpenMRS Clinic');
            } else {
              alert('Failed: reset OpenMRS Clinic');
            }
          }
        );

        // reset OpenMRS Hospital
        $.get(
          openmrs_hosp_host+"/demo.php",
          {type : 'cleanopenmrs'},
          function(data) {
            if (data == 0) {
              alert('Success: reset OpenMRS Hospital');
            } else {
              alert('Failed: reset OpenMRS Hospital');
            }
          }
        );

        // reset OpenXDS
        $.get(
          openxds_host+"/demo.php",
          {type : 'cleanopenxds'},
          function(data) {
            if (data == 0) {
              alert('Success: reset OpenXDS');
            } else {
              alert('Failed: reset OpenXDS');
            }
          }
        );
      }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<title>
	</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">
	<!-- Le styles -->
	<link href="assets/css/bootstrap.css" rel="stylesheet">
	<style>
	body { padding-top: 60px; /* 60px to make the container go all the way
	to the bottom of the topbar */ }
	</style>
	<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
	<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
	<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
	</script>
	<![endif]-->
	<!-- Le fav and touch icons -->
	<link rel="shortcut icon" href="assets/ico/favicon.ico">
	<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
	<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
	<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
	<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
	<style>
	</style>
	</head>
	<body>
	<h1>
	<div style="text-align: center;">
	OpenHIE HIMSS Showcase Demo
	</div>
	</h1>
	<hr>
	<div class="container">
	<div class="hero-unit">
	<div>
	<h1 id="date" style="text-align: center;">
	</h1>
	<div id="time" style="text-align: center;">
	</div>
	</div>
	</div>
	<h3>
	<div style="text-align: center;">
	Time travel!
	</div>
	</h3>
	<div>
	<p style="text-align: center;">
	Take me to...
	</p>
	</div>
	<center>
	<div class="btn-group">
	<a class="btn btn-primary" href="#" onclick="timeWarp(0)">
	Clinic visit 1
	</a>
	<a class="btn btn-info" href="#" onclick="timeWarp(1)">
	CHW visit
	</a>
	<a class="btn btn-primary" href="#" onclick="timeWarp(2)">
	Clinic visit 2
	</a>
	<a class="btn btn-success" href="#" onclick="timeWarp(3)">
	Hospital visit
	</a>
	</div>
	</center>
	<hr>
	<a class="btn btn-danger btn-large" href="#" onclick="resetDemo()">
	<div style="text-align: center;">
	Reset Demo!
	</div>
	</a>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
	</script>
	<script src="assets/js/bootstrap.js">
	</script>
	<script>
	var ntp_host = 'http://localhost';
	var openmrs_clinic_host = 'http://localhost';
	var openmrs_hosp_host = 'http://localhost';
	var openxds_host = 'http://localhost';

	function updateDateTime() {
	var today = new Date();

	var dd = today.getDate();
	if(dd<10){dd='0'+dd};

	var mm = today.getMonth()+1; //January is 0!
	if(mm<10){mm='0'+mm};

	var yyyy = today.getFullYear();

	var date = mm+'/'+dd+'/'+yyyy;

	var hh = today.getHours();
	if(hh<10){hh='0'+hh};

	var MM = today.getMinutes();
	if(MM<10){MM='0'+MM};

	var ss = today.getSeconds();
	if(ss<10){ss='0'+ss};

	var time = hh+':'+MM+':'+ss;

	$("#date").html(date);
	$("#time").html(time);
	}

	updateDateTime();
	setInterval("updateDateTime()", 1000);

	function timeWarp(n) {
	var date;
	if (n == 0)
	date = '03041000';
	if (n == 1)
	date = '04081100';
	if (n == 2)
	date = '04091300';
	if (n == 3)
	date = '04121300';

	$.get(
	ntp_host+"/demo.php",
	{type : 'clockset', date : date},
	function(data) {
	if (data == 0) {
	alert('Successful time warp!');
	} else {
	alert('Failed time warp...');
	}
	}
	);
	}

	function resetDemo() {
	// reset OpenMRS Clinic
	$.get(
	openmrs_clinic_host+"/demo.php",
	{type : 'cleanopenmrs'},
	function(data) {
	if (data == 0) {
	alert('Success: reset OpenMRS Clinic');
	} else {
	alert('Failed: reset OpenMRS Clinic');
	}
	}
	);

	// reset OpenMRS Hospital
	$.get(
	openmrs_hosp_host+"/demo.php",
	{type : 'cleanopenmrs'},
	function(data) {
	if (data == 0) {
	alert('Success: reset OpenMRS Hospital');
	} else {
	alert('Failed: reset OpenMRS Hospital');
	}
	}
	);

	// reset OpenXDS
	$.get(
	openxds_host+"/demo.php",
	{type : 'cleanopenxds'},
	function(data) {
	if (data == 0) {
	alert('Success: reset OpenXDS');
	} else {
	alert('Failed: reset OpenXDS');
	}
	}
	);
	}
	</script>
	</body>
	</html>