UI Migration to Webpack+Bootstrap etc latest version

This commit is contained in:
Sebastien L
2022-01-27 20:57:03 -05:00
parent 977935015e
commit 7fcb201b06
24 changed files with 1251 additions and 1023 deletions

View File

@@ -74,9 +74,9 @@ jobs:
echo "artifact_file_name=${artifact_file_name}" >> $GITHUB_ENV
echo "PROJECT_VER=${TARGET_BUILD_NAME}-${{ steps.buildnumber.outputs.build_number }} " >> $GITHUB_ENV
echo "artifact_bin_file_name=${artifact_bin_file_name}" >> $GITHUB_ENV
description=""
description=${description}$'------------------------------\n### Revision Log\n\n'
description="$description$(git log --pretty=format:'%h %s (%cI) <%an>' --abbrev-commit --max-count=15 | sed --r 's/(^[\*]+)/\\\1/g') "
description=$'### Revision Log\n'
githist="$(git log --pretty=format:'%h %s (%cI) <%an>' --abbrev-commit --max-count=15 | sed --r 's/(^[\*]+)/\\\1/g')"
description="$description$githist"
echo 'description<<~EOD' >> $GITHUB_ENV
echo ${description}>> $GITHUB_ENV
echo '~EOD' >> $GITHUB_ENV

View File

@@ -3,9 +3,8 @@ FROM ubuntu:20.04
ARG DEBIAN_FRONTEND=noninteractive
COPY components/wifi-manager/webapp/package.json /opt
# We need libpython2.7 due to GDB tools
# we also need npm 8 for the webapp to work
RUN : \
&& apt-get update \
&& apt-get install -y \
@@ -31,7 +30,7 @@ RUN : \
wget \
xz-utils \
zip \
npm \
npm \
nodejs \
&& apt-get autoremove -y \
&& rm -rf /var/lib/apt/lists/* \
@@ -39,8 +38,6 @@ RUN : \
&& python -m pip install --upgrade \
pip \
virtualenv \
&& cd /opt \
&& npm install -g \
&& :
# To build the image for a branch or a tag of IDF, pass --build-arg IDF_CLONE_BRANCH_OR_TAG=name.
@@ -53,7 +50,8 @@ RUN : \
# docker build . --build-arg IDF_CHECKOUT_REF=8bf14a9238329954c7c5062eeeda569529aedf75 -t sle118/squeezelite-esp32-idfv4-master
# To run the image interactive (windows): docker run --rm -v %cd%:/project -w /project -it sle118/squeezelite-esp32-idfv4-master
# to build the web app inside of the interactive session
# pushd components/wifi-manager/webapp/ && npm rebuild node-sass && npm run-script build && popd
# pushd components/wifi-manager/webapp/ && npm install && npm run-script build && popd
ARG IDF_CLONE_URL=https://github.com/espressif/esp-idf.git
ARG IDF_CLONE_BRANCH_OR_TAG=master
@@ -88,5 +86,40 @@ RUN : \
ENV IDF_CCACHE_ENABLE=1
COPY docker/entrypoint.sh /opt/esp/entrypoint.sh
# Now install nodejs, npm and the packages we need
COPY components/wifi-manager/webapp/package.json /opt
ENV NODE_VERSION 8
SHELL ["/bin/bash", "--login", "-c"]
# Install nvm with node and npm
# RUN wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash \
# && export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" \
# && [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" \
# && nvm install $NODE_VERSION \
# && nvm alias default $NODE_VERSION \
# && nvm use default \
# && echo installing nodejs version 16 \
# && curl -sL https://deb.nodesource.com/setup_16.x | bash - \
# && echo installing node modules \
# && cd /opt \
# && nvm use default \
# && npm install -g \
# && :
RUN : \
&& curl -fsSL https://deb.nodesource.com/setup_16.x | bash - \
&& apt-get install -y nodejs \
&& echo installing node modules \
&& cd /opt \
&& npm i -g npm \
&& node --version \
&& npm install -g \
&& :
ENV NODE_PATH $NVM_DIR/v$NODE_VERSION/lib/node_modules
ENV PATH $NVM_DIR/v$NODE_VERSION/bin:$PATH
ENTRYPOINT [ "/opt/esp/entrypoint.sh" ]
CMD [ "/bin/bash" ]

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

File diff suppressed because one or more lines are too long

View File

@@ -1,5 +1,5 @@
/*!
* Bootstrap v4.6.1 (https://getbootstrap.com/)
* Bootstrap v5.1.3 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
@@ -47,27 +47,4 @@
/*! https://mths.be/he v1.2.0 by @mathias | MIT license */
/**!
* @fileOverview Kickass library to create and place poppers near their reference elements.
* @version 1.16.1
* @license
* Copyright (c) 2016 Federico Zivolo and contributors
*
* 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.
*/
/*! js-cookie v3.0.1 | MIT */

Binary file not shown.

File diff suppressed because one or more lines are too long

