xPablo.cz/ESPAsyncWebServer
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Testovani forku od Otto Wintera a ESPHome (je vyrazne dal, nez puvodni knihovna)

Browse Source
This commit is contained in:
Pavel Brychta
2022-10-06 06:25:13 +02:00
parent afbbf372bb
commit 165db0f093
131 changed files with 1506 additions and 17818 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
examples/SmartSwitch/data_src/js_css_src/js-time-picker/1-inline.html
View File

@ -1,30 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Inline Timepicker Example</title>
<!-- [1 - LOAD THE LIBRARIES] -->
<link href="tpick-light.css" rel="stylesheet">
<script src="tpick.js"></script>
<style>
html, body {font-family: arial;}
.myrow{display:block;float:left}
#pick-inline-on{width:45%}#t0{width:10%}#pick-inline-off{width:45%}
</style>
</head>
<body>
<h1>Inline Time Picker</h1>
<!-- [2 - DEFINE YOUR TEXT INPUT + CONTAINER] -->
<div id="pick-inline-on" class="myrow"><input type="text" id="input-inline-on"/> TIME ON</div>
<div id="t0" class="myrow"></div>
<div id="pick-inline-off" class="myrow"><input type="text" id="input-inline-off"/> TIME OFF</div>
<!-- [3 - ATTACH DATE PICKER ON LOAD] -->
<script>
window.addEventListener("load", function(){
// container + target input
tpick.attach("pick-inline-on", "input-inline-on");
tpick.attach("pick-inline-off", "input-inline-off");
});
</script>
</body>
</html>

27
examples/SmartSwitch/data_src/js_css_src/js-time-picker/2-popup.html
View File

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Popup Timeicker Example</title>
<!-- [1 - LOAD LIBRARIES] -->
<link href="tpick-light-pop.css" rel="stylesheet">
<script src="tpick-pop.js"></script>
<style>
html, body { font-family: arial; }
</style>
</head>
<body>
<h1>Popup Time Picker</h1>
<!-- [2 - DEFINE YOUR TEXT INPUT + CONTAINER] -->
<input type="text" id="input-popup-start"/> ON/OFF <input type="text" id="input-popup-stop"/> <button id="set" type="button" onclick="buttonClick(this);">SET</button>
<p>Line</p>
<!-- [3 - ATTACH DATE PICKER] -->
<script>
window.addEventListener("load", function(){
tpick.attach("input-popup-start");
tpick.attach("input-popup-stop");
});
</script>
</body>
</html>

29
examples/SmartSwitch/data_src/js_css_src/js-time-picker/README.txt
View File

@ -1,29 +0,0 @@
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
LICENSE
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
Copyright 2018 by Code Boxx
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
MORE
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
Please visit https://code-boxx.com/ for more!

65
examples/SmartSwitch/data_src/js_css_src/js-time-picker/tpick-light-pop.css
View File

@ -1,65 +0,0 @@
/* [CONTAINER] */
.tpop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
transition: all 0.5s;
visibility: hidden;
opacity: 0;
}
.tpop.show {
visibility: visible;
opacity: 1;
}
.tpicker {
background: #f2f2f2;
padding: 10px;
width: 100%;
max-width: 320px;
white-space: nowrap;
font-size: 32px;
font-weight: bold;
text-align: center;
}
.tpop .tpicker {
margin: 20px auto 0 auto;
}
/* [HR + MIN + AM/PM] */
.tpicker-h, .tpicker-m, .tpicker-ap {
display: inline-block;
width: 30%;
}
.tpicker input[type=text] {
box-sizing: border-box;
width: 70%;
padding: 10px;
margin: 5px 0;
border: 0;
background: #fff;
color: #888;
text-align: center;
font-size: 28px;
}
.tpicker-up, .tpicker-down {
text-align: center;
color: #ff853f;
cursor: pointer;
}
/* [CANCEL + OK BUTTON] */
.tpicker-btn {
margin-top: 10px;
}
.tpicker-btn input[type=button] {
width: 50%;
padding: 10px 0;
border: 0;
background: #a83a0b;
color: #fff;
font-size: 20px;
cursor: pointer;
}

47
examples/SmartSwitch/data_src/js_css_src/js-time-picker/tpick-light.css
View File

