New dashboard and didicated readings page. The dashboard will need co…

…nfig
Aiky30 · Oct 28, 2024 · 8f6b13c · 8f6b13c
1 parent a5aac9f
commit 8f6b13c
Show file tree

Hide file tree

Showing 9 changed files with 180 additions and 79 deletions.
diff --git a/shedpi_hub_dashboard/static/shedpi_hub_dashboard/js/chart_widget.js b/shedpi_hub_dashboard/static/shedpi_hub_dashboard/js/chart_widget.js
@@ -0,0 +1,80 @@
+import {LineChart} from "./modules/chart.js";
+
+let chart = new LineChart()
+
+// TODO: DB Entry that controls this config, the page will then spit them out onto the page via backend,
+//      we then loop through each class with config embedded
+const widgetConfig = {
+  // "type": "",
+  "deviceModuleId": "a62408c2-bc89-48e2-8c23-9494bbf33cb7",
+  "startDate": "2024-01-25",
+  "endDate": "2024-02-24",
+}
+
+
+class Widget {
+  constructor(config) {
+    this.container = document.getElementById("chartContainer");
+    this.config = widgetConfig
+  }
+
+  async getDeviceData() {
+    let data;
+    const urlDeviceModule = "/api/v1/device-module/" + this.config.deviceModuleId
+    let endpointDeviceModule = new Request(urlDeviceModule);
+
+    await fetch(endpointDeviceModule)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+
+        return response.json();
+      })
+      .then((response) => {
+        data = response
+
+        return response
+      });
+    return data
+  }
+
+  async getDeviceReadings() {
+    let data;
+
+    // const url = section.getAttribute("data-json-feed")
+    const url = window.location.origin + "/api/v1/device-module-readings/"
+    const endpoint = new URL(url);
+    endpoint.searchParams.append("device_module", this.config.deviceModuleId);
+    endpoint.searchParams.append("format", "json");
+    endpoint.searchParams.append("start", this.config.startDate);
+    endpoint.searchParams.append("end", this.config.endDate);
+
+    let endpointDeviceModuleReading = new Request(endpoint);
+
+    await fetch(endpointDeviceModuleReading)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+
+        return response.json();
+      })
+      .then((response) => {
+        data = response
+
+        return response
+      });
+    return data
+  }
+
+  async render() {
+    const deviceData = await this.getDeviceData()
+    const deviceReadings = await this.getDeviceReadings()
+
+    chart.draw(deviceReadings, deviceData.schema)
+  }
+}
+
+const widget = new Widget(widgetConfig)
+widget.render()
diff --git a/shedpi_hub_dashboard/static/shedpi_hub_dashboard/js/modules/chart.js b/shedpi_hub_dashboard/static/shedpi_hub_dashboard/js/modules/chart.js
@@ -49,8 +49,8 @@ class LineChart {
     let data = this.mapDataSet(dataset, schema);
 
     // Declare the chart dimensions and margins.
-    const width = 928;
-    const height = 500;
+    const width = this.container.clientWidth;
+    const height = this.container.clientHeight;
     const marginTop = 20;
     const marginRight = 30;
     const marginBottom = 30;

diff --git a/...d/static/shedpi_hub_dashboard/js/index.js → ...static/shedpi_hub_dashboard/js/reading.js b/...d/static/shedpi_hub_dashboard/js/index.js → ...static/shedpi_hub_dashboard/js/reading.js
@@ -4,6 +4,9 @@ import {LineChart} from "./modules/chart.js";
 /*
 Design of the widgets:
 
+Dashboard Controls
+- Filter by day, week, month
+
 All widgets
  - Select fields to map the data to
  - Type of widget
@@ -20,11 +23,9 @@ let section = contents
 let storeDeviceModules = []
 let deviceModuleSchemaMap = {}
 
-
 let chart = new LineChart()
 let table = new dataTable()
 
-
 /* Drop down selection */
 // Create dropdown container
 const deviceModuleSelectorContainer = document.createElement("div");
@@ -44,8 +45,6 @@ let response = fetch(endpointDeviceModule)
     storeDeviceModules = response
     drawDropdown();
     bindFormSubmision();
-    // Build schema map
-
   });
 
 let drawDropdown = function () {

diff --git a/...templates/shedpi_hub_dashboard/index.html → ...hub_dashboard/templates/base_generic.html b/...templates/shedpi_hub_dashboard/index.html → ...hub_dashboard/templates/base_generic.html
@@ -54,40 +54,19 @@ <h5 class="offcanvas-title" id="sidebarMenuLabel">Company name</h5>
         <div class="offcanvas-body d-md-flex flex-column p-0 pt-lg-3 overflow-y-auto">
           <ul class="nav flex-column">
             <li class="nav-item">
-              <a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#">
+              <a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="/">
                 <svg class="bi">
                   <use xlink:href="#"/>
                 </svg>
                 Dashboard
               </a>
             </li>
             <li class="nav-item">
-              <a class="nav-link d-flex align-items-center gap-2" href="#">
+              <a class="nav-link d-flex align-items-center gap-2" href="/reading">
                 <svg class="bi">
                   <use xlink:href="#"/>
                 </svg>
-                Other
-              </a>
-            </li>
-          </ul>
-
-          <hr class="my-3">
-
-          <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="#gear-wide-connected"/>
-                </svg>
-                Settings
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi">
-                  <use xlink:href="#door-closed"/>
-                </svg>
-                Sign out
+                Reading
               </a>
             </li>
           </ul>
@@ -98,53 +77,12 @@ <h5 class="offcanvas-title" id="sidebarMenuLabel">Company name</h5>
     <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>
+        {% block page_title %}
+          <h1 class="h2">Dashboard</h1>
+        {% endblock page_title %}
       </div>
-
-      <form class="row g-3">
-
-        <div class="col-lg-3 col-sm-6">
-          <label for="startDate">Start</label>
-          <input id="startDate" class="form-control" type="date"/>
-          <span id="startDateSelected"></span>
-        </div>
-        <div class="col-lg-3 col-sm-6">
-          <label for="endDate">End</label>
-          <input id="endDate" class="form-control" type="date"/>
-          <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>
-
-      </form>
-
-      <h2>Chart</h2>
-      <div id="chartContainer"></div>
-
-      <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>
-      -->
+      {% block content %}
+      {% endblock content %}
 
     </main>
   </div>
@@ -155,10 +93,12 @@ <h2>Section title</h2>
 <footer>
 </footer>
 <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
-<script src="{% static 'shedpi_hub_dashboard/js/index.js' %}" type="module"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
         crossorigin="anonymous"></script>
+{% block js_scripts %}
+{% endblock js_scripts %}
+
 
 </body>
 </html>
diff --git a/shedpi_hub_dashboard/templates/index.html b/shedpi_hub_dashboard/templates/index.html
@@ -0,0 +1,27 @@
+{% extends "base_generic.html" %}
+
+{% load static %}
+
+{% block page_title %}
+  <h1 class="h2">Dashboard</h1>
+{% endblock page_title %}
+
+{% block content %}
+  <div class="row row-cols-1 row-cols-sm-1 row-cols-md-2 g-2">
+    <div class="col">
+      <div class="card shadow-sm">
+        <svg id="chartContainer">
+          <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>
+
+{% endblock content %}
+
+
+{% block js_scripts %}
+  <script src="{% static 'shedpi_hub_dashboard/js/chart_widget.js' %}" type="module"></script>
+{% endblock js_scripts %}
diff --git a/shedpi_hub_dashboard/templates/reading.html b/shedpi_hub_dashboard/templates/reading.html
@@ -0,0 +1,45 @@
+{% extends "base_generic.html" %}
+
+{% load static %}
+
+{% block page_title %}
+  <h1 class="h2">Reading</h1>
+
+{% endblock page_title %}
+
+{% block content %}
+  <form class="row g-3">
+
+    <div class="col-lg-3 col-sm-6">
+      <label for="startDate">Start</label>
+      <input id="startDate" class="form-control" type="date"/>
+      <span id="startDateSelected"></span>
+    </div>
+    <div class="col-lg-3 col-sm-6">
+      <label for="endDate">End</label>
+      <input id="endDate" class="form-control" type="date"/>
+      <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>
+
+  </form>
+
+  <h2>Chart</h2>
+  <div id="chartContainer"></div>
+
+  <h2>Section title</h2>
+  <div id="tableContainer"></div>
+{% endblock content %}
+
+{% block js_scripts %}
+  <script src="{% static 'shedpi_hub_dashboard/js/reading.js' %}" type="module"></script>
+{% endblock js_scripts %}
diff --git a/shedpi_hub_dashboard/urls.py b/shedpi_hub_dashboard/urls.py
@@ -4,4 +4,5 @@
 
 urlpatterns = [
     path("", views.index),
+    path("reading", views.reading),
 ]
diff --git a/shedpi_hub_dashboard/views.py b/shedpi_hub_dashboard/views.py
@@ -6,7 +6,16 @@
 
 
 def index(request):
-    response = TemplateResponse(request, "shedpi_hub_dashboard/index.html", {})
+    response = TemplateResponse(
+        request, "shedpi_hub_dashboard/templates/index.html", {}
+    )
+    return response
+
+
+def reading(request):
+    response = TemplateResponse(
+        request, "shedpi_hub_dashboard/templates/reading.html", {}
+    )
     return response
 
 

diff --git a/shedpi_hub_example_project/settings.py b/shedpi_hub_example_project/settings.py
@@ -56,7 +56,7 @@
 TEMPLATES = [
     {
         "BACKEND": "django.template.backends.django.DjangoTemplates",
-        "DIRS": [],
+        "DIRS": [""],
         "APP_DIRS": True,
         "OPTIONS": {
             "context_processors": [