csu3_am335x/EVSE/rootfs/var/www/set_backend.php

<?php
	ini_set('error_reporting', E_ALL | E_STRICT);
	$tag_header = 'set';
	include 'head.php';
	$obj = json_decode(trim($output[3]));//var_dump($obj);
	$system = json_decode(trim($output[0]));
	$ModelName = $system->{'ModelName'};
	$OcppConnStatus='';
	switch ($obj->{'OcppConnStatus'}){
		case 0:
			$OcppConnStatus='disconnected';
			break;
		case 1:
			$OcppConnStatus='connected';
			break;
	}
?>

<style>
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
<?php if(substr($ModelName,0,1)=="D" && substr($ModelName,3,1)=="C"){?>
/* Colors: Default (blue) */
.toggle-switchy {color:#fff;}
.toggle-switchy > input + .toggle:before {content:'Yes';}
.toggle-switchy > input + .toggle:after {content:'No';}
.toggle-switchy > input + .toggle > .switch {background:#fff;}
.toggle-switchy > input + .toggle + .label {color:#000;}
.toggle-switchy > input:checked + .toggle {background:#3498db;}
.toggle-switchy > input:not(:checked) + .toggle {background:#ccc;}
.toggle-switchy > input:checked + .toggle > .switch {border:3px solid #3498db;}
.toggle-switchy > input:not(:checked) + .toggle > .switch {border:3px solid #ccc;}
.toggle-switchy > input:focus + .toggle,
.toggle-switchy > input:active + .toggle {box-shadow:0 0 5px 3px rgba(0, 119, 200, 0.50);}

/* Rounded switch corners */
.toggle-switchy > input + .toggle {border-radius:4px;}
.toggle-switchy > input + .toggle .switch {border-radius:6px;}

/* //////////////////////////
CORE STYLES BELOW - NO TOUCHY
////////////////////////// */
.toggle-switchy {display:inline-flex; align-items:center; user-select:none; position:relative;}
.toggle-switchy:hover {cursor:pointer;}
.toggle-switchy > input {position:absolute; opacity:0;}
.toggle-switchy > input + .toggle {align-items:center; position:relative;}
.toggle-switchy > input + .toggle {overflow:hidden; position:relative; flex-shrink:0;}
.toggle-switchy > input[disabled] + .toggle {opacity:0.5;}
.toggle-switchy > input[disabled] + .toggle:hover {cursor:not-allowed;}
.toggle-switchy > input + .toggle {width:100%; height:100%; margin:0; cursor:pointer;}
.toggle-switchy > input + .toggle > .switch {display:block; height:100%; position:absolute; right:0; z-index:3;}

/* Labels */
.toggle-switchy > input + .toggle:before,
.toggle-switchy > input + .toggle:after {display:flex; align-items:center; position:absolute; z-index:2; height:100%;}
.toggle-switchy > input + .toggle:before {right:55%;}
.toggle-switchy > input + .toggle:after {left:50%;}
.toggle-switchy > input + .toggle + .label {margin-left:10px;}
.toggle-switchy[data-label='left'] > input + .toggle {order:2;}
.toggle-switchy[data-label='left'] > input + .toggle + .label {order:1; margin-left:0; margin-right:10px;}

/* Show / Hide */
.toggle-switchy > input + .toggle:before {opacity:0;}
.toggle-switchy > input:checked + .toggle:before {opacity:1;}
.toggle-switchy > input:checked + .toggle:after {opacity:0;}

/* Transitions */
.toggle-switchy > input + .toggle {transition:background 200ms linear, box-shadow 200ms linear;}
.toggle-switchy > input + .toggle:before,
.toggle-switchy > input + .toggle:after {transition:all 200ms linear;}
.toggle-switchy > input + .toggle > .switch {transition:right 200ms linear, border-color 200ms linear;}
/* //////////////////////////
CORE STYLES ABOVE - NO TOUCHY
////////////////////////// */

/* Size: Extra Large */
.toggle-switchy[data-size='xl'] > input + .toggle							{width:85px; height:40px;}
.toggle-switchy[data-size='xl'] > input + .toggle > .switch					{width:40px;}
.toggle-switchy[data-size='xl'] > input + .toggle:before,
.toggle-switchy[data-size='xl'] > input + .toggle:after						{font-size:1.2rem;}
.toggle-switchy[data-size='xl'] > input:not(:checked) + .toggle > .switch	{right:calc(100% - 40px);}

/* Size: Large */
.toggle-switchy[data-size='lg'] > input + .toggle							{width:75px; height:35px;}
.toggle-switchy[data-size='lg'] > input + .toggle > .switch					{width:35px;}
.toggle-switchy[data-size='lg'] > input + .toggle:before,
.toggle-switchy[data-size='lg'] > input + .toggle:after						{font-size:1rem;}
.toggle-switchy[data-size='lg'] > input:not(:checked) + .toggle > .switch	{right:calc(100% - 35px);}

/* Size: Default (Medium) */
.toggle-switchy > input + .toggle											{width:100px; height:30px;}
.toggle-switchy > input + .toggle	> .switch								{width:30px;}
.toggle-switchy > input + .toggle:before,
.toggle-switchy > input + .toggle:after										{font-size:0.8rem;}
.toggle-switchy > input:not(:checked) + .toggle > .switch					{right:calc(100% - 30px);}

/* Size: Small */
.toggle-switchy[data-size='sm'] > input + .toggle							{width:55px; height:25px;}
.toggle-switchy[data-size='sm'] > input + .toggle > .switch					{width:25px;}
.toggle-switchy[data-size='sm'] > input + .toggle:before,
.toggle-switchy[data-size='sm'] > input + .toggle:after						{font-size:0.7rem;}
.toggle-switchy[data-size='sm'] > input:not(:checked) + .toggle > .switch	{right:calc(100% - 25px);}

/* Size: Extra Small */
.toggle-switchy[data-size='xs'] > input + .toggle							{width:45px; height:20px;}
.toggle-switchy[data-size='xs'] > input + .toggle > .switch					{width:20px;}
.toggle-switchy[data-size='xs'] > input + .toggle:before,
.toggle-switchy[data-size='xs'] > input + .toggle:after						{font-size:0.5rem;}
.toggle-switchy[data-size='xs'] > input:not(:checked) + .toggle > .switch	{right:calc(100% - 20px);}

/* Style: Rounded */
.toggle-switchy[data-style='rounded'] > input + .toggle,
.toggle-switchy[data-style='rounded'] > input + .toggle > .switch			{border-radius:50px;}
.toggle-switchy[data-style='rounded'] > input + .toggle:before				{right:30%;}
.toggle-switchy[data-style='rounded'] > input + .toggle:after				{left:40%;}

/* Style: Square */
.toggle-switchy[data-style='square'] > input + .toggle						{border-radius:0;}
.toggle-switchy[data-style='square'] > input + .toggle .switch				{border-radius:0;}

/* Text: Off */
.toggle-switchy[data-text='false'] > input + .toggle:before,
.toggle-switchy[data-text='false'] > input + .toggle:after					{content:'';}
.toggle-switchy[data-text='false'][data-size='xl'] > input + .toggle		{width:80px;}
.toggle-switchy[data-text='false'][data-size='lg'] > input + .toggle		{width:70px;}
.toggle-switchy[data-text='false'] > input + .toggle						{width:60px;}
.toggle-switchy[data-text='false'][data-size='sm'] > input + .toggle		{width:50px;}
.toggle-switchy[data-text='false'][data-size='xs'] > input + .toggle		{width:40px;}

/* Color: Red */
.toggle-switchy[data-color='red'] > input:checked + .toggle					{background:#e74c3c;}
.toggle-switchy[data-color='red'] > input:checked + .toggle > .switch		{border-color:#e74c3c;}

/* Color: Orange */
.toggle-switchy[data-color='orange'] > input:checked + .toggle				{background:#e67e22;}
.toggle-switchy[data-color='orange'] > input:checked + .toggle > .switch	{border-color:#e67e22;}
 
 /* Color: Yellow */
.toggle-switchy[data-color='yellow'] > input:checked + .toggle				{background:#f1c40f;}
.toggle-switchy[data-color='yellow'] > input:checked + .toggle > .switch	{border-color:#f1c40f;}

/* Color: Green */
.toggle-switchy[data-color='green'] > input:checked + .toggle				{background:#2ecc71;}
.toggle-switchy[data-color='green'] > input:checked + .toggle > .switch		{border-color:#2ecc71;}

/* Color: Blue */
.toggle-switchy[data-color='blue'] > input:checked + .toggle				{background:#3498db;}
.toggle-switchy[data-color='blue'] > input:checked + .toggle > .switch		{border-color:#3498db;}

/* Color: Purple */
.toggle-switchy[data-color='purple'] > input:checked + .toggle				{background:#9b59b6;}
.toggle-switchy[data-color='purple'] > input:checked + .toggle > .switch	{border-color:#9b59b6;}

/* Color: Gray */
.toggle-switchy[data-color='gray'] > input:checked + .toggle				{background:#555;}
.toggle-switchy[data-color='gray'] > input:checked + .toggle > .switch		{border-color:#555;}
<?php } ?>
</style>
	<div class="envor-content">
		<!--
		Page Title start
		//-->
		<section class="envor-page-title-1" data-stellar-background-ratio="0.5">
			<div class="container">
				<div class="row">
					<div class="col-lg-9 col-md-9 col-sm-9">
						<h1><?php echo $lang->showWord("backend"); ?></h1>
					</div>
				</div>
			</div>
		<!--
		Page Title end
		//-->
		</section>
		<!--
		Main Content start
		//-->
		<a id="loadinghref"><div id="loading" style="display:none;"><img src="img/giphy.gif"/></div></a>
		<section class="envor-section">
			<div class="container">
				<div class="row">
					<div class="col-lg-12">
						<div class="envor-sorting" id="faq-sorting">
							<div class="envor-toggle">
								<!--Common Information-->
								<article class="envor-sorting-item css">
									<header><?php echo $lang->showWord("common_information"); ?><i class="fa fa-plus"></i></header>
									<section>
										<div class="form-group" style="display:<?php echo $am101;?>">
											<label>Backend Connection Timeout</label>
											<input type="text" name="BackendConnTimeout" id="BackendConnTimeout" class="form-control" value="<?php echo $obj->{'BackendConnTimeout'};?>">
											<small class="form-text text-muted-red">seconds</small>
										</div>
										<div class="form-group" style="display:<?php echo $am101;?>">
											<label>Offline Policy</label>
											<select class="form-control" id="OfflinePolicy" name="OfflinePolicy">
												<option value="0" <?php echo $obj->{'OfflinePolicy'}=="0"?"selected":""?>>local list</option>
<?php /*												<option value="1" <?php echo $obj->{'OfflinePolicy'}=="1"?"selected":""?>>Phihong RFID tag</option>*/?>
												<option value="2" <?php echo $obj->{'OfflinePolicy'}=="2"?"selected":""?>>free charging</option>
												<option value="3" <?php echo $obj->{'OfflinePolicy'}=="3"?"selected":""?>>no charging</option>
											</select>
										</div>
										<div class="form-group" style="display:<?php echo $am101;?>">
											<label>Offline Max Charge Energy</label>
											<small class="form-text text-muted-red">kWh</small>
											<input type="text" name="OfflineMaxChargeEnergy" id="OfflineMaxChargeEnergy" class="form-control" value="<?php echo $obj->{'OfflineMaxChargeEnergy'};?>">
										</div>
										<div class="form-group" style="display:<?php echo $am101;?>">
											<label>Offline Max Charge Duration</label>
											<small class="form-text text-muted-red">minutes</small>
											<input type="text" name="OfflineMaxChargeDuration" id="OfflineMaxChargeDuration" class="form-control" value="<?php echo $obj->{'OfflineMaxChargeDuration'};?>">
										</div>
									</section>
								</article>
								<!--OCPP Backend-->
								<article class="envor-sorting-item css">
									<header><?php echo $lang->showWord("OCPP_backend"); ?><i class="fa fa-plus"></i></header>
									<section>
										<div class="form-group" style="display:<?php echo $am101;?>">
											<label>Ocpp Connection Status</label>
											<input type="text" readonly class="form-control" placeholder="<?php echo $OcppConnStatus;?>">
											<input type="hidden" name="OcppConnStatus" id="OcppConnStatus" value="<?php echo $obj->{'OcppConnStatus'};?>">
										</div>
										<div class="form-group" style="display:<?php echo $am101;?>">
											<label>Central System URL</label>
											<input type="text" name="OcppServerURL" id="OcppServerURL" class="form-control" value="<?php echo $obj->{'OcppServerURL'};?>">
										</div>
										<div class="form-group" style="display:<?php echo $am101;?>">
											<label>Charge Box Id</label>
											<input type="text" name="ChargeBoxId" id="ChargeBoxId" class="form-control" value="<?php echo $obj->{'ChargeBoxId'};?>">
										</div>
										<div class="form-group" style="display:<?php echo $am101;?>">
											<label>Charge Point Vendor</label>
											<input type="text" name="chargePointVendor" id="chargePointVendor" class="form-control" value="<?php echo $obj->{'chargePointVendor'};?>">
										</div>
										<div class="form-group" style="display:<?php echo $am101;?>">
											<label>Ocpp Security Profile</label>
											<select class="form-control" id="OcppSecurityProfile" name="OcppSecurityProfile" onchange="OcppSecurityProfile_changed()">
												<option value="0" <?php echo $obj->{'OcppSecurityProfile'}=="0"?"selected":""?>>None security</option>
												<option value="1" <?php echo $obj->{'OcppSecurityProfile'}=="1"?"selected":""?>>Unsecured Transport with Basic Atuentication</option>
												<option value="2" <?php echo $obj->{'OcppSecurityProfile'}=="2"?"selected":""?>>TLS with Basic Authentication</option>
												<option value="3" <?php echo $obj->{'OcppSecurityProfile'}=="3"?"selected":""?>>TLS with Client Side Certificates</option>
											</select>
										</div>
										<div id="OcppSecurityPasswordDiv" class="form-group" style="display:<?php echo $am101;?>">
											<label>Ocpp Security Password</label>
											<input type="text" name="OcppSecurityPassword" id="OcppSecurityPassword" class="form-control" value="<?php echo $obj->{'OcppSecurityPassword'};?>">
										</div>
<?php if(substr($ModelName,0,2)=="AX"){?>
										<div class="form-group" style="display:block">
											<label>Ocpp Receipt URL</label>
											<input type="text" name="OcppReceiptrURL" id="OcppReceiptrURL" class="form-control" value="<?php echo $obj->{'OcppReceiptrURL'};?>">
										</div>
										<div class="form-group" style="display:block">
											<label>Local Loading Balance</label>
											<select class="form-control" id="isEnableLocalPowerSharging" name="isEnableLocalPowerSharging" onChange="isEnableLocalPowerSharging_changed()">
												<option value="0" <?php echo $obj->{'isEnableLocalPowerSharging'}=="0"?"selected":""?>>disable</option>
												<option value="1" <?php echo $obj->{'isEnableLocalPowerSharging'}=="1"?"selected":""?>>enable</option>
											</select>
										</div>
<?php } ?>
										<div class="form-group" style="display:<?php echo $am101;?>">
											<label>Maintain Server Connection Status</label>
											<input type="text" readonly class="form-control" placeholder="<?php echo $MaintainServerConnStatus;?>">
											<input type="hidden" name="MaintainServerConnStatus" id="MaintainServerConnStatus" value="<?php echo $obj->{'MaintainServerConnStatus'};?>">
										</div>
										<div class="form-group" style="display:<?php echo $am101;?>">
											<label>Maintain Server URL</label>
											<input type="text" name="MaintainServerURL" id="MaintainServerURL" class="form-control" value="<?php echo $obj->{'MaintainServerURL'};?>">
										</div>
									</section>
								</article>
<?php if(substr($ModelName,0,1)=="D" && substr($ModelName,3,1)=="C"){ ?>
								<!--TTIA-->
								<article class="envor-sorting-item css">
									<header>TTIA<i class="fa fa-plus"></i></header>
									<section>
										<div class="form-group" style="display:<?php echo $am101;?>">
											<label>TTIA</label>
											<label class="toggle-switchy" for="isEnableTTIA" data-size="" data-style="rounded">
												<input type="checkbox" id="isEnableTTIA" <?php echo $obj->{'isEnableTTIA'}==1?"checked":"";?> onclick="isEnableTTIAChecked()">
												<span class="toggle">
												  <span class="switch"></span>
												</span>
											</label>
										</div>
										<div id="server_addrDiv" class="form-group">
											<label>Server Address</label>
											<input type="text" name="server_addr" id="server_addr" class="form-control" value="<?php echo $obj->{'server_addr'};?>">
										</div>
										<div id="server_portDiv" class="form-group">
											<label>Server Port</label>
											<input type="text" name="server_port" id="server_port" class="form-control" value="<?php echo $obj->{'server_port'};?>">
										</div>
										<div id="busVenderIdDiv" class="form-group">
											<label>Bus Vender Id</label>
											<input type="text" name="busVenderId" id="busVenderId" class="form-control" value="<?php echo $obj->{'busVenderId'};?>">
										</div>
										<div id="EquipmentProviderDiv" class="form-group">
											<label>Equipment Provider</label>
											<input type="text" name="EquipmentProvider" id="EquipmentProvider" class="form-control" value="<?php echo $obj->{'EquipmentProvider'};?>">
										</div>
										<div id="TransportationCompanyNoDiv" class="form-group">
											<label>TransportationCompanyNo</label>
											<input type="text" name="TransportationCompanyNo" id="TransportationCompanyNo" class="form-control" value="<?php echo $obj->{'TransportationCompanyNo'};?>">
										</div>
										<div id="ChargeBoxIdDiv" class="form-group">
											<label>Charge Box Id</label>
											<input type="text" name="TTIAChargeBoxId" id="TTIAChargeBoxId" class="form-control" value="<?php echo $obj->{'TTIAChargeBoxId'};?>">
										</div>
										<div id="evseStationDiv" class="form-group">
											<label>EVSE Station</label>
											<input type="text" name="evseStation" id="evseStation" class="form-control" value="<?php echo $obj->{'evseStation'};?>">
										</div>
									</section>
								</article>
<?php } ?>
								<article class="envor-sorting-item css">
									<div align="center"><button id="save"><?php echo $lang->showWord("set")?></button></div>
								</article>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
	</div>

<?php
	include 'foot.php';
?>

<script type="text/JavaScript">
<?php if(substr($ModelName,0,2)=="AX"){?>
	$(document).ready(function(){
		isEnableLocalPowerSharging_changed();
	});
<?php } ?>
<?php if(substr($ModelName,0,1)=="D" && substr($ModelName,3,1)=="C"){?>
	$(document).ready(function(){
		isEnableTTIAChecked();
	});
<?php } ?>
	OcppSecurityProfile_changed();
	document.getElementById("save").onclick = function() {
		if(formCheck())
		{
			window.location="#loadinghref";
			document.getElementById("loading").style.display="block";
			// 發送 Ajax 查詢請求並處理
			var request = new XMLHttpRequest();
			request.open("POST", "set_backend_action.php");

			// POST 參數須使用 send() 發送
			var data =  "BackendConnTimeout=" + document.getElementById("BackendConnTimeout").value +
						"&OfflinePolicy=" + document.getElementById("OfflinePolicy").value +
						"&OfflineMaxChargeEnergy=" + document.getElementById("OfflineMaxChargeEnergy").value+
						"&OfflineMaxChargeDuration=" + document.getElementById("OfflineMaxChargeDuration").value+
//						"&OcppConnStatus=" + document.getElementById("OcppConnStatus").value+
						"&OcppServerURL=" + escape(document.getElementById("OcppServerURL").value)+
						"&MaintainServerURL=" + escape(document.getElementById("MaintainServerURL").value)+
						"&ChargeBoxId=" + escape(document.getElementById("ChargeBoxId").value)+
						"&chargePointVendor=" + escape(document.getElementById("chargePointVendor").value)+
						"&OcppSecurityProfile=" + document.getElementById("OcppSecurityProfile").value+
						"&OcppSecurityPassword=" + escape(document.getElementById("OcppSecurityPassword").value);
<?php if(substr($ModelName,0,2)=="AX"){?>
				data += "&isEnableLocalPowerSharging=" + document.getElementById("isEnableLocalPowerSharging").value+
						"&OcppReceiptrURL=" + document.getElementById("OcppReceiptrURL").value;
<?php } ?>
<?php if(substr($ModelName,0,1)=="D" && substr($ModelName,3,1)=="C"){?>
				data += "&isEnableTTIA=" + (document.getElementById("isEnableTTIA").checked?"1":"0")+
						"&server_addr=" + document.getElementById("server_addr").value+
						"&server_port=" + document.getElementById("server_port").value+
						"&busVenderId=" + document.getElementById("busVenderId").value+
						"&EquipmentProvider=" + document.getElementById("EquipmentProvider").value+
						"&TransportationCompanyNo=" + document.getElementById("TransportationCompanyNo").value+
						"&TTIAChargeBoxId=" + document.getElementById("TTIAChargeBoxId").value+
						"&evseStation=" + document.getElementById("evseStation").value;
<?php } ?>
			// POST 請求必須設置表頭在 open() 下面，send() 上面
			request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			request.send(data);

			request.onreadystatechange = function() {
				// 伺服器請求完成
				if (request.readyState == 4) {
					 document.getElementById("loading").style.display="none";
					// 伺服器回應成功
					if (request.status == 200 && JSON.parse(request.responseText).result=="Success") {
						alert("<?php echo $lang->showWord("done")?>");
						location.href="set_backend.php";
					} else {
						alert(JSON.parse(request.responseText).message);
					}
					request = null;
				}
			}
		}
	}
	
	function formCheck()
	{
		var OcppServerURL = document.getElementById("OcppServerURL").value;
		var MaintainServerURL = document.getElementById("MaintainServerURL").value;
		var ChargeBoxId = document.getElementById("ChargeBoxId").value;
		var chargePointVendor = document.getElementById("chargePointVendor").value;
		var tests=/^(ws|wss):\/\/((([0-9]{1,3}\.){3}[0-9]{1,3})|(([a-zA-Z0-9]+(([\-]?[a-zA-Z0-9]+)*\.)+)*[a-zA-Z]{2,}))+/;
		if(OcppServerURL!=""){
			if(OcppServerURL.match(tests)==null){
				alert("OcppServerURL format error!");
				document.getElementById("OcppServerURL").focus();
				return false;
			}
		}
		if(MaintainServerURL!=""){
			if(MaintainServerURL.match(tests)==null){
				alert("MaintainServerURL format error!");
				document.getElementById("MaintainServerURL").focus();
				return false;
			}
		}
		if(ChargeBoxId!=""){
			if(ChargeBoxId.length>25){
				alert("Length of ChargeBoxId should be less than 25!");
				document.getElementById("ChargeBoxId").focus();
				return false;
			}
		}
		if(chargePointVendor!=""){
			if(chargePointVendor.length>20){
				alert("Length of chargePointVendor should be less than 20!");
				document.getElementById("chargePointVendor").focus();
				return false;
			}
		}
<?php if(substr($ModelName,0,1)=="D" && substr($ModelName,3,1)=="C"){?>
		var server_port = document.getElementById("server_port").value;
		if(server_port!=""){
			if(server_port>65535){
				alert("Value of Server Port should be less than 65535!");
				document.getElementById("server_port").focus();
				return false;
			}
		}
		var busVenderId = document.getElementById("busVenderId").value;
		if(busVenderId!=""){
			if(busVenderId>65535){
				alert("Value of Bus Vender Id should be less than 65535!");
				document.getElementById("busVenderId").focus();
				return false;
			}
		}
		var EquipmentProvider = document.getElementById("EquipmentProvider").value;
		if(EquipmentProvider!=""){
			if(UTF8Length(EquipmentProvider)>15){
				alert("Length of Equipment Provider should be less than 15(Chinese 5 words)!");
				document.getElementById("EquipmentProvider").focus();
				return false;
			}
		}
		var evseStation = document.getElementById("evseStation").value;
		if(evseStation!=""){
			if(UTF8Length(evseStation)>15){
				alert("Length of EVSE Station should be less than 15(Chinese 5 words)!");
				document.getElementById("evseStation").focus();
				return false;
			}
		}
		var TransportationCompanyNo = document.getElementById("TransportationCompanyNo").value;
		if(TransportationCompanyNo!=""){
			if(TransportationCompanyNo>255){
				alert("Value of Transportation Company No should be less than 255!");
				document.getElementById("TransportationCompanyNo").focus();
				return false;
			}
		}
		var TTIAChargeBoxId = document.getElementById("TTIAChargeBoxId").value;
		if(TTIAChargeBoxId!=""){
			if(TTIAChargeBoxId>255){
				alert("Value of Charge Box Id should be less than 255!");
				document.getElementById("TTIAChargeBoxId").focus();
				return false;
			}
		}
<?php } ?>
		return true;
	}
	function OcppSecurityProfile_changed(){
		if(document.getElementById("OcppSecurityProfile").value == "1" || document.getElementById("OcppSecurityProfile").value == "2"){
			document.getElementById("OcppSecurityPasswordDiv").style.display="block";
		}
		else{
			document.getElementById("OcppSecurityPasswordDiv").style.display="none";
		}
	}

<?php if(substr($ModelName,0,2)=="AX"){?>
	function isEnableLocalPowerSharging_changed(){
		if(document.getElementById("isEnableLocalPowerSharging").selectedIndex==1){
			document.getElementById("OcppServerURL").setAttribute("readOnly","true");
			document.getElementById("MaintainServerURL").setAttribute("readOnly","true");
			document.getElementById("ChargeBoxId").setAttribute("readOnly","true");
			document.getElementById("chargePointVendor").setAttribute("readOnly","true");
		}
		else{
			document.getElementById("OcppServerURL").removeAttribute("readOnly");
			document.getElementById("MaintainServerURL").removeAttribute("readOnly");
			document.getElementById("ChargeBoxId").removeAttribute("readOnly");
			document.getElementById("chargePointVendor").removeAttribute("readOnly");
		}
	}
<?php } ?>
<?php if(substr($ModelName,0,1)=="D" && substr($ModelName,3,1)=="C"){?>
	function isEnableTTIAChecked(){
		if(document.getElementById("isEnableTTIA").checked){
			document.getElementById("server_addrDiv").style.display="block";
			document.getElementById("server_portDiv").style.display="block";
			document.getElementById("busVenderIdDiv").style.display="block";
			document.getElementById("EquipmentProviderDiv").style.display="block";
			document.getElementById("TransportationCompanyNoDiv").style.display="block";
			document.getElementById("ChargeBoxIdDiv").style.display="block";
			document.getElementById("evseStationDiv").style.display="block";
		}
		else{
			document.getElementById("server_addrDiv").style.display="none";
			document.getElementById("server_portDiv").style.display="none";
			document.getElementById("busVenderIdDiv").style.display="none";
			document.getElementById("EquipmentProviderDiv").style.display="none";
			document.getElementById("TransportationCompanyNoDiv").style.display="none";
			document.getElementById("ChargeBoxIdDiv").style.display="none";
			document.getElementById("evseStationDiv").style.display="none";
		}
	}
<?php } ?>
	function isNumberKey(evt)
	{
		var charCode = (evt.which) ? evt.which : event.keyCode
		
		if (charCode > 31 && (charCode < 48 || charCode > 57) && (charCode != 46))
			return false;
		
		return true;
	}
	function UTF8Length(tx){
		var str = encodeURIComponent(tx);
		len = str.replace(/%[A-F\d]{2}/g, 'U').length;
		return len;
	}
</script>


</html>