Merge pull request #22 from brainelectronics/feature/add-alert-banner…

…s-javascript

Add alert banners javascript

changelog.md

@@ -16,6 +16,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 <!-- ## [Unreleased] -->
 
 ## Released
+## [1.7.0] - 2022-04-18
+### Added
+- [`toast.js`](static/js/toast.js) and [`toast.js.gz`](static/js/toast.js.gz)
+  added to show hovering alert banners, see [#21][ref-issue-21]
+- Add toast JavaScript files to [`setup.py`](setup.py) to be part of twine
+  distributions
+
+### Changed
+- `/select` page shows success banner after posting new network config data
+  and does not return to index page anymore. `/configure` page shows success
+  banner after removing a network and redirects to its page instead of
+  returning to the index page, see [#21][ref-issue-21]
+
 ## [1.6.0] - 2022-04-18
 ### Added
 - Routing for JavaScript `.js` files added, see [#18][ref-issue-18]
@@ -159,8 +172,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `sendfile` function implemented in same way as on Micropythons PicoWeb
 
 <!-- Links -->
-[Unreleased]: https://github.com/brainelectronics/Micropython-ESP-WiFi-Manager/compare/1.6.0...develop
+[Unreleased]: https://github.com/brainelectronics/Micropython-ESP-WiFi-Manager/compare/1.7.0...develop
 
+[1.7.0]: https://github.com/brainelectronics/Micropython-ESP-WiFi-Manager//tree/1.7.0
 [1.6.0]: https://github.com/brainelectronics/Micropython-ESP-WiFi-Manager//tree/1.6.0
 [1.5.0]: https://github.com/brainelectronics/Micropython-ESP-WiFi-Manager//tree/1.5.0
 [1.4.0]: https://github.com/brainelectronics/Micropython-ESP-WiFi-Manager//tree/1.4.0
@@ -171,6 +185,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [0.1.1]: https://github.com/brainelectronics/Micropython-ESP-WiFi-Manager//tree/0.1.1
 [0.1.0]: https://github.com/brainelectronics/Micropython-ESP-WiFi-Manager//tree/0.1.0
 
+[ref-issue-21]: https://github.com/brainelectronics/Micropython-ESP-WiFi-Manager/issues/21
 [ref-issue-18]: https://github.com/brainelectronics/Micropython-ESP-WiFi-Manager/issues/18
 [ref-issue-19]: https://github.com/brainelectronics/Micropython-ESP-WiFi-Manager/issues/19
 [ref-issue-15]: https://github.com/brainelectronics/Micropython-ESP-WiFi-Manager/issues/15

setup.py

@@ -47,6 +47,8 @@
             [
                 'static/css/bootstrap.min.css',
                 'static/css/bootstrap.min.css.gz',
+                'static/js/toast.js',
+                'static/js/toast.js.gz',
             ]
         ),
         (

templates/remove.tpl

@@ -8,9 +8,9 @@
   <meta name="author" content="Jonas Scharpf aka brainelectronics">
   <title>Remove WiFi Network</title>
   <link href="bootstrap.min.css" rel="stylesheet">
+  <script type="text/javascript" src="toast.js"></script>
   <!--
   <link href="style.css" rel="stylesheet">
-  <link href="bootstrap.min.css" rel="stylesheet">
   <link href="list-groups.css" rel="stylesheet">
   -->
   <style type="text/css">
@@ -72,6 +72,7 @@
     </div>
     </div>
   </div>
+  <div id="alert_container" style="position: fixed;z-index: 9999;top: 20px;right: 20px;"></div>
 
   <script>
     window.onload = function(e) {
@@ -80,28 +81,20 @@
     function showPage() {
       document.getElementById("loader").style.display = "none";
       document.getElementById("myDiv").style.display = "block";
-      //document.getElementById("rcorners3").style.display = "block";
       document.getElementById("overlay").style.display = "none";
     };
     document.getElementById("remove_wifi_config_form").onsubmit = function(e) {
-      window.onbeforeunload = null;
+      createToast('alert-success', 'Success!', 'Network removed', 5000);
       return true;
     };
     const checkboxes = [...document.querySelectorAll('input[type=checkbox]')];
-    function anyChecked() {
-      return checkboxes.some(x=>x.checked);
-    }
+    function anyChecked() {return checkboxes.some(x=>x.checked);}
     checkboxes.forEach(checkbox => {
       checkbox.addEventListener("click", e => {
-        // console.log('Checkbox ' + checkbox.id + ' clicked');
         is_any_checked = anyChecked();
         var button = document.getElementById("save");
-        if(is_any_checked) {
-          button.removeAttribute('disabled');
-        }
-        else {
-          button.setAttribute('disabled','');
-        }
+        if (is_any_checked) {button.removeAttribute('disabled');}
+        else {button.setAttribute('disabled','');}
       })
     })
   </script>

templates/select.tpl

@@ -8,9 +8,9 @@
   <meta name="author" content="Jonas Scharpf aka brainelectronics">
   <title>Select WiFi</title>
   <link href="bootstrap.min.css" rel="stylesheet">
+  <script type="text/javascript" src="toast.js"></script>
   <!--
   <link href="style.css" rel="stylesheet">
-  <link href="bootstrap.min.css" rel="stylesheet">
   <link href="list-groups.css" rel="stylesheet">
   -->
   <style type="text/css">
@@ -61,40 +61,33 @@
     </div>
     </div>
   </div>
+  <div id="alert_container" style="position: fixed;z-index: 9999;top: 20px;right: 20px;"></div>
 
   <script>
     var selected_bssid = 0;
     window.onload = function(e) {
       setTimeout(showPage, 1000);
       setTimeout(get_new_networks, 100);
-      var myInterval = setInterval(get_new_networks, 10000);
+      setInterval(get_new_networks, 10000);
     };
     function showPage() {
       document.getElementById("loader").style.display = "none";
       document.getElementById("myDiv").style.display = "block";
-      //document.getElementById("rcorners3").style.display = "block";
       document.getElementById("overlay").style.display = "none";
     };
     document.getElementById("save_wifi_config_form").onsubmit = function(e) {
-      window.onbeforeunload = null;
+      createToast('alert-success', 'Success!', 'Network saved', 5000);
       return true;
     };
-    function remember_selected_element(cb) {
-      selected_bssid = cb.id;
-    }
+    function remember_selected_element(cb) {selected_bssid = cb.id;}
     function get_new_networks() {
-      // console.log('Getting new networks');
       var xmlhttp = new XMLHttpRequest();
       var url = "render_network_inputs";
       xmlhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
           var content = this.responseText;
-          // console.log(content);
           document.getElementById("wifi_network").innerHTML = content;
-
-          if (selected_bssid) {
-            document.getElementById(selected_bssid).checked = true;
-          }
+          if (selected_bssid) {document.getElementById(selected_bssid).checked = true;}
         }
       };
       xmlhttp.open("GET", url);

wifi_manager/version.py

@@ -1,3 +1,3 @@
-__version_info__ = ('1', '6', '0')
+__version_info__ = ('1', '7', '0')
 __version__ = '.'.join(__version_info__)
 __author__ = 'brainelectronics'

wifi_manager/wifi_manager.py

@@ -837,9 +837,8 @@ def save_wifi_config(self, req, resp) -> None:
 
         self._save_wifi_config(form_data=form_data)
 
-        # redirect to '/'
-        headers = {'Location': '/'}
-        yield from picoweb.start_response(resp, status='303', headers=headers)
+        # empty response to avoid any redirects or errors due to none response
+        yield from picoweb.start_response(resp, status='204')
 
     # @app.route("/remove_wifi_config")
     def remove_wifi_config(self, req, resp) -> None:
@@ -859,8 +858,8 @@ def remove_wifi_config(self, req, resp) -> None:
 
         self._remove_wifi_config(form_data=form_data)
 
-        # redirect to '/'
-        headers = {'Location': '/'}
+        # redirect to '/configure'
+        headers = {'Location': '/configure'}
         yield from picoweb.start_response(resp, status='303', headers=headers)
 
     # @app.route(re.compile('^\/(.+\.css)$'))