perlpilot/index.tt

## index.tt
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<head>
<title>Pharos Environmental Software Control Panel</title>

[% css('jquery-ui') %]
[% css('bootstrap.min') %]

<link rel="shortcut icon" href="[% c.uri_for('/static/images/lighthouse.ico') %]" />
<style>
body {
  font-size: 12px !important;
  line-height:  1.2 !important;
}

.navbar-brand {
  color: lightblue !important;
  border-right: thin dotted #999999;
}

.navbar.active {
  background-color: lightblue !important;
}
</style>

</head>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
<body>

<div class="navbar navbar-inverse navbar-default navbar-static-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand">Pharos</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a data-action="qc" class="action active" href="#">QCs</a></li>
        <li><a data-toggle="navbar-inner" data-target=".nav2" href="#" >Meta</a></li>
        <li><a href="#" >Sitevisits</a></li>
        <li><a href="#" >Benchmarks</a></li>
        <li><a href="#" >Datums</a></li>
      <li>
    </div>
  </div>
</div>

<div class="navbar">
  <div class="navbar-inner">
    <div class="nav2">
      <ul class="nav">
        <li><a href="#">Station Manager</a></li>
        <li><a href="#">Attributes</a></li>
        <li><a href="#">Corrections</a></li>
        <li><a href="#">Images link</a></li>
        <li><a href="#">Calibrations</a></li>
      </ul>
    </div>
    <div class="nav3">
      <ul class="nav">
        <li><a href="#">Download Blank Water Level Report</a></li>
        <li><a href="#">Upload Water Level Report</a></li>
        <li><a href="#">Upload Realtime Current Report</a></li>
      </ul>
    </div>

    <div class="nav4">
      <ul class="dropdown-menu">
        <li><a class="action" href="#">New Mark</a></li>
        <li><a class="action" href="#">New Levels</a></li>
        <li><a class="action" href="#">Edit SPSNs</a></li>
        <li><a class="action" href="#">Edit PIDs</a></li>
        <li><a class="action" href="#">Set accepted elevations</a></li>
        <li><a class="action" data-action="levcheck" href="#">Levels check</a></li>
      </ul>
    </div>
    <div class="nav5">
      <ul class="dropdown-menu">
        <li><a class="action" data-action="monthly" href="#">Monthly Summaries</a></li>
        <li><a class="action" href="#">Tabulations</a></li>
        <li><a class="action" href="#">Comparisons</a></li>
        <li><a class="action" data-action="levcheck" href="#">Levels check</a></li>
      </ul>
    </div>
  </div>
</div>

<div class="container">

  <div class="row" >

    <div class="col-xs-2 col-lg-2 sidebar-offcanvas sidebar-offcanvas-left container" role="navigation">
      <div class="form-group small row">
        <input class="form-control input-sm" type="text" value=":qc:" id="stnspec" />
      </div>

      <div class="list-group stnlist" id="stnlist"></div>
    </div>


    <div class="col-xs-9 col-lg-9" id="pcp_content">[% content %]</div>


  </div>

</div>

[% js('underscore.min') %]
[% js('jquery') %]
[% js('jquery-ui') %]
[% js('bootstrap.min') %]
[% js('highcharts/highstock.src') %]
[% js('highcharts/themes/grid') %]

<script>

function update_stations(stnspec) {
  $.get("/api/v0/stninfo/" + stnspec, function (data) {
    var stations = [];
    $.each(data, function(k,v) { stations.push(v); });
    stations.sort(function (a,b) { return a.stnid == b.stnid ? 0 : a.stnid < b.stnid ? -1 : 1; });
    var first_time = 1;
    var html = _.map(stations, function (v) {
      var active = first_time ? "active" : ""; first_time = 0;
      return '<a data-stnid="'+v.stnid+'" class="stnlist list-group-item '+active+'" title="'+v.name+'" href="#">' + v.stnid + ' ' + v.abbr + '</a>'
    }).join('');
    $('#stnlist').html(html);
  });
}

var extra = "";

function update_content() {
  var action = $('.action.active').attr('data-action');
  var stnid = $('.stnlist.active').attr('data-stnid');
  var url = "/pcp/" + action + "/" + stnid;
  if (extra) { url  = url + "/" + extra }
  $.get(url, function (data) { $('#pcp_content').html(data); });
  extra = "";
}

$(function() {
  update_stations( $('#stnspec').val() );

  $('#stnspec').change(function () {
    update_stations( $('#stnspec').val() );
  });


  $('.stnlist').on('click', function (e) {
    $('.stnlist.active').removeClass('active');
    $(e.target).addClass('active');
    update_content();
  });

  $('.action').on('click', function (e) {
    $('.action.active').removeClass('active');
    $(e.target).addClass('active');
    update_content();
  });

});
</script>

