<!doctype html>

<head>
	<meta charset="utf-8">
	<title>{{dmType}}</title>
	<script src="/static/js/d3/d3.v3.min.js"></script>
	<script src="/static/js/dm.js"></script>
	<script src="/static/js/jquery-1.11.3.min.js"></script>
	<script src="/static/js/bootstrap.min.js"></script>
	<script src="/static/js/bootbox.min.js"></script>
	<link rel="icon" href="data:;base64,iVBORw0KGgo=">
	<link href="/static/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
</head>

<body>

<div class="container">

<ol class="breadcrumb">
	<li><a href="/">{{dmType}}</a></li>
	<li id="local-manager-li"></li>
</ol>

<div id="sessions">
<h4>Sessions</h4>
	<table id="sessionsTable" class="table table-striped">
		<thead>
			<tr>
				<th>Session ID</th>
				<th>State</th>
				<th># Drops</th>
				<th>Details</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
<button id="addSessionBtn"  type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span> Add Session</button>
<button id="refreshSessionListBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-refresh"></span> Refresh</button>
</div>

<div id="nodes">
<h4>Nodes</h4>
	<table id="nodesTable" class="table table-striped">
		<thead>
			<tr>
				<th>Node</th>
				<th>Details</th>
			</tr>
		</thead>
		<tbody></tbody>
	</table>
<button id="refreshNodeListBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-refresh"></span> Refresh</button>
</div>

</div>

<script type="text/javascript">

var selectedNode = '{{selectedNode}}';
if( selectedNode == '' ) {
	selectedNode = null;
}
var serverUrl = '{{serverUrl}}';
var dmPort = {{dmPort}};
var nodes = {{!nodes}};
var refreshSessionListBtn = d3.select('#refreshSessionListBtn');
var addSessionBtn = d3.select('#addSessionBtn');
var sessionsTbodyEl = d3.select('#sessionsTable tbody');

// Show/hide parts of the UI depending on whether we're zooming in or not
// into a specific node
if( selectedNode ) {
	d3.select('#nodes').remove();
	d3.select('#local-manager-li').text("Node: " + selectedNode);
}
else {
	d3.select('#zoom-notice').remove();
	d3.select('#local-manager-li').remove();
}

// Animated filling of DropManagers and Nodes table
function fillTable(selector, data, href_function) {
	data.sort();
	var rows = d3.select(selector).selectAll('tr').data(data);
	var newRow = rows.enter().append('tr');
	newRow.style('opacity', 0.0).transition().delay(0).duration(500).style('opacity',1.0);
	newRow.append('td').classed('id', true).text(String);
	newRow.append('td').classed('details', true)
	      .append('a').attr('href', href_function)
	      .append('span').classed('glyphicon glyphicon-share-alt', true);
}
if( !selectedNode ) {
	fillTable('#nodesTable tbody', nodes, function(n) { return '?node=' + n; });
}

// Listeners for the two session-related buttons
if( !selectedNode ) {
	addSessionBtn.on('click', function(){ promptNewSession(serverUrl, sessionsTbodyEl, refreshSessionListBtn); } );
}
else {
	addSessionBtn.remove()
}
refreshSessionListBtn.on('click', function(){ loadSessions(serverUrl, sessionsTbodyEl, refreshSessionListBtn, selectedNode); } );

//Start loading the list of sessions periodically
d3.timer(function(){
	loadSessions(serverUrl, sessionsTbodyEl, refreshSessionListBtn, selectedNode, 5000);
	return true;
});

</script>
</body>