[client] Display chart, but it's not working right just yet.
Also do some re-organisation in the pop-up to install a flexbox.
This commit is contained in:
parent
9595f9153d
commit
a34efe5c25
GPG Key ID:
1BE5172E637709C2
|
|
@ -50,6 +50,7 @@ main {
|
|||
z-index: 100 !important;
|
||||
}
|
||||
|
||||
h2.device-name { text-align: center; }
|
||||
.device-name::after {
|
||||
content: "#" attr(data-id);
|
||||
float: right; margin-right: 1em;
|
||||
|
|
@ -57,6 +58,12 @@ main {
|
|||
font-size: 80%;
|
||||
color: hsl(230, 45%, 65%);
|
||||
}
|
||||
|
||||
.device-data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.device-property-table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@
|
|||
import CreateElement from '../../node_modules/dom-create-element-query-selector/src/index.js';
|
||||
|
||||
// import Chart from 'chart.js';
|
||||
// Chart.js pollutes the global scope, but the main entry point is going to change soon in v2.8 - which should fix our issue here
|
||||
import Chart from '../../node_modules/chart.js/dist/Chart.min.js';
|
||||
|
||||
import GetFromUrl from './Helpers/GetFromUrl.mjs';
|
||||
import Postify from './Helpers/Postify.mjs';
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@ class LayerDeviceMarkers {
|
|||
// Create the popup
|
||||
let popup = L.popup({
|
||||
className: "popup-device",
|
||||
maxWidth: 640,
|
||||
autoPanPadding: L.point(100, 100)
|
||||
}).setContent("⌛ Loading..."); // TODO: Display a nice loading animation here
|
||||
marker.on("popupopen", this.marker_popup_open_handler.bind(this, device.id));
|
||||
|
|
@ -73,11 +74,21 @@ class LayerDeviceMarkers {
|
|||
render_device_info(device_info) {
|
||||
let result = document.createDocumentFragment();
|
||||
|
||||
// ----------------------------------
|
||||
|
||||
result.appendChild(CreateElement("h2.device-name",
|
||||
`Device: ${device_info.name}`
|
||||
));
|
||||
result.querySelector(".device-name").dataset.id = device_info.id;
|
||||
|
||||
// ----------------------------------
|
||||
|
||||
let data_container = CreateElement("div.device-data",
|
||||
CreateElement("div.device-params")
|
||||
);
|
||||
result.appendChild(data_container);
|
||||
let params_container = data_container.querySelector(".device-params");
|
||||
|
||||
let info_list = [];
|
||||
for(let property in device_info) {
|
||||
// Filter out properties we're handling specially
|
||||
|
|
@ -103,16 +114,20 @@ class LayerDeviceMarkers {
|
|||
CreateElement("td.value", value)
|
||||
));
|
||||
}
|
||||
result.appendChild(CreateElement("table.device-property-table", ...info_list));
|
||||
params_container.appendChild(CreateElement("table.device-property-table", ...info_list));
|
||||
|
||||
result.appendChild(CreateElement("p.device-notes",
|
||||
params_container.appendChild(CreateElement("p.device-notes",
|
||||
CreateElement("em", device_info.other)
|
||||
));
|
||||
|
||||
// ----------------------------------
|
||||
|
||||
// TODO: Allow the user to change the reading type
|
||||
let chart_device_data = new DeviceReadingDisplay(Config, device_info.id, "PM25");
|
||||
|
||||
result.appendChild(chart_device_data.display);
|
||||
data_container.appendChild(chart_device_data.display);
|
||||
|
||||
// ----------------------------------
|
||||
|
||||
return result;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -371,6 +371,39 @@
|
|||
"supports-color": "^5.3.0"
|
||||
}
|
||||
},
|
||||
"chart.js": {
|
||||
"version": "2.7.3",
|
||||
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.7.3.tgz",
|
||||
"integrity": "sha512-3+7k/DbR92m6BsMUYP6M0dMsMVZpMnwkUyNSAbqolHKsbIzH2Q4LWVEHHYq7v0fmEV8whXE0DrjANulw9j2K5g==",
|
||||
"requires": {
|
||||
"chartjs-color": "^2.1.0",
|
||||
"moment": "^2.10.2"
|
||||
}
|
||||
},
|
||||
"chartjs-color": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.2.0.tgz",
|
||||
"integrity": "sha1-hKL7dVeH7YXDndbdjHsdiEKbrq4=",
|
||||
"requires": {
|
||||
"chartjs-color-string": "^0.5.0",
|
||||
"color-convert": "^0.5.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"color-convert": {
|
||||
"version": "0.5.3",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz",
|
||||
"integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0="
|
||||
}
|
||||
}
|
||||
},
|
||||
"chartjs-color-string": {
|
||||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz",
|
||||
"integrity": "sha512-amWNvCOXlOUYxZVDSa0YOab5K/lmEhbFNKI55PWc4mlv28BDzA7zaoQTGxSBgJMHIW+hGX8YUrvw/FH4LyhwSQ==",
|
||||
"requires": {
|
||||
"color-name": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"clap": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/clap/-/clap-1.2.3.tgz",
|
||||
|
|
@ -484,8 +517,7 @@
|
|||
"color-name": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
|
||||
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
|
||||
"dev": true
|
||||
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
|
||||
},
|
||||
"color-string": {
|
||||
"version": "0.3.0",
|
||||
|
|
@ -1705,6 +1737,11 @@
|
|||
"minimist": "0.0.8"
|
||||
}
|
||||
},
|
||||
"moment": {
|
||||
"version": "2.23.0",
|
||||
"resolved": "https://registry.npmjs.org/moment/-/moment-2.23.0.tgz",
|
||||
"integrity": "sha512-3IE39bHVqFbWWaPOMHZF98Q9c3LDKGTmypMiTM2QygGXXElkFWIH7GxfmlwmY2vwa+wmNsoYZmG2iusf1ZjJoA=="
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
},
|
||||
"homepage": "https://github.com/sbrl/ConnectedHumber-Air-Quality-Interface#readme",
|
||||
"dependencies": {
|
||||
"chart.js": "^2.7.3",
|
||||
"dom-create-element-query-selector": "github:hekigan/dom-create-element-query-selector",
|
||||
"leaflet": "^1.4.0",
|
||||
"leaflet-fullscreen": "^1.0.2",
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export default {
|
|||
input: 'client_src/js/index.mjs',
|
||||
output: {
|
||||
file: 'app/app.js',
|
||||
format: 'es'
|
||||
format: 'esm'
|
||||
},
|
||||
plugins: [
|
||||
resolve({
|
||||
|
|
|
|||
Loading…
Reference in New Issue