mh
/
mhsw-espurna
1
0
Fork 0
Code Releases 0 Activity
Browse Source

Merge branch 'dev' of github.com:xoseperez/espurna into dev

v2
Xose Pérez 6 years ago
parent
9078ff3404 ae00c4e7b5
commit
b37c471909
3 changed files with 115 additions and 108 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +96
    -54
      code/html/custom.css
  2. +15
    -51
      code/html/custom.js
  3. +4
    -3
      code/html/index.html

+ 96
- 54
code/html/custom.css View File

@ -61,7 +61,7 @@ h2 {
.hint { .hint {
color: #ccc; color: #ccc;
font-size: 80%; font-size: 80%;
margin: -10px 0 10px 0;
margin: 0px 0 10px 0;
} }
.hint a { .hint a {
@ -158,6 +158,9 @@ div.state {
.main-buttons button { .main-buttons button {
width: 100px; width: 100px;
} }
.button-del-schedule {
margin-top: 15px;
}
.button-reboot, .button-reboot,
.button-reconnect, .button-reconnect,
@ -233,59 +236,98 @@ span.slider {
Checkboxes 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;
}
label[for].toggle{
margin: 0px;
padding: 0px;
}
.toggle{
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;
}
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;
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: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;
}
input[disabled] + .toggle .toggle__handler{
background: #ccc;
} }
/* ----------------------------------------------------------------------------- /* -----------------------------------------------------------------------------


+ 15
- 51
code/html/custom.js View File

@ -785,11 +785,13 @@ function addSchedule(event) {
}); });
$(line).find(".button-del-schedule").on("click", delSchedule); $(line).find(".button-del-schedule").on("click", delSchedule);
$(line).find(".button-more-schedule").on("click", moreSchedule); $(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.appendTo("#schedules");
$(line).find("input[type='checkbox']").prop("checked", false); $(line).find("input[type='checkbox']").prop("checked", false);
initCheckboxes();
return line; return line;
} }
@ -809,7 +811,14 @@ function initRelays(data) {
// Add relay fields // Add relay fields
var line = $(template).clone(); var line = $(template).clone();
$(".id", line).html(i); $(".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) {
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"); line.appendTo("#relays");
// Populate the relay SELECTs // Populate the relay SELECTs
@ -820,57 +829,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() { function createCheckboxes() {
$("input[type='checkbox']").each(function() { $("input[type='checkbox']").each(function() {
var text_on = $(this).attr("on") || "YES";
var text_off = $(this).attr("off") || "NO";
var toggles = "<div class=\"toggle\"><p>" + text_on + "</p></div><div class=\"toggle\"><p>" + text_off + "</p></div>";
var content = "<div class=\"checkbox-container\"><div class=\"inner-container\">" + toggles
+ "</div><div class=\"inner-container toggle-container\">" + toggles + "</div></div>";
$(this).before(content).hide();
if($(this).prop("name"))$(this).prop("id", $(this).prop("name"));
$(this).parent().addClass("toggleWrapper");
$(this).after('<label for="' + $(this).prop("name") + '" class="toggle"><span class="toggle__handler"></span></label>')
}); });
@ -1499,7 +1464,6 @@ function processData(data) {
} }
resetOriginals(); resetOriginals();
initCheckboxes();
} }


+ 4
- 3
code/html/index.html View File

@ -633,7 +633,7 @@
<div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="wifiScan" tabindex="1" /></div> <div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="wifiScan" tabindex="1" /></div>
<div class="pure-u-0 pure-u-lg-1-2"></div> <div class="pure-u-0 pure-u-lg-1-2"></div>
<div class="pure-u-0 pure-u-lg-1-4"></div> <div class="pure-u-0 pure-u-lg-1-4"></div>
<div class="pure-u-1 pure-u-lg-3-4 hint">
<div class="pure-u-1 pure-u-lg-3-4 hint"><thead>
ESPurna will scan for visible WiFi SSIDs and try to connect to networks defined below in order of <strong>signal strength</strong>, even if multiple AP share the same SSID. ESPurna will scan for visible WiFi SSIDs and try to connect to networks defined below in order of <strong>signal strength</strong>, 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. When disabled, ESPurna will try to connect to the networks in the same order they are listed below.
Disable this option if you are <strong>connecting to a single access point</strong> (or router) or to a <strong>hidden SSID</strong>. Disable this option if you are <strong>connecting to a single access point</strong> (or router) or to a <strong>hidden SSID</strong>.
@ -1390,6 +1390,7 @@
<label class="pure-u-1 pure-u-lg-1-4">Use UTC time</label> <label class="pure-u-1 pure-u-lg-1-4">Use UTC time</label>
<div class="pure-u-1 pure-u-lg-3-4"><input type="checkbox" name="schUTC" /></div> <div class="pure-u-1 pure-u-lg-3-4"><input type="checkbox" name="schUTC" /></div>
<div class="pure-u-0 pure-u-lg-1-2"></div>
<label class="pure-u-1 pure-u-lg-1-4">And weekday is one of</label> <label class="pure-u-1 pure-u-lg-1-4">And weekday is one of</label>
<div class="pure-u-2-5 pure-u-lg-1-5"> <div class="pure-u-2-5 pure-u-lg-1-5">
<input class="pure-u-23-24 pure-u-lg-23-24" name="schWDs" type="text" maxlength="15" tabindex="0" value="1,2,3,4,5,6,7" /> <input class="pure-u-23-24 pure-u-lg-23-24" name="schWDs" type="text" maxlength="15" tabindex="0" value="1,2,3,4,5,6,7" />
@ -1402,7 +1403,7 @@
<label class="pure-u-1 pure-u-lg-1-4">Enabled</label> <label class="pure-u-1 pure-u-lg-1-4">Enabled</label>
<div class="pure-u-1 pure-u-lg-3-4"><input type="checkbox" name="schEnabled" /></div> <div class="pure-u-1 pure-u-lg-3-4"><input type="checkbox" name="schEnabled" /></div>
<div class="pure-u-0 pure-u-lg-1-4"></div>
<div class="pure-u-1 pure-u-lg-1-2"></div>
<button class="pure-button button-del-schedule" type="button">Delete schedule</button> <button class="pure-button button-del-schedule" type="button">Delete schedule</button>
</div> </div>
</div> </div>
@ -1434,7 +1435,7 @@
<div id="relayTemplate" class="template"> <div id="relayTemplate" class="template">
<div class="pure-g"> <div class="pure-g">
<label class="pure-u-1 pure-u-lg-1-4">Switch #<span class="id"></span></label> <label class="pure-u-1 pure-u-lg-1-4">Switch #<span class="id"></span></label>
<input name="relay" type="checkbox" on="ON" off="OFF" />
<div><input name="relay" type="checkbox" on="ON" off="OFF" /></div>
</div> </div>
</div> </div>


Write Preview
Loading…
Cancel
Save