<?php require_once "atp.header.php";?>

<section class="content-wrapper" id="time" data-heading="settings" data-subheading="Time">

	<!--Heading-->
	<div class="page-title">
		<h1>System Time</h1>
		<p>
			Configure system time and external time sychronisation. Note that sychronisation also
			requires the relevant NMEA0183 sentence/CANbus PGN to be enabled.
		</p>
	</div>
	
	<!--Set Date/Time-->
	<div class="box box-top top-wrapper">
		<fieldset>
			<legend><h2>Set Date/Time (UT)</h2></legend>
			<div class="flex-row">
				<div class="flex-half">
					<div class="flex-heading">
						<h2>System Date:</h2>
					</div>
					<div class="flex-field">
						<div class="field-container" id="UTCDate"
							data-field="<?php echo fieldEnum::Proc_Date_UTC_ymd;?>"
							data-sender="<?php echo PROCESSOR_ID;?>"
							data-instance="<?php echo PROCESSOR_INSTANCE;?>">
							&nbsp;
						</div>
					</div>
				</div>
				<div class="flex-half">
					<div class="flex-heading">
						<h2>System Time:</h2>
					</div>
					<div class="flex-field">
						<div class="field-container" id="UTCTime2"
							data-field="<?php echo fieldEnum::Proc_SystemTime;?>"
							data-sender="<?php echo PROCESSOR_ID;?>"
							data-instance="<?php echo PROCESSOR_INSTANCE;?>">
							&nbsp;
						</div>
					</div>
				</div>
			</div>
			<div class="flex-row">
				<div class="flex-half">
					<div class="flex-heading">
						<h2>Date:</h2>
					</div>
					<div class="flex-input">
						<input id="date-input" type="text"
							data-inputmask="'alias': 'datetime', 'inputFormat': 'yyyy-mm-dd'">
					</div>
				</div>
				<div class="flex-half" id="time-input-container">
					<div class="flex-heading">
						<h2>Time:</h2>
					</div>
					<div class="flex-input">
						<input id="time-input" type="text"
							data-inputmask="'alias': 'datetime', 'inputFormat': 'HH:MM:ss'">
					</div>
				</div>
				<a class="button button-medium button-gray" id="set-time">Set Time</a>
			</div>
		</fieldset>
	</div>
	
	<!--Timezone Offset-->
	<div class="box box-stack">
		<fieldset>
			<legend><h2>Timezone Offset</h2></legend>
			<div class="flex-row">
				<div class="flex-heading">
					<h2>Timezone Offset:</h2>
				</div>
				<div class="flex-input input-unit">
					<input type="number" id="timezone-offset">
					<span>h</span>
				</div>
			</div>
		</fieldset>
	</div>
	
	<!--Time Synchronisation-->
	<div class="box box-bottom">
		<fieldset>
			<legend><h2>Time Synchronisation</h2></legend>

			<div class="flex-row">
				<div class="flex-heading">
					<h2>Time Source:</h2>
				</div>
				<select id="input-source">
					<option value="" selected>No Source</option>
					<option value="NMEA0183">NMEA0183</option>
					<option value="CANbus">CANbus</option>
				</select>
			</div>

			<div class="flex-row" id="input-type-container" hidden>

			</div>

			<div class="flex-row">
				<div class="flex-heading">
					<h2>Source Time</h2>
				</div>
				<div class="flex-field">
					<div class="field-container" id="source-time"
						data-field="<?php echo fieldEnum::External_Time;?>"
						data-sender=""
						data-instance="">
						&nbsp;
					</div>
				</div>
			</div>

			<div class="flex-row">
				<div class="flex-half" id="drift-container">
					<div class="flex-heading">
						<div class="tooltip-wrapper">
							<h2>Drift</h2>
							<div class="tooltip">
								<p>The instantaneous difference between the system time and the time provided by connected source (GNSS etc.).</p>
							</div>
						</div>
					</div>
					<div class="flex-field">
						<div class="field-container" id="deltaTime"
							data-field="<?php echo fieldEnum::External_TimeDelta;?>"
							data-sender="<?php echo PROCESSOR_ID;?>"
							data-instance="<?php echo PROCESSOR_INSTANCE;?>">
							&nbsp;
						</div>
					</div>
				</div>

				<div class="flex-half">
					<div class="flex-heading">
						<div class="tooltip-wrapper">
							<h2>Average Drift</h2>
							<div class="tooltip" tooltip-position="left">
								<p>The difference between system time and the external time source, averaged over 1 minute.</p>
							</div>
						</div>
					</div>
					<div class="flex-field">
						<div class="field-container" id="deltaTimeAvg"
							data-field="<?php echo fieldEnum::External_TimeDeltaAvg;?>"
							data-sender="<?php echo PROCESSOR_ID;?>"
							data-instance="<?php echo PROCESSOR_INSTANCE;?>">
							&nbsp;
						</div>
					</div>
				</div>
			</div>

			<div class="flex-row">
				<div class="flex-third">
					<div class="flex-heading">
						<h2>Enable Synchronisation</h2>
					</div>
					<div class="flex-field">
						<input type="checkbox" id="sync-enable">
					</div>
				</div>
			</div>
		</fieldset>
	</div>

	<!--Buttons-->
	<div class="button-box" id="button-container">
		<div class="box box-bottom">
			<a id="ok-button" class="button button-gray button-medium">OK</a>
			<a id="cancel-button" class="button button-gray button-medium">Cancel</a>
			<a id="apply-button" class="button button-gray button-medium">Apply</a>
		</div>
	</div>

</section>

<script type="text/javascript" src="js/inputmask.min.js"></script>
<script type="text/javascript" src="js/jquery.inputmask.min.js"></script>
<script type="text/javascript" src="/js/atp.time.js?v=<?php echo VERSION_NUMBER;?>" defer></script>
<script>
$(document).ready(function() {

	let model = new TimeModel();
	let controller = new TimeController(model);
	let view = new TimeView(controller);
});
</script>

<?php require_once "footer.php"?>