View File

@@ -11,30 +11,38 @@
"watch": "webpack --progress --watch --mode=development ",
"dev": "webpack serve --open --mode=development"
},
"sideEffects": [
"**/*.css",
"**/*.scss",
"**/index.ejs",
"**/index.js",
"**/*.js"
],
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/plugin-transform-runtime": "^7.16.8",
"@babel/preset-env": "^7.12.11",
"@babel/core": "^7.16.12",
"@babel/plugin-transform-runtime": "^7.16.10",
"@babel/preset-env": "^7.16.11",
"@babel/preset-typescript": "^7.16.7",
"@squoosh/lib": "^0.4.0",
"autoprefixer": "^10.2.4",
"autoprefixer": "^10.4.2",
"babel": "^6.23.0",
"babel-loader": "^8.2.2",
"babel-loader": "^8.2.3",
"bootswatch": "^5.1.3",
"clean-webpack-plugin": "^3.0.0",
"clean-webpack-plugin": "^4.0.0",
"commander": "^8.3.0",
"compression-webpack-plugin": "^7.1.2",
"copy-webpack-plugin": "^10.2.0",
"css-loader": "^5.0.1",
"css-minimizer-webpack-plugin": "^1.2.0",
"compression-webpack-plugin": "^9.2.0",
"copy-webpack-plugin": "^10.2.1",
"css-loader": "^6.5.1",
"css-minimizer-webpack-plugin": "^3.4.1",
"ejs-loader": "^0.5.0",
"es6-promise": "^4.2.8",
"file-loader": "^6.2.0",
"glob": "^7.2.0",
"glob-all": "^3.2.1",
"google-fonts-webpack-plugin": "^0.4.4",
"html-loader": "^1.3.2",
"html-loader": "^3.1.0",
"html-minimizer-webpack-plugin": "^3.5.0",
"html-webpack-plugin": "^4.5.2",
"html-webpack-plugin": "^5.5.0",
"image-minimizer-webpack-plugin": "^3.2.3",
"imagemin": "^8.0.1",
"imagemin-gifsicle": "^7.0.0",
@@ -43,29 +51,33 @@
"imagemin-optipng": "^8.0.0",
"imagemin-pngquant": "^9.0.2",
"imagemin-svgo": "^10.0.1",
"js-cookie": "^3.0.1",
"lodash": "^4.17.21",
"lodash-webpack-plugin": "^0.11.6",
"mini-css-extract-plugin": "^1.3.5",
"node-sass": "^5.0.0",
"postcss": "^8.2.4",
"postcss-loader": "^4.2.0",
"mini-css-extract-plugin": "^2.5.2",
"node-sass": "^7.0.1",
"postcss": "^8.4.5",
"postcss-loader": "^6.2.1",
"purgecss-webpack-plugin": "^4.1.3",
"purify-css": "^1.2.5",
"purifycss-webpack": "^0.7.0",
"remixicon": "^2.5.0",
"sass-loader": "^10.1.1",
"sass-loader": "^12.4.0",
"string-argv": "^0.3.1",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.1.1",
"style-loader": "^3.3.1",
"terser-webpack-plugin": "^5.3.0",
"ts-loader": "^9.2.6",
"typescript": "^4.5.4",
"webpack": "^5.19.0",
"typescript": "^4.5.5",
"webpack": "^5.67.0",
"webpack-bundle-analyzer": "^4.5.0",
"webpack-cli": "^4.4.0",
"webpack-dev-server": "^3.11.2"
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.3"
},
"dependencies": {
"@babel/runtime": "^7.16.7",
"bootstrap": "^4.6.0",
"jquery": "^3.5.1",
"async-mutex": "^0.3.2",
"bootstrap": "^5.1.3",
"jquery": "^3.6.0",
"popper.js": "^1.16.1"
},
"keywords": [

View File

@@ -14,23 +14,23 @@
<body class="d-flex flex-column">
<header class="navbar navbar-expand-sm navbar-dark bg-primary sticky-top border-bottom border-dark" id="mainnav">
<a class="navbar-brand" id="navtitle" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav mr-auto" role="tablist">
<li class="nav-item"><a class="nav-link active" data-toggle="tab" aria-controls="profile" role="tab" href="#tab-wifi">WiFi</a></li>
<li class="nav-item omsg"><a class="nav-link" data-toggle="tab" aria-controls="profile" role="tab" href="#tab-syslog">Status<span
<li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" aria-controls="profile" role="tab" href="#tab-wifi">WiFi</a></li>
<li class="nav-item omsg"><a class="nav-link" data-bs-toggle="tab" aria-controls="profile" role="tab" href="#tab-syslog">Status<span
class="badge badge-pill badge-success" id="msgcnt"></span></a></li>
<li class="nav-item orec"><a class="nav-link" data-toggle="tab" aria-controls="profile" role="tab" href="#tab-cfg-audio">Audio</a></li>
<li class="nav-item orec"><a class="nav-link" data-toggle="tab" aria-controls="profile" role="tab" href="#tab-cfg-syst">System</a></li>
<li class="nav-item orec"><a class="nav-link" data-toggle="tab" aria-controls="profile" role="tab" href="#tab-cfg-hw">Hardware</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" aria-controls="profile" role="tab" href="#tab-cfg-fw">Updates</a></li>
<li class="nav-item orec"><a class="nav-link" data-bs-toggle="tab" aria-controls="profile" role="tab" href="#tab-cfg-audio">Audio</a></li>
<li class="nav-item orec"><a class="nav-link" data-bs-toggle="tab" aria-controls="profile" role="tab" href="#tab-cfg-syst">System</a></li>
<li class="nav-item orec"><a class="nav-link" data-bs-toggle="tab" aria-controls="profile" role="tab" href="#tab-cfg-hw">Hardware</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" aria-controls="profile" role="tab" href="#tab-cfg-fw">Updates</a></li>
<div class="dropdown-divider"></div>
<li class="nav-item"><a class="nav-link" data-toggle="tab" aria-controls="profile" role="tab" href="#tab-nvs">NVS Editor</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" aria-controls="profile" role="tab" href="#tab-commands">Advanced</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" aria-controls="profile" role="tab" href="#tab-credits">Credits</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" aria-controls="profile" role="tab" href="#tab-nvs">NVS Editor</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" aria-controls="profile" role="tab" href="#tab-commands">Advanced</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" aria-controls="profile" role="tab" href="#tab-credits">Credits</a></li>
</ul>
</div>
@@ -40,7 +40,7 @@
<span id="o_jack" class="material-icons" style="fill:white; display: none">headphones</span>
<span id="s_airplay" class="material-icons" style="fill:white; display: none">airplay</span>
<em id="s_cspot" class="fab fa-spotify" style="fill:white; display: inline"></em>
<span data-toggle="tooltip" id="o_type" data-placement="top" title="">
<span data-bs-toggle="tooltip" id="o_type" data-bs-placement="top" title="">
<span id="o_bt" class="material-icons" style="fill:white; display: none" >bluetooth</span>
<span id="o_spdif" class="material-icons" style="fill:white; display: none" >graphic_eq</span>
<span id="o_i2s" class="material-icons" style="fill:white; display: none" >speaker</span>
@@ -54,14 +54,13 @@
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="otadiv" tabindex="-1" role="dialog" aria-labelledby="fwProgressLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal" id="otadiv" aria-hidden="true">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="fwProgressLabel">Upgrade Progress</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<span id="flash-status"></span>
@@ -72,7 +71,7 @@
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
@@ -126,8 +125,8 @@
placeholder="select entry from list or enter known url" id="fw-url-input">
</div>
<div class="col-auto">
<button type="button" id='start-flash' data-toggle="modal" data-target="#uCnfrm"
class="btn btn-warning btn-sm" style="display: none;">Flash Firmware</button>
<button type="button" id='start-flash' data-bs-toggle="modal" data-bs-target="#uCnfrm"
class="btn btn-warning btn-sm flact" style="display: none;">Flash Firmware</button>
</div>
<div class="col-auto">
@@ -142,16 +141,14 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Firmware Flash</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Flash URL <span id="selectedFWURL" class="text-break"></span> to device?</p>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button id="btn_flash" type="button" class="btn btn-warning" data-dismiss="modal" >Ok</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button id="btn_flash" type="button" class="btn btn-warning" data-bs-dismiss="modal" >Ok</button>
</div>
</div>
</div>
@@ -159,14 +156,14 @@
<div class="card text-white mb-3" >
<div class="card-header">Local Firmware Upload</div>
<div class="card-body">
<div id="uploaddiv" class="form-group row">
<div id="uploaddiv" class="form-group row ">
<label for="flashfilename" class="col-auto col-form-label">Local File</label>
<div class="col">
<input type="file" class="form-control-file" id="flashfilename" aria-describedby="fileHelp">
</div>
<div class="col-auto">
<div class="buttons">
<button type="button" class="btn btn-danger" id="fwUpload">Upload!</button>
<button type="button" class="btn btn-danger flact" id="fwUpload">Upload!</button>
</div>
</div>
</div>
@@ -237,13 +234,13 @@
</label>
</div>
</div>
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true"
style="display: none;" id="toast_cfg-audio-tmpl">
<div class="toast-header"><strong class="mr-auto">Result</strong><button type="button"
class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"
onclick="hideSurrounding(this)"><span aria-hidden="true">×</span></button></div>
<div style="margin-top: 16px;">
<div class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" id="toast_cfg-audio-tmpl">
<div class="toast-header"><strong class="mr-auto">Result</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div>
<div class="toast-body" id="msg_cfg-audio-tmpl"></div>
</div>
</div>
<button id="save-autoexec1" type="submit" class="btn btn-info" cmdname="cfg-audio-tmpl">Save</button>
<button id="commit-autoexec1" type="submit" class="btn btn-warning" cmdname="cfg-audio-tmpl">Apply</button>
</fieldset>
@@ -253,6 +250,7 @@
<div class="tab-pane fade active show" id="tab-wifi">
<div class="card text-white mb-3">
<div class="card-header">WiFi Status</div>
<div class="card-body if_eth" style="display: none">
<h2>Connected to Ethernet</h2>
<p>WiFi is inactive while connected to a wired network.
@@ -277,9 +275,7 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Disconnect</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Disconnect from network? After disconnecting, the system won't be accessible from
@@ -287,22 +283,19 @@
id="apName"></span> with password <span id="apPass"></span> </p>
</div>
<div class="modal-footer connecting-success connecting-status">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button id="btn_disconnect" type="button" class="btn btn-warning" data-dismiss="modal">Ok</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button id="btn_disconnect" type="button" class="btn btn-warning" data-bs-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
<div class="modal" id="WifiConnectDialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal" id="WifiConnectDialog" aria-hidden="true">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title connecting connecting-init connecting-fail">Connect to WiFi
</h5>
<h5 class="modal-title connecting connecting-init connecting-fail">Connect to WiFi</h5>
<h5 class="modal-title connecting-status connecting-success">Status</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<fieldset class="connecting-init connecting-fail">
@@ -336,7 +329,7 @@
<div class="modal-footer ">
<button type="button"
class="btn btn-secondary connecting-init connecting-fail connecting"
data-dismiss="modal">Close</button>
data-bs-dismiss="modal">Close</button>
<button type="button" id="btnJoin"
class="btn btn-primary connecting-init connecting-fail">Join</button>
<button type="button" class="connecting btn btn-primary" disabled>
@@ -346,8 +339,8 @@
</div>
<div class="modal-footer connecting-success connecting-status justify-content-between" style=""><button type="button"
class="btn btn-primary" data-dismiss="modal">Ok</button><button type="button" class="btn btn-danger"
data-toggle="modal" data-dismiss="modal" data-target="#WiFiDisconnectConfirm">Disconnect</button>
class="btn btn-primary" data-bs-dismiss="modal">Ok</button><button type="button" class="btn btn-danger"
data-bs-toggle="modal" data-bs-dismiss="modal" data-bs-target="#WiFiDisconnectConfirm">Disconnect</button>
</div>
</div>
</div>

File diff suppressed because it is too large Load Diff

View File

@@ -1,6 +1,42 @@
@import "~bootswatch/dist/darkly/variables";
@import "utils/variables";
@import "~bootstrap/scss/bootstrap";
// @import "~bootstrap/scss/bootstrap";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";
// Layout & components
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/containers";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card";
@import "~bootstrap/scss/badge";
@import "~bootstrap/scss/alert";
@import "~bootstrap/scss/progress";
//@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/close";
@import "~bootstrap/scss/toasts";
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/tooltip";
@import "~bootstrap/scss/placeholders";
// Helpers
@import "~bootstrap/scss/helpers";
// Utilities
@import "~bootstrap/scss/utilities/api";
@import "~bootswatch/dist/darkly/bootswatch";
@import "utils/style";

View File

@@ -1,4 +1,4 @@
target_add_binary_data( __idf_wifi-manager webapp/dist/css/index.04bd6e438114e559773d.css.gz BINARY)
target_add_binary_data( __idf_wifi-manager webapp/dist/css/index.eb4a1bb223a59c656f2c.css.gz BINARY)
target_add_binary_data( __idf_wifi-manager webapp/dist/favicon-32x32.png BINARY)
target_add_binary_data( __idf_wifi-manager webapp/dist/index.html.gz BINARY)
target_add_binary_data( __idf_wifi-manager webapp/dist/js/index.79297e.bundle.js.gz BINARY)
target_add_binary_data( __idf_wifi-manager webapp/dist/js/index.6409a9.bundle.js.gz BINARY)

View File

@@ -1,29 +1,29 @@
// Automatically generated. Do not edit manually!.
#include <inttypes.h>
extern const uint8_t _index_04bd6e438114e559773d_css_gz_start[] asm("_binary_index_04bd6e438114e559773d_css_gz_start");
extern const uint8_t _index_04bd6e438114e559773d_css_gz_end[] asm("_binary_index_04bd6e438114e559773d_css_gz_end");
extern const uint8_t _index_eb4a1bb223a59c656f2c_css_gz_start[] asm("_binary_index_eb4a1bb223a59c656f2c_css_gz_start");
extern const uint8_t _index_eb4a1bb223a59c656f2c_css_gz_end[] asm("_binary_index_eb4a1bb223a59c656f2c_css_gz_end");
extern const uint8_t _favicon_32x32_png_start[] asm("_binary_favicon_32x32_png_start");
extern const uint8_t _favicon_32x32_png_end[] asm("_binary_favicon_32x32_png_end");
extern const uint8_t _index_html_gz_start[] asm("_binary_index_html_gz_start");
extern const uint8_t _index_html_gz_end[] asm("_binary_index_html_gz_end");
extern const uint8_t _index_79297e_bundle_js_gz_start[] asm("_binary_index_79297e_bundle_js_gz_start");
extern const uint8_t _index_79297e_bundle_js_gz_end[] asm("_binary_index_79297e_bundle_js_gz_end");
extern const uint8_t _index_6409a9_bundle_js_gz_start[] asm("_binary_index_6409a9_bundle_js_gz_start");
extern const uint8_t _index_6409a9_bundle_js_gz_end[] asm("_binary_index_6409a9_bundle_js_gz_end");
const char * resource_lookups[] = {
"/css/index.04bd6e438114e559773d.css.gz",
"/css/index.eb4a1bb223a59c656f2c.css.gz",
"/favicon-32x32.png",
"/index.html.gz",
"/js/index.79297e.bundle.js.gz",
"/js/index.6409a9.bundle.js.gz",
""
};
const uint8_t * resource_map_start[] = {
_index_04bd6e438114e559773d_css_gz_start,
_index_eb4a1bb223a59c656f2c_css_gz_start,
_favicon_32x32_png_start,
_index_html_gz_start,
_index_79297e_bundle_js_gz_start
_index_6409a9_bundle_js_gz_start
};
const uint8_t * resource_map_end[] = {
_index_04bd6e438114e559773d_css_gz_end,
_index_eb4a1bb223a59c656f2c_css_gz_end,
_favicon_32x32_png_end,
_index_html_gz_end,
_index_79297e_bundle_js_gz_end
_index_6409a9_bundle_js_gz_end
};

View File

@@ -18,7 +18,6 @@ const fs = require('fs');
const zlib = require("zlib");
const PurgeCSSPlugin = require('purgecss-webpack-plugin')
const PATHS = {
src: path.join(__dirname, 'src')
}
@@ -65,27 +64,68 @@ module.exports = (env, options) => (
}
]
},
{
test: /\.s[ac]ss$/i,
// {
// test: /\.s[ac]ss$/i,
// use: [{
// loader: 'style-loader', // inject CSS to page
// },
// {
// loader: MiniCssExtractPlugin.loader,
// options: {
// publicPath: "../",
// },
// },
// "css-loader",
// {
// loader: "postcss-loader",
// options: {
// postcssOptions: {
// plugins: [["autoprefixer"]],
// },
// },
// },
// "sass-loader",
// ]
// },
{
test: /\.(scss)$/,
use: [
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: "../",
},
},
"css-loader",
{
loader: "postcss-loader",
loader: MiniCssExtractPlugin.loader,
options: {
postcssOptions: {
plugins: [["autoprefixer"]],
},
publicPath: "../",
},
},
"sass-loader",
]
// {
// // inject CSS to page
// loader: 'style-loader'
// },
{
// translates CSS into CommonJS modules
loader: 'css-loader'
},
{
// Run postcss actions
loader: 'postcss-loader',
options: {
// `postcssOptions` is needed for postcss 8.x;
// if you use postcss 7.x skip the key
postcssOptions: {
// postcss plugins, can be exported to postcss.config.js
plugins: function () {
return [
require('autoprefixer')
];
}
}
}
}, {
// compiles Sass to CSS
loader: 'sass-loader'
}]
},
{
test: /\.js$/,
@@ -113,30 +153,6 @@ module.exports = (env, options) => (
}
},
// {
// test: /\.html$/i,
// use: [
// "html-loader",
// {
// loader: 'markup-inline-loader',
// options: {
// svgo: {
// plugins: [
// {
// removeTitle: true,
// },
// {
// removeUselessStrokeAndFill: false,
// },
// {
// removeUnknownsAndDefaults: false,
// },
// ],
// },
// },
// },
// ]
// },
{
test: /\.tsx?$/,
use: 'ts-loader',
@@ -203,9 +219,15 @@ module.exports = (env, options) => (
threshold: 100,
minRatio: 0.8,
}),
new BuildEventsHook('Update C App',
function (stats, arguments) {
if (options.mode !== "production") return;
let wifiManagerPath=path.posix.resolve(process.cwd(),'..','..');
let buildCRootPath=path.posix.resolve(process.cwd(),'..','..','..','..');
let distPath = path.posix.resolve('dist');
let posixWebAppPath=path.posix.resolve(process.cwd(),'..');
fs.appendFileSync('./dist/index.html.gz',
zlib.gzipSync(fs.readFileSync('./dist/index.html'),
{
@@ -214,11 +236,11 @@ module.exports = (env, options) => (
}));
var getDirectories = function (src, callback) {
var searchPath = path.posix.relative(process.cwd(), path.posix.join(__dirname, src, '/**/*(*.gz|favicon-32x32.png)'));
var searchPath = path.posix.join(src, '/**/*(*.gz|favicon-32x32.png)');
console.log(`Post build: Getting file list from ${searchPath}`);
glob(searchPath, callback);
};
var cleanUpPath = path.posix.relative(process.cwd(), path.posix.join(__dirname, '../../../build/*.S'));
var cleanUpPath = path.posix.join(buildCRootPath, '/build/*.S');
console.log(`Post build: Cleaning up previous builds in ${cleanUpPath}`);
glob(cleanUpPath, function (err, list) {
if (err) {
@@ -239,11 +261,11 @@ module.exports = (env, options) => (
);
console.log('Generating C include files from webpack build output');
getDirectories('./dist', function (err, list) {
console.log(`Post build: found ${list.length} files. Relative path: ${wifiManagerPath}.`);
if (err) {
console.log('Error', err);
} else {
const regex = /^(.*\/)([^\/]*)$/
const relativeRegex = /((\w+(?<!dist)\/){0,1}[^\/]*)$/
let exportDefHead =
`/***********************************
webpack_headers
@@ -259,17 +281,18 @@ extern const uint8_t * resource_map_end[];`;
let lookupDef = 'const char * resource_lookups[] = {\n';
let lookupMapStart = 'const uint8_t * resource_map_start[] = {\n';
let lookupMapEnd = 'const uint8_t * resource_map_end[] = {\n';
let cMake = '';
list.forEach(fileName => {
let cMake='';
let exportName = fileName.match(regex)[2].replace(/[\. \-]/gm, '_');
let relativeName = fileName.match(relativeRegex)[1];
list.forEach(foundFile => {
let exportName = path.basename(foundFile).replace(/[\. \-]/gm, '_');
let cmakeFileName = path.posix.relative(wifiManagerPath,foundFile);
let httpRelativePath=path.posix.join('/',path.posix.relative('dist',foundFile));
exportDef += `extern const uint8_t _${exportName}_start[] asm("_binary_${exportName}_start");\nextern const uint8_t _${exportName}_end[] asm("_binary_${exportName}_end");\n`;
lookupDef += '\t"/' + relativeName + '",\n';
lookupDef += `\t"${httpRelativePath}",\n`;
lookupMapStart += '\t_' + exportName + '_start,\n';
lookupMapEnd += '\t_' + exportName + '_end,\n';
cMake += `target_add_binary_data( __idf_wifi-manager ${path.posix.relative(path.posix.resolve(process.cwd(),'..','..'),fileName)} BINARY)\n`;
console.log(`Post build: adding cmake file reference to ${path.posix.relative(path.posix.resolve(process.cwd(),'..','..'),fileName)} from C project.`);
cMake += `target_add_binary_data( __idf_wifi-manager ${cmakeFileName} BINARY)\n`;
console.log(`Post build: adding cmake file reference to ${cmakeFileName} from C project, with web path ${httpRelativePath}.`);
});
lookupDef += '""\n};\n';
@@ -335,16 +358,16 @@ extern const uint8_t * resource_map_end[];`;
//new BundleAnalyzerPlugin()
],
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true
}
}
}
// splitChunks: {
// cacheGroups: {
// styles: {
// name: 'styles',
// test: /\.css$/,
// chunks: 'all',
// enforce: true
// }
// }
// }
},
// output: {
// filename: "[name].js",

View File

@@ -1,6 +1,6 @@
/***********************************
webpack_headers
dist/css/index.04bd6e438114e559773d.css.gz,dist/favicon-32x32.png,dist/index.html.gz,dist/js/index.79297e.bundle.js.gz
dist/css/index.eb4a1bb223a59c656f2c.css.gz,dist/favicon-32x32.png,dist/index.html.gz,dist/js/index.6409a9.bundle.js.gz
***********************************/
#pragma once
#include <inttypes.h>

View File

@@ -22,7 +22,11 @@ const data = {
status: require("../mock/status.json"),
messages_ota_fail: require("../mock/messages_ota_fail.json"),
messages_ota_flash: require("../mock/messages_ota_flash.json"),
messages_ota: require("../mock/messages_ota.json")
messages_ota: require("../mock/messages_ota.json"),
rebooting: false,
reboottime: Date.now(),
devServer:{}
};
const messagingTypes= {
MESSAGING_INFO : 'MESSAGING_INFO',
@@ -36,6 +40,31 @@ const messagingClass= {
MESSAGING_CLASS_CFGCMD: 'MESSAGING_CLASS_CFGCMD',
MESSAGING_CLASS_BT: 'MESSAGING_CLASS_BT'
} ;
function rebooting(){
let duration=10000;
console.log(`Simulating a reboot of ${duration}ms`);
data.reboottime = Date.now() + duration;
data.rebooting=true;
setTimeout(() => {
data.rebooting=false;
console.log("Reboot completed!");
}, duration);
}
function sleep(milliseconds) {
const date = Date.now();
let currentDate = null;
do {
currentDate = Date.now();
} while (currentDate - date < milliseconds);
}
function waitForReboot(){
while(Date.now() < data.reboottime){
sleep(500);
console.log(`Waiting for reboot to finish.`);
}
}
function requeueMessages(){
data.messagequeue = [];
data.messagequeue.push(...data.messages);
@@ -109,23 +138,60 @@ module.exports ={
devtool:"source-map",
devServer: {
contentBase: path.resolve(__dirname, './dist'),
publicPath: '/',
static: {
directory: path.resolve(__dirname, './dist'),
staticOptions: {},
// Don't be confused with `devMiddleware.publicPath`, it is `publicPath` for static directory
// Can be:
// publicPath: ['/static-public-path-one/', '/static-public-path-two/'],
publicPath: "/",
// Can be:
// serveIndex: {} (options for the `serveIndex` option you can find https://github.com/expressjs/serve-index)
serveIndex: true,
// Can be:
// watch: {} (options for the `watch` option you can find https://github.com/paulmillr/chokidar)
watch: true,
},
devMiddleware: {
publicPath: "/",
},
open: true,
compress: true,
port: 9100,
host: '127.0.0.1',//your ip address
disableHostCheck: true,
allowedHosts: "all",
headers: {'Access-Control-Allow-Origin': '*',
'Accept-Encoding': 'identity'},
client: {
logging: "verbose",
// Can be used only for `errors`/`warnings`
//
// overlay: {
// errors: true,
// warnings: true,
// }
overlay: true,
progress: true,
},
onListening: function (devServer) {
if (!devServer) {
throw new Error('webpack-dev-server is not defined');
}
before: function(app) {
app.use(bodyParser.json()) // for parsing application/json
app.use(bodyParser.urlencoded({ extended: true })) // for parsing application/x-www-form-urlencoded
app.get('/ap.json', function(req, res) { res.json( data.ap ); });
app.get('/scan.json', function(req, res) { res.json( data.scan ); });
app.get('/config.json', function(req, res) {
const port = devServer.server.address().port;
console.log('Listening on port:', port);
},
onBeforeSetupMiddleware: function (devServer) {
data.devServer=devServer;
devServer.app.use(bodyParser.json()) // for parsing application/json
devServer.app.use(bodyParser.urlencoded({ extended: true })) // for parsing application/x-www-form-urlencoded
devServer.app.get('/ap.json', function(req, res) { waitForReboot(); res.json( data.ap ); });
devServer.app.get('/scan.json', function(req, res) { waitForReboot(); res.json( data.scan ); });
devServer.app.get('/config.json', function(req, res) {
waitForReboot();
if(data.status.recovery==1 && (data.status.mock_old_recovery??'')!==''){
res.json( data.config.config );
console.log('Mock old recovery - return config structure without gpio');
@@ -135,7 +201,8 @@ module.exports ={
}
});
app.get('/status.json', function(req, res) {
devServer.app.get('/status.json', function(req, res) {
waitForReboot();
if(data.status_queue_sequence.length>0){
const curstatus = JSON.parse(data.status_queue_sequence_queue_sequence.shift());
data.status.ota_pct=curstatus.ota_pct??0;
@@ -166,13 +233,15 @@ module.exports ={
}
res.json( data.status );
});
app.get('/plugins/SqueezeESP32/firmware/-99', function(req, res) {
devServer.app.get('/plugins/SqueezeESP32/firmware/-99', function(req, res) {
waitForReboot();
let has_proxy= data.status.mock_plugin_has_proxy ?? 'n';
const statusCode='xy'.includes((has_proxy).toLowerCase())?200:500;
console.log(`Checking if plugin has proxy enabled with option mock_plugin_has_proxy = ${data.status.mock_plugin_has_proxy}. Returning status ${statusCode} `);
res.status(statusCode ).json();
});
app.get('/messages.json', function(req, res) {
devServer.app.get('/messages.json', function(req, res) {
waitForReboot();
if(data.status.recovery==1 && (data.status.mock_old_recovery??'')!==''){
console.log('Mocking old recovery, with no commands backend' );
res.status(404).end();
@@ -189,8 +258,12 @@ module.exports ={
data.messagequeue=[];
});
app.get('/statusdefinition.json', function(req, res) { res.json( data.statusdefinition ); });
app.get('/commands.json', function(req, res) {
devServer.app.get('/statusdefinition.json', function(req, res) {
waitForReboot();
res.json( data.statusdefinition );
});
devServer.app.get('/commands.json', function(req, res) {
waitForReboot();
if(data.status.recovery==1 && (data.status.mock_old_recovery??'')!==''){
console.log('Mocking old recovery, with no commands backend' );
res.status(404).end();
@@ -200,7 +273,8 @@ module.exports ={
}
});
app.post('/commands.json', function(req, res) {
devServer.app.post('/commands.json', function(req, res) {
waitForReboot();
if(data.status.recovery==1 && (data.status.mock_old_recovery??'')!==''){
console.log('Mocking old recovery, with no commands backend' );
res.status(404).end();
@@ -226,7 +300,8 @@ module.exports ={
}
res.json( { 'Result' : 'Success' } );
});
app.post('/config.json', function(req, res) {
devServer.app.post('/config.json', function(req, res) {
waitForReboot();
var fwurl='';
console.log(`Processing config.json with request body: ${req.body}`);
console.log(data.config.config);
@@ -260,6 +335,7 @@ module.exports ={
}
}
var targetQueue='message_queue_sequence';
var targetPostEmpty='message_queue_sequence_post_empty';
if((data.status.mock_old_recovery??'')!==''){
@@ -275,8 +351,8 @@ module.exports ={
}
}
});
app.post('/status.json', function(req, res) {
devServer.app.post('/status.json', function(req, res) {
waitForReboot();
for (const property in req.body.status) {
if(data.status[property]=== undefined){
console.log(`Added status value ${property} [${req.body.status[property]}]`);
@@ -289,7 +365,8 @@ module.exports ={
}
res.json( {"result" : "OK" } );
});
app.post('/connect.json', function(req, res) {
devServer.app.post('/connect.json', function(req, res) {
waitForReboot();
setTimeout(function(r){
if(r.body.ssid.search('fail')>=0){
if(data.status.ssid){
@@ -307,27 +384,33 @@ module.exports ={
}, 1000, req);
res.json( {"result" : "OK" } );
});
app.post('/reboot_ota.json', function(req, res) {
devServer.app.post('/reboot_ota.json', function(req, res) {
waitForReboot();
data.status.recovery=0;
requeueMessages();
rebooting();
res.json( {"result" : "OK" } );
});
app.post('/reboot.json', function(req, res) {
devServer.app.post('/reboot.json', function(req, res) {
waitForReboot();
res.json( {"result" : "OK" } );
rebooting();
requeueMessages();
});
app.post('/recovery.json', function(req, res) {
devServer.app.post('/recovery.json', function(req, res) {
waitForReboot();
if((data.status.mock_fail_recovery ?? '')!==''){
res.status(404).end();
}
else {
data.status.recovery=1;
requeueMessages();
rebooting();
res.json( {"result" : "OK" } );
}
});
app.post('/flash.json', function(req, res) {
devServer.app.post('/flash.json', function(req, res) {
waitForReboot();
if(data.status.recovery>0){
if((data.status.mock_fail_fw_update ?? '')!=='' || (data.status.mock_old_recovery??'')!==''){
console.log('Old recovery mock, or fw fail requested' );
@@ -338,8 +421,8 @@ module.exports ={
data.message_queue_sequence.push(...data.messages_ota_flash);
data.message_queue_sequence_post_empty = function(){
data.status.recovery=0;
rebooting();
requeueMessages();
}
res.json({"result" : "OK" });
}
@@ -349,10 +432,13 @@ module.exports ={
res.status(404).end();
}
});
app.delete('/connect.json', function(req, res) {
devServer.app.delete('/connect.json', function(req, res) {
waitForReboot();
data.status.ssid='';
res.json({"result" : "OK" }); });
app.get('/reboot', function(req, res) { res.json({"result" : "OK" }); });
devServer.app.get('/reboot', function(req, res) {
waitForReboot();
res.json({"result" : "OK" }); });
},
},
plugins: [
@@ -360,7 +446,7 @@ module.exports ={
new HtmlWebPackPlugin({
title: 'SqueezeESP32-test',
template: './src/test.ejs',
filename: 'test',
filename: 'test.html',
minify: false,
inject: 'body',
excludeChunks: ['index','main'],

View File

@@ -2,5 +2,8 @@
set -e
. $IDF_PATH/export.sh
echo "npm version is $(npm --version)"
echo "node version is $(node --version)"
echo "To build the web application, run:"
echo "pushd components/wifi-manager/webapp/ && npm rebuild node-sass && npm run-script build && popd"
exec "$@"

View File

@@ -548,7 +548,8 @@ CONFIG_ESP_TLS_USING_MBEDTLS=y
# CONFIG_ESP_TLS_USE_SECURE_ELEMENT is not set
# CONFIG_ESP_TLS_SERVER is not set
# CONFIG_ESP_TLS_PSK_VERIFICATION is not set
# CONFIG_ESP_TLS_INSECURE is not set
CONFIG_ESP_TLS_INSECURE=y
CONFIG_ESP_TLS_SKIP_SERVER_CERT_VERIFY=y
# end of ESP-TLS
#
@@ -742,7 +743,7 @@ CONFIG_ESP_EVENT_POST_FROM_IRAM_ISR=y
#
# ESP HTTP client
#
# CONFIG_ESP_HTTP_CLIENT_ENABLE_HTTPS is not set
CONFIG_ESP_HTTP_CLIENT_ENABLE_HTTPS=y
# CONFIG_ESP_HTTP_CLIENT_ENABLE_BASIC_AUTH is not set
# end of ESP HTTP client