Moved style.css into meshhttpStatic.h

Also created /data to store static files before they go into meshhttpStatic.h
This commit is contained in:
Jm Casler
2020-10-17 17:33:29 -07:00
parent 7f12af73d4
commit 7dd4ce32d2
4 changed files with 367 additions and 430 deletions

View File

@@ -46,7 +46,6 @@ HttpAPI webAPI;
void handleAPIv1FromRadio(HTTPRequest *req, HTTPResponse *res);
void handleAPIv1ToRadio(HTTPRequest *req, HTTPResponse *res);
void handleStyleCSS(HTTPRequest *req, HTTPResponse *res);
void handleJSONChatHistoryDummy(HTTPRequest *req, HTTPResponse *res);
void handleHotspot(HTTPRequest *req, HTTPResponse *res);
void handleFavicon(HTTPRequest *req, HTTPResponse *res);
void handleRoot(HTTPRequest *req, HTTPResponse *res);
@@ -214,8 +213,6 @@ void initWebServer()
ResourceNode *nodeAPIv1ToRadioOptions = new ResourceNode("/api/v1/toradio", "OPTIONS", &handleAPIv1ToRadio);
ResourceNode *nodeAPIv1ToRadio = new ResourceNode("/api/v1/toradio", "PUT", &handleAPIv1ToRadio);
ResourceNode *nodeAPIv1FromRadio = new ResourceNode("/api/v1/fromradio", "GET", &handleAPIv1FromRadio);
ResourceNode *nodeCSS = new ResourceNode("/css/style.css", "GET", &handleStyleCSS);
ResourceNode *nodeJS = new ResourceNode("/scripts/script.js", "GET", &handleJSONChatHistoryDummy);
ResourceNode *nodeHotspot = new ResourceNode("/hotspot-detect.html", "GET", &handleHotspot);
ResourceNode *nodeFavicon = new ResourceNode("/favicon.ico", "GET", &handleFavicon);
ResourceNode *nodeRoot = new ResourceNode("/", "GET", &handleRoot);
@@ -228,8 +225,6 @@ void initWebServer()
secureServer->registerNode(nodeAPIv1ToRadioOptions);
secureServer->registerNode(nodeAPIv1ToRadio);
secureServer->registerNode(nodeAPIv1FromRadio);
secureServer->registerNode(nodeCSS);
secureServer->registerNode(nodeJS);
secureServer->registerNode(nodeHotspot);
secureServer->registerNode(nodeFavicon);
secureServer->registerNode(nodeRoot);
@@ -244,8 +239,6 @@ void initWebServer()
insecureServer->registerNode(nodeAPIv1ToRadioOptions);
insecureServer->registerNode(nodeAPIv1ToRadio);
insecureServer->registerNode(nodeAPIv1FromRadio);
insecureServer->registerNode(nodeCSS);
insecureServer->registerNode(nodeJS);
insecureServer->registerNode(nodeHotspot);
insecureServer->registerNode(nodeFavicon);
insecureServer->registerNode(nodeRoot);
@@ -303,8 +296,14 @@ void handleStatic(HTTPRequest *req, HTTPResponse *res)
res->setHeader("Content-Encoding", "gzip");
res->setHeader("Content-Type", "application/json");
res->write(STATIC_MESHTASTIC_JS_DATA, STATIC_MESHTASTIC_JS_LENGTH);
return;
} else if (parameter1 == "style.css") {
res->setHeader("Content-Encoding", "gzip");
res->setHeader("Content-Type", "text/css");
res->write(STATIC_STYLE_CSS_DATA, STATIC_STYLE_CSS_LENGTH);
return;
} else {
res->print("Parameter 1: ");
res->printStd(parameter1);
@@ -461,7 +460,7 @@ void handleRoot(HTTPRequest *req, HTTPResponse *res)
"<head>\n"
" <meta charset=\"UTF-8\">\n"
" <title>Meshtastic - Chat</title>\n"
" <link rel=\"stylesheet\" href=\"css/style.css\">\n"
" <link rel=\"stylesheet\" href=\"static/style.css\">\n"
"\n"
"</head>\n"
"<body>\n"
@@ -536,298 +535,6 @@ void handleRoot(HTTPRequest *req, HTTPResponse *res)
res->print(out);
}
void handleStyleCSS(HTTPRequest *req, HTTPResponse *res)
{
String out = "";
out +=
"/* latin-ext */\n"
"@font-face {\n"
" font-family: 'Lato';\n"
" font-style: normal;\n"
" font-weight: 400;\n"
" src: local('Lato Regular'), local('Lato-Regular'), url(./Google.woff2) format('woff2');\n"
" unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;\n"
"}\n"
"\n"
"\n"
"*, *:before, *:after {\n"
" box-sizing: border-box;\n"
"}\n"
"\n"
"body {\n"
" background: #C5DDEB;\n"
" font: 14px/20px \"Lato\", Arial, sans-serif;\n"
" padding: 40px 0;\n"
" color: white;\n"
"}\n"
"\n"
"\n"
" \n"
".grid {\n"
" display: grid;\n"
" grid-template-columns:\n"
"\t1fr 4fr;\n"
" grid-template-areas:\n"
"\t\"header header\"\n"
"\t\"sidebar content\";\n"
" margin: 0 auto;\n"
" width: 750px;\n"
" background: #444753;\n"
" border-radius: 5px;\n"
"}\n"
"\n"
".top {grid-area: header;}\n"
".side {grid-area: sidebar;}\n"
".main {grid-area: content;}\n"
"\n"
".top {\n"
" border-bottom: 2px solid white;\n"
"}\n"
".top-text {\n"
" font-weight: bold;\n"
" font-size: 24px;\n"
" text-align: center;\n"
" padding: 20px;\n"
"}\n"
"\n"
".side {\n"
" width: 260px;\n"
" float: left;\n"
"}\n"
".side .side-header {\n"
" padding: 20px;\n"
" border-bottom: 2px solid white;\n"
"}\n"
"\n"
".side .side-header .side-text {\n"
" padding-left: 10px;\n"
" margin-top: 6px;\n"
" font-size: 16px;\n"
" text-align: left;\n"
" font-weight: bold;\n"
" \n"
"}\n"
"\n"
".channel-list ul {\n"
" padding: 20px;\n"
" height: 570px;\n"
" list-style-type: none;\n"
"}\n"
".channel-list ul li {\n"
" padding-bottom: 20px;\n"
"}\n"
"\n"
".channel-list .channel-name {\n"
" font-size: 20px;\n"
" margin-top: 8px;\n"
" padding-left: 8px;\n"
"}\n"
"\n"
".channel-list .message-count {\n"
" padding-left: 16px;\n"
" color: #92959E;\n"
"}\n"
"\n"
".icon {\n"
" display: inline-block;\n"
" width: 1em;\n"
" height: 1em;\n"
" stroke-width: 0;\n"
" stroke: currentColor;\n"
" fill: currentColor;\n"
"}\n"
"\n"
".icon-map-marker {\n"
" width: 0.5714285714285714em;\n"
"}\n"
"\n"
".icon-circle {\n"
" width: 0.8571428571428571em;\n"
"}\n"
"\n"
".content {\n"
" display: flex;\n"
" flex-direction: column;\n"
" flex-wrap: nowrap;\n"
"/* width: 490px; */\n"
" float: left;\n"
" background: #F2F5F8;\n"
"/* border-top-right-radius: 5px;\n"
" border-bottom-right-radius: 5px; */\n"
" color: #434651;\n"
"}\n"
".content .content-header {\n"
" flex-grow: 0;\n"
" padding: 20px;\n"
" border-bottom: 2px solid white;\n"
"}\n"
"\n"
".content .content-header .content-from {\n"
" padding-left: 10px;\n"
" margin-top: 6px;\n"
" font-size: 20px;\n"
" text-align: center;\n"
" font-size: 16px;\n"
"}\n"
".content .content-header .content-from .content-from-highlight {\n"
" font-weight: bold;\n"
"}\n"
".content .content-header .content-num-messages {\n"
" color: #92959E;\n"
"}\n"
"\n"
".content .content-history {\n"
" flex-grow: 1;\n"
" padding: 20px 20px 20px;\n"
" border-bottom: 2px solid white;\n"
" overflow-y: scroll;\n"
" height: 375px;\n"
"}\n"
".content .content-history ul {\n"
" list-style-type: none;\n"
" padding-inline-start: 10px;\n"
"}\n"
".content .content-history .message-data {\n"
" margin-bottom: 10px;\n"
"}\n"
".content .content-history .message-data-time {\n"
" color: #a8aab1;\n"
" padding-left: 6px;\n"
"}\n"
".content .content-history .message {\n"
" color: white;\n"
" padding: 8px 10px;\n"
" line-height: 20px;\n"
" font-size: 14px;\n"
" border-radius: 7px;\n"
" margin-bottom: 30px;\n"
" width: 90%;\n"
" position: relative;\n"
"}\n"
".content .content-history .message:after {\n"
" bottom: 100%;\n"
" left: 7%;\n"
" border: solid transparent;\n"
" content: \" \";\n"
" height: 0;\n"
" width: 0;\n"
" position: absolute;\n"
" pointer-events: none;\n"
" border-bottom-color: #86BB71;\n"
" border-width: 10px;\n"
" margin-left: -10px;\n"
"}\n"
".content .content-history .my-message {\n"
" background: #86BB71;\n"
"}\n"
".content .content-history .other-message {\n"
" background: #94C2ED;\n"
"}\n"
".content .content-history .other-message:after {\n"
" border-bottom-color: #94C2ED;\n"
" left: 93%;\n"
"}\n"
".content .content-message {\n"
" flex-grow: 0;\n"
" padding: 10px;\n"
"}\n"
".content .content-message textarea {\n"
" width: 100%;\n"
" border: none;\n"
" padding: 10px 10px;\n"
" font: 14px/22px \"Lato\", Arial, sans-serif;\n"
" margin-bottom: 10px;\n"
" border-radius: 5px;\n"
" resize: none;\n"
"}\n"
"\n"
".content .content-message button {\n"
" float: right;\n"
" color: #94C2ED;\n"
" font-size: 16px;\n"
" text-transform: uppercase;\n"
" border: none;\n"
" cursor: pointer;\n"
" font-weight: bold;\n"
" background: #F2F5F8;\n"
"}\n"
".content .content-message button:hover {\n"
" color: #75b1e8;\n"
"}\n"
"/* Tooltip container */\n"
".tooltip {\n"
" color: #86BB71;\n"
" position: relative;\n"
" display: inline-block;\n"
" border-bottom: 1px dotted black; /* If you want dots under the hoverable text */\n"
"}\n"
"/* Tooltip text */\n"
".tooltip .tooltiptext {\n"
" visibility: hidden;\n"
" width: 120px;\n"
" background-color: #444753;\n"
" color: #fff;\n"
" text-align: center;\n"
" padding: 5px 0;\n"
" border-radius: 6px;\n"
" /* Position the tooltip text - see examples below! */\n"
" position: absolute;\n"
" z-index: 1;\n"
"}\n"
"\n"
"/* Show the tooltip text when you mouse over the tooltip container */\n"
".tooltip:hover .tooltiptext {\n"
" visibility: visible;\n"
"}\n"
"\n"
".online, .offline, .me {\n"
" margin-right: 3px;\n"
" font-size: 10px;\n"
"}\n"
"\n"
".online {\n"
" color: #86BB71;\n"
"}\n"
"\n"
".offline {\n"
" color: #E38968;\n"
"}\n"
"\n"
".me {\n"
" color: #94C2ED;\n"
"}\n"
"\n"
".align-left {\n"
" text-align: left;\n"
"}\n"
"\n"
".align-right {\n"
" text-align: right;\n"
"}\n"
"\n"
".float-right {\n"
" float: right;\n"
"}\n"
"\n"
".clearfix:after {\n"
" visibility: hidden;\n"
" display: block;\n"
" font-size: 0;\n"
" content: \" \";\n"
" clear: both;\n"
" height: 0;\n"
"}";
// Status code is 200 OK by default.
// We want to deliver a simple HTML page, so we send a corresponding content type:
res->setHeader("Content-Type", "text/css");
// The response implements the Print interface, so you can use it just like
// you would write to Serial etc.
res->print(out);
}
void handleScriptsScriptJS(HTTPRequest *req, HTTPResponse *res)
{
String out = "";
@@ -987,135 +694,6 @@ void handleScriptsScriptJS(HTTPRequest *req, HTTPResponse *res)
res->print(out);
}
void handleJSONChatHistoryDummy(HTTPRequest *req, HTTPResponse *res)
{
String out = "";
out += "{\n"
"\t\"data\": {\n"
"\t\t\"system\": {\n"
"\t\t\t\"timeSinceStart\": 3213544,\n"
"\t\t\t\"timeGPS\": 1600830985,\n"
"\t\t\t\"channel\": \"ourSecretPlace\"\n"
"\t\t},\n"
"\t\t\"users\": [{\n"
"\t\t\t\t\"NameShort\": \"J\",\n"
"\t\t\t\t\"NameLong\": \"John\",\n"
"\t\t\t\t\"lastSeen\": 3207544,\n"
"\t\t\t\t\"lat\" : -2.882243,\n"
"\t\t\t\t\"lon\" : -111.038580\n"
"\t\t\t},\n"
"\t\t\t{\n"
"\t\t\t\t\"NameShort\": \"D\",\n"
"\t\t\t\t\"NameLong\": \"David\",\n"
"\t\t\t\t\"lastSeen\": 3212544,\n"
"\t\t\t\t\"lat\" : -12.24452,\n"
"\t\t\t\t\"lon\" : -61.87351\n"
"\t\t\t},\n"
"\t\t\t{\n"
"\t\t\t\t\"NameShort\": \"P\",\n"
"\t\t\t\t\"NameLong\": \"Peter\",\n"
"\t\t\t\t\"lastSeen\": 3213444,\n"
"\t\t\t\t\"lat\" : 0,\n"
"\t\t\t\t\"lon\" : 0\n"
"\t\t\t},\n"
"\t\t\t{\n"
"\t\t\t\t\"NameShort\": \"M\",\n"
"\t\t\t\t\"NameLong\": \"Mary\",\n"
"\t\t\t\t\"lastSeen\": 3211544,\n"
"\t\t\t\t\"lat\" : 16.45478,\n"
"\t\t\t\t\"lon\" : 11.40166\n"
"\t\t\t}\n"
"\t\t],\n"
"\t\t\"chat\": [{\n"
"\t\t\t\t\"local\": 0,\n"
"\t\t\t\t\"NameShort\": \"J\",\n"
"\t\t\t\t\"NameLong\": \"John\",\n"
"\t\t\t\t\"chatLine\": \"Hello\",\n"
"\t\t\t\t\"timestamp\" : 3203544\n"
"\t\t\t},\n"
"\t\t\t{\n"
"\t\t\t\t\"local\": 0,\n"
"\t\t\t\t\"NameShort\": \"D\",\n"
"\t\t\t\t\"NameLong\": \"David\",\n"
"\t\t\t\t\"chatLine\": \"Hello There\",\n"
"\t\t\t\t\"timestamp\" : 3204544\n"
"\t\t\t},\n"
"\t\t\t{\n"
"\t\t\t\t\"local\": 0,\n"
"\t\t\t\t\"NameShort\": \"J\",\n"
"\t\t\t\t\"NameLong\": \"John\",\n"
"\t\t\t\t\"chatLine\": \"Where you been?\",\n"
"\t\t\t\t\"timestamp\" : 3205544\n"
"\t\t\t},\n"
"\t\t\t{\n"
"\t\t\t\t\"local\": 0,\n"
"\t\t\t\t\"NameShort\": \"D\",\n"
"\t\t\t\t\"NameLong\": \"David\",\n"
"\t\t\t\t\"chatLine\": \"I was on Channel 2\",\n"
"\t\t\t\t\"timestamp\" : 3206544\n"
"\t\t\t},\n"
"\t\t\t{\n"
"\t\t\t\t\"local\": 0,\n"
"\t\t\t\t\"NameShort\": \"J\",\n"
"\t\t\t\t\"NameLong\": \"John\",\n"
"\t\t\t\t\"chatLine\": \"With Mary again?\",\n"
"\t\t\t\t\"timestamp\" : 3207544\n"
"\t\t\t},\n"
"\t\t\t{\n"
"\t\t\t\t\"local\": 0,\n"
"\t\t\t\t\"NameShort\": \"D\",\n"
"\t\t\t\t\"NameLong\": \"David\",\n"
"\t\t\t\t\"chatLine\": \"She's better looking than you\",\n"
"\t\t\t\t\"timestamp\" : 3208544\n"
"\t\t\t},\n"
"\t\t\t{\n"
"\t\t\t\t\"local\": 0,\n"
"\t\t\t\t\"NameShort\": \"M\",\n"
"\t\t\t\t\"NameLong\": \"Mary\",\n"
"\t\t\t\t\"chatLine\": \"Well, Hi\",\n"
"\t\t\t\t\"timestamp\" : 3209544\n"
"\t\t\t},\n"
"\t\t\t{\n"
"\t\t\t\t\"local\": 0,\n"
"\t\t\t\t\"NameShort\": \"D\",\n"
"\t\t\t\t\"NameLong\": \"David\",\n"
"\t\t\t\t\"chatLine\": \"You're Here\",\n"
"\t\t\t\t\"timestamp\" : 3210544\n"
"\t\t\t},\n"
"\t\t\t{\n"
"\t\t\t\t\"local\": 0,\n"
"\t\t\t\t\"NameShort\": \"M\",\n"
"\t\t\t\t\"NameLong\": \"Mary\",\n"
"\t\t\t\t\"chatLine\": \"Wanted to say Howdy.\",\n"
"\t\t\t\t\"timestamp\" : 3211544\n"
"\t\t\t},\n"
"\t\t\t{\n"
"\t\t\t\t\"local\": 0,\n"
"\t\t\t\t\"NameShort\": \"D\",\n"
"\t\t\t\t\"NameLong\": \"David\",\n"
"\t\t\t\t\"chatLine\": \"Better come down and visit sometime\",\n"
"\t\t\t\t\"timestamp\" : 3212544\n"
"\t\t\t},\n"
"\t\t\t{\n"
"\t\t\t\t\"local\": 1,\n"
"\t\t\t\t\"NameShort\": \"P\",\n"
"\t\t\t\t\"NameLong\": \"Peter\",\n"
"\t\t\t\t\"chatLine\": \"Where is everybody?\",\n"
"\t\t\t\t\"timestamp\" : 3213444\n"
"\t\t\t}\n"
"\t\t]\n"
"\t}\n"
"}";
// Status code is 200 OK by default.
// We want to deliver a simple HTML page, so we send a corresponding content type:
res->setHeader("Content-Type", "application/json");
// The response implements the Print interface, so you can use it just like
// you would write to Serial etc.
res->print(out);
}
void handleFavicon(HTTPRequest *req, HTTPResponse *res)
{
// Set Content-Type