Added state of buttons and more styling

This commit is contained in:
Abdul Alabri
2022-07-09 13:13:30 +10:00
parent c8ab0c11ca
commit d106672948
2 changed files with 24 additions and 5 deletions

View File

@ -160,6 +160,28 @@ int http_fn_index(http_request_t *request) {
CHANNEL_Set(j,newSetValue,1);
}
poststr(request, "<table width=\"100%\">");
for (i = 0; i < CHANNEL_MAX; i++) {
int channelType;
channelType = CHANNEL_GetType(i);
if (h_isChannelRelay(i) || channelType == ChType_Toggle) {
if (i <= 1) {
hprintf128(request, "<tr colspan=\"%i\">", CHANNEL_MAX);
}
if (CHANNEL_Check(i)) {
poststr(request, "<td style=\"text-align:center; font-weight:bold; font-size:54px\">ON</td>");
}
else {
poststr(request, "<td style=\"text-align:center; font-size:54px\">OFF</td>");
}
if (i == CHANNEL_MAX - 1) {
poststr(request, "</tr>");
}
}
}
poststr(request, "<table width=\"100%\">");
poststr(request, "<table width=\"100%\">");
for(i = 0; i < CHANNEL_MAX; i++) {
@ -254,17 +276,14 @@ int http_fn_index(http_request_t *request) {
hprintf128(request, "<tr colspan=\"%i\">", CHANNEL_MAX);
}
const char *c;
const char *state;
if(CHANNEL_Check(i)) {
c = "bgrn";
state = "ON";
} else {
c = "bred";
state = "OFF";
}
poststr(request,"<td><form action=\"index\">");
hprintf128(request,"<input type=\"hidden\" name=\"tgl\" value=\"%i\">",i);
hprintf128(request,"<input class=\"%s\" type=\"submit\" value=\"Toggle %i (%s)\"/></form></td>",c,i,state);
hprintf128(request,"<input class=\"%s\" type=\"submit\" value=\"Toggle %i\"/></form></td>",c,i);
if (i == CHANNEL_MAX-1) {
poststr(request, "</tr>");
}

View File

@ -19,7 +19,7 @@ const char httpMimeTypeHTML[] = "text/html" ; // HTML MIME type
const char httpMimeTypeText[] = "text/plain" ; // TEXT MIME type
const char httpMimeTypeJson[] = "application/json" ; // TEXT MIME type
const char httpMimeTypeBinary[] = "application/octet-stream" ; // binary/file MIME type
const char htmlHeader[] = "<!DOCTYPE html><html><head><style>div,fieldset,input,select{padding:5px;font-size:1em;margin: 0 0 0.2em 0}fieldset{background:#4f4f4f;}p{margin:0.5em 0;}input{width:100%;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;background:#dddddd;color:#000000;}form{margin-bottom:0.5em}input[type=checkbox],input[type=radio]{width:1em;margin-right:6px;vertical-align:-1px;}input[type=range]{width:99%;}select{width:100%;background:#dddddd;color:#000000;}textarea{resize:vertical;width:98%;height:318px;padding:5px;overflow:auto;background:#1f1f1f;color:#65c115;}body{text-align:center;font-family:verdana,sans-serif;background:#21333e; color:#eaeaea}td{padding:0px;}input[type=submit]{border:0;border-radius:0.3rem;background:#1fa3ec;color:#faffff;line-height:2.4rem;font-size:1.2rem;width:100%;-webkit-transition-duration:0.4s;transition-duration:0.4s;cursor:pointer;margin-buttom:0.5em}input[type=submit]:hover{background:#0e70a4;}.bred{background:#d43535 !important;}.bred:hover{background:#931f1f !important;}.bgrn{background:#47c266 !important;}.bgrn:hover{background:#5aaf6f !important;}a{color:#1fa3ec;text-decoration:none;}.p{float:left;text-align:left;}.q{float:right;text-align:right;}.r{border-radius:0.3em;padding:2px;margin:6px 2px;}.hf{display:none;}.hdiv{width:95%;white-space:nowrap;}.hele{width:210px;display:inline-block;margin-left:2px;}</style></head><body><div style=\"text-align:left; display:inline-block; color:#eaeaea; min-width:340px;max-width:800px;\">" ;
const char htmlHeader[] = "<!DOCTYPE html><html><head><style>div,fieldset,input,select{padding:5px;font-size:1em;margin: 0 0 0.2em 0}fieldset{background:#4f4f4f;}p{margin:0.5em 0;}input{width:100%;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;background:#dddddd;color:#000000;}form{margin-bottom:0.5em}input[type=checkbox],input[type=radio]{width:1em;margin-right:6px;vertical-align:-1px;}input[type=range]{width:99%;}select{width:100%;background:#dddddd;color:#000000;}textarea{resize:vertical;width:98%;height:318px;padding:5px;overflow:auto;background:#1f1f1f;color:#65c115;}body{text-align:center;font-family:verdana,sans-serif;background:#21333e; color:#eaeaea}h1 a{background:#21333e; color:#eaeaea}td{padding:0px;}input[type=submit]{border:0;border-radius:0.3rem;background:#1fa3ec;color:#faffff;line-height:2.4rem;font-size:1.2rem;width:100%;-webkit-transition-duration:0.4s;transition-duration:0.4s;cursor:pointer;margin-buttom:0.5em}input[type=submit]:hover{background:#0e70a4;}.bred{background:#d43535 !important;}.bred:hover{background:#931f1f !important;}.bgrn{background:#47c266 !important;}.bgrn:hover{background:#5aaf6f !important;}a{color:#1fa3ec;text-decoration:none;}.p{float:left;text-align:left;}.q{float:right;text-align:right;}.r{border-radius:0.3em;padding:2px;margin:6px 2px;}.hf{display:none;}.hdiv{width:95%;white-space:nowrap;}.hele{width:210px;display:inline-block;margin-left:2px;}</style></head><body><div style=\"text-align:left; display:inline-block; color:#eaeaea; min-width:340px;max-width:800px;\">" ;
const char htmlEnd[] = "</div></body></html>" ;
const char htmlReturnToMenu[] = "<a href=\"index\">Return to menu</a>";
const char htmlReturnToCfg[] = "<a href=\"cfg\">Return to cfg</a>";