Fixed config tab look. Rearranged html code.

This commit is contained in:
Kai Lauterbach 2023-05-03 14:05:04 +02:00
parent d015f5b31c
commit ebf587c73e
9 changed files with 50 additions and 38 deletions

View file

@ -1,6 +1,9 @@
<div id="tab-config" class="">
<form class="pure-form pure-form-aligned" action="/" method="post">
<h3>Config</h3>
<br>
<label for="startup">
<strong>Light initialization</strong>
</label>
<div class="pure-control-group">
<label for="startup">
<strong>Startup</strong>
@ -22,7 +25,9 @@
</select>
</div>
<br>
<h3>Wifi</h3>
<label for="startup">
<strong>Wifi</strong>
</label>
<div class="pure-control-group">
<label for="ip">SSID</label>
<input id="ssid" name="ssid" type="text" value="{{WIFI_SSID}}">
@ -32,7 +37,9 @@
<input id="wpw" name="wpw" type="text" placeholder="1234password">
</div>
<br>
<h3>Network</h3>
<label for="startup">
<strong>Network</strong>
</label>
<div class="pure-control-group">
<label for="dip">
<strong>Dynamic-IP</strong>

View file

@ -12,6 +12,9 @@
<style>
#tab-lights, #tab-config, #tab-tde {
display: none;
background-color: #ffffff;
color: black;
font-weight: bold;
}
#tab-lights.visible {
display: block;
@ -35,22 +38,25 @@ display: block;
<a href="/?alert=1" class="pure-button">alert</a>
</div>
<br>
<div>
<div><!-- Tab links -->
<a href="#" id="tab-a-lights" class="pure-button pure-button-primary">Lights control</a>
<a href="#" id="tab-a-config" class="pure-button">Config</a>
<a href="#" id="tab-a-tde" class="pure-button">Timing data edit</a>
</div>
<br>
<div id="tab-lights" class="visible"> <!-- lights control tab -->
<br>
<div class="pure-control-group">
<label for="tc_on">
<strong>Timing control</strong>
</label>
<a id="tc_on" class="pure-button {{TC_LINK_PRIMARY_ON}}" href="#">ON</a>
<a id="tc_off" class="pure-button {{TC_LINK_PRIMARY_OFF}}" href="#">OFF</a>
<br>
<label for="transition">Transition time (s)</label>
<input id="transition" name="transition" type="text" placeholder="10" value="{{TRANSITION_TIME}}">
</div>
<br>
<script>
var links = document.querySelectorAll('[id^="tc_on"]');
links.forEach(function(link) {
@ -76,15 +82,7 @@ document.getElementById('tc_off').classList.add('pure-button-primary');
document.getElementById('tc_on').classList.remove('pure-button-primary');
});
});
</script>
<br>
<div class="pure-control-group">
<label for="transition">Transition time (s)</label>
<input id="transition" name="transition" type="text" placeholder="10" value="{{TRANSITION_TIME}}">
</div>
<br>
<script>
let timeoutId;
function sendSliderValue(x) {
x = x - 1;

View file

@ -734,12 +734,14 @@ String replacePlaceholder(String http_content)
if (tc_val == TIMING_CONTROL_ENABLED)
{
http_content.replace("{{TC_LINK_PRIMARY_ON}}", "pure-button-primary");
} else {
http_content.replace("{{TC_LINK_PRIMARY_ON}}", "");
}
if (tc_val == TIMING_CONTROL_DISABLED)
{
http_content.replace("{{TC_LINK_PRIMARY_OFF}}", "pure-button-primary");
} else {
http_content.replace("{{TC_LINK_PRIMARY_OFF}}", "");
}

View file

@ -1,6 +1,9 @@
<div id="tab-config" class="">
<form class="pure-form pure-form-aligned" action="/" method="post">
<h3>Config</h3>
<br>
<label for="startup">
<strong>Light initialization</strong>
</label>
<div class="pure-control-group">
<label for="startup">
<strong>Startup</strong>
@ -22,7 +25,9 @@
</select>
</div>
<br>
<h3>Wifi</h3>
<label for="startup">
<strong>Wifi</strong>
</label>
<div class="pure-control-group">
<label for="ip">SSID</label>
<input id="ssid" name="ssid" type="text" value="{{WIFI_SSID}}">
@ -32,7 +37,9 @@
<input id="wpw" name="wpw" type="text" placeholder="1234password">
</div>
<br>
<h3>Network</h3>
<label for="startup">
<strong>Network</strong>
</label>
<div class="pure-control-group">
<label for="dip">
<strong>Dynamic-IP</strong>

View file

@ -12,6 +12,9 @@
<style>
#tab-lights, #tab-config, #tab-tde {
display: none;
background-color: #ffffff;
color: black;
font-weight: bold;
}
#tab-lights.visible {
display: block;
@ -35,22 +38,25 @@
<a href="/?alert=1" class="pure-button">alert</a>
</div>
<br>
<div>
<div><!-- Tab links -->
<a href="#" id="tab-a-lights" class="pure-button pure-button-primary">Lights control</a>
<a href="#" id="tab-a-config" class="pure-button">Config</a>
<a href="#" id="tab-a-tde" class="pure-button">Timing data edit</a>
</div>
<br>
<div id="tab-lights" class="visible"> <!-- lights control tab -->
<br>
<div class="pure-control-group">
<label for="tc_on">
<strong>Timing control</strong>
</label>
<a id="tc_on" class="pure-button {{TC_LINK_PRIMARY_ON}}" href="#">ON</a>
<a id="tc_off" class="pure-button {{TC_LINK_PRIMARY_OFF}}" href="#">OFF</a>
<br>
<label for="transition">Transition time (s)</label>
<input id="transition" name="transition" type="text" placeholder="10" value="{{TRANSITION_TIME}}">
</div>
<br>
<script>
var links = document.querySelectorAll('[id^="tc_on"]');
links.forEach(function(link) {
@ -76,15 +82,7 @@
document.getElementById('tc_on').classList.remove('pure-button-primary');
});
});
</script>
<br>
<div class="pure-control-group">
<label for="transition">Transition time (s)</label>
<input id="transition" name="transition" type="text" placeholder="10" value="{{TRANSITION_TIME}}">
</div>
<br>
<script>
let timeoutId;
function sendSliderValue(x) {
x = x - 1;

View file

@ -1,7 +1,7 @@
#!/bin/bash
bash ../../tools/html2string.sh org/index_template_top.html > index_template_top.html
bash ../../tools/html2string.sh org/index_template_middle.html > index_template_middle.html
bash ../../tools/html2string.sh org/index_template_bottom.html > index_template_bottom.html
bash ../../tools/html2string.sh org/config_template.html > config_template.html
bash ../../tools/html2string.sh org/light_control_template.html > light_control_template.html
bash ../../tools/html2string.sh ../html/index_template_top.html > index_template_top.html
bash ../../tools/html2string.sh ../html/index_template_middle.html > index_template_middle.html
bash ../../tools/html2string.sh ../html/index_template_bottom.html > index_template_bottom.html
bash ../../tools/html2string.sh ../html/config_template.html > config_template.html
bash ../../tools/html2string.sh ../html/light_control_template.html > light_control_template.html