</body>
</html>
	<?xml version="1.0" encoding="UTF-8"?>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


	<head>
	<title>Pharos Environmental Software Control Panel</title>

	[% css('jquery-ui') %]
	[% css('bootstrap.min') %]

	<link rel="shortcut icon" href="[% c.uri_for('/static/images/lighthouse.ico') %]" />
	<style>
	body {
	font-size: 12px !important;
	line-height: 1.2 !important;
	}

	.navbar-brand {
	color: lightblue !important;
	border-right: thin dotted #999999;
	}

	.navbar.active {
	background-color: lightblue !important;
	}
	</style>

	</head>

	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->
	<body>

	<div class="navbar navbar-inverse navbar-default navbar-static-top" role="navigation">
	<div class="container">
	<div class="navbar-header">
	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>
	<a class="navbar-brand">Pharos</a>
	</div>
	<div class="navbar-collapse collapse">
	<ul class="nav navbar-nav">
	<li><a data-action="qc" class="action active" href="#">QCs</a></li>
	<li><a data-toggle="navbar-inner" data-target=".nav2" href="#" >Meta</a></li>
	<li><a href="#" >Sitevisits</a></li>
	<li><a href="#" >Benchmarks</a></li>
	<li><a href="#" >Datums</a></li>
	<li>
	</div>
	</div>
	</div>

	<div class="navbar">
	<div class="navbar-inner">
	<div class="nav2">
	<ul class="nav">
	<li><a href="#">Station Manager</a></li>
	<li><a href="#">Attributes</a></li>
	<li><a href="#">Corrections</a></li>
	<li><a href="#">Images link</a></li>
	<li><a href="#">Calibrations</a></li>
	</ul>
	</div>
	<div class="nav3">
	<ul class="nav">
	<li><a href="#">Download Blank Water Level Report</a></li>
	<li><a href="#">Upload Water Level Report</a></li>
	<li><a href="#">Upload Realtime Current Report</a></li>
	</ul>
	</div>

	<div class="nav4">
	<ul class="dropdown-menu">
	<li><a class="action" href="#">New Mark</a></li>
	<li><a class="action" href="#">New Levels</a></li>
	<li><a class="action" href="#">Edit SPSNs</a></li>
	<li><a class="action" href="#">Edit PIDs</a></li>
	<li><a class="action" href="#">Set accepted elevations</a></li>
	<li><a class="action" data-action="levcheck" href="#">Levels check</a></li>
	</ul>
	</div>
	<div class="nav5">
	<ul class="dropdown-menu">
	<li><a class="action" data-action="monthly" href="#">Monthly Summaries</a></li>
	<li><a class="action" href="#">Tabulations</a></li>
	<li><a class="action" href="#">Comparisons</a></li>
	<li><a class="action" data-action="levcheck" href="#">Levels check</a></li>
	</ul>
	</div>
	</div>
	</div>

	<div class="container">

	<div class="row" >

	<div class="col-xs-2 col-lg-2 sidebar-offcanvas sidebar-offcanvas-left container" role="navigation">
	<div class="form-group small row">
	<input class="form-control input-sm" type="text" value=":qc:" id="stnspec" />
	</div>

	<div class="list-group stnlist" id="stnlist"></div>
	</div>


	<div class="col-xs-9 col-lg-9" id="pcp_content">[% content %]</div>


	</div>

	</div>

	[% js('underscore.min') %]
	[% js('jquery') %]
	[% js('jquery-ui') %]
	[% js('bootstrap.min') %]
	[% js('highcharts/highstock.src') %]
	[% js('highcharts/themes/grid') %]

	<script>

	function update_stations(stnspec) {
	$.get("/api/v0/stninfo/" + stnspec, function (data) {
	var stations = [];
	$.each(data, function(k,v) { stations.push(v); });
	stations.sort(function (a,b) { return a.stnid == b.stnid ? 0 : a.stnid < b.stnid ? -1 : 1; });
	var first_time = 1;
	var html = _.map(stations, function (v) {
	var active = first_time ? "active" : ""; first_time = 0;
	return '<a data-stnid="'+v.stnid+'" class="stnlist list-group-item '+active+'" title="'+v.name+'" href="#">' + v.stnid + ' ' + v.abbr + '</a>'
	}).join('');
	$('#stnlist').html(html);
	});
	}

	var extra = "";

	function update_content() {
	var action = $('.action.active').attr('data-action');
	var stnid = $('.stnlist.active').attr('data-stnid');
	var url = "/pcp/" + action + "/" + stnid;
	if (extra) { url = url + "/" + extra }
	$.get(url, function (data) { $('#pcp_content').html(data); });
	extra = "";
	}

	$(function() {
	update_stations( $('#stnspec').val() );

	$('#stnspec').change(function () {
	update_stations( $('#stnspec').val() );
	});


	$('.stnlist').on('click', function (e) {
	$('.stnlist.active').removeClass('active');
	$(e.target).addClass('active');
	update_content();
	});

	$('.action').on('click', function (e) {
	$('.action.active').removeClass('active');
	$(e.target).addClass('active');
	update_content();
	});

	});
	</script>

	</body>
	</html>