W1CDN/vulpes
1
0
Fork 0
Code Issues 20 Pull Requests 1 Packages Projects Releases Wiki Activity

Hide elements on webform until they are needed #48

Open
W1CDN wants to merge 2 commits from prettify into main
pull from: prettify
merge into: W1CDN:main
Conversation 2 Commits 2 Files Changed 1 +62 -17
1 changed files with 62 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
vulpes/src/main.cpp
View File

@ -72,7 +72,15 @@ long pause_until_millis = 0;
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html><head>
<link rel="icon" href="data:,">
<title>ESP Input Form</title>
<title>Vulpes Radio Orienteering Controller</title>
<style>
.inv_message {
display: none;
}
.inv_program {
display: none;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript">
// Utility from https://webreflection.medium.com/using-the-input-datetime-local-9503e7efdce
@ -123,7 +131,7 @@ const char index_html[] PROGMEM = R"rawliteral(
<h2>General Settings</h2>
<p>Sending program:
<select name="inputSend" id="send-program">
<option value="0" >0 - Off</option>
<option value="0">0 - Off</option>
<option value="1">1 - Continuous</option>
<option value="2">2 - Cycle</option>
</select><br>
@ -138,24 +146,29 @@ const char index_html[] PROGMEM = R"rawliteral(
<option value="5">5 - MO5</option>
</select><br>
Custom message: <input type="text" name="inputCustomMsg" value = "%inputCustomMsg%"><br>
<!-- Hidden unless "0 - Custom Message" is selected -->
<span id="message0" class="inv_message">
Custom message: <input type="text" name="inputCustomMsg" value = "%inputCustomMsg%"><br>
</span>
Speed: <input type="number" name="inputWPM" value = %inputWPM%> WPM
</p>
<h2>Cycle Settings</h2>
<p>Only applies when <em>Sending Program</em> is set to "2 - Cycle". You cannot set a cycle start date more than a month in advance.</p>
<p>Cycle start time <input type="datetime-local" id="js_start_time_unix_entry" /><br>
Current value: <b><span id=current-start></span></b>
<!-- Hidden unless "2 - Cycle" is selected -->
<span id="program2" class="inv_program">
<h2>Cycle Settings</h2>
<p>Only applies when <em>Sending Program</em> is set to "2 - Cycle". You cannot set a cycle start date more than a month in advance.<br>
Cycle start time <input type="datetime-local" id="js_start_time_unix_entry" /><br>
Current value: <b><span id=current-start></span></b><br>
<!-- JS converts the entered start time to a unix timestamp, and copies that value
to this hidden field so the user doesn't have to see it. -->
<input type="hidden" name="inputStartTimeUnix" id="js_start_time_unix" /></p>
<p>
Step length: <input type="number" name="inputStepLength" min=1000 step=1000 value = %inputStepLength%> milliseconds <br>
Cycle ID: <input type="number" name="inputCycleID" min=1 value = %inputCycleID%><br>
Number of transmitters: <input type="number" name="inputNtransmitters" min=1 value = %inputNtransmitters%><br>
</p>
<!-- JS converts the entered start time to a unix timestamp, and copies that value
to this hidden field so the user doesn't have to see it. -->
<input type="hidden" name="inputStartTimeUnix" id="js_start_time_unix" /></p>
Step length: <input type="number" name="inputStepLength" min=1000 step=1000 value = %inputStepLength%> milliseconds <br>
Cycle ID: <input type="number" name="inputCycleID" min=1 value = %inputCycleID%><br>
Number of transmitters: <input type="number" name="inputNtransmitters" min=1 value = %inputNtransmitters%><br>
</p>
</span>
<!-- This field is hidden so people don't change the submit time (it will be wrong).
The value is automatically filled in with JS. -->
@ -166,9 +179,41 @@ const char index_html[] PROGMEM = R"rawliteral(
<input type="submit" value="Submit"">
</form>
<iframe style="display:none" name="hidden-form" id="hidden-form"></iframe>
<script type="text/javascript">
// Show more stuff depending on selected values
// https://stackoverflow.com/a/24849350
show_message = function () {
'use strict';
var vis_message = document.querySelector('.vis_message'),
target = document.getElementById("message"+this.value);
if (vis_message !== null) {
vis_message.className = 'inv_message';
}
if (target !== null ) {
target.className = 'vis_message';
}
}
show_program = function () {
'use strict';
var vis_program = document.querySelector('.vis_program'),
target = document.getElementById("program"+this.value);
if (vis_program !== null) {
vis_program.className = 'inv_program';
}
if (target !== null ) {
target.className = 'vis_program';
}
}
document
.getElementById('message')
.addEventListener('change', show_message);
document
.getElementById('send-program')
.addEventListener('change', show_program);
</script>
</body></html>)rawliteral";