From 4094adbae66e8e5ab5483513f312d7194c30a8a9 Mon Sep 17 00:00:00 2001 From: userName Date: Sat, 21 Jul 2018 23:45:48 +0300 Subject: [PATCH 1/3] changed the look and feel of the checkboxes to resolve Edge issue and bring disabled state also minor html fixes --- code/html/custom.css | 143 +++++++++++++++++++++++++++---------------- code/html/custom.js | 67 +++++--------------- code/html/index.html | 7 ++- 3 files changed, 109 insertions(+), 108 deletions(-) diff --git a/code/html/custom.css b/code/html/custom.css index 62926cf2bd..df37d21b34 100644 --- a/code/html/custom.css +++ b/code/html/custom.css @@ -61,7 +61,7 @@ h2 { .hint { color: #ccc; font-size: 80%; - margin: -10px 0 10px 0; + margin: 0px 0 10px 0; } .hint a { @@ -158,6 +158,9 @@ div.state { .main-buttons button { width: 100px; } +.button-del-schedule { + margin-top: 15px; +} .button-reboot, .button-reconnect, @@ -233,59 +236,91 @@ span.slider { Checkboxes -------------------------------------------------------------------------- */ -.checkbox-container { - width: 130px; - height: 30px; - margin: 3px 0 10px 0px; - position: relative; - border-radius: 4px; - overflow: hidden; - user-select: none; - cursor: pointer; -} - -.checkbox-container input { - display: none; -} - -.inner-container { - position: absolute; - left: 0; - top: 0; - width: inherit; - height: inherit; - text-transform: uppercase; - font-size: .7em; - letter-spacing: .2em; -} - -.inner-container:first-child { - background: #e9e9e9; - color: #a9a9a9; -} - -.inner-container:nth-child(2) { - background: #c00000; - color: white; - -webkit-clip-path: inset(0 50% 0 0); - clip-path: inset(0 50% 0 0); - transition: .3s cubic-bezier(0,0,0,1); -} - -.toggle { - width: 50%; - position: absolute; - height: inherit; - display: flex; - box-sizing: border-box; -} - -.toggle p { - margin: auto; -} - -.toggle:nth-child(1) { - right: 0; +.toggleWrapper{ + overflow: hidden; + width:auto; + height:29px; + border: 1px solid #AAA; + margin: 0px; + padding: 0px; + border-radius: 4px; + box-shadow: inset 1px 1px #CCC; +} +.toggleWrapper input{ + position: absolute; + left: -99em; +} +.toggle{ + margin: 0px !important; + padding: 0px!important; + letter-spacing:normal; + cursor: pointer; + display: inline-block; + position: relative; + width: 130px; + height: 100%; + background: #e9e9e9; + color: #a9a9a9; + border-radius: 4px; + -webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); + transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); +} +.toggle:before, .toggle:after{ + position: absolute; + line-height: 30px; + font-size: .7em; + z-index: 2; + -webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); + transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); +} +.toggle:before{ + content: "NO"; + left: 20px; +} +.toggle:after{ + content: "YES"; + right: 20px; +} +.toggle__handler{ + display: inline-block; + position: relative; + z-index: 1; + background: #c00000; + width: 50%; + height: 100%; + border-radius: 4px; + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; + top: 0px; + left: 0px; + -webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); + transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); + -webkit-transform: translateX(0px); + transform: translateX(0px); +} +input:checked + .toggle:after { + color: #fff; +} +input:checked + .toggle:before { + color: #a9a9a9; +} +input + .toggle:before { + color: #fff; +} +input[disabled] + .toggle .toggle__handler{ + background: #CCC !important; +} + +input:checked + .toggle .toggle__handler{ + width: 50%; + background: #00c000; + -webkit-transform: translateX(65px); + transform: translateX(65px); + border-color: #000; + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; } /* ----------------------------------------------------------------------------- diff --git a/code/html/custom.js b/code/html/custom.js index 725c4e4793..a3a719afd8 100644 --- a/code/html/custom.js +++ b/code/html/custom.js @@ -785,11 +785,13 @@ function addSchedule(event) { }); $(line).find(".button-del-schedule").on("click", delSchedule); $(line).find(".button-more-schedule").on("click", moreSchedule); + $(line).find("input[name='schUTC']").prop("id", "schUTC" + (numSchedules + 1)) + .next().prop("for", "schUTC" + (numSchedules + 1)); + $(line).find("input[name='schEnabled']").prop("id", "schEnabled" + (numSchedules + 1)) + .next().prop("for", "schEnabled" + (numSchedules + 1)); line.appendTo("#schedules"); $(line).find("input[type='checkbox']").prop("checked", false); - initCheckboxes(); - return line; } @@ -809,7 +811,15 @@ function initRelays(data) { // Add relay fields var line = $(template).clone(); $(".id", line).html(i); - $(":checkbox", line).prop('checked', data[i]).attr("data", i); + $(":checkbox", line).prop('checked', data[i]).attr("data", i) + .prop("id", "relay" + i) + .on("change", function (event) { + console.log("sending message"); + var id = parseInt($(event.target).attr("data"), 10); + var status = $(event.target).prop("checked"); + doToggle(id, status); + }); + $("label.toggle", line).prop("for", "relay" + i) line.appendTo("#relays"); // Populate the relay SELECTs @@ -820,57 +830,13 @@ function initRelays(data) { } -function initCheckboxes() { - - var setCheckbox = function(element, value) { - var container = $(".toggle-container", $(element)); - if (value) { - container.css("-webkit-clip-path", "inset(0 0 0 50%)"); - container.css("clip-path", "inset(0 0 0 50%)"); - container.css("backgroundColor", "#00c000"); - } else { - container.css("-webkit-clip-path", "inset(0 50% 0 0)"); - container.css("clip-path", "inset(0 50% 0 0)"); - container.css("backgroundColor", "#c00000"); - } - } - - $(".checkbox-container") - - .each(function() { - var status = $(this).next().prop('checked'); - setCheckbox(this, status); - }) - .off('click') - .on('click', function() { - - var checkbox = $(this).next(); - - var status = checkbox.prop('checked'); - status = !status; - checkbox.prop('checked', status); - setCheckbox(this, status); - - if ("relay" == checkbox.attr('name')) { - var id = parseInt(checkbox.attr('data'), 10); - doToggle(id, status); - } - - }); - -} - function createCheckboxes() { $("input[type='checkbox']").each(function() { - var text_on = $(this).attr("on") || "YES"; - var text_off = $(this).attr("off") || "NO"; - - var toggles = "

" + text_on + "

" + text_off + "

"; - var content = "
" + toggles - + "
" + toggles + "
"; - $(this).before(content).hide(); + if($(this).prop("name"))$(this).prop("id", $(this).prop("name")); + $(this).parent().addClass("toggleWrapper"); + $(this).after('') }); @@ -1499,7 +1465,6 @@ function processData(data) { } resetOriginals(); - initCheckboxes(); } diff --git a/code/html/index.html b/code/html/index.html index 6b7cb43b39..03a2554d83 100644 --- a/code/html/index.html +++ b/code/html/index.html @@ -633,7 +633,7 @@

You can configure up to 5 different WiFi networks. The device will try to co
-
+
ESPurna will scan for visible WiFi SSIDs and try to connect to networks defined below in order of signal strength, even if multiple AP share the same SSID. When disabled, ESPurna will try to connect to the networks in the same order they are listed below. Disable this option if you are connecting to a single access point (or router) or to a hidden SSID. @@ -1390,6 +1390,7 @@

+
@@ -1402,7 +1403,7 @@

-
+

@@ -1434,7 +1435,7 @@

- +
From df9fecd16a3571138886cab6bd2c87bf0f3cfb80 Mon Sep 17 00:00:00 2001 From: userName Date: Sun, 22 Jul 2018 09:00:02 +0300 Subject: [PATCH 2/3] removed blind copy/paste console.log.... improved CSS to comply with CODACY rules --- code/html/custom.css | 19 +++++++++++++------ code/html/custom.js | 35 +++++++++++++++++++++++++---------- 2 files changed, 38 insertions(+), 16 deletions(-) diff --git a/code/html/custom.css b/code/html/custom.css index df37d21b34..5c4fae7138 100644 --- a/code/html/custom.css +++ b/code/html/custom.css @@ -250,9 +250,11 @@ span.slider { position: absolute; left: -99em; } +label[for].toggle{ + margin: 0px; + padding: 0px; +} .toggle{ - margin: 0px !important; - padding: 0px!important; letter-spacing:normal; cursor: pointer; display: inline-block; @@ -277,10 +279,16 @@ span.slider { content: "NO"; left: 20px; } +input[name="relay"] + .toggle:before{ + content: "OFF"; +} .toggle:after{ content: "YES"; right: 20px; } +input[name="relay"] + .toggle:after{ + content: "ON"; +} .toggle__handler{ display: inline-block; position: relative; @@ -307,10 +315,6 @@ input:checked + .toggle:before { input + .toggle:before { color: #fff; } -input[disabled] + .toggle .toggle__handler{ - background: #CCC !important; -} - input:checked + .toggle .toggle__handler{ width: 50%; background: #00c000; @@ -322,6 +326,9 @@ input:checked + .toggle .toggle__handler{ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } +input[disabled] + .toggle .toggle__handler{ + background: #ccc; +} /* ----------------------------------------------------------------------------- Loading diff --git a/code/html/custom.js b/code/html/custom.js index a3a719afd8..09346936d8 100644 --- a/code/html/custom.js +++ b/code/html/custom.js @@ -814,7 +814,6 @@ function initRelays(data) { $(":checkbox", line).prop('checked', data[i]).attr("data", i) .prop("id", "relay" + i) .on("change", function (event) { - console.log("sending message"); var id = parseInt($(event.target).attr("data"), 10); var status = $(event.target).prop("checked"); doToggle(id, status); @@ -1523,6 +1522,9 @@ function initUrls(root) { } else { urls.ws.protocol = "ws:"; } + + urls.ws.port = Number(urls.ws.port) + 1; + } @@ -1530,24 +1532,37 @@ function connectToURL(url) { initUrls(url); + + /* + $.ajax({ 'method': 'GET', 'crossDomain': true, 'url': urls.auth.href, 'xhrFields': { 'withCredentials': true } }).done(function(data) { - if (websock) { websock.close(); } - websock = new WebSocket(urls.ws.href); - websock.onmessage = function(evt) { - var data = getJson(evt.data.replace(/\n/g, "\\n").replace(/\r/g, "\\r").replace(/\t/g, "\\t")); - if (data) { - processData(data); - } - }; + +*/ + + if (websock) { + websock.close(); + } + websock = new WebSocket(urls.ws.href); + websock.onmessage = function (evt) { + var data = getJson(evt.data.replace(/\n/g, "\\n").replace(/\r/g, "\\r").replace(/\t/g, "\\t")); + if (data) { + processData(data); + } + }; + + /* + }).fail(function() { // Nothing to do, reload page and retry }); - + +*/ + } function connect(host) { From 959bb2a5987a4272ddd911e8260e974e0e64e535 Mon Sep 17 00:00:00 2001 From: userName Date: Sun, 22 Jul 2018 09:06:52 +0300 Subject: [PATCH 3/3] some socket debugging escaped... sorry) --- code/html/custom.js | 34 +++++++++------------------------- 1 file changed, 9 insertions(+), 25 deletions(-) diff --git a/code/html/custom.js b/code/html/custom.js index 09346936d8..e36b99eec3 100644 --- a/code/html/custom.js +++ b/code/html/custom.js @@ -1522,9 +1522,6 @@ function initUrls(root) { } else { urls.ws.protocol = "ws:"; } - - urls.ws.port = Number(urls.ws.port) + 1; - } @@ -1532,37 +1529,24 @@ function connectToURL(url) { initUrls(url); - - /* - $.ajax({ 'method': 'GET', 'crossDomain': true, 'url': urls.auth.href, 'xhrFields': { 'withCredentials': true } }).done(function(data) { - -*/ - - if (websock) { - websock.close(); - } - websock = new WebSocket(urls.ws.href); - websock.onmessage = function (evt) { - var data = getJson(evt.data.replace(/\n/g, "\\n").replace(/\r/g, "\\r").replace(/\t/g, "\\t")); - if (data) { - processData(data); - } - }; - - /* - + if (websock) { websock.close(); } + websock = new WebSocket(urls.ws.href); + websock.onmessage = function(evt) { + var data = getJson(evt.data.replace(/\n/g, "\\n").replace(/\r/g, "\\r").replace(/\t/g, "\\t")); + if (data) { + processData(data); + } + }; }).fail(function() { // Nothing to do, reload page and retry }); - -*/ - + } function connect(host) {