sbrl-github/Air-Quality-Web
1
0
Fork 0
mirror of https://github.com/ConnectedHumber/Air-Quality-Web synced 2024-11-21 06:22:59 +00:00
Code Issues Releases Wiki Activity

Use hourglass when fetching data from the server

Browse source
This commit is contained in:
Starbeamrainbowlabs 2019-02-10 14:45:15 +00:00
parent 12d4f4c8d2
commit 9b2baba10b
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
3 changed files with 34 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client_src/css/main.css
View file

@ -57,3 +57,5 @@ button, a { cursor: pointer; }
button.selected {
font-weight: bolder;
}
.working { cursor: progress; }

20
client_src/js/DeviceReadingDisplay.mjs
View file

@ -10,6 +10,7 @@ import moment from 'moment';
import Chart from '../../node_modules/chart.js/dist/Chart.bundle.min.js';
import GetFromUrl from './Helpers/GetFromUrl.mjs';
import GetContainingElement from './Helpers/GetContainingElement.mjs';
import Postify from './Helpers/Postify.mjs';
@ -68,7 +69,7 @@ class DeviceReadingDisplay {
// Create the display element first, as we need it to be immediately available for inclusion in the popup window
/** @type {HTMLElement} */
this.display = CreateElement("div.chart-device-data",
this.display = CreateElement("div.chart-device-data.working",
CreateElement("canvas.canvas-chart"),
CreateElement("ul.reading-types.button-array"),
CreateElement("ul.quick-time-selector.button-array",
@ -111,7 +112,9 @@ class DeviceReadingDisplay {
// ----------------------------------------------------
// Setup the chart itself
this.setup_chart();
await this.setup_chart();
this.display.classList.remove("working");
}
async timelength_button_click_handler(event) {
@ -125,16 +128,20 @@ class DeviceReadingDisplay {
this.start_time = moment().subtract(time_length, time_unit);
this.end_time = moment();
let popup_container = GetContainingElement(event.target, "div");
popup_container.classList.add("working");
await this.update_chart();
// Show the new button to be selected
this.display.querySelectorAll(".quick-time-selector button").forEach((button) => button.classList.remove("selected"));
event.target.classList.add("selected");
popup_container.classList.remove("working");
}
setup_chart() {
async setup_chart() {
this.chart = new Chart(this.display.querySelector("canvas").getContext("2d"), {
type: "line",
data: {
@ -167,7 +174,7 @@ class DeviceReadingDisplay {
}
});
this.update_chart();
await this.update_chart();
}
async get_data() {
@ -210,6 +217,9 @@ class DeviceReadingDisplay {
console.log("[marker/device-graph] Reading type is now", this.reading_type);
let popup_container = GetContainingElement(event.target, "div");
popup_container.classList.add("working");
// Update the button list to highlight the newly-selected reading type, but only if we managed to update the chart successfully
if(await this.update_chart()) {
// Remove the selected class from the old one(s?)
@ -219,6 +229,8 @@ class DeviceReadingDisplay {
// Add the selected class to the new one
event.target.classList.add("selected");
}
popup_container.classList.remove("working");
}
async update_chart() {

16
client_src/js/Helpers/GetContainingElement.mjs Normal file
View file

@ -0,0 +1,16 @@
"use strict";
/**
* Gets the first containing parent element of a given type for a given child element.
* @param {HTMLElement} element The child element to find the parent of.
* @param {string} type The name of the element containing parent to search for.
*/
function GetContainingElement(element, type)
{
while(element !== null && element.tagName.toLowerCase() !== type.toLowerCase()) {
element = element.parentNode;
}
return element;
}
export default GetContainingElement;