|
@@ -22,6 +22,142 @@ img {
|
|
|
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">
|
|
|
<!--
|
|
@@ -124,6 +260,51 @@ img {
|
|
|
<?php } ?>
|
|
|
</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>
|
|
@@ -144,6 +325,11 @@ img {
|
|
|
$(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() {
|
|
@@ -168,6 +354,16 @@ img {
|
|
|
"&OcppSecurityPassword=" + escape(document.getElementById("OcppSecurityPassword").value);
|
|
|
<?php if(substr($ModelName,0,2)=="AX"){?>
|
|
|
data += "&isEnableLocalPowerSharging=" + document.getElementById("isEnableLocalPowerSharging").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");
|
|
@@ -217,6 +413,56 @@ img {
|
|
|
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(){
|
|
@@ -241,6 +487,28 @@ img {
|
|
|
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)
|
|
|
{
|
|
@@ -251,7 +519,11 @@ img {
|
|
|
|
|
|
return true;
|
|
|
}
|
|
|
-
|
|
|
+ function UTF8Length(tx){
|
|
|
+ var str = encodeURIComponent(tx);
|
|
|
+ len = str.replace(/%[A-F\d]{2}/g, 'U').length;
|
|
|
+ return len;
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
|