{{refid=queries['ref']}}
{{~hist_ref = refid~}}
{{~if queries['feature'] != null~}}
	{{~hist_ref = queries['feature']~}}
{{~end~}}

<div class="device_prop_name">
	<b>{{device_name_full hist_ref true}}</b>
	<hr>
</div>

<!-- Range summary: what is shown, how to change it, how to reload it, how much there is. -->
<div class="row mt-1 mb-1 no-gutters border pl-1 mr-1">
	<div class="col">
		<div class="row mt-1 mb-1 no-gutters align-items-center">
			<div class="col-auto pr-2"><b>Range</b></div>
			<div class="col-auto pr-3"><span id="hist_range_text"></span></div>
			<div class="col-auto pr-2">
				<button type="button" class="btn btn-sm btn-default my-0" id="hist_settings_btn" data-tooltip="tooltip" data-placement="top" title="Which slice of time is charted">
					<i class="fas fa-sliders-h"></i> Settings
				</button>
			</div>
			<div class="col-auto pr-3">
				<button type="button" class="btn btn-sm btn-primary my-0" id="hist_refresh">Refresh</button>
			</div>
			<div class="col-auto pr-2"><span id="hist_count" class="text-muted"></span></div>
			<div class="col"><small class="text-muted" id="hist_note">&nbsp;</small></div>
		</div>
	</div>
</div>

<div class="row mt-1 mb-1 no-gutters border pl-1 mr-1">
	<div class="col">
		<div class="row mt-1 mb-1 no-gutters align-items-center">
			<!-- col-auto so the title lines up with Range, Changes and the chart itself:
			     style.css re-adds a 0.5em left pad to no-gutters columns. -->
			<div class="col-auto pr-3"><b>Graph</b></div>
			<div class="col-auto">
				<button type="button" class="btn btn-sm btn-default my-0" id="hist_graph_btn" data-tooltip="tooltip" data-placement="top" title="How this device is drawn">
					<i class="fas fa-sliders-h"></i> Settings
				</button>
			</div>
		</div>
		<div class="row mt-1 mb-2 no-gutters">
			<div class="col">
				<div id="hist_chart" style="width:100%; height:420px;"></div>
			</div>
		</div>
	</div>
</div>

<div class="row mt-1 mb-1 no-gutters border pl-1 mr-1" id="hist_table_scope">
	<div class="col">
		<div class="row mt-1 mb-1 no-gutters align-items-center">
			<div class="col-auto"><b>Changes</b></div>
			<div class="col-auto ml-3" style="width:130px;">
				<select class="mdb-select md-form mb-0 hist-select" id="hist_pagesize">
					<option value="10">10 rows</option>
					<option value="25" selected>25 rows</option>
					<option value="50">50 rows</option>
					<option value="100">100 rows</option>
					<option value="250">250 rows</option>
				</select>
			</div>
			<!-- Below md the pager drops onto a row of its own rather than being squeezed
			     alongside the page-size select. -->
			<div class="col-12 col-md text-md-right pr-2 mt-2 mt-md-0">
				<button type="button" class="btn btn-sm btn-default my-0 hist-page-prev">Previous</button>
				<span class="text-muted mx-2 hist-page-info"></span>
				<button type="button" class="btn btn-sm btn-default my-0 hist-page-next">Next</button>
			</div>
		</div>
		<div class="row mt-1 mb-2 no-gutters">
			<div class="col table-responsive">
				<table class="table table-sm table-striped mb-0">
					<thead>
						<tr>
							<th>Time</th>
							<th class="hist-col-value">Status</th>
							<th class="hist-col-raw">Value</th>
							<th class="hist-col-string">Status String</th>
						</tr>
					</thead>
					<tbody class="hist-table-body">
						<tr><td colspan="4" class="text-muted">Loading&hellip;</td></tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>

{{includefile 'includes/history_range_dialog.html'}}
{{includefile 'includes/history_graph_dialog.html'}}

