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 new file mode 100644 index 0000000..fa606fe --- /dev/null +++ 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 index ec1a19a..b67b245 100644 --- 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/shedpi_hub_dashboard/static/shedpi_hub_dashboard/js/index.js b/shedpi_hub_dashboard/static/shedpi_hub_dashboard/js/reading.js similarity index 98% rename from shedpi_hub_dashboard/static/shedpi_hub_dashboard/js/index.js rename to shedpi_hub_dashboard/static/shedpi_hub_dashboard/js/reading.js index ea9df50..1962649 100644 --- a/shedpi_hub_dashboard/static/shedpi_hub_dashboard/js/index.js +++ b/shedpi_hub_dashboard/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/shedpi_hub_dashboard/templates/shedpi_hub_dashboard/index.html b/shedpi_hub_dashboard/templates/base_generic.html similarity index 60% rename from shedpi_hub_dashboard/templates/shedpi_hub_dashboard/index.html rename to shedpi_hub_dashboard/templates/base_generic.html index 0fc3ed6..250d4ce 100644 --- a/shedpi_hub_dashboard/templates/shedpi_hub_dashboard/index.html +++ b/shedpi_hub_dashboard/templates/base_generic.html @@ -54,7 +54,7 @@
Company name
- -
- - @@ -98,53 +77,12 @@
Company name
-

Dashboard

+ {% block page_title %} +

Dashboard

+ {% endblock page_title %}
- -
- -
- - - -
-
- - - -
-
- - -
- -
- - -
- -
- -

Chart

-
- -

Section title

-
- - + {% block content %} + {% endblock content %}
@@ -155,10 +93,12 @@

Section title

- +{% block js_scripts %} +{% endblock js_scripts %} + diff --git a/shedpi_hub_dashboard/templates/index.html b/shedpi_hub_dashboard/templates/index.html new file mode 100644 index 0000000..f95d1c2 --- /dev/null +++ b/shedpi_hub_dashboard/templates/index.html @@ -0,0 +1,27 @@ +{% extends "base_generic.html" %} + +{% load static %} + +{% block page_title %} +

Dashboard

+{% endblock page_title %} + +{% block content %} +
+
+
+ + Placeholder + + Chart + +
+
+
+ +{% endblock content %} + + +{% block js_scripts %} + +{% endblock js_scripts %} diff --git a/shedpi_hub_dashboard/templates/reading.html b/shedpi_hub_dashboard/templates/reading.html new file mode 100644 index 0000000..0610306 --- /dev/null +++ b/shedpi_hub_dashboard/templates/reading.html @@ -0,0 +1,45 @@ +{% extends "base_generic.html" %} + +{% load static %} + +{% block page_title %} +

Reading

+ +{% endblock page_title %} + +{% block content %} +
+ +
+ + + +
+
+ + + +
+
+ + +
+ +
+ + +
+ +
+ +

Chart

+
+ +

Section title

+
+{% endblock content %} + +{% block js_scripts %} + +{% endblock js_scripts %} diff --git a/shedpi_hub_dashboard/urls.py b/shedpi_hub_dashboard/urls.py index 8ace68e..eefe4e8 100644 --- 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 index 76c8e75..3b40a08 100644 --- 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 index a0dc765..be173b1 100644 --- 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": [