From cbbecfdc6def0ed2ed2d76de2a073d01e70abd5a Mon Sep 17 00:00:00 2001 From: Christian Herzog Date: Sun, 22 Sep 2019 12:01:41 +0200 Subject: [PATCH] make buttons work --- components/wifi-manager/code.js | 156 ++++++++++----------- components/wifi-manager/index.html | 119 +++++++++------- components/wifi-manager/style.css | 217 ++++++++++------------------- 3 files changed, 215 insertions(+), 277 deletions(-) diff --git a/components/wifi-manager/code.js b/components/wifi-manager/code.js index 12328e61..ed59e196 100644 --- a/components/wifi-manager/code.js +++ b/components/wifi-manager/code.js @@ -24,6 +24,7 @@ var StatusIntervalActive = false; var ConfigIntervalActive = false; var RefreshAPIIntervalActive = false; +var output = ''; //TODO check var to = 0, set_int = 0; @@ -65,7 +66,7 @@ function RepeatCheckConfigInterval(){ function RepeatRefreshAPInterval(){ if(RefreshAPIIntervalActive) - startRefreshAPInterval() + startRefreshAPInterval(); } $(document).ready(function(){ @@ -175,16 +176,81 @@ $(document).ready(function(){ $( "#wifi" ).slideDown( "fast", function() {}) }); - $("#update-command").click(function() { - updateAutoexec(); + $("#autoexec-cb").on("click", function() { + autoexec = (this.checked)?1:0; + $.ajax({ + url: '/config.json', + dataType: 'json', + method: 'POST', + cache: false, + headers: { "X-Custom-autoexec": autoexec }, + data: { 'timestamp': Date.now() } + }); + console.log('sent config JSON with headers:', autoexec); + }); + + $("#save-autoexec1").on("click", function() { + autoexec1 = $("#autoexec1").val(); + + $.ajax({ + url: '/config.json', + dataType: 'json', + method: 'POST', + cache: false, + headers: { "X-Custom-autoexec1": autoexec1 }, + data: { 'timestamp': Date.now() } + }); + console.log('sent config JSON with headers:', autoexec1); + }); + + $("#recovery").on("click", function() { + $.ajax({ + url: '/recovery.json', + dataType: 'json', + method: 'POST', + cache: false, + data: { 'timestamp': Date.now()} + }); + }); + + $("#reboot").on("click", function() { + $.ajax({ + url: '/reboot.json', + dataType: 'json', + method: 'POST', + cache: false, + data: { 'timestamp': Date.now()} + }); + }); + + $("#generate-command").on("click", function() { + var commandLine = commandHeader + '-n ' + $("#player").val(); + + if (output == 'bt') { + commandLine += ' -o "BT -n \'' + $("#btsink").val() + '\'" -R -Z 192000'; + } else if (output == 'spdif') { + commandLine += ' -o SPDIF -R -Z 192000'; + } else { + commandLine += ' -o I2S'; + } + if ($("#optional").val() != '') { + commandLine += ' ' + $("#optional").val(); + } + $("#autoexec1").val(commandLine); }); - $("#generate-command").click(function() { - generateCommand(); - }); - - $('[name=audio]').click(function(){ - selectOutput(this); + $('[name=audio]').on("click", function(){ + console.log(this); + if (this.id == 'bt') { + $("#btsinkdiv").show(200); + output = 'bt'; + } else if (this.id == 'spdif') { + $("#btsinkdiv").hide(200); + output = 'spdif'; + } else { + $("#btsinkdiv").hide(200); + output = 'i2s'; + } }); //first time the page loads: attempt to get the connection status and start the wifi scan @@ -240,8 +306,6 @@ function performConnect(conntype){ startRefreshAPInterval(); } - - function rssiToIcon(rssi){ if(rssi >= -60){ return 'w0'; @@ -367,7 +431,6 @@ function getConfig() { } else { console.log('turn off autoexec'); $("#autoexec-cb")[0].checked=false; - $("#autoexec-command").hide(200); } } if (data.hasOwnProperty('recovery')) { @@ -399,77 +462,8 @@ function getConfig() { }); } -function updateAutoexec(){ - autoexec = ($("#autoexec-cb")[0].checked)?1:0; - autoexec1 = $("#autoexec1").val(); - - $.ajax({ - url: '/config.json', - dataType: 'json', - method: 'POST', - cache: false, - headers: { "X-Custom-autoexec": autoexec, "X-Custom-autoexec1": autoexec1 }, - data: { 'timestamp': Date.now() } - }); - console.log('sent config JSON with headers:', autoexec, autoexec1); -} -var output = ''; -function selectOutput(el) { - if ($(el).attr('id') == 'bt') { - $("#btsinkdiv").show(200); - output = 'bt'; - } else if ($(el).attr('id') == 'spdif') { - $("#btsinkdiv").hide(200); - output = 'spdif'; - } else { - $("#btsinkdiv").hide(200); - output = 'i2s'; - } -} -function generateCommand() { - var commandLine = commandHeader + '-n ' + $("#player").val(); - - if (output == 'bt') { - commandLine += ' -o "BT -n \'' + $("#btsink").val() + '\'" -R -Z 192000'; - } else if (output == 'spdif') { - commandLine += ' -o SPDIF -R -Z 192000'; - } else { - commandLine += ' -o I2S'; - } - if ($("#optional").val() != '') { - commandLine += ' ' + $("#optional").val(); - } - $("#autoexec1").val(commandLine); -} - -function handleClick(item) { - console.log(item); - if (item.id == 'autoexec-cb') { - if (item.checked) { - $("#autoexec-command").show(200); - } else { - $("#autoexec-command").hide(200); - } - } else if (item.id == 'recovery') { - $.ajax({ - url: '/recovery.json', - dataType: 'json', - method: 'POST', - cache: false, - data: { 'timestamp': Date.now()} - }); - } else if (item.id == 'reboot') { - $.ajax({ - url: '/reboot.json', - dataType: 'json', - method: 'POST', - cache: false, - data: { 'timestamp': Date.now()} - }); - } -} //TODO daduke check function file_change() { diff --git a/components/wifi-manager/index.html b/components/wifi-manager/index.html index 830b7b81..89d48cc1 100644 --- a/components/wifi-manager/index.html +++ b/components/wifi-manager/index.html @@ -4,19 +4,21 @@ + - - + + + esp32-wifi-manager @@ -31,6 +33,9 @@
  • Audio + LMS
    • +
  • + GPIO +
  • System
    • @@ -67,8 +72,8 @@
    - - + +
    @@ -81,8 +86,8 @@
    - - + +
    @@ -105,7 +110,7 @@
    - +
    @@ -117,7 +122,7 @@

    - +

    IP Address

    @@ -127,15 +132,15 @@
    Default Gateway:
    - +

    Are you sure you would like to disconnect from this wifi?

    - - + +
    @@ -143,58 +148,70 @@
    -

    Run squeezelite automatically at boot

    -
    - +

    Run squeezelite automatically at boot

    + +
    + +
    -
    -
    -

    Audio output

    - - - - - - +
    +

    Audio output

    +
    +
    + + +
    +
    + + +
    +
    + + +
    -
    - -
    -
    -

    Player name

    - -
    -
    -

    Optional setting (e.g. for LMS IP address)

    - -
    - -
    - -
    - -

    Squeezelite command to run

    -
    - -
    +
    + +
    +
    +

    Player name

    + +
    +
    +

    Optional setting (e.g. for LMS IP address)

    + +
    + +
    + +
    + +

    Squeezelite command to run

    +
    + +
    +
    + +
    +
    + +
    -

    Check for firmware upgrade

    +

    Check for firmware upgrade

    - +

    Currently running: 0.1 - latest available version: 0.2

    -

    Reboot to recovery system to perform firmware upgrade

    +

    Reboot to recovery system to perform firmware upgrade

    - +
    @@ -205,9 +222,9 @@ -

    Reboot system with new firmware

    +

    Reboot system with new firmware

    - +
    diff --git a/components/wifi-manager/style.css b/components/wifi-manager/style.css index 39d1414f..961621ed 100644 --- a/components/wifi-manager/style.css +++ b/components/wifi-manager/style.css @@ -1,8 +1,6 @@ body { - background-color: #eee; border: 0; margin: 0; - font: 1.1em tahoma, arial, sans-serif; } a { color: darkblue; @@ -12,49 +10,12 @@ a { a:hover { color: red; } -input { - font: 1.1em tahoma, arial, sans-serif; -} input:focus, select:focus, textarea:focus, button:focus { outline: none; } -input[type="button"] { - padding: 5px; - text-align: center; - display: block; -} -p { - padding: 10px; -} -#credits { - display: none; -} -#app {} #app-wrap {} #disconnect { - width: 150px; -} -.diag-box { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - height: 100%; - width: 100%; - display: none; -} -.diag-box-win { - position: absolute; - left: 10%; - width: 80%; - text-align: center; - border: 2px outset #888; - background-color: #fff; - border-radius: 10px; - top: 20%; -} .blur { -webkit-filter: blur(2px); -moz-filter: blur(2px); @@ -65,29 +26,26 @@ p { .ape { margin-left: 20px; padding: 10px 0px 10px 10px; + background-color: #444; } .ape:hover { cursor: pointer; } -.brdb { - border-bottom: 1px solid #888; -} header { - background-color: #fff; - border-bottom: 1px solid #888; - border-top: 1px solid #888; + border-bottom: 1px solid #000; + border-top: 1px solid #000; } section { - background-color: #fff; - border-bottom: 1px solid #888; - border-top: 1px solid #888; + border-bottom: 1px solid #000; + border-top: 1px solid #000; } h1 { - display: block; - text-align: center; margin: 0; - padding: 15px; - font-size: 1.4em + margin-top: 20px; + padding: 10px; + text-transform: uppercase; + color: #888; + font-size: 1.6em } h2 { margin: 0; @@ -154,9 +112,6 @@ h3 { #no-disconnect { display: inline-block; } -.ctr { - margin: 0 auto; -} .tctr { text-align: center; } @@ -248,117 +203,91 @@ h3 { } /* end of SpinKit */ -.toggle label { - position: relative; - display: inline-block; - height: 3.5em; +/* daduke stuff */ +input[type='text'], input[type='password'], textarea { + background: #999; + border: 0; + padding: 4px; } -.toggle input { - display: none; + + +.custom-switch, .custom-radio { + padding-left: 2.25rem; + margin-left: 12px; + padding-bottom: 1rem; } -.toggle .slider { - /* Grundfläche */ - - position: absolute; - cursor: pointer; - top: 1.5em; - - left: 8px; - - width: 4em; - height: 2em; - background-color: #c32e04; - /* red */ - - transition: all .3s ease-in-out; - border-radius: 1em; +.custom-checkbox > .custom-control-label { + padding-top: 0.5rem; + padding-left: 2rem; + padding-bottom: 0.1rem; } -.toggle .slider:before { - /* verschiebbarer Button */ - - position: absolute; - content: ""; - height: 1.6em; - width: 1.6em; - left: 0.2em; - bottom: 0.2em; - background-color: white; - border-radius: 50%; - transition: all .3s ease-in-out; +.custom-switch .custom-control-label::before { + left: -2.25rem; + height: 2rem; + width: 3.5rem; + pointer-events: all; + border-radius: 1rem; } -.toggle input:checked + .slider { - background-color: #5a9900; - /* green */ +.custom-switch .custom-control-label::after { + top: calc(0.25rem + 2px); + left: calc(-2.25rem + 2px); + width: calc(2rem - 4px); + height: calc(2rem - 4px); + background-color: #adb5bd; + border-radius: 2rem; + transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out; + transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out; +} +@media (prefers-reduced-motion: reduce) { + .custom-switch .custom-control-label::after { + transition: none; + } } -.toggle input:focus + .slider { - background-color: pink; - box-shadow: 0 0 1px #5a9900; +.custom-switch .custom-control-input:checked ~ .custom-control-label::after { + background-color: #fff; + -webkit-transform: translateX(1.5rem); //translateX(0.75rem); + transform: translateX(1.5rem); //translateX(0.75rem); } -.toggle input:checked + .slider:before { - -webkit-transform: translateX(1.9em); - /* Android 4 */ - - -ms-transform: translateX(1.9em); - /* IE9 */ - - transform: translateX(1.9em); + + + + + + + +textarea#autoexec1 { + width: 80%; } -.text .slider:after { - /* Text vor dem FlipFlop-Schalter */ - - position: absolute; - content: "AUS"; - color: #c32e04; - font-weight: bold; - height: 1.6em; - left: -2.5em; - bottom: 0.2em; +input, textarea { + margin-left: 10px; + border-radius: 3px; + border: 1px solid transparent; + border-top: none; + border-bottom: 1px solid #DDD; + box-shadow: inset 0 1px 2px rgba(0,0,0,.39), 0 -1px 1px #FFF, 0 1px 0 #FFF; } -.text input:checked + .slider:after { - /* Text hinter dem FlipFlop-Schalter */ - - position: absolute; - content: "AN"; - color: #5a9900; - left: 4.5em; -} - -input#autoexec1 { - border: none; - margin-left: 35px; - padding: 10px 0px 10px 10px; -} - -input#ota { - margin-top: 5px; - margin-bottom: 5px; +.form-group { + margin-left: 10px; } #otadiv { - margin-bottom: 15px; -} - -#btsink, #player, #optional { - margin-left: 13px; + display: none; } #btsinkdiv { - display: none; - margin-top: 20px; -} - -textarea#autoexec1 { - width: 100%; + display: none; } +/* .toggle-buttons input[type="radio"] { visibility: hidden; width: 3px; @@ -376,6 +305,4 @@ textarea#autoexec1 { box-shadow: none; } -#otadiv { - display: none; -} +*/