implemented highlighting active nav entry

This commit is contained in:
Marcus 2024-10-24 16:53:21 +02:00
parent bafb623392
commit 1765748422
5 changed files with 54 additions and 21 deletions

View file

@ -30,6 +30,10 @@
#include "Common_HTML.h" #include "Common_HTML.h"
/*
* TestHeaderFooter - checks if the given var from the webserver processor
* is actual a template variable from header or footer.
*/
bool TestHeaderFooter(const String& var) { bool TestHeaderFooter(const String& var) {
#ifdef DEBUG #ifdef DEBUG
Serial.print(":: [Webserver:Page:root:proc:hf] var: "); Serial.print(":: [Webserver:Page:root:proc:hf] var: ");
@ -43,14 +47,34 @@ bool TestHeaderFooter(const String& var) {
(var == "CGBUILD") || (var == "CGBUILD") ||
(var == "GROWNAME") || (var == "GROWNAME") ||
(var == "CANGROW_CSS") || (var == "CANGROW_CSS") ||
(var == "NEED_RESTART")) { (var == "NEED_RESTART") ||
(var == "ACTIVE_NAV_GROW") ||
(var == "ACTIVE_NAV_SYSTEM") ||
(var == "ACTIVE_NAV_WIFI") ||
(var == "ACTIVE_NAV_HELP") ||
(var == "PLACEHOLDER")) {
return true; return true;
} else { } else {
return false; return false;
} }
} }
String AddHeaderFooter(const String& var) {
/*
* AddHeaderFooter - processor for header and footer template variables
*
* String& var:
* the string we receive from the processor is the actual
* variable name we replace here.
* byte activeNav:
* contains the number representing which page is active
* 1 - grow settings
* 2 - system settings
* 3 - wifi settings
* 4 - help page
*/
String AddHeaderFooter(const String& var, byte activeNav = 0) {
String activeNav_ClassName = "activeNav";
if(var == "HEADER") { if(var == "HEADER") {
return String(Header_HTML); return String(Header_HTML);
} else if(var == "FOOTER") { } else if(var == "FOOTER") {
@ -63,12 +87,21 @@ String AddHeaderFooter(const String& var) {
return String(config.grow.growName); return String(config.grow.growName);
} else if(var == "CANGROW_CSS") { } else if(var == "CANGROW_CSS") {
return String(File_cangrow_CSS); return String(File_cangrow_CSS);
} else if((var == "ACTIVE_NAV_GROW") && (activeNav == 1)) {
return activeNav_ClassName;
} else if((var == "ACTIVE_NAV_SYSTEM") && (activeNav == 2)) {
return activeNav_ClassName;
} else if((var == "ACTIVE_NAV_WIFI") && (activeNav == 3)) {
return activeNav_ClassName;
} else if((var == "ACTIVE_NAV_HELP") && (activeNav == 4)) {
return activeNav_ClassName;
} else if(var == "NEED_RESTART") { } else if(var == "NEED_RESTART") {
if(needRestart == true) { if(needRestart == true) {
return String(Common_HTML_NEED_RESTART); return String(Common_HTML_NEED_RESTART);
} else { } else {
return String(); return String();
} }
} else { } else {
return String(); return String();
} }

View file

@ -137,7 +137,7 @@ a:active {
} }
.subnav li { .subnav li {
/*background: #026b45;*/ background: #262B27;
list-style: none; list-style: none;
border-radius: 3px; border-radius: 3px;
margin-bottom: 3px; margin-bottom: 3px;
@ -163,7 +163,7 @@ a:active {
padding: 5px 10px; padding: 5px 10px;
} }
.nav li a:hover, .subnav li a:hover, .activeMenu, .button:link:hover, .button:visited:hover, input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover { .nav li a:hover, .subnav li a:hover, .activeNav, .button:link:hover, .button:visited:hover, input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
background: #04AA6D; background: #04AA6D;
color: #fff; color: #fff;
border-radius: 3px; border-radius: 3px;
@ -174,11 +174,11 @@ a:active {
color: #cae0d0; color: #cae0d0;
} }
.activeMenu { .activeNav {
background: #444; background: #444;
} }
.MenuTime { .navTime {
background: #292929; background: #292929;
} }

View file

@ -40,11 +40,11 @@ const char* Header_HTML PROGMEM = R"(<!DOCTYPE html>
</head> </head>
<body> <body>
<ul class='nav'><li><a href='/'>&#x1F331; %GROWNAME%</a></li> <ul class='nav'><li><a href='/'>&#x1F331; %GROWNAME%</a></li>
<li><a href='/grow/' >&#128262; Grow settings</a></li> <li><a class='%ACTIVE_NAV_GROW%' href='/grow/' >&#128262; Grow settings</a></li>
<li><a href='/system/' >&#9881; System settings</a></li> <li><a class='%ACTIVE_NAV_SYSTEM%' href='/system/' >&#9881; System settings</a></li>
<li><a href='/wifi/' >&#128225; WiFi settings</a></li> <li><a class='%ACTIVE_NAV_WIFI%' href='/wifi/' >&#128225; WiFi settings</a></li>
<li><a href='/help' >&#x2753; Help</a></li> <li><a class='%ACTIVE_NAV_HELP%' href='/help' >&#x2753; Help</a></li>
<li><span class='MenuTime'>05:01:40</span></li> <li><span class='navTime'>04:20:23</span></li>
<li><a href='https://git.la10cy.net/DeltaLima/CanGrow' target='_blank'>CanGrow v%CGVER%</a></li> <li><a href='https://git.la10cy.net/DeltaLima/CanGrow' target='_blank'>CanGrow v%CGVER%</a></li>
</ul> </ul>
<div class='center'> <div class='center'>

View file

@ -38,7 +38,7 @@
// https://techtutorialsx.com/2018/07/23/esp32-arduino-http-server-template-processing-with-multiple-placeholders/ // https://techtutorialsx.com/2018/07/23/esp32-arduino-http-server-template-processing-with-multiple-placeholders/
String Proc_WebPage_system(const String& var) { String Proc_WebPage_system(const String& var) {
if(TestHeaderFooter(var)) { if(TestHeaderFooter(var)) {
return AddHeaderFooter(var); return AddHeaderFooter(var, 2);
} else if(var == "SUBNAV") { } else if(var == "SUBNAV") {
return String(Page_system_HTML_SUBNAV); return String(Page_system_HTML_SUBNAV);
} else { } else {
@ -99,7 +99,7 @@ void WebPage_system(AsyncWebServerRequest *request) {
*/ */
String Proc_WebPage_system_restart(const String& var) { String Proc_WebPage_system_restart(const String& var) {
if(TestHeaderFooter(var)) { if(TestHeaderFooter(var)) {
return AddHeaderFooter(var); return AddHeaderFooter(var, 2);
} else if(var == "SUBNAV") { } else if(var == "SUBNAV") {
return String(Page_system_HTML_SUBNAV); return String(Page_system_HTML_SUBNAV);
} else if(var == "RESTART_MSG") { } else if(var == "RESTART_MSG") {
@ -173,7 +173,7 @@ void WebPage_system_update_ApplyUpdate(AsyncWebServerRequest *request, String fi
String Proc_WebPage_system_update(const String& var) { String Proc_WebPage_system_update(const String& var) {
if(TestHeaderFooter(var)) { if(TestHeaderFooter(var)) {
return AddHeaderFooter(var); return AddHeaderFooter(var, 2);
} else if(var == "SUBNAV") { } else if(var == "SUBNAV") {
return String(Page_system_HTML_SUBNAV); return String(Page_system_HTML_SUBNAV);
} else { } else {

View file

@ -55,7 +55,7 @@ String WebPage_wifi_ScanNetworks() {
// https://techtutorialsx.com/2018/07/23/esp32-arduino-http-server-template-processing-with-multiple-placeholders/ // https://techtutorialsx.com/2018/07/23/esp32-arduino-http-server-template-processing-with-multiple-placeholders/
String Proc_WebPage_wifi(const String& var) { String Proc_WebPage_wifi(const String& var) {
if(TestHeaderFooter(var)) { if(TestHeaderFooter(var)) {
return AddHeaderFooter(var); return AddHeaderFooter(var, 3);
//CURRENT_SETTINGS //CURRENT_SETTINGS
} else if(var == "CURRENT_SETTINGS") { } else if(var == "CURRENT_SETTINGS") {
if(strlen(config.wifi.ssid) > 0) { if(strlen(config.wifi.ssid) > 0) {