functional checkboxes

This commit is contained in:
Matt Walsh 2020-09-18 14:59:58 -05:00
parent 4eeae7b9ef
commit e45e3d5a62
4 changed files with 32 additions and 12 deletions

View file

@ -79,10 +79,16 @@ class TravelForecast extends WeatherDisplay {
this.longCanvas.width = 640;
this.longCanvas.height = 1728;
this.longContext = this.longCanvas.getContext('2d');
this.longCanvasGifs = [];
}
// set up variables
const cities = this.data;
// clean up existing gifs
this.gifs.forEach(gif => gif.pause());
// delete the gifs
this.gifs.length = 0;
this.longContext.clearRect(0,0,this.longCanvas.width,this.longCanvas.height);
// draw the "long" canvas with all cities
@ -120,7 +126,7 @@ class TravelForecast extends WeatherDisplay {
const xHigh = (560 - (highString.length * 20));
draw.text(this.longContext, 'Star4000 Large', '24pt', '#FFFF00', xHigh, y, highString, 2);
this.gifs.push(await utils.image.superGifAsync({
this.longCanvasGifs.push(await utils.image.superGifAsync({
src: city.icon,
loop_delay: 100,
auto_play: true,

View file

@ -30,18 +30,20 @@ class WeatherDisplay {
this.navBaseCount = 0;
this.screenIndex = -1; // special starting condition
if (elemId !== 'progress') this.addCheckbox(elemId, defaultEnabled);
// create the canvas, also stores this.elemId
this.createCanvas(elemId);
if (elemId !== 'progress') this.addCheckbox(defaultEnabled);
if (this.enabled) {
this.setStatus(STATUS.loading);
} else {
this.setStatus(STATUS.disabled);
}
this.createCanvas(elemId);
}
addCheckbox(elemId, defaultEnabled = true) {
addCheckbox(defaultEnabled = true) {
// get the saved status of the checkbox
let savedStatus = window.localStorage.getItem(`${elemId}Enabled`);
let savedStatus = window.localStorage.getItem(`${this.elemId}Enabled`);
if (savedStatus === null) savedStatus = defaultEnabled;
if (savedStatus === 'true' || savedStatus === true) {
this.enabled = true;
@ -49,18 +51,26 @@ class WeatherDisplay {
this.enabled = false;
}
// refresh (or initially store the state of the checkbox)
window.localStorage.setItem(`${this.elemId}Enabled`, this.enabled);
// create a checkbox in the selected displays area
const checkbox = `<label for="${elemId}Enabled">
<input type="checkbox" value="true" id="${elemId}Enabled" name="${elemId}Enabled"${this.enabled?' checked':''}/>
const checkbox = document.createElement('template');
checkbox.innerHTML = `<label for="${this.elemId}Enabled">
<input type="checkbox" value="true" id="${this.elemId}Enabled" name="${this.elemId}Enabled"${this.enabled?' checked':''}/>
${this.name}</label>`;
checkbox.content.firstChild.addEventListener('change', (e) => this.checkboxChange(e));
const availableDisplays = document.getElementById('enabledDisplays');
availableDisplays.innerHTML += checkbox;
const checkboxElem = document.getElementById(`${elemId}Enabled`);
checkboxElem.addEventListener('click', this.checkboxChange);
availableDisplays.appendChild(checkbox.content.firstChild);
}
checkboxChange(e) {
console.log(e);
// update the state
this.enabled = e.target.checked;
// store the value for the next load
window.localStorage.setItem(`${this.elemId}Enabled`, this.enabled);
// calling get data will update the status and actually get the data if we're set to enabled
this.getData();
}
// set data status and send update to navigation module
@ -114,6 +124,9 @@ class WeatherDisplay {
// refresh the canvas
this.canvas = document.getElementById(this.elemId+'Canvas');
this.context = this.canvas.getContext('2d');
// clean up the first-run flag in screen index
if (this.screenIndex < 0) this.screenIndex = 0;
}
finishDraw() {

View file

@ -271,4 +271,5 @@ jsgif
}
#enabledDisplays label {
display: block;
max-width: 300px;
}

View file

@ -1 +1 @@
module.exports = '3.0.1';
module.exports = '3.1.0';