userbogd/WebguiappTemplate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web design copleted, upload implemented

Browse Source
This commit is contained in:
Bogdan Pilyugin 2023-04-13 16:16:18 +02:00
parent f3a0b091a1
commit a839672932
7 changed files with 259 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
HTML/application.html
View File

@ -20,11 +20,10 @@
<div class="mlpc"> <div class="mlpc">
<form name="tmr" method="post"> <form name="tmr" method="post">
<div class="mlhdr">TIMER</div> <div class="mlhdr">TIMER</div>
<button type="button" class ='btn' id='bt2' onclick="addtm()">Add new timer</button>
<div class="container"> <div class="container">
<div id="timer"></div> <div id="timer"></div>
</div> </div>
<button type="button" class ='btn' id='bt1' onclick="applytm()">Apply</button>
<button type="button" class ='btn' id='bt2' onclick="addtm()">Add new timer</button>
</form> </form>
</div> </div>
</div> </div>

14
HTML/res/appstyles.css
View File

@ -21,7 +21,7 @@
.pwrbox{width:80%; height:auto; padding:5px; margin:10px auto; box-sizing:border-box;} .pwrbox{width:80%; height:auto; padding:5px; margin:10px auto; box-sizing:border-box;}
.pwrbox td {font: .9rem consolas, monospace; width:30%; padding:0;margin:0;} .pwrbox td {font: .9rem consolas, monospace; width:30%; padding:0;margin:0;}
.container{margin: 10px; .container{
display: flex; display: flex;
flex-wrap:wrap;} flex-wrap:wrap;}
@ -158,9 +158,10 @@ input:checked + .slider:before {
.timer .timer
{ {
width:100%; width:100%;
margin: 10px 0 0 0;
padding: 10px; padding: 10px;
margin:5px;
border: 1px solid rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 10px;
} }
.timerrec { .timerrec {
@ -187,10 +188,17 @@ width:100%;
.crselect .crselect
{ {
height:120px; display: inline-block;
vertical-align: top;
overflow: hidden;
height:auto;
min-height:30px;
width:120px;
margin-top: 0; margin-top: 0;
} }
.selhed .selhed
{ {
margin: 15px 5px 2px 5px; margin: 15px 5px 2px 5px;
} }

104
HTML/res/cron.js
View File

@ -1,11 +1,36 @@
objects_test = ["scene_1", "scene_2", "scene_3", "scene_4", "scene_5", "scene_6", "scene_7", "scene_8", "scene_9", "scene_10", "scene_11", "scene_12", "scene_13", "scene_14", "scene_15", "scene_16"]; objects_test = ["scene_1", "scene_2", "scene_3", "scene_4", "scene_5", "scene_6", "scene_7", "scene_8", "scene_9", "scene_10", "scene_11", "scene_12", "scene_13", "scene_14", "scene_15", "scene_16"];
actions_test = ["start", "stop"]; actions_test = ["start", "stop"];
timarr_test = [{ 'num': 1, 'obj': 2, 'act': 0, 'cron': '*/2 * * * * *' }, timarr_test = [
{ 'num': 2, 'obj': 12, 'act': 1, 'cron': '6 0 12 * * *' }, { "num": 1, "enab":1, "name":"Timer1 name", "obj": 2, "act": 0, "cron": "*/2 * * * * *" },
{ 'num': 3, 'obj': 8, 'act': 0, 'cron': '* * * * * *' }]; { "num": 2, "enab":0, "name":"Timer2 name", "obj": 12, "act": 1, "cron": "6 0 12 * * *" },
function savetm(n) { { "num": 3, "enab":1, "name":"Timer3 name", "obj": 8, "act": 0, "cron": "* * * * * *" }
];
function PostData(data,page,conf,alrt,reld) {
if(conf){if (!confirm(conf)) return;}
var xhr = new XMLHttpRequest();
xhr.open('POST',page, true);
xhr.timeout = 5000;
xhr.send(data);
xhr.onreadystatechange = function() {
if (xhr.readyState != 4) return;
if (Number(xhr.status) >= 400) {alert(xhr.status+': '+xhr.statusText);}
else {if(reld)location.reload();
if(alrt) alert(alrt);
}}}
function savetm(n) {
var payload = "tmrec={\"num\":"+n+",";
payload += "\"enab\":"+((document.getElementById("encb"+n).checked)?1:0)+",";
payload += "\"name\":\""+document.getElementById("tname"+n).value+"\",";
payload += "\"obj\":"+document.getElementById("object"+n).value+",";
payload += "\"act\":"+document.getElementById("action"+n).value+",";
payload += "\"cron\":\""+document.getElementById("cron"+n).value+"\"";
payload += "}";
console.log(payload);
PostData(payload, "application.html", false, false, false);
} }
function extractSelectArr(select) function extractSelectArr(select)
{ {
var result = []; var result = [];
@ -89,19 +114,15 @@ function handleSelect(tnum, type)
cinp.value = c[0] + " " + c[1] + " " + c[2] + " " + c[3] + " " + c[4] + " " + c[5]; cinp.value = c[0] + " " + c[1] + " " + c[2] + " " + c[3] + " " + c[4] + " " + c[5];
} }
function deltm(n) { function deltm(n) {
if(confirm("Confirm delete timer "+n+"?") == true){
timarr_test.splice(n - 1, 1); timarr_test.splice(n - 1, 1);
drawtimers(timarr_test); drawtimers(timarr_test);}
}
function closecron(n) {
var target = document.getElementById("cronext"+n);
var content = "";
target.innerHTML = content;
} }
function setcron(n) { function setcron(n) {
var target = document.getElementById("cronext" + n); var target = document.getElementById("cronext" + n);
var content = ""; var content = "";
content +=("<div><div><label class=\"selhed\" for=\"seconds\">Seconds:</label></div>"); content +=("<div><div><label class=\"selhed\" for=\"seconds\">Seconds:</label></div>");
content += ("<div><select multiple class=\"crselect\" name=\"selectSeconds" + n + "[]\" id=\"seconds\" onchange=\"handleSelect("+n+", 1)\">"); content += ("<div><select multiple size=\"7\" class=\"crselect\" name=\"selectSeconds" + n + "[]\" id=\"seconds\" onchange=\"handleSelect("+n+", 1)\">");
content += ("<option value=\"*\">Every Sec</option>"); content += ("<option value=\"*\">Every Sec</option>");
content += ("<option value=\"*/2\">Even Sec</option>"); content += ("<option value=\"*/2\">Even Sec</option>");
content += ("<option value=\"1-59/2\">Odd Sec</option>"); content += ("<option value=\"1-59/2\">Odd Sec</option>");
@ -112,7 +133,7 @@ function setcron(n) {
content += ("</select></div></div>"); content += ("</select></div></div>");
content +=("<div><div><label class=\"selhed\" for=\"seconds\">Minutes:</label></div>"); content +=("<div><div><label class=\"selhed\" for=\"seconds\">Minutes:</label></div>");
content += ("<div><select multiple class=\"crselect\" name=\"selectMinutes" + n + "[]\" id=\"minutes\" onchange=\"handleSelect("+n+", 2)\">"); content += ("<div><select multiple size=\"7\" class=\"crselect\" name=\"selectMinutes" + n + "[]\" id=\"minutes\" onchange=\"handleSelect("+n+", 2)\">");
content += ("<option value=\"*\">Every Min</option>"); content += ("<option value=\"*\">Every Min</option>");
content += ("<option value=\"*/2\">Even Min</option>"); content += ("<option value=\"*/2\">Even Min</option>");
content += ("<option value=\"1-59/2\">Odd Min</option>"); content += ("<option value=\"1-59/2\">Odd Min</option>");
@ -123,7 +144,7 @@ function setcron(n) {
content += ("</select></div></div>"); content += ("</select></div></div>");
content +=("<div><div><label class=\"selhed\" for=\"hours\">Hours:</label></div>"); content +=("<div><div><label class=\"selhed\" for=\"hours\">Hours:</label></div>");
content += ("<div><select multiple class=\"crselect\" name=\"selectHours" + n + "[]\" id=\"hours\" onchange=\"handleSelect("+n+", 3)\">"); content += ("<div><select multiple size=\"7\" class=\"crselect\" name=\"selectHours" + n + "[]\" id=\"hours\" onchange=\"handleSelect("+n+", 3)\">");
content += ("<option value=\"*\">Every Hour</option>"); content += ("<option value=\"*\">Every Hour</option>");
content += ("<option value=\"*/2\">Even Hours</option>"); content += ("<option value=\"*/2\">Even Hours</option>");
content += ("<option value=\"1-23/2\">Odd Hours</option>"); content += ("<option value=\"1-23/2\">Odd Hours</option>");
@ -133,7 +154,7 @@ function setcron(n) {
content += ("</select></div></div>"); content += ("</select></div></div>");
content +=("<div><div><label class=\"selhed\" for=\"days\">Days:</label></div>"); content +=("<div><div><label class=\"selhed\" for=\"days\">Days:</label></div>");
content += ("<div><select multiple class=\"crselect\" name=\"selectDays" + n + "[]\" id=\"days\" onchange=\"handleSelect("+n+", 4)\">"); content += ("<div><select multiple size=\"7\" class=\"crselect\" name=\"selectDays" + n + "[]\" id=\"days\" onchange=\"handleSelect("+n+", 4)\">");
content += ("<option value=\"*\">Every Day</option>"); content += ("<option value=\"*\">Every Day</option>");
content += ("<option value=\"*/2\">Even Days</option>"); content += ("<option value=\"*/2\">Even Days</option>");
content += ("<option value=\"1-31/2\">Odd Days</option>"); content += ("<option value=\"1-31/2\">Odd Days</option>");
@ -144,7 +165,7 @@ function setcron(n) {
content += ("</select></div></div>"); content += ("</select></div></div>");
content +=("<div><div><label class=\"selhed\" for=\"months\">Months:</label></div>"); content +=("<div><div><label class=\"selhed\" for=\"months\">Months:</label></div>");
content += ("<div><select multiple class=\"crselect\" name=\"selectMonths" + n + "[]\" id=\"months\" onchange=\"handleSelect("+n+", 5)\">"); content += ("<div><select multiple size=\"7\" class=\"crselect\" name=\"selectMonths" + n + "[]\" id=\"months\" onchange=\"handleSelect("+n+", 5)\">");
content += ("<option value=\"*\">Every Month</option>"); content += ("<option value=\"*\">Every Month</option>");
content += ("<option value=\"*/2\">Even Month</option>"); content += ("<option value=\"*/2\">Even Month</option>");
content += ("<option value=\"1-11/2\">Odd Month</option>"); content += ("<option value=\"1-11/2\">Odd Month</option>");
@ -165,7 +186,7 @@ function setcron(n) {
content += ("</select></div></div>"); content += ("</select></div></div>");
content +=("<div><div><label class=\"selhed\" for=\"weekdays\">Weekdays:</label></div>"); content +=("<div><div><label class=\"selhed\" for=\"weekdays\">Weekdays:</label></div>");
content += ("<div><select multiple class=\"crselect\" name=\"selectWeekday" + n + "[]\" id=\"weekdays\" onchange=\"handleSelect("+n+", 6)\">"); content += ("<div><select multiple size=\"7\" class=\"crselect\" name=\"selectWeekday" + n + "[]\" id=\"weekdays\" onchange=\"handleSelect("+n+", 6)\">");
content += ("<option value=\"*\">Every Weekday</option>"); content += ("<option value=\"*\">Every Weekday</option>");
content += ("<option value=\"1-5\">Monday-Friday</option>"); content += ("<option value=\"1-5\">Monday-Friday</option>");
content += ("<option value=\"0,6\">Weekend Days</option>"); content += ("<option value=\"0,6\">Weekend Days</option>");
@ -192,42 +213,51 @@ function drawtimers(tarr) {
content += ("<label class=\"tmlab\">Timer " + i + "</label>"); content += ("<label class=\"tmlab\">Timer " + i + "</label>");
content += ("<div class=\"timerrec\">"); content += ("<div class=\"timerrec\">");
content += ("<div class=\"nowrap\">");
content +=("<label for=\"encb"+i+"\">Enabled: </label>");
var enb = (tarr[i - 1].enab == 1) ? "checked" : "";
content += ("<label class=\"switch\"><input type=\"checkbox\" id=\"encb"+i+"\" value=\"1\" "+enb+"><span class=\"slider round\"></span></label></div>");
content += ("<div class=\"nowrap\">");
content +=("<label for=\"tname"+i+"\">Timer name:</label>");
content += ("<input type=\"text\" id=\"tname" + i + "\" value=\"" + tarr[i - 1].name + "\"></input></div>");
content += ("<div class=\"nowrap\">");
content +=("<div><label for=\"object"+i+"\">Object:</label>");
content += ("<select class=\"\" id=\"object"+i+"\">");
for (k = 0; k < objects_test.length; k++) {
var selected = (tarr[i - 1].obj == k) ? "selected" : "";
content += ("<option value=\"" + (k + 1) + "\" " + selected + ">" + objects_test[k] + "</option>");}
content += ("</select></div></div>");
content += ("<div class=\"nowrap\">");
content +=("<div><label for=\"action"+i+"\">Action:</label>");
content += ("<select class=\"\" id=\"action"+i+"\">");
for (k = 0; k < actions_test.length; k++) {
var selected = (tarr[i - 1].act == k) ? "selected" : "";
content += ("<option value=\"" + (k + 1) + "\" " + selected + ">" + actions_test[k] + "</option>");}
content += ("</select></div></div>");
content += ("<div class=\"nowrap\">"); content += ("<div class=\"nowrap\">");
content +=("<label for=\"cron"+i+"\">Cron:</label>"); content +=("<label for=\"cron"+i+"\">Cron:</label>");
content += ("<input type=\"text\" id=\"cron" + i + "\" value=\"" + tarr[i - 1].cron + "\"></input>"); content += ("<input type=\"text\" id=\"cron" + i + "\" value=\"" + tarr[i - 1].cron + "\"></input></div>");
content += ("<button class=\"tmbtn btn\" type=\"button\" id=\"setcronbut"+i+"\" onclick=\"setcron(" + i + ")\">Open editor</button></div></div>") content += ("<div><button class=\"tmbtn btn\" type=\"button\" id=\"setcronbut"+i+"\" onclick=\"setcron(" + i + ")\">Open editor</button></div>")
content += ("</div>");
/*Extended editor content*/ /*Extended editor content*/
content += ("<div class=\"container\" id=\"cronext" + i + "\"></div>"); content += ("<div class=\"container\" id=\"cronext" + i + "\"></div>");
content +=("<div><label for=\"object"+i+"\">Object:</label>");
content += ("<select id=\"object"+i+"\">");
for (k = 0; k < objects_test.length; k++) {
var selected = (tarr[i - 1].obj == k) ? "selected" : "";
content += ("<option value=\"" + (k + 1) + "\" " + selected + ">" + objects_test[k] + "</option>");
}
content += ("</select>");
content +=("<label for=\"action"+i+"\">Action:</label>");
content += ("<select id=\"action"+i+"\">");
for (k = 0; k < actions_test.length; k++) {
var selected = (tarr[i - 1].act == k) ? "selected" : "";
content += ("<option value=\"" + (k + 1) + "\" " + selected + ">" + actions_test[k] + "</option>");
}
content += ("</select></div>");
content += ("<button class=\"btn\" type=\"button\" onclick=\"savetm(" + i + ")\">Save</button>"); content += ("<button class=\"btn\" type=\"button\" onclick=\"savetm(" + i + ")\">Save</button>");
content += ("<button class=\"btn\" type=\"button\" onclick=\"deltm(" + i + ")\">Delete</button>"); content += ("<button class=\"btn\" type=\"button\" onclick=\"deltm(" + i + ")\">Delete</button>");
content += ("</div>"); content += ("</div>");
target.innerHTML = content;
} }
target.innerHTML = content;
} }
function applytm() { function applytm() {
} }
function addtm() { function addtm() {
var num = timarr_test.length + 1; var num = timarr_test.length + 1;
timarr_test.push({ 'num': num, 'start': 1500000000, 'cron': '* * * * * *' }); timarr_test.push({ 'num': num, 'enab':1, 'name':'Timer'+num+' name', 'obj': 0, 'act': 0, 'cron': '* * * * * *' });
drawtimers(timarr_test); drawtimers(timarr_test);
} }

2
HTML/res/styles.css
View File

@ -319,6 +319,7 @@ select {
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
background-color: var(--panel-bgr-color); background-color: var(--panel-bgr-color);
width: 150px;
} }
.btn{min-width:100px; color:var(--text-color);} .btn{min-width:100px; color:var(--text-color);}
@ -363,6 +364,7 @@ input[type="radio"] { margin-top: -1px; vertical-align: middle;}
margin: 0 0 10px 10px; margin: 0 0 10px 10px;
padding: 10px; padding: 10px;
background-color:var(--panel-bgr-color); background-color:var(--panel-bgr-color);
border-radius: 10px;
} }
.ml { .ml {

2
dependencies.lock
View File

@ -4,6 +4,6 @@ dependencies:
source: source:
type: idf type: idf
version: 4.4.4 version: 4.4.4
manifest_hash: 31dd4ec84ade1450fc168388f4adce2efacd1516170670735140bc772e9d72bd manifest_hash: f9b3d78d7d56685d1c543701158a0fab7a56c908117ed70644f77e4247c831ae
target: esp32 target: esp32
version: 1.0.0 version: 1.0.0

14
main/HTTPPostCustom.c
View File

@ -26,11 +26,13 @@ const char pg_40[] = "index40.html";
const char pg_42[] = "index42.html"; const char pg_42[] = "index42.html";
const char pg_43[] = "index43.html"; const char pg_43[] = "index43.html";
const char pg_44[] = "index44.html"; const char pg_44[] = "index44.html";
const char url_application[] = "application.html";
static HTTP_IO_RESULT HTTPPostIndex40(httpd_req_t *req, char *PostData); static HTTP_IO_RESULT HTTPPostIndex40(httpd_req_t *req, char *PostData);
static HTTP_IO_RESULT HTTPPostIndex42(httpd_req_t *req, char *PostData); static HTTP_IO_RESULT HTTPPostIndex42(httpd_req_t *req, char *PostData);
static HTTP_IO_RESULT HTTPPostIndex43(httpd_req_t *req, char *PostData); static HTTP_IO_RESULT HTTPPostIndex43(httpd_req_t *req, char *PostData);
static HTTP_IO_RESULT HTTPPostIndex44(httpd_req_t *req, char *PostData); static HTTP_IO_RESULT HTTPPostIndex44(httpd_req_t *req, char *PostData);
static HTTP_IO_RESULT HTTPPostApplication(httpd_req_t *req, char *PostData);
HTTP_IO_RESULT AfterPostHandlerCustom(httpd_req_t *req, const char *filename, char *PostData) HTTP_IO_RESULT AfterPostHandlerCustom(httpd_req_t *req, const char *filename, char *PostData)
{ {
@ -44,8 +46,20 @@ HTTP_IO_RESULT AfterPostHandlerCustom(httpd_req_t *req, const char *filename, ch
return HTTPPostIndex43(req, PostData); return HTTPPostIndex43(req, PostData);
if (!memcmp(filename, pg_44, sizeof(pg_44))) if (!memcmp(filename, pg_44, sizeof(pg_44)))
return HTTPPostIndex44(req, PostData); return HTTPPostIndex44(req, PostData);
if (!memcmp(filename, url_application, sizeof(url_application)))
return HTTPPostApplication(req, PostData);
return HTTP_IO_DONE;
}
static HTTP_IO_RESULT HTTPPostApplication(httpd_req_t *req, char *PostData)
{
char tmp[512];
if (httpd_query_key_value(PostData, "tmrec", tmp, sizeof(tmp)) == ESP_OK)
{
ESP_LOGI("HTTP_POST","%s", tmp);
}
return HTTP_IO_DONE; return HTTP_IO_DONE;
} }