@ -1,47 +0,0 @@
/* [CONTAINER] */
.tpicker {
background: #f2f2f2;
padding: 10px;
width: 100%;
max-width: 320px;
white-space: nowrap;
font-size: 32px;
font-weight: bold;
text-align: center;
}
/* [HR + MIN + AM/PM] */
.tpicker-h, .tpicker-m, .tpicker-ap {
display: inline-block;
width: 30%;
}
.tpicker input[type=text] {
box-sizing: border-box;
width: 70%;
padding: 10px;
margin: 5px 0;
border: 0;
background: #fff;
color: #888;
text-align: center;
font-size: 28px;
}
.tpicker-up, .tpicker-down {
text-align: center;
color: #ff853f;
cursor: pointer;
}
/* [CANCEL + OK BUTTON] */
.tpicker-btn {
margin-top: 10px;
}
.tpicker-btn input[type=button] {
width: 50%;
padding: 10px 0;
border: 0;
background: #a83a0b;
color: #fff;
font-size: 20px;
cursor: pointer;
}

136
examples/SmartSwitch/data_src/js_css_src/js-time-picker/tpick-pop.js
View File

@ -1,136 +0,0 @@
var tpick = {
attach : function (target) {
// attach() : attach time picker to target
// Generate a unique random ID for the time picker
var uniqueID = 0;
while (document.getElementById("tpick-" + uniqueID) != null) {
uniqueID = Math.floor(Math.random() * (100 - 2)) + 1;
}
// Create wrapper
var tw = document.createElement("div");
tw.id = "tpick-" + uniqueID;
tw.classList.add("tpop");
tw.dataset.target = target;
tw.addEventListener("click", function (evt) {
if (evt.target.classList.contains("tpop")) {
this.classList.remove("show");
}
});
// Create new time picker
var tp = document.createElement("div");
tp.classList.add("tpicker");
// Create hour picker
tp.appendChild(this.draw("h"));
tp.appendChild(this.draw("m"));
tp.appendChild(this.draw("ap"));
// OK button
var bottom = document.createElement("div"),
ok = document.createElement("input");
ok.setAttribute("type", "button");
ok.value = "OK";
ok.addEventListener("click", function(){ tpick.set(this); });
bottom.classList.add("tpicker-btn");
bottom.appendChild(ok);
tp.appendChild(bottom);
// Attach time picker to body
tw.appendChild(tp);
document.body.appendChild(tw);
// Attach on focus event
var target = document.getElementById(target);
target.dataset.dp = uniqueID;
target.onfocus = function () {
document.getElementById("tpick-" + this.dataset.dp).classList.add("show");
};
},
draw : function (type) {
// draw() : support function to create the hr, min, am/pm selector
// Create the controls
var docket = document.createElement("div"),
up = document.createElement("div"),
down = document.createElement("div"),
text = document.createElement("input");
docket.classList.add("tpicker-" + type);
up.classList.add("tpicker-up");
down.classList.add("tpicker-down");
up.innerHTML = "&#65087;";
down.innerHTML = "&#65088;";
text.readOnly = true;
text.setAttribute("type", "text");
// Default values + click event
// You can do your own modifications here
if (type=="h") {
text.value = "12";
up.addEventListener("click", function(){ tpick.spin("h", 1, this); });
down.addEventListener("click", function(){ tpick.spin("h", 0, this); });
} else if (type=="m") {
text.value = "10";
up.addEventListener("click", function(){ tpick.spin("m", 1, this); });
down.addEventListener("click", function(){ tpick.spin("m", 0, this); });
} else {
text.value = "AM";
up.addEventListener("click", function(){ tpick.spin("ap", 1, this); });
down.addEventListener("click", function(){ tpick.spin("ap", 0, this); });
}
// Complete + return the docket
docket.appendChild(up);
docket.appendChild(text);
docket.appendChild(down);
return docket;
},
spin : function (type, direction, el) {
// spin() : when the up/down button is pressed
// Get current field + value
var parent = el.parentElement,
field = parent.getElementsByTagName("input")[0],
value = field.value;
// Spin it
if (type=="h") {
value = parseInt(value);
if (direction) { value++; } else { value--; }
if (value==0) { value = 12; }
else if (value>12) { value = 1; }
} else if (type=="m") {
value = parseInt(value);
if (direction) { value+=5; } else { value-=5; }
if (value<0) { value = 55; }
else if (value>60) { value = 0; }
if (value<10) { value = "0" + value; }
}
else {
value = value=="PM" ? "AM" : "PM";
}
field.value = value;
},
set : function (el) {
// set() : set the selected time on the target
// Get the parent container
var parent = el.parentElement;
while (parent.classList.contains("tpop") == false) {
parent = parent.parentElement;
}
// Formulate + set selected time
var input = parent.querySelectorAll("input[type=text]");
var time = input[0].value + ":" + input[1].value + " " + input[2].value;
document.getElementById(parent.dataset.target).value = time;
// Close popup
parent.classList.remove("show");
}
};

