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=$lang->showWord('disconnected');
			break;
		case 1:
			$OcppConnStatus=$lang->showWord('connected');
			break;
	}
	$MaintainServerConnStatus='';
	switch ($obj->{'MaintainServerConnStatus'}){
		case 0:
			$MaintainServerConnStatus=$lang->showWord('disconnected');
			break;
		case 1:
			$MaintainServerConnStatus=$lang->showWord('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><?php echo $lang->showWord("backend_connection_timeout"); ?></label>
											<input type="number" 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><?php echo $lang->showWord("offline_policy"); ?></label>
											<select class="form-control" id="OfflinePolicy" name="OfflinePolicy">
												<option value="0" <?php echo $obj->{'OfflinePolicy'}=="0"?"selected":""?>><?php echo $lang->showWord("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":""?>><?php echo $lang->showWord("free_charging"); ?></option>
												<option value="3" <?php echo $obj->{'OfflinePolicy'}=="3"?"selected":""?>><?php echo $lang->showWord("no_charging"); ?></option>
											</select>
										</div>
										<div class="form-group" style="display:<?php echo $am101;?>">
											<label><?php echo $lang->showWord("offline_max_charge_energy"); ?></label>
											<small class="form-text text-muted-red">kWh</small>
											<input type="number" name="OfflineMaxChargeEnergy" id="OfflineMaxChargeEnergy" class="form-control" value="<?php echo $obj->{'OfflineMaxChargeEnergy'};?>">
										</div>
										<div class="form-group" style="display:<?php echo $am101;?>">
											<label><?php echo $lang->showWord("offline_max_charge_duration"); ?></label>
											<small class="form-text text-muted-red">minutes</small>
											<input type="number" 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><?php echo $lang->showWord("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><?php echo $lang->showWord("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 htmlspecialchars($obj->{'ChargeBoxId'});?>">
										</div>
										<div class="form-group" style="display:<?php echo $am101;?>">
											<label><?php echo $lang->showWord("charge_point_vendor"); ?></label>
											<input type="text" name="chargePointVendor" id="chargePointVendor" class="form-control" value="<?php echo htmlspecialchars($obj->{'chargePointVendor'});?>">
										</div>
										<div class="form-group" style="display:<?php echo $am101;?>">
											<label><?php echo $lang->showWord("ocpp_security_profile"); ?></label>
											<select class="form-control" id="OcppSecurityProfile" name="OcppSecurityProfile" onchange="OcppSecurityProfile_changed()">
												<option value="0" <?php echo $obj->{'OcppSecurityProfile'}=="0"?"selected":""?>><?php echo $lang->showWord("none_security"); ?></option>
												<option value="1" <?php echo $obj->{'OcppSecurityProfile'}=="1"?"selected":""?>><?php echo $lang->showWord("unsecured_transport_with_basic_atuentication"); ?></option>
												<option value="2" <?php echo $obj->{'OcppSecurityProfile'}=="2"?"selected":""?>><?php echo $lang->showWord("tls_with_basic_authentication"); ?></option>
												<option value="3" <?php echo $obj->{'OcppSecurityProfile'}=="3"?"selected":""?>><?php echo $lang->showWord("tls_with_client_side_certificates"); ?></option>
											</select>
										</div>
										<div id="OcppSecurityPasswordDiv" class="form-group" style="display:<?php echo $am101;?>">
											<label><?php echo $lang->showWord("ocpp_security_password"); ?></label>
											<input type="password" name="OcppSecurityPassword" id="OcppSecurityPassword" class="form-control floatingPassword" value="<?php echo htmlspecialchars($obj->{'OcppSecurityPassword'});?>">
											<i id="checkEye1" class="fa fa-eye" style="opacity: 0.5;color: red;"></i>
										</div>
										<div id="TLSwithClientSideCertificatesDiv" class="form-group file-upload" style="display:<?php echo $am101;?>">
											<div class="file-upload">
												<label><?php echo $lang->showWord("private_key_file"); ?> sha256 hash: <font color="#ff0000">(<?php echo strlen($obj->{'ChargePointPrivateKey'})>0?$obj->{'ChargePointPrivateKey'}:'File not found'?>)</font></label>
												<div class="file-loading">
													<input name="private_key" id="private_key" type="file" class="file" data-show-preview="false" data-show-upload="false" accept=".key">
												</div>
											</div>
											<div class="file-upload">
												<label><?php echo $lang->showWord("certificate_file"); ?> sha256 hash: <font color="#ff0000">(<?php echo strlen($obj->{'ChargePointCertificate'})>0?$obj->{'ChargePointCertificate'}:"File not found"?>)</font></label>
												<div class="file-loading">
													<input name="certificate" id="certificate" type="file" class="file" data-show-preview="false" data-show-upload="false" accept=".pem">
												</div>
											</div>
											<div class="file-upload">
												<label><?php echo $lang->showWord("MORootCertificate_file"); ?> sha256 hash: <font color="#ff0000">(<?php echo strlen($obj->{'MORootCertificate'})>0?$obj->{'MORootCertificate'}:"File not found"?>)</font></label>
												<div class="file-loading">
													<input name="MORootCertificate" id="MORootCertificate" type="file" class="file" data-show-preview="false" data-show-upload="false" accept=".pem">
												</div>
											</div>
											<div class="file-upload">
												<label><?php echo $lang->showWord("CSRootCertificate_file"); ?> sha256 hash: <font color="#ff0000">(<?php echo strlen($obj->{'CSRootCertificate'})>0?$obj->{'CSRootCertificate'}:"File not found"?>)</font></label>
												<div class="file-loading">
													<input name="CSRootCertificate" id="CSRootCertificate" type="file" class="file" data-show-preview="false" data-show-upload="false" accept=".pem">
												</div>
											</div>
											<div class="file-upload">
												<label><?php echo $lang->showWord("ManufacturerRootCertificate_file"); ?> sha256 hash: <font color="#ff0000">(<?php echo strlen($obj->{'ManufacturerRootCertificate'})>0?$obj->{'ManufacturerRootCertificate'}:"File not found"?>)</font></label>
												<div class="file-loading">
													<input name="ManufacturerRootCertificate" id="ManufacturerRootCertificate" type="file" class="file" data-show-preview="false" data-show-upload="false" accept=".pem">
												</div>
											</div>
										</div>
<?php if(substr($ModelName,0,2)=="AX" || substr($ModelName,0,1)=="D"){?>
										<div class="form-group" style="display:block">
											<label><?php echo $lang->showWord("ocpp_receipt_url"); ?></label>
											<input type="text" name="OcppReceiptrURL" id="OcppReceiptrURL" class="form-control" value="<?php echo $obj->{'OcppReceiptrURL'};?>">
										</div>
<?php } ?>
<?php if(substr($ModelName,0,2)=="AX" || substr($ModelName,0,2)=="AW" || substr($ModelName,0,1)=="D"){?>
										<div class="form-group" style="display:block">
											<label><?php echo $lang->showWord("local_loading_balance"); ?></label>
											<select class="form-control" id="isEnableLocalPowerSharging" name="isEnableLocalPowerSharging" onChange="isEnableLocalPowerSharging_changed()">
												<option value="0" <?php echo $obj->{'isEnableLocalPowerSharging'}=="0"?"selected":""?>><?php echo $lang->showWord("disable"); ?></option>
												<option value="1" <?php echo $obj->{'isEnableLocalPowerSharging'}=="1"?"selected":""?>><?php echo $lang->showWord("master"); ?></option>
												<option value="2" <?php echo $obj->{'isEnableLocalPowerSharging'}=="2"?"selected":""?>><?php echo $lang->showWord("slave"); ?></option>
											</select>
										</div>
										<div id="PowerSharingCapacityDiv" class="form-group" style="display:<?php echo $am101;?>">
											<label>Power Sharing Capacity</label><small class="form-text text-muted-red"> W</small>
											<input type="number" min="0" max="5000000" name="PowerSharingCapacity" id="PowerSharingCapacity" class="form-control" value="<?php echo $obj->{'PowerSharingCapacity'};?>">											
											<small class="form-text text-muted-red">'0' means follow rating power from model name</small>
										</div>
										<div id="PowerSharingServerIPDiv" class="form-group" style="display:<?php echo $am101;?>">
											<label><?php echo $lang->showWord("power_sharing_server_ip"); ?></label>
											<input type="text" name="PowerSharingServerIP" id="PowerSharingServerIP" class="form-control" value="<?php echo $obj->{'PowerSharingServerIP'};?>">
										</div>
<?php } ?>
										<div class="form-group" style="display:<?php echo $am101;?>">
											<label><?php echo $lang->showWord("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><?php echo $lang->showWord("maintain_server_url"); ?></label>
											<input type="text" name="MaintainServerURL" id="MaintainServerURL" class="form-control" value="<?php echo $obj->{'MaintainServerURL'};?>">
										</div>
										
										<div class="form-group" style="display:<?php echo $am101;?>">
											<label><?php echo $lang->showWord("maintain_server_security_profile"); ?></label>
											<select class="form-control" id="MaintainServerSecurityProfile" name="MaintainServerSecurityProfile" onchange="MaintainServerSecurityProfile_changed()">
												<option value="0" <?php echo $obj->{'MaintainServerSecurityProfile'}=="0"?"selected":""?>><?php echo $lang->showWord("none_security"); ?></option>
												<option value="1" <?php echo $obj->{'MaintainServerSecurityProfile'}=="1"?"selected":""?>><?php echo $lang->showWord("unsecured_transport_with_basic_atuentication"); ?></option>
												<option value="2" <?php echo $obj->{'MaintainServerSecurityProfile'}=="2"?"selected":""?>><?php echo $lang->showWord("tls_with_basic_authentication"); ?></option>
												<!--<option value="3" <?php echo $obj->{'MaintainServerSecurityProfile'}=="3"?"selected":""?>><?php echo $lang->showWord("tls_with_client_side_certificates"); ?></option>-->
											</select>
										</div>
										<div id="MaintainServerSecurityPasswordDiv" class="form-group" style="display:<?php echo $am101;?>">
											<label><?php echo $lang->showWord("maintain_server_security_password"); ?></label>
											<input type="password" name="MaintainServerSecurityPassword" id="MaintainServerSecurityPassword" class="form-control floatingPassword" value="<?php echo htmlspecialchars($obj->{'MaintainServerSecurityPassword'});?>">
											<i id="checkEye2" class="fa fa-eye" style="opacity: 0.5;color: red;"></i>
										</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" || substr($ModelName,0,2)=="AW" || substr($ModelName,0,1)=="D"){?>
	$(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();
	MaintainServerSecurityProfile_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 formData = new FormData();
			if(document.getElementById("private_key").value != ""){
				var fileInput = document.getElementById('private_key');
				var file = fileInput.files[0];
				formData.append("private_key", file);
			}
			if(document.getElementById("certificate").value != ""){
				var fileInput = document.getElementById('certificate');
				var file = fileInput.files[0];
				formData.append("certificate", file);
			}
			if(document.getElementById("MORootCertificate").value != ""){
				var fileInput = document.getElementById('MORootCertificate');
				var file = fileInput.files[0];
				formData.append("MORootCertificate", file);
			}
			if(document.getElementById("CSRootCertificate").value != ""){
				var fileInput = document.getElementById('CSRootCertificate');
				var file = fileInput.files[0];
				formData.append("CSRootCertificate", file);
			}
			if(document.getElementById("ManufacturerRootCertificate").value != ""){
				var fileInput = document.getElementById('ManufacturerRootCertificate');
				var file = fileInput.files[0];
				formData.append("ManufacturerRootCertificate", file);
			}
			formData.append("BackendConnTimeout", document.getElementById("BackendConnTimeout").value);
			formData.append("OfflinePolicy", document.getElementById("OfflinePolicy").value);
			formData.append("OfflineMaxChargeEnergy", document.getElementById("OfflineMaxChargeEnergy").value);
			formData.append("OfflineMaxChargeDuration", document.getElementById("OfflineMaxChargeDuration").value);
			formData.append("OcppServerURL", escapeHtml(document.getElementById("OcppServerURL").value));
			formData.append("MaintainServerURL", escapeHtml(document.getElementById("MaintainServerURL").value));
			formData.append("ChargeBoxId", escapeHtml(document.getElementById("ChargeBoxId").value));
			formData.append("chargePointVendor", escapeHtml(document.getElementById("chargePointVendor").value));
			formData.append("OcppSecurityProfile", document.getElementById("OcppSecurityProfile").value);
			formData.append("OcppSecurityPassword", escapeHtml(document.getElementById("OcppSecurityPassword").value));
			//formData.append("file", file);
			formData.append("MaintainServerSecurityProfile", document.getElementById("MaintainServerSecurityProfile").value);
			formData.append("MaintainServerSecurityPassword", escapeHtml(document.getElementById("MaintainServerSecurityPassword").value));
<?php if(substr($ModelName,0,2)=="AX" || substr($ModelName,0,2)=="AW" || substr($ModelName,0,1)=="D"){?>
			formData.append("isEnableLocalPowerSharging", document.getElementById("isEnableLocalPowerSharging").value);
			formData.append("PowerSharingServerIP", document.getElementById("PowerSharingServerIP").value);
			formData.append("PowerSharingCapacity", document.getElementById("PowerSharingCapacity").value);
<?php } ?>
<?php if(substr($ModelName,0,2)=="AX" || substr($ModelName,0,1)=="D"){?>
			formData.append("OcppReceiptrURL", escapeHtml(document.getElementById("OcppReceiptrURL").value));
<?php } ?>
<?php if(substr($ModelName,0,1)=="D" && substr($ModelName,3,1)=="C"){?>
			formData.append("isEnableTTIA", (document.getElementById("isEnableTTIA").checked?"1":"0"));
			formData.append("server_addr", document.getElementById("server_addr").value);
			formData.append("server_port", document.getElementById("server_port").value);
			formData.append("busVenderId", document.getElementById("busVenderId").value);
			formData.append("EquipmentProvider", document.getElementById("EquipmentProvider").value);
			formData.append("TransportationCompanyNo", document.getElementById("TransportationCompanyNo").value);
			formData.append("TTIAChargeBoxId", document.getElementById("TTIAChargeBoxId").value);
			formData.append("evseStation", document.getElementById("evseStation").value);
<?php } ?>

			// POST 請求必須設置表頭在 open() 下面，send() 上面
//			request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			request.send(formData);

			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("OcppSecurityProfile").value == "3"){
			document.getElementById("OcppSecurityPasswordDiv").style.display="block";
			if(document.getElementById("OcppSecurityProfile").value == "3"){
				document.getElementById("TLSwithClientSideCertificatesDiv").style.display="block";
			}
			else{
				document.getElementById("TLSwithClientSideCertificatesDiv").style.display="none";
			}
		}
		else{
			document.getElementById("OcppSecurityPasswordDiv").style.display="none";
			document.getElementById("TLSwithClientSideCertificatesDiv").style.display="none";
		}
	}
	function MaintainServerSecurityProfile_changed(){
		if(document.getElementById("MaintainServerSecurityProfile").value == "1" || document.getElementById("MaintainServerSecurityProfile").value == "2" || document.getElementById("MaintainServerSecurityProfile").value == "3"){
			document.getElementById("MaintainServerSecurityPasswordDiv").style.display="block";
		}
		else{
			document.getElementById("MaintainServerSecurityPasswordDiv").style.display="none";
		}
	}

<?php if(substr($ModelName,0,2)=="AX" || substr($ModelName,0,2)=="AW" || substr($ModelName,0,1)=="D"){?>
	function isEnableLocalPowerSharging_changed(){
		/*
		if(document.getElementById("isEnableLocalPowerSharging").selectedIndex!=0){
			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");
		}*/

		if(document.getElementById("isEnableLocalPowerSharging").selectedIndex==1)
		{
			document.getElementById("PowerSharingCapacityDiv").style.display="block";	
			document.getElementById("PowerSharingServerIPDiv").style.display="none";	
		}
		else if(document.getElementById("isEnableLocalPowerSharging").selectedIndex==2)
		{
			document.getElementById("PowerSharingCapacityDiv").style.display="none";	
			document.getElementById("PowerSharingServerIPDiv").style.display="block";				
		}
		else
		{
			document.getElementById("PowerSharingCapacityDiv").style.display="none";	
			document.getElementById("PowerSharingServerIPDiv").style.display="none";
		}
	}
<?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;
	}
	function escapeHtml(text) {
		var map = {
			'&': '&amp;',
			'<': '&lt;',
			'>': '&gt;',
			'"': '&quot;',
			"'": '&#039;'
		};
		return text.replace(/[&<>"']/g, function(m) { return map[m]; });
	}
	$("#checkEye1").click(function () {
		if($(this).hasClass('fa-eye')){
			$("#OcppSecurityPassword").attr('type', 'text');
		}else{
			$("#OcppSecurityPassword").attr('type', 'password');
		}
		$("#checkEye1").toggleClass('fa-eye').toggleClass('fa-eye-slash');
	});
	$("#checkEye2").click(function () {
		if($(this).hasClass('fa-eye')){
			$("#MaintainServerSecurityPassword").attr('type', 'text');
		}else{
			$("#MaintainServerSecurityPassword").attr('type', 'password');
		}
		$("#checkEye2").toggleClass('fa-eye').toggleClass('fa-eye-slash');
	});
</script>


</html>