<script src="/bootstrap/js/hs-history-chart.js"></script>
<script src="/bootstrap/js/hs-history-ui.js"></script>
<script>
(function () {
	var histRef = {{hist_ref}};
	var page = 0;
	var chart = null;
	// Bounds of the window currently shown, so the table follows the chart.
	var bounds = null;
	var $scope = $('#hist_table_scope');

	// Remembered per device, in this browser only: coming back to a device should show the
	// range you were last looking at, but the choice is a viewing preference and does not
	// belong on the server.
	var STORE_KEY = 'hs.history.view.' + histRef;
	var view = HSHistoryUI.loadView(STORE_KEY);

	// How this one device is drawn - graph or timeline, which axis, step or line. The same
	// per-device record the Tools History page keeps, so the shared Graph Settings dialog can
	// edit it without knowing which host it is in.
	view.dev = HSHistoryUI.normaliseDevice(view.dev, histRef);
	var devices = [view.dev];

	function save() {
		view.pagesize = parseInt($('#hist_pagesize').val(), 10) || HSHistoryUI.DEFAULTS.pagesize;
		HSHistoryUI.saveView(STORE_KEY, view);
	}

	// Seed the page size from the remembered view before MDB builds its wrapper, so it renders
	// the restored choice rather than the markup default.
	$('#hist_pagesize option').removeAttr('selected');
	$('#hist_pagesize option[value="' + view.pagesize + '"]').attr('selected', 'selected');
	$('#hist_pagesize')[0].value = view.pagesize;

	// page_common.js runs materialSelect() at document.ready, before this tab body is fetched,
	// so these have to be initialised here or MDB leaves them display:none. The standalone
	// History page does not need this - there the selects exist before document.ready.
	$('.hist-select').materialSelect();

	function loadTable() {
		HSHistoryUI.loadTable($scope, histRef, bounds, page, parseInt($('#hist_pagesize').val(), 10));
	}

	// Commit a selection: update the summary bar and reload the graph. The table follows from
	// onLoaded, once the resolved bounds are known.
	function applyState() {
		page = 0;
		$('#hist_range_text').text(HSHistoryUI.rangeText(view));
		$('#hist_count').text('');
		$('#hist_note').html('&nbsp;');
		save();
		chart.configure({ devices: devices, range: HSHistoryUI.chartRange(view), gridLines: view.gridLines });
	}

	chart = HSHistoryChart.create('hist_chart', {
		devices: devices,
		range: HSHistoryUI.chartRange(view),
		gridLines: view.gridLines,
		onLoaded: function (info) {
			bounds = { start: info.start, end: info.end };
			// Whatever the chart worked out for a setting left unset is written back as a real
			// choice, so the dialog shows what is on screen rather than a guess.
			if (HSHistoryUI.adoptResolved(devices, info.devices)) { save(); }
			HSHistoryUI.renderDeviceRows();
			$('#hist_count').text(info.rawCount + ' record' + (info.rawCount === 1 ? '' : 's') + ' in range');
			var note = [];
			if (info.downsampled) { note.push('graph downsampled to preserve spikes'); }
			if (info.segmentsTruncated) { note.push('state list truncated'); }
			if (note.length) { $('#hist_note').text(note.join(' - ')); } else { $('#hist_note').html('&nbsp;'); }
			page = 0;
			loadTable();
		}
	});

	HSHistoryUI.initDialog({
		getState: function () { return view; },
		onApply: function (st) { $.extend(view, st); applyState(); }
	});

	// One device, already named by the page heading, and it cannot be removed from its own tab -
	// so this shows the toggles alone.
	HSHistoryUI.initGraphDialog({
		showName: false,
		getDevices: function () { return devices; },
		getState: function () { return view; },
		onChange: function () {
			save();
			chart.configure({ devices: devices, range: HSHistoryUI.chartRange(view), gridLines: view.gridLines });
		}
	});

	$('#hist_range_text').text(HSHistoryUI.rangeText(view));

	$('#hist_refresh').click(function () { applyState(); });
	$('#hist_pagesize').change(function () { page = 0; save(); loadTable(); });
	$scope.on('click', '.hist-page-prev', function () { if (page > 0) { page--; loadTable(); } });
	$scope.on('click', '.hist-page-next', function () { page++; loadTable(); });
})();
</script>