diff --git a/code/html/custom.css b/code/html/custom.css
index 62926cf2..5c4fae71 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,98 @@ 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;
+}
+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;
}
/* -----------------------------------------------------------------------------
diff --git a/code/html/custom.js b/code/html/custom.js
index 725c4e47..e36b99ee 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,14 @@ 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) {
+ 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 +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() {
$("input[type='checkbox']").each(function() {
- var text_on = $(this).attr("on") || "YES";
- var text_off = $(this).attr("off") || "NO";
-
- var toggles = "";
- var content = "" + toggles
- + "
" + toggles + "
-