{% extends '_mbusascii2mqtt_layout.html' %}

{% block content %}
<section>
	<div style="margin-left: 20px;">
		<h1 class="header">MBus2MQTT Configuration</h1>
		<h5>Version {{m2mversion}}</h5>
        {% if m2mLicense > 0  and m2mLicense >= numberOfMeters %}
        <h4 class="success">License is valid, {{m2mLicense}} meters</h4>
        {% elif m2mLicense > 0: %}
        <h4 class="fail">Too many meters, License = {{m2mLicense}}, Meters = {{numberOfMeters}}.</h4>
        {% else %}
        <h4 class="fail">You have no MBus2MQTT license.</h4>
        {% endif %}		<div id="configurationTabs">
			<ul>
				<li>
					<a href="/mbusascii2mqtt_config">Configure</a>
				</li>
				<li>
					<a href="/mbusascii2mqtt_log">Log</a>
				</li>
				<li>
					<a href="/mbusascii2mqtt_manual">Documentation</a>
				</li>
			</ul>
		</div>
		<br />



		<div class="subheader">
			&darr;&nbsp;Main Configuration
		</div>

		<!-- Main Config Form -->
		<form name="Setup" action="/mbusascii2mqtt_setconf" method="post" enctype="multipart/form-data">
			<table id="Table" style="font-weight: bold">

				<tr>
					<td>Broker Type</td>
					<td>
						<select id="mqtt_broker_type" name="mqtt_broker_type">
							{% for brokertype in brokerTypeList: %}
							<option value="{{brokertype}}" {% if mqtt_broker_type==brokertype: %} selected="selected" {%
								endif %}>{{brokertype}}</option>
							{% endfor %}
						</select>
					</td>
				</tr>

				<tr>
					<td style="width: 250px;">
						Read Period [sec]
					</td>
					<td>
						<input name="read_period" id="read_period" type="text" value="{{read_period}}" />
					</td>
					<td>
					</td>
				</tr>
				<tr>
					<td>Enable</td>
					<td>
						<select id="enable" name="enable">
							<option value="YES" {% if enable=="YES" : %} selected="selected" {% endif %}>Yes</option>
							<option value="NO" {% if enable=="NO" : %} selected="selected" {% endif %}>No</option>
						</select>
					</td>
					<td></td>
				</tr>
				<tr>
					<td>Quality Of Service (QOS)</td>
					<td>
						<select id="Qmqtt_qos" name="Qmqtt_qos">
							{% for mqtt_qos in ['0','1','2']: %}
							<option value="{{mqtt_qos}}" {% if mqtt_qos==Qmqtt_qos: %} selected="selected" {% endif %}>
								{{mqtt_qos}}</option>
							{% endfor %}
						</select>
					</td>
				</tr>
			</table>

			<div class="subheader">
				&darr;&nbsp;M-BusAscii port configuration
			</div>
			<!-- Slave port config -->

			<table id="slaveTable" style="font-weight: bold">
				<tr>
					<td style="width: 250px;">Type</td>
					<td style="width: 250px;">
						<select id="AtypeMenu" name="Aporttype" onchange="mqtt_typeChanged(this.form.protocol);">
							{% for ptype in sPortDict.keys(): %}
							<option value={{ptype}} {% if Aporttype==ptype: %} selected="selected" {% endif %}>
								{{typeDict[ptype]}}</option>
							{% endfor %}
						</select>
					</td>
				</tr>
			</table>
			<div id="Audptcpdiv">
				<table style="font-weight: bold">
					<tr>
						<td style="width: 250px;">Remote Ip Address and Port</td>
						<td>
							<input name="Aremoteip" id="Aremoteip" type="text" value="{{Aremoteip}}" />
							<input name="Aremoteport" id="Aremoteport" type="text" value="{{Aremoteport}}" />&nbsp;
							<img class="helper" alt="" id="riphelpimg" src="/img/help.png"
								onclick="helpInfo($('#riphelp'), $('#riphelpimg'));" />
							<div id="riphelp" class="helpDiv" style="display: none;">
								XXXXXXXXXXXX
							</div>
						</td>
					</tr>
				</table>
			</div>
			<div id="Aserdiv">
				<table id="Table1" style="font-weight: bold;">
					<tr>
						<td style="width: 250px;">Com port</td>
						<td>
							<select id="Asercomport" name="Asercomport" onchange="typeChanged(this.form.protocol);">
								{% for sercom in sPortDict['SER'].keys(): %}
								<option value={{sercom}} {% if Asercomport==sercom: %} selected="selected" {% endif %}>
									{{portDict[sercom]}}</option>
								{% endfor %}
							</select>&nbsp;
						</td>
					</tr>
					<tr>
						<td>Baud rate</td>
						<td>
							<select id="Aserbaudrate" name="Aserbaudrate">
								{% for brate in baudRateList: %}
								<option value="{{brate}}" {% if Aserbaudrate==brate: %} selected="selected" {% endif %}>
									{{brate}}</option>
								{% endfor %}
							</select>
							<img class="helper" align="bottom" id="baudhlpserimg" alt="" src="/img/help.png"
								onclick="helpInfo($('#baudhlpser'), $('#baudhlpserimg'));" />
							<div id="baudhlpser" class="helpDiv" style="display: none;">
								Baud rate 600, 1200 and 4800 are not allowed for M-Bus
							</div>
						</td>
					</tr>
					<tr>
						<td>Bit Number</td>
						<td>
							<select id="Aserbits" name="Aserbits">
								{% for bits in bitList: %}
								<option value="{{bits}}" {% if Aserbits==bits: %} selected="selected" {% endif %}>
									{{bits}}</option>
								{% endfor %}
							</select>
						</td>
					</tr>
					<tr>
						<td>Parity</td>
						<td>
							<select id="Aserparity" name="Aserparity">
								{% for parity in parityList: %}
								<option value="{{parity[0]}}" {% if Aserparity==parity[0]: %} selected="selected" {%
									endif %}>{{parity[1]}}</option>
								{% endfor %}
							</select>
						</td>
					</tr>
					<tr>
						<td>Stop Bit</td>
						<td>
							<select id="Aserstopbit" name="Aserstopbit">
								{% for stopbit in stopBitList: %}
								<option value="{{stopbit}}" {% if Aserstopbit==stopbit: %} selected="selected" {% endif
									%}>{{stopbit}}</option>
								{% endfor %}
							</select>
						</td>
					</tr>
				</table>
			</div>
			<table style="font-weight: bold;">
				<tr>
					<td style="width: 250px;">
						Configuration file
					</td>
					<td style="width: 220px;">
						<select name="Acsvfile" id="csvselect">
							<option value="">No File</option>
							{% for csvf in csvfArray: %}
							<option value="{{csvf}}" {% if Acsvfile==csvf: %} selected="selected" {% endif %}>{{csvf}}
							</option>
							{% endfor %}
						</select>
					</td>
					<td alight="right">
						<input id="Button2" type="button" onclick="mqtt_showCsvFile();" value="Show Configuration" />
					</td>
				</tr>
			</table>
			<br />

			<div class="subheader">
				&darr;&nbsp;MQTT Port Configuration
			</div>
			<!-- MQTT Port Config -->
			<table style="font-weight: bold">
				<tr>
					<td style="width: 250px;">Hub address</td>
					<td style="width: 450px;">
						<input name="Qhubaddress" id="Qhubaddress" type="text" value="{{Qhubaddress}}"
							style="width: 380px;" />
					</td>
				</tr>
				<tr>
					<td>Hub port</td>
					<td>
						<input name="Qhubport" id="Qhubport" type="text" value="{{Qhubport}}" style="width: 380px;" />
					</td>
				</tr>
				<tr>
					<td style="width: 250px;">Device ID</td>
					<td style="width: 450px;">
						<input name="Qdeviceid" id="Qdeviceid" type="text" value="{{Qdeviceid}}"
							style="width: 380px;" />
					</td>
				</tr>
				<tr>
					<td>User Name</td>
					<td>
						<input name="Qusername" id="Qusername" type="text" value="{{Qusername}}"
							style="width: 380px;" />&nbsp;
					</td>
				</tr>
				<tr>
					<td>Password/Device Key</td>
					<td>
						<input name="Qdevicekey" id="Qdevicekey" type="text" value="{{Qdevicekey}}"
							style="width: 380px;" />
					</td>
				</tr>
				<tr>
					<td>Topic</td>
					<td><input name="Qtopic" id="Qtopic" type="text" value="{{Qtopic}}" />&nbsp;</td>
				</tr>

			</table>



			<br>
			<div class="subheader">
				&darr;&nbsp;TLS
			</div>

			<table style="font-weight: bold">
				<tr>
					<td>Use TLS</td>
					<td>
						<select id="Quse_tls" name="Quse_tls">
							{% for use_tls in yesno: %}
							<option value="{{use_tls}}" {% if use_tls==Quse_tls: %} selected="selected" {% endif %}>
								{{use_tls}}</option>
							{% endfor %}
						</select>
					</td>
				</tr>

				<tr>
					<td>Insecure</td>
					<td>
						<select id="Qinsecure" name="Qinsecure">
							{% for insecure in yesno: %}
							<option value="{{insecure}}" {% if insecure==Qinsecure: %} selected="selected" {% endif %}>
								{{insecure}}</option>
							{% endfor %}
						</select>
					</td>
				</tr>

				<tr>
					<td style="width: 250px;">
						Certificate File
					</td>
					<td style="width: 220px;">
						<select name="Qcertificate" id="crtselect">
							<option value="">CA-Bundle (default)</option>
							{% for crtf in crtfArray: %}
							<option value="{{crtf}}" {% if Qcertificate==crtf: %} selected="selected" {% endif %}>
								{{crtf}}</option>
							{% endfor %}
						</select>
					</td>
					<td alight="right">
					</td>
				</tr>

			</table>
			<br/>
			<br />

			<div >
				<input width="12em" class="fs-400" type="submit" value="Save settings" name="Submit" />
			</div>
		</form>

		<div class="subheader">
			&darr;&nbsp;MQTT Advanced parameters
		</div>

		
		<!-- Certification Upload -->
		<form id="ffilens" method="post" action="/mbusascii2mqtt_uploadcrt" enctype="multipart/form-data">
			<table>

				<tr>
					<td>Upload Certificate</td>
					<td>
						<input id="certfile" type="file" accept=".crt" name="certfile" size="70" />
					</td>
					<td>
						<input type="submit" value="Upload" style="width: 80px;" />
					</td>
				</tr>
			</table>
		</form>
	</div>
	</div>