116
examples/SmartSwitch/data_src/js_css_src/js-time-picker/tpick.js
View File

@ -1,116 +0,0 @@
var tpick = {
attach : function (container, target) {
// attach() : attach time picker to target
// Generate a unique random ID for the time picker
var uniqueID = 0;
while (document.getElementById("tpick-" + uniqueID) != null) {
uniqueID = Math.floor(Math.random() * (100 - 2)) + 1;
}
// Create new time picker
var tp = document.createElement("div");
tp.id = "tpick-" + uniqueID;
tp.dataset.target = target;
tp.classList.add("tpicker");
// Create hour picker
tp.appendChild(this.draw("h"));
tp.appendChild(this.draw("m"));
tp.appendChild(this.draw("ap"));
// OK button
var bottom = document.createElement("div"),
ok = document.createElement("input");
ok.setAttribute("type", "button");
ok.value = "OK";
ok.addEventListener("click", function(){ tpick.set(this); });
bottom.classList.add("tpicker-btn");
bottom.appendChild(ok);
tp.appendChild(bottom);
// Attach time picker to target container
document.getElementById(container).appendChild(tp);
},
draw : function (type) {
// draw() : support function to create the hr, min, am/pm selector
// Create the controls
var docket = document.createElement("div"),
up = document.createElement("div"),
down = document.createElement("div"),
text = document.createElement("input");
docket.classList.add("tpicker-" + type);
up.classList.add("tpicker-up");
down.classList.add("tpicker-down");
up.innerHTML = "&#65087;";
down.innerHTML = "&#65088;";
text.readOnly = true;
text.setAttribute("type", "text");
// Default values + click event
// You can do your own modifications here
if (type=="h") {
text.value = "12";
up.addEventListener("click", function(){ tpick.spin("h", 1, this); });
down.addEventListener("click", function(){ tpick.spin("h", 0, this); });
} else if (type=="m") {
text.value = "10";
up.addEventListener("click", function(){ tpick.spin("m", 1, this); });
down.addEventListener("click", function(){ tpick.spin("m", 0, this); });
} else {
text.value = "AM";
up.addEventListener("click", function(){ tpick.spin("ap", 1, this); });
down.addEventListener("click", function(){ tpick.spin("ap", 0, this); });
}
// Complete + return the docket
docket.appendChild(up);
docket.appendChild(text);
docket.appendChild(down);
return docket;
},
spin : function (type, direction, el) {
// spin() : when the up/down button is pressed
// Get current field + value
var parent = el.parentElement,
field = parent.getElementsByTagName("input")[0],
value = field.value;
// Spin it
if (type=="h") {
value = parseInt(value);
if (direction) { value++; } else { value--; }
if (value==0) { value = 12; }
else if (value>12) { value = 1; }
} else if (type=="m") {
value = parseInt(value);
if (direction) { value+=5; } else { value-=5; }
if (value<0) { value = 55; }
else if (value>60) { value = 0; }
if (value<10) { value = "0" + value; }
}
else {
value = value=="PM" ? "AM" : "PM";
}
field.value = value;
},
set : function (el) {
// set() : set the selected time on the target
// Get the parent container
var parent = el.parentElement;
while (parent.classList.contains("tpicker") == false) {
parent = parent.parentElement;
}
// Formulate + set selected time
var input = parent.querySelectorAll("input[type=text]");
var time = input[0].value + ":" + input[1].value + " " + input[2].value;
document.getElementById(parent.dataset.target).value = time;
}
};