Air-Quality-Web/client_src/js/UI.mjs

103 lines
3 KiB
JavaScript

"use strict";
import SmartSettings from 'smartsettings';
import NanoModal from 'nanomodal';
import Config from './Config.mjs';
import GetFromUrl from './Helpers/GetFromUrl.mjs';
import Gauge from './Gauge.mjs';
// import Tour from './Tour.mjs';
function show_nanomodal(html, options = {}) {
return new Promise((resolve, _reject) => {
let modal = NanoModal(html, options);
modal.onHide(resolve);
modal.show();
});
}
async function show_changelog(only_if_changed) {
let current_version = `${Config.version}, built ${Config.build_date.toDateString()}`;
console.log(`[UI] Comparing current '${current_version}' to '${localStorage.getItem("last_seen_version")}'`);
if(only_if_changed && localStorage.getItem("last_seen_version") == current_version) {
console.log("[UI] Not showing changelog.");
return false;
}
console.log("[UI] Showing changelog");
await show_nanomodal(await GetFromUrl(`${Config.api_root}?action=changelog`), {
classes: "reverse",
autoRemove: true
});
localStorage.setItem("last_seen_version", current_version);
return true;
}
class UI {
constructor(in_config, in_map_manager) {
this.config = in_config;
this.map_manager = in_map_manager;
this.ui_panel = new SmartSettings("Settings");
this.gauge = new Gauge(document.getElementById("canvas-guage"));
this.gauge.set_reading_type(Config.default_reading_type);
// this.ui_panel.watch((event) => console.log(event));
this.tour_enabled = false;
if(this.tour_enabled) this.tour = new Tour(this.map_manager);
}
async setup() {
await show_changelog(true);
this.reading_types = JSON.parse(
await GetFromUrl(`${this.config.api_root}?action=list-reading-types`)
);
this.ui_panel.loadConfig([
{
type: "select",
name: "Reading Type",
items: this.reading_types.map((type) => type.friendly_text),
callback: (async (event) => {
let new_type = this.reading_types.find((type) => type.friendly_text == event.target.value).short_descr;
document.querySelector("main").classList.add("working-visual");
await this.map_manager.device_markers.update_markers(new_type);
this.gauge.set_reading_type(new_type);
document.querySelector("main").classList.remove("working-visual");
}).bind(this)
},
{
type: "button",
name: "View disclaimer",
callback: ((_event) => {
window.open("https://github.com/ConnectedHumber/Air-Quality-Web/tree/dev#disclaimer", "_blank")
})
},
{
type: "button",
name: "Report bug",
callback: ((_event) => {
window.open("https://github.com/ConnectedHumber/Air-Quality-Web/issues/new", "_blank");
})
},
{
type: "button",
name: `${Config.version}, built ${Config.build_date.toDateString()}`,
callback: (async (_event) => {
show_changelog(false);
})
}
]);
this.ui_panel.setIndex("Reading Type", this.reading_types.findIndex((type) => type.short_descr == Config.default_reading_type));
if(this.tour_enabled) await this.tour.run_once();
}
}
export default UI;