jeans/esp-web-tools
jeans/esp-web-tools
1
0
Fork 0
mirror of https://github.com/esphome/esp-web-tools.git synced 2025-07-28 22:26:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Store state on button (#59)

Browse Source
This commit is contained in:
Paulus Schoutsen 2021-08-24 00:07:11 -07:00 committed by GitHub
parent 6a664ef67d
commit 52dc795cde
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 45 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/start-flash.ts
View File

@ -6,13 +6,25 @@ import type { FlashProgress } from "./flash-progress";
import type { InstallButton } from "./install-button"; import type { InstallButton } from "./install-button";
import { State } from "./const"; import { State } from "./const";
let stateListenerAdded = false; interface FlashData {
stateListenerAdded: boolean;
logEl: FlashLog | undefined;
progressEl: FlashProgress | undefined;
improvEl: HTMLElement | undefined;
}
let logEl: FlashLog | undefined; const getData = (button: InstallButton): FlashData => {
if (!("_flashData" in button)) {
(button as any)._flashData = {
stateListenerAdded: false,
logEl: undefined,
progressEl: undefined,
improvEl: undefined,
} as FlashData;
}
let progressEl: FlashProgress | undefined; return (button as any)._flashData as FlashData;
};
let improvEl: HTMLElement | undefined;
const addElement = <T extends HTMLElement>( const addElement = <T extends HTMLElement>(
button: InstallButton, button: InstallButton,
@ -33,10 +45,12 @@ export const startFlash = async (button: InstallButton) => {
return; return;
} }
const data = getData(button);
let hasImprov = false; let hasImprov = false;
if (!stateListenerAdded) { if (!data.stateListenerAdded) {
stateListenerAdded = true; data.stateListenerAdded = true;
button.addEventListener("state-changed", (ev) => { button.addEventListener("state-changed", (ev) => {
const state = (button.state = ev.detail); const state = (button.state = ev.detail);
if (state.state === State.INITIALIZING) { if (state.state === State.INITIALIZING) {
@ -54,8 +68,8 @@ export const startFlash = async (button: InstallButton) => {
} else if (state.state === State.ERROR) { } else if (state.state === State.ERROR) {
button.toggleAttribute("active", false); button.toggleAttribute("active", false);
} }
progressEl?.processState(ev.detail); data.progressEl?.processState(ev.detail);
logEl?.processState(ev.detail); data.logEl?.processState(ev.detail);
}); });
} }
@ -66,29 +80,29 @@ export const startFlash = async (button: InstallButton) => {
button.hideProgress !== true && button.hideProgress !== true &&
!button.hasAttribute("hide-progress"); !button.hasAttribute("hide-progress");
if (showLog && !logEl) { if (showLog && !data.logEl) {
logEl = addElement<FlashLog>( data.logEl = addElement<FlashLog>(
button, button,
document.createElement("esp-web-flash-log") document.createElement("esp-web-flash-log")
); );
} else if (!showLog && logEl) { } else if (!showLog && data.logEl) {
logEl.remove(); data.logEl.remove();
logEl = undefined; data.logEl = undefined;
} }
if (showProgress && !progressEl) { if (showProgress && !data.progressEl) {
progressEl = addElement<FlashProgress>( data.progressEl = addElement<FlashProgress>(
button, button,
document.createElement("esp-web-flash-progress") document.createElement("esp-web-flash-progress")
); );
} else if (!showProgress && progressEl) { } else if (!showProgress && data.progressEl) {
progressEl.remove(); data.progressEl.remove();
progressEl = undefined; data.progressEl = undefined;
} }
logEl?.clear(); data.logEl?.clear();
progressEl?.clear(); data.progressEl?.clear();
improvEl?.classList.toggle("hidden", true); data.improvEl?.classList.toggle("hidden", true);
flash( flash(
button, button,
@ -121,18 +135,20 @@ const startImprov = async (button: InstallButton) => {
return; return;
} }
if (!improvEl) { const data = getData(button);
improvEl = document.createElement("improv-wifi-launch-button");
improvEl.addEventListener("state-changed", (ev: any) => { if (!data.improvEl) {
data.improvEl = document.createElement("improv-wifi-launch-button");
data.improvEl.addEventListener("state-changed", (ev: any) => {
if (ev.detail.state === "PROVISIONED") { if (ev.detail.state === "PROVISIONED") {
improvEl!.classList.toggle("hidden", true); data.improvEl!.classList.toggle("hidden", true);
} }
}); });
const improvButton = document.createElement("button"); const improvButton = document.createElement("button");
improvButton.slot = "activate"; improvButton.slot = "activate";
improvButton.textContent = "CLICK HERE TO FINISH SETTING UP YOUR DEVICE"; improvButton.textContent = "CLICK HERE TO FINISH SETTING UP YOUR DEVICE";
improvEl.appendChild(improvButton); data.improvEl.appendChild(improvButton);
addElement(button, improvEl); addElement(button, data.improvEl);
} }
improvEl.classList.toggle("hidden", false); data.improvEl.classList.toggle("hidden", false);
}; };