use toggleDisplay JS func for hiding static ip config when dhcp is used

This commit is contained in:
Marcus 2024-10-26 20:22:53 +02:00
parent c466f1396f
commit b7d21ca868
5 changed files with 89 additions and 154 deletions

View file

@ -63,8 +63,6 @@
* 5 - NO_PWM: No PWM output
* 6 - PWM_BOOT: PWM at boot time
*/
const byte GPIO_Index_len = 6;
const byte BOOTFAILS_LOW = 1;
const byte BOOTFAILS_HIGH = 2;
const byte FLASHMODE_LOW = 3;
@ -72,7 +70,6 @@ const byte INPUT_ONLY = 4;
const byte NO_PWM = 5;
const byte HIGH_BOOT = 6;
char BOOTFAILS_LOW_descr[] = "BF_LOW";
char BOOTFAILS_HIGH_descr[] = "BF_HIGH";
char FLASMODE_LOW_descr[] = "FM_LOW";

View file

@ -52,8 +52,12 @@ function showSelect(selectId, prefix, hideClass = '') {
if(hideClass != '') {
hideAllClass(hideClass);
}
let selVal = document.getElementById(selectId).value;
toggleDisplay(prefix + selVal);
toggleId = prefix + selVal;
if(document.getElementById(toggleId) !== null ) {
toggleDisplay(toggleId);
}
})";
void WebFile_cangrow_JS(AsyncWebServerRequest *request) {

View file

@ -47,12 +47,13 @@ const char* Page_wifi_HTML PROGMEM = R"(%HEADER%
<input type='password' name='config.wifi.password'><br>
<u>DHCP</u>:<br>
<select name='config.wifi.dhcp' required>
<select id='dhcp_sel' name='config.wifi.dhcp' onchange="showSelect('dhcp_sel', 'dhcp_', 'hidden');" required>
<option disabled value='' selected hidden>---</option>
<option value='1'>On</option>
<option value='0'>Off</option>
</select><br>
<div class='hidden' id='dhcp_0'>
<u>IP</u>:<br>
<input class='inputShort' type='number' min='0' max='255' name='config.wifi.ip0'> .
<input class='inputShort' type='number' min='0' max='255' name='config.wifi.ip1'> .
@ -76,8 +77,8 @@ const char* Page_wifi_HTML PROGMEM = R"(%HEADER%
<input class='inputShort' type='number' min='0' max='255' name='config.wifi.dns1'> .
<input class='inputShort' type='number' min='0' max='255' name='config.wifi.dns2'> .
<input class='inputShort' type='number' min='0' max='255' name='config.wifi.dns3'><br>
</div>
<br>
<input type='submit' value='&#x1F4BE; Save settings'>
</form>
%FOOTER%)";

View file

@ -7,7 +7,6 @@ body {
.footer {
color: #343B35;
/*text-align: center;*/
}
.center {
@ -16,19 +15,10 @@ body {
}
.centered {
/*display: block;*/
margin-left: auto;
margin-right: auto;
}
td {
text-align: left;
vertical-align: middle;
}
/*h1, h2, h3, h4, h5 {
text-align: center;
}*/
h1 {
margin: 15px;
}
@ -41,6 +31,11 @@ h3 {
margin: 5px;
}
td {
text-align: left;
vertical-align: middle;
}
a:link, a:visited {
color: #04AA6D;
}
@ -179,6 +174,10 @@ input[type=text], input[type=date], input[type=number], input[type=password], se
border-radius: 3px;
}
.hidden {
display: none;
}
@media only screen and (min-width: 1820px) {
/*.center, .nav {
width: 60; min-width: 420px;

View file

@ -5,142 +5,76 @@
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>CanGrow - CanGrow v0.2-dev</title>
<link rel='stylesheet' href='cangrow.css'>
<style>
.outputSel {
display: none;
}
</style>
<script>
function toggleDisplay(id) {
let el = document.getElementById(id);
let el_cs = getComputedStyle(el);
if (el_cs.getPropertyValue('display') === 'none') {
el.style.display = 'inline';
} else {
el.style.display = 'none';
}
}
function hideAllClass(classname) {
const el = document.getElementsByClassName(classname);
for(let i = 0; i < el.length ; i++) {
el[i].style.display = '';
}
}
function showSelect(selectId, prefix, hideClass = '') {
if(hideClass != '') {
hideAllClass(hideClass);
}
let selVal = document.getElementById(selectId).value;
toggleDisplay(prefix + selVal);
}
</script>
<script type='text/javascript' src='cangrow.js'></script>
</head>
<body>
<ul class='nav'><li><a href='/'>&#x1F331; CanGrow</a></li>
<li><a class='' href='/grow/' >&#128262; Grow settings</a></li>
<li><a class='activeNav' href='/system/' >&#9881; System settings</a></li>
<li><a class='' href='/wifi/' >&#128225; WiFi settings</a></li>
<li><a class='' href='/system/' >&#9881; System settings</a></li>
<li><a class='activeNav' href='/wifi/' >&#128225; WiFi settings</a></li>
<li><a class='' href='/help' >&#x2753; Help</a></li>
<li><span class='navTime'>04:20:23</span></li>
<li><a href='https://git.la10cy.net/DeltaLima/CanGrow' target='_blank'>CanGrow v0.2-dev</a></li>
</ul>
<div class='center'>
<ul class='subnav'>
<li><a class='activeNav' href='/system/output/'>&#9889; Output configuration</a></li>
<li><a class='' href='/system/update'>&#x1F504; Firmware update</a></li>
<li><a class='' href='/system/restart' >&#x1F501; CanGrow restart</a></li>
<li><a class='' href='/system/wipe' >&#x1F4A3; Factory reset</a></li>
</ul>
<h3>&#10133; Add output</h3>
<b><u>Current Settings:</u></b><br>WiFi SSID: <b>Gefahrenzone</b><br>
Use DHCP: <b>1</b><br>
IP address: <b>192.168.30.220</b><br>
Subnet mask: <b>255.255.255.0</b><br>
Gateway: <b>192.168.30.1</b><br>
DNS: <b>192.168.30.1</b><br><br>
<p>Select your wifi network from the SSID list.
<br>Reload the page, if your network is not listed.</p>
<form method='post' action='/wifi/'>
<p>Add a new output to CanGrow.</p>
<form method='post' action='/system/output/add'>
<u>SSID</u>:<br>
<select id='config.wifi.ssid' name='config.wifi.ssid' required>
<option disabled value='' selected hidden>-Select your network-</option>
<option value='Vodafone-BF20'>Vodafone-BF20</option><option value='Punkrock is good for you'>Punkrock is good for you</option><option value='I_Need_Pete;)'>I_Need_Pete;)</option><option value='FRITZ!Box 7530 VC'>FRITZ!Box 7530 VC</option><option value='o2-WLAN90'>o2-WLAN90</option><option value='Smarties'>Smarties</option><option value='DIRECT-i3-BRAVIA'>DIRECT-i3-BRAVIA</option><option value='Baerenhoehle 1'>Baerenhoehle 1</option><option value='Gefahrenzone'>Gefahrenzone</option><option value='Nukular-Netz'>Nukular-Netz</option><option value='PYUR Community'>PYUR Community</option><option value='PYUR 491DB'>PYUR 491DB</option>
<u>Type</u>:<br>
<select id='type_sel' name='config.system.httpLogSerial' onchange="showSelect('type_sel', 'type_', 'outputSel');" required>
<option disabled value='' selected hidden>---</option>
<option value='1'>GPIO</option>
<option value='2'>I2C</option>
<option value='3'>URL</option>
</select><br>
<u>Device</u>:<br>
<select name='config.system.httpLogSerial' required>
<u>Password</u>:<br>
<input type='password' name='config.wifi.password'><br>
<u>DHCP</u>:<br>
<select id='dhcp_sel' name='config.wifi.dhcp' onchange="showSelect('dhcp_sel', 'dhcp_', 'hidden');" required>
<option disabled value='' selected hidden>---</option>
<option value='1'>Light</option>
<option value='2'>Fan</option>
<option value='3'>Pump</option>
<option value='3'>Humidifier</option>
<option value='3'>Dehumidifier</option>
<option value='3'>Heating</option>
<option value='1'>On</option>
<option value='0'>Off</option>
</select><br>
<u>Name</u>:<br>
<input type='text' name='esp32camIp' maxlength='16' value='' ><br>
<div class='hidden' id='dhcp_0'>
<u>IP</u>:<br>
<input class='inputShort' type='number' min='0' max='255' name='config.wifi.ip0'> .
<input class='inputShort' type='number' min='0' max='255' name='config.wifi.ip1'> .
<input class='inputShort' type='number' min='0' max='255' name='config.wifi.ip2'> .
<input class='inputShort' type='number' min='0' max='255' name='config.wifi.ip3'><br>
<u>Enable</u>:<br>
<select name='config.system.httpLogSerial' required>
<option disabled value='' selected hidden>---</option>
<option value='1'>Yes</option>
<option value='0'>No</option>
</select><br>
<u>Netmask</u>:<br>
<input class='inputShort' type='number' min='0' max='255' name='config.wifi.netmask0'> .
<input class='inputShort' type='number' min='0' max='255' name='config.wifi.netmask1'> .
<input class='inputShort' type='number' min='0' max='255' name='config.wifi.netmask2'> .
<input class='inputShort' type='number' min='0' max='255' name='config.wifi.netmask3'><br>
<u>Gateway</u>:<br>
<input class='inputShort' type='number' min='0' max='255' name='config.wifi.gateway0'> .
<input class='inputShort' type='number' min='0' max='255' name='config.wifi.gateway1'> .
<input class='inputShort' type='number' min='0' max='255' name='config.wifi.gateway2'> .
<input class='inputShort' type='number' min='0' max='255' name='config.wifi.gateway3'><br>
<div class='outputSel' id='type_1'>
<u>GPIO</u>:<br>
<select name='config.system.httpLogSerial' required>
<option disabled value='' selected hidden>---</option>
<option value='0'>GPIO 0 !BFL!</option>
<option value='1'>GPIO 12</option>
<option value='2'>GPIO 13</option>
<option value='2'>GPIO 14</option>
<option value='2'>GPIO 15 !BFH!</option>
<option value='2'>GPIO 16 !NOPWM!</option>
</select><br>
<u>GPIO PWM</u>:<br>
<select name='config.system.httpLogSerial' required>
<option disabled value='' selected hidden>---</option>
<option value='1'>Enable</option>
<option value='2'>Disable</option>
</select><br>
<u>DNS</u>:<br>
<input class='inputShort' type='number' min='0' max='255' name='config.wifi.dns0'> .
<input class='inputShort' type='number' min='0' max='255' name='config.wifi.dns1'> .
<input class='inputShort' type='number' min='0' max='255' name='config.wifi.dns2'> .
<input class='inputShort' type='number' min='0' max='255' name='config.wifi.dns3'><br>
</div>
<div class='outputSel' id='type_2'>
<u>I2C</u>:<br>
<input type='text' name='esp32camIp' maxlength='16' value='' ><br>
</div>
<div class='outputSel' id='type_3'>
<u>Host</u>:<br>
<input type='text' name='esp32camIp' maxlength='16' value='' ><br>
<u>URI on</u>:<br>
<input type='text' name='esp32camIp' maxlength='16' value='' ><br>
<u>URI off</u>:<br>
<input type='text' name='esp32camIp' maxlength='16' value='' ><br>
</div>
<br>
<input type='submit' value='&#x1F4BE; Save settings'>
</form>
<script>
</script>
<div class='footer'><span>Build: d679d89-esp8266-20241024231631</span></div>
<div class='footer'><span>Build: c466f13-esp8266-20241026195848</span></div>
</div></body></html>