Merge pull request #10 from brainelectronics/feature/implement-modern…

…-design Implement modern design
brainelectronics · Mar 11, 2022 · 9b0bf83 · 9b0bf83
2 parents 8e8d334 + 7075369
commit 9b0bf83
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 13 deletions.
diff --git a/changelog.md b/changelog.md
@@ -14,6 +14,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 -->
 
 ## [Unreleased]
+## [1.3.0] - 2022-03-11
+### Changed
+- Index page uses cards instead of list to show available pages
+- Available URLs dictionary used `text`, `title` and `color` keys per URL to
+  style the cards as required
+- Loading spinner is shown on index page to avoid showing a not fully rendered
+  or styled webpage
+
 ## [1.2.0] - 2022-03-06
 ### Added
 - Custom logger can be provided to `run` function to enable different logging
@@ -121,8 +129,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.2.0...develop
+[Unreleased]: https://github.com/brainelectronics/Micropython-ESP-WiFi-Manager/compare/1.3.0...develop
 
+[1.3.0]: https://github.com/brainelectronics/Micropython-ESP-WiFi-Manager//tree/1.3.0
 [1.2.0]: https://github.com/brainelectronics/Micropython-ESP-WiFi-Manager//tree/1.2.0
 [1.1.0]: https://github.com/brainelectronics/Micropython-ESP-WiFi-Manager//tree/1.1.0
 [1.0.0]: https://github.com/brainelectronics/Micropython-ESP-WiFi-Manager//tree/1.0.0

diff --git a/templates/index.tpl b/templates/index.tpl
@@ -9,13 +9,30 @@
   <title>Setup</title>
   <link href="bootstrap.min.css" rel="stylesheet">
   <!-- <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico"> -->
+  <style type="text/css">
+    .overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:gray;color:#fff;opacity:1;transition:.5s;visibility:visible}
+    .overlay.hidden{opacity:0;visibility:hidden}
+    .loader{position:absolute;left:50%;top:50%;z-index:1;width:120px;height:120px;margin:-76px 0 0 -76px;border:16px solid #f3f3f3;border-radius:50%;border-top:16px solid #3498db;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}
+    @-webkit-keyframes spin{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}
+    }@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
+  </style>
 </head>
 <body>
-  <div class="d-flex flex-column min-vh-100 justify-content-center align-items-center">
-    <div class="list-group text-center">
-      <a href="/" class="list-group-item list-group-item-action active">This page</a>
-      {{content}}
-    </div>
+  <div id="overlay" class="overlay">
+    <div id="loader" class="loader"></div>
   </div>
+  <div style="display:none;" id="container" class="container"><div class="row">
+    {{content}}
+  </div></div>
+  <script>
+    window.onload = function(e) {
+      setTimeout(showPage, 1000);
+    };
+    function showPage() {
+      document.getElementById("loader").style.display = "none";
+      document.getElementById("container").style.display = "block";
+      document.getElementById("overlay").style.display = "none";
+    };
+  </script>
 </body>
 </html>
diff --git a/wifi_manager/version.py b/wifi_manager/version.py
@@ -1,3 +1,3 @@
-__version_info__ = ('1', '2', '0')
+__version_info__ = ('1', '3', '0')
 __version__ = '.'.join(__version_info__)
 __author__ = 'brainelectronics'
diff --git a/wifi_manager/wifi_manager.py b/wifi_manager/wifi_manager.py
@@ -261,10 +261,23 @@ def _add_app_routes(self) -> None:
                               func=self.styles)
 
         available_urls = {
-            "/select": "Select WiFi network",
-            "/configure": "Manage WiFi networks",
-            "/scan_result": "Latest Scan result",
+            "/select": {
+                "title": "Select WiFi",
+                "color": "border-primary",
+                "text": "Configure WiFi networks",
+            },
+            "/configure": {
+                "title": "Manage WiFi networks",
+                "color": "border-primary",
+                "text": "Remove credentials of configured WiFi networks",
+            },
+            "/scan_result": {
+                "title": "Scan data",
+                "color": "text-white bg-info",
+                "text": "Latest WiFi scan data as JSON",
+            }
         }
+
         self.available_urls = available_urls
 
     def _encrypt_data(self, data: Union[str, list, dict]) -> bytes:
@@ -543,10 +556,15 @@ def _render_index_page(self, available_pages: dict) -> str:
         :rtype:     str
         """
         content = ""
-        for url, description in sorted(available_pages.items(), key=lambda item: item[1]):
+
+        # sort dict by 'title' of the dict values
+        for url, info in sorted(available_pages.items(),
+                                key=lambda item: item[1]['title']):
             content += """
-            <a href="{url}" class="list-group-item list-group-item-action">{description}</a>
-            """.format(url=url, description=description)
+            <div class="col-sm-4 py-2"><div class="card h-100 {color}"><div class="card-body">
+                <h3 class="card-title">{title}</h3><p class="card-text">{text}</p>
+                <a href="{url}" class="stretched-link"></a></div></div></div>
+            """.format(color=info['color'], title=info['title'], text=info['text'], url=url)
 
         return content