<!DOCTYPE html>
<html>
<?php
require_once("common.php");
?>
  <head>
    <title>Hotboat System</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
	<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
 	<script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-->
	<script src="mqttws31.js" type="text/javascript"></script>
	<script type = "text/javascript" src = "jquery.min.js"></script>

	<!-- JQ Widgets gauge-->
	<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
	<!--<script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>-->
	<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
	<script type="text/javascript" src="jqwidgets/jqxchart.js"></script>
	<script type="text/javascript" src="jqwidgets/jqxgauge.js"></script>


	<link rel="stylesheet" type="text/css" href="style.css">

	<script type = "module">
		import {BoatControl} from "./boat-control.js";
		import {MessageProc} from "./message-proc.js";
		import {process_hotboat_state} from "./hotboat-printvar.js";
		import {VoltageGauge, FanGauge, PumpGauge, GlowplugGauge, BodyTempGauge, Thermostat} from "./hotboat-printvar-jxgauge.js";

		const boatControl = new BoatControl("mqtt.hotboat100.com", 443, true);
		//const boatControl = new BoatControl("mqtt.daftdroid.com", 9002, true);
		//const boatControl = new BoatControl("fda7:3880:9b81:9999::1", 9003, false);

		const boatControlConsole = new MessageProc("hotboat100-json", "hotboat100");
		boatControl.add_message_processor("hotboat100/json_output", boatControlConsole);
		boatControl.add_message_processor("hotboat100/console_output", new MessageProc("hotboat100-console", null));
		boatControl.add_message_processor("hotboat100/debug_output", new MessageProc("hotboat100-debug", null));
		boatControl.add_message_processor("hotboat100/updater_output", new MessageProc("hotboat100-update-log", null));

		boatControlConsole.add_printvar_processor(new process_hotboat_state("runstate", null, "start-stop-button", "start-stop-text", boatControl, "hotboat100/console"));
		boatControlConsole.add_printvar_processor(new VoltageGauge("voltage", "hotboat100_voltage", "Voltage"));
		boatControlConsole.add_printvar_processor(new FanGauge("fan", "hotboat100_fan", "RPM"));
		boatControlConsole.add_printvar_processor(new PumpGauge("hz", "hotboat100_hz", "Fuel Hz"));
		boatControlConsole.add_printvar_processor(new GlowplugGauge("glowplug", "hotboat100_glowplug", "Glowplug Amps"));
		boatControlConsole.add_printvar_processor(new BodyTempGauge("body", "body_temperature"));
		boatControlConsole.add_printvar_processor(new Thermostat("temp_target", "temp", "temperature", "#8B0000"));

		window.boatControl = boatControl;

	</script>

  </head>
<body onload="boatControl.connect()">


<div class="thermostat_bank">
<div class="thermostat_bank_l"><div id="temperature"></div></div>
<div class="thermostat_bank_c">
	<button onclick="boatControl.send_button_click_value('hotbutton', 'hotboat100/console')" class="hotbutton"><img src="hot-arrow.png"></button>
	<button id="start-stop-button" class="powerbutton"><img src="power-off.png"></button>
	<div id="start-stop-text" class="start-stop-text"></div>
	<button onclick="boatControl.send_button_click_value('coldbutton', 'hotboat100/console')" class="coldbutton"><img src="cold-arrow.png"></button>

</div>
<div class="thermostat_bank_r"><div id="body_temperature"></div></div>
</div>

<!-- PID variables. TODO remove these when no longer supplied -->
<div style="display:none">
	<div class="pid_wrapper">
		<div id="hotboat100_pid_p"></div>
	</div>
	<div class="pid_wrapper">
		<div id="hotboat100_pid_i"></div>
	</div>
</div>

<div class="two_gauges">
	<div class="left_half">
		<div id="hotboat100_hz"></div>
	</div>
	<div class="right_half">
		<div id="hotboat100_fan"></div>
	</div>
</div>
<div class="two_gauges">
	<div class="left_half">
		<div id="hotboat100_voltage"></div>
	</div>
	<div class="right_half">
		<div id="hotboat100_glowplug"></div>
	</div>
</div>

<br/>

<div class="console-group">
	<div id="hotboat100-debug" class="feed-left">
		<!-- Debug goes here -->
	</div>
	<div id="hotboat100-console" class="feed-right">
		<!-- Console goes here-->
	</div>
</div>

<div id="hotboat100-commands" class="send-command">
	<input id="hotboat100-cmd"><button onclick="boatControl.send_button_click('hotboat100-cmd', 'hotboat100/console')">Send</button>
</div>

<br/>
<div id="hotboat100-resetbuttons">
	<button onclick="boatControl.send_button_click_value('\x12', 'hotboat100/console')">Soft Reset</button>
	<button onclick="boatControl.send_button_click_value('\x03', 'hotboat100/console')">Hard Reset</button>
</div>

<?php
    $update_file_url = get_update_url("hotboat100_pcb_hb100.msh");
?>

<div id="hotboat100-update-section">
	<div id="hotboat100-update-log" class="feed update-feed">
	</div>
	<button onclick="boatControl.update_button_click('hotboat100-update-log', '<?php echo $update_file_url;?>', 'hotboat100/updater')">Update</button>
</div>


<div id="legacy-mqtt-status"></div>
<div id="legacy-mqtt-message"></div>

</body>
</html>