</section>
{% endblock content%}


{% block scripts %}

<script type="text/javascript">
	function mqtt_initSettings() {
		{% if Qporttype != 'SER': %}
		$('#Qserdiv').hide();
		$('#Qudptcpdiv').show();
		{% else: %}
		$('#Qserdiv').show();
		$('#Qudptcpdiv').hide();
		{% endif %}
		{% if Aporttype != 'SER': %}
		$('#Aserdiv').hide();
		$('#Audptcpdiv').show();
		{% else: %}
		$('#Aserdiv').show();
		$('#Audptcpdiv').hide();
		{% endif %}
	}

	function mqtt_typeChanged(myform) {
		if ($('#QtypeMenu').val() == 'SER') {
			$('#Qserdiv').show();
			$('#Qudptcpdiv').hide();
		}
		else {
			$('#Qserdiv').hide();
			$('#Qudptcpdiv').show();
		}
		if ($('#AtypeMenu').val() == 'SER') {
			$('#Aserdiv').show();
			$('#Audptcpdiv').hide();
		}
		else {
			$('#Aserdiv').hide();
			$('#Audptcpdiv').show();
		}
		myform.selectedIndex = 0;
	}
	function mqtt_showCsvFile() {
		var sel = $('#csvselect');
		if (sel) {
			var val = sel.val();
			if (val != '')
				window.open("/showCsvFile?FILE=" + val);
		}
	}

	const broker_select = document.getElementById("mqtt_broker_type")
	broker_select.onchange = () => {
		if (broker_select.value == 'Azure') {
			const insecure_select = document.getElementById("Qinsecure")
			const crert_file_select = document.getElementById("crtselect")
			insecure_select.value = 'NO'
			crert_file_select.value = ''
		}
	}
	//On load, set all parameters
	mqtt_initSettings();
</script>
{% endblock scripts %}