diff --git a/shedpi_hub_dashboard/static/shedpi_hub_dashboard/dummy_data.json b/shedpi_hub_dashboard/static/shedpi_hub_dashboard/dummy_data.json deleted file mode 100644 index eedab2e..0000000 --- a/shedpi_hub_dashboard/static/shedpi_hub_dashboard/dummy_data.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "headings": ["datetime", "temperature", "humidity"], - "readings": [ - { - "datetime": "2024-01-07 12:22:44", - "temperature": "12.345", - "humidity": "12" - } - ] -} diff --git a/shedpi_hub_dashboard/static/shedpi_hub_dashboard/js/index.js b/shedpi_hub_dashboard/static/shedpi_hub_dashboard/js/index.js index 0c1f5fd..26e8c7b 100644 --- a/shedpi_hub_dashboard/static/shedpi_hub_dashboard/js/index.js +++ b/shedpi_hub_dashboard/static/shedpi_hub_dashboard/js/index.js @@ -1,7 +1,7 @@ const contents = document.getElementsByClassName("contents")[0]; let section = contents -let deviceModuleEndpoint = "/api/v1/device-module-readings/" +let deviceModuleEndpoint = "" // Global store for the device modules, with schema let storeDeviceModules = [] @@ -72,13 +72,14 @@ section.append(tableContainer); let loadTableData = function (deviceModuleId) { - // TODO: Get data based on deviceModuleId - // Endpoint: http://127.0.0.1:8000/api/v1/device-module-readings/ - // device_module = deviceModuleId - // FIXME: Build the query string using the js libraries - const endpoint = deviceModuleEndpoint + "?device_module=" + deviceModuleId - // FIXME: Pass a reversed full url through - // const urlDeviceModuleReading = section.getAttribute("data-json-feed") + // const url = section.getAttribute("data-json-feed") + const url = "http://localhost:8000//api/v1/device-module-readings/" + const endpoint = new URL(url); + endpoint.searchParams.append("device_module", deviceModuleId); + + // FIXME: Need data output and need headings from Schema + + // const urlDeviceModuleReading = let endpointDeviceModuleReading = new Request(endpoint); response = fetch(endpointDeviceModuleReading) @@ -90,12 +91,12 @@ let loadTableData = function (deviceModuleId) { return response.json(); }) .then((response) => { - drawTable(response) + drawTable(response, deviceModuleId) }); } -let drawTable = function (data) { +let drawTable = function (dataset, deviceModuleId) { // First empty the table container tableContainer.textContent = "" @@ -104,33 +105,70 @@ let drawTable = function (data) { // Table Header let headerRow = document.createElement("tr"); - // TODO: Build the header rows from the data, for now use the first row. - // For other projects this was supplied in the endpoint + // TODO: Build the header rows from the schema, or build a full list in th // Could use the schema, what about historic data that may violate it, - // we only validate this when historic data is updated // Built as a ist because the pagination would hammer the device modiule + const headingFields = dataset[0]; - let deviceModules = storeDeviceModules + // TODO: Build the header rows from the schema, or build a full list in the backend and supply in the response + // Could use the schema, what about historic data that may violate it, + // Built as a ist because the pagination would hammer the device modiule + schema = deviceModuleSchemaMap[deviceModuleId] - console.log("Drawing table with data: ", data) + let dataFields = [] + if (schema) { + extra_fields = Object.keys(schema.properties) + dataFields = [...dataFields, ...extra_fields]; + dataFields = [...new Set(dataFields)] + } - for (let heading in data[0]) { + // FIXME: Need human readable headings, probably needs to come from the BE to be + for (let heading in headingFields) { - let headerItem = document.createElement("th"); - headerItem.textContent = heading - headerRow.append(headerItem); + if (heading == "data") { + + for (let headingIndex in dataFields) { + const heading = dataFields[headingIndex] + let headerItem = document.createElement("th"); + headerItem.textContent = heading + headerRow.append(headerItem); + } + } else { + let headerItem = document.createElement("th"); + headerItem.textContent = heading + headerRow.append(headerItem); + } } table.append(headerRow); // Table Contents - for (let row in data) { + for (let rowIndex in dataset) { + const row = dataset[rowIndex] let contentRow = document.createElement("tr"); - for (let reading in data[row]) { - let contentItem = document.createElement("td"); - contentItem.textContent = data[row][reading] - contentRow.append(contentItem); + for (let reading in row) { + const fieldValue = row[reading] + if (typeof fieldValue == "object") { + for (let dataFieldIndex in dataFields) { + let contentItem = document.createElement("td"); + const dataField = dataFields[dataFieldIndex] + + // FIXME: Need to change the null value in the project to be an empty object + let mydict = {} + if (fieldValue != null) { + if (fieldValue.hasOwnProperty(dataField)) { + contentItem.textContent = fieldValue[dataField] + } + } + + contentRow.append(contentItem); + } + } else { + let contentItem = document.createElement("td"); + contentItem.textContent = row[reading] + contentRow.append(contentItem); + } } table.append(contentRow); } diff --git a/shedpi_hub_dashboard/templates/shedpi_hub_dashboard/index.html b/shedpi_hub_dashboard/templates/shedpi_hub_dashboard/index.html index 087edc9..f8489c1 100644 --- a/shedpi_hub_dashboard/templates/shedpi_hub_dashboard/index.html +++ b/shedpi_hub_dashboard/templates/shedpi_hub_dashboard/index.html @@ -1,24 +1,23 @@ - {% load static %} -
- - - -