Added working form for submitting the data, querying and viewing

Aiky30 · Oct 25, 2024 · fa9cc0f · fa9cc0f
1 parent e9f1aeb
commit fa9cc0f
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 19 deletions.
diff --git a/shedpi_hub_dashboard/static/shedpi_hub_dashboard/js/index.js b/shedpi_hub_dashboard/static/shedpi_hub_dashboard/js/index.js
@@ -24,29 +24,23 @@ response = fetch(endpointDeviceModule)
   })
   .then((response) => {
     storeDeviceModules = response
-    drawDropdown()
-
+    drawDropdown();
+    bindFormSubmision();
     // Build schema map
 
   });
 
 let drawDropdown = function () {
   let data = storeDeviceModules
-  let dropdown = document.createElement("select");
+  let dropdown = document.getElementById("form-dropdown");
+
+  // Empty the dropdown items
+  dropdown.innerHTML = '';
 
-  // Table Header
   let emptySelector = document.createElement("option");
   emptySelector.textContent = "Please Select"
   dropdown.append(emptySelector)
 
-  dropdown.addEventListener('change', function (e) {
-    optionId = this.selectedOptions[0].id
-
-    if (optionId) {
-      loadTableData(optionId)
-    }
-  });
-
   for (let deviceModuleIndex in data) {
     const deviceModule = data[deviceModuleIndex]
 
@@ -59,24 +53,48 @@ let drawDropdown = function () {
 
     dropdown.append(optionElement);
   }
+}
+
+/* Form submission */
 
-  // Add the drpdown to the page
-  deviceModuleSelectorContainer.append(dropdown);
+let bindFormSubmision = function () {
+  let submitControl = document.getElementById("form-submit");
+  let dropdown = document.getElementById("form-dropdown");
+
+  submitControl.addEventListener('click', function (e) {
+    e.preventDefault()
+
+    // TODO: Run field validation
+
+    let optionId = dropdown.selectedOptions[0].id
+
+    // Start and end
+    let startField = document.getElementById("startDate");
+    let endField = document.getElementById("endDate");
+
+    if (optionId) {
+      loadTableData(optionId, startField.value, endField.value)
+    }
+  });
 };
 
 /* Table visual */
 
+// TOOD: Get a line chart working: https://visjs.github.io/vis-timeline/docs/graph2d/
+
 // Create table container
 const tableContainer = document.createElement("div");
 section.append(tableContainer);
 
-let loadTableData = function (deviceModuleId) {
+let loadTableData = function (deviceModuleId, startDate, endDate) {
 
   // 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", deviceModuleId);
   endpoint.searchParams.append("format", "json");
+  endpoint.searchParams.append("start", startDate);
+  endpoint.searchParams.append("end", endDate);
 
   // FIXME: Need data output and need headings from Schema
 

diff --git a/shedpi_hub_dashboard/templates/shedpi_hub_dashboard/index.html b/shedpi_hub_dashboard/templates/shedpi_hub_dashboard/index.html
@@ -1,23 +1,52 @@
 {% load static %}
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>ShedPi</title>
   <link rel="stylesheet" href="{% static 'shedpi_hub_dashboard/css/landing.css' %}">
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+
 </head>
 <body>
 <header>
   <h1>Shed Pi data</h1>
 </header>
 <div class="contents" data-endpoint-url="">
 
+  <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">
+      <select class="form-select" id="form-dropdown" aria-label="Device module selector">
+      </select>
+    </div>
+
+    <div class="col-lg-3 col-sm-6">
+      <button type="submit" class="btn btn-primary mb-3" id="form-submit">Submit</button>
+    </div>
+
+  </form>
 </div>
 <footer>
 </footer>
 <script src="{% static 'shedpi_hub_dashboard/js/index.js' %}"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+        crossorigin="anonymous"></script>
+
 </body>
 </html>
diff --git a/shedpi_hub_dashboard/views.py b/shedpi_hub_dashboard/views.py
@@ -20,10 +20,18 @@ class DeviceModuleReadingViewSet(viewsets.ModelViewSet):
     serializer_class = DeviceModuleReadingSerializer
 
     def get_queryset(self):
-        # FIXME: Validate that the user supplied this get param!
+        # FIXME: Validate that the user supplied the get params!
         device_module_id = self.request.query_params.get("device_module")
+        start_date = self.request.query_params.get("start")
+        end_date = self.request.query_params.get("end")
 
-        if device_module_id:
+        if start_date and end_date and device_module_id:
+            return self.queryset.filter(
+                device_module=device_module_id,
+                created_at__date__range=(start_date, end_date),
+            )
+
+        elif device_module_id:
             return self.queryset.filter(device_module=device_module_id)
 
         return self.queryset