Trialling adding dashboard components for the day

shedpi_hub_dashboard/static/shedpi_hub_dashboard/css/landing.css

@@ -0,0 +1,49 @@
+.bi {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+}
+
+/*
+ * Sidebar
+ */
+
+@media (min-width: 768px) {
+    .sidebar .offcanvas-lg {
+        position: -webkit-sticky;
+        position: sticky;
+        top: 48px;
+    }
+
+    .navbar-search {
+        display: block;
+    }
+}
+
+.sidebar .nav-link {
+    font-size: .875rem;
+    font-weight: 500;
+}
+
+.sidebar .nav-link.active {
+    color: #2470dc;
+}
+
+.sidebar-heading {
+    font-size: .75rem;
+}
+
+/*
+ * Navbar
+ */
+
+.navbar-brand {
+    padding-top: .75rem;
+    padding-bottom: .75rem;
+    background-color: rgba(0, 0, 0, .25);
+    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
+}
+
+.navbar .form-control {
+    padding: .75rem 1rem;
+}

shedpi_hub_dashboard/static/shedpi_hub_dashboard/js/index.js

@@ -1,6 +1,17 @@
 import {dataTable} from "./modules/table.js";
 import {LineChart} from "./modules/chart.js";
 
+/*
+Design of the widgets:
+
+All widgets
+ - Select fields to map the data to
+ - Type of widget
+
+Temperature probe:
+ - Average of the day
+ - All entries for the day
+*/
 
 const contents = document.getElementsByClassName("contents")[0];
 let section = contents

shedpi_hub_dashboard/templates/shedpi_hub_dashboard/index.html

@@ -71,49 +71,6 @@ <h5 class="offcanvas-title" id="sidebarMenuLabel">Company name</h5>
             </li>
           </ul>
 
-          <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
-            <span>Saved reports</span>
-            <a class="link-secondary" href="#" aria-label="Add a new report">
-              <svg class="bi">
-                <use xlink:href="#plus-circle"/>
-              </svg>
-            </a>
-          </h6>
-          <ul class="nav flex-column mb-auto">
-            <li class="nav-item">
-              <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi">
-                  <use xlink:href="#file-earmark-text"/>
-                </svg>
-                Current month
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi">
-                  <use xlink:href="#file-earmark-text"/>
-                </svg>
-                Last quarter
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi">
-                  <use xlink:href="#file-earmark-text"/>
-                </svg>
-                Social engagement
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi">
-                  <use xlink:href="#file-earmark-text"/>
-                </svg>
-                Year-end sale
-              </a>
-            </li>
-          </ul>
-
           <hr class="my-3">
 
           <ul class="nav flex-column mb-auto">
@@ -138,7 +95,7 @@ <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-
       </div>
     </div>
 
-    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
+    <main class="col-md-12 ms-sm-auto col-lg-10 px-md-4">
       <div
           class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
         <h1 class="h2">Dashboard</h1>
@@ -157,11 +114,13 @@ <h1 class="h2">Dashboard</h1>
           <span id="endDateSelected"></span>
         </div>
         <div class="col-lg-3 col-sm-6">
+          <label>&nbsp;</label>
           <select class="form-select" id="form-dropdown" aria-label="Device module selector">
           </select>
         </div>
 
         <div class="col-lg-3 col-sm-6">
+          <label>&nbsp;</label>
           <button type="submit" class="btn btn-primary mb-3" id="form-submit">Submit</button>
         </div>
 
@@ -173,10 +132,26 @@ <h2>Chart</h2>
       <h2>Section title</h2>
       <div id="tableContainer"></div>
 
+      <!--
+      <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
+        <div class="col">
+          <div class="card shadow-sm">
+            <svg id="testChart">
+              <title>Placeholder</title>
+              <rect width="100%" height="100%" fill="#55595c"/>
+              <text x="50%" y="50%" fill="#eceeef" dy=".3em">Chart</text>
+            </svg>
+          </div>
+        </div>
+      </div>
+      -->
+
     </main>
   </div>
+
 </div>
 
+
 <footer>
 </footer>
 <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>