diff --git a/src/components/svg.ts b/src/components/svg.ts
new file mode 100644
index 00000000..a9cb1451
--- /dev/null
+++ b/src/components/svg.ts
@@ -0,0 +1,27 @@
+import { svg } from "lit";
+
+export const closeIcon = svg`
+
+`;
+
+export const firmwareIcon = svg`
+
+`;
+
+export const chipIcon = svg`
+
+`;
diff --git a/src/install-dialog.ts b/src/install-dialog.ts
index 97ebc583..4f294c88 100644
--- a/src/install-dialog.ts
+++ b/src/install-dialog.ts
@@ -1,12 +1,15 @@
import { LitElement, html, PropertyValues, css, TemplateResult } from "lit";
import { state } from "lit/decorators.js";
-import "./components/ewt-dialog";
-import "./components/ewt-textfield";
import "./components/ewt-button";
-import "./components/ewt-icon-button";
import "./components/ewt-checkbox";
+import "./components/ewt-console";
+import "./components/ewt-dialog";
import "./components/ewt-formfield";
-import "./components/ewt-circular-progress";
+import "./components/ewt-icon-button";
+import "./components/ewt-textfield";
+import "./pages/ewt-page-progress";
+import "./pages/ewt-page-message";
+import { chipIcon, closeIcon, firmwareIcon } from "./components/svg";
import type { EwtTextfield } from "./components/ewt-textfield";
import { Logger, Manifest, FlashStateType, FlashState } from "./const.js";
import { ImprovSerial } from "improv-wifi-serial-sdk/dist/serial";
@@ -15,21 +18,14 @@ import {
ImprovSerialErrorState,
PortNotReady,
} from "improv-wifi-serial-sdk/dist/const";
-import { fireEvent } from "./util/fire-event";
import { flash } from "./flash";
-import "./components/ewt-console";
+import { fireEvent } from "./util/fire-event";
import { sleep } from "./util/sleep";
+import { downloadManifest } from "./util/manifest";
const ERROR_ICON = "⚠️";
const OK_ICON = "🎉";
-const messageTemplate = (icon: string, label: string) => html`
-
-`;
-
class EwtInstallDialog extends LitElement {
public port!: SerialPort;
@@ -79,7 +75,7 @@ class EwtInstallDialog extends LitElement {
this._state !== "LOGS"
) {
if (this._error) {
- content = this._renderMessage(ERROR_ICON, this._error, true);
+ [heading, content, hideActions] = this._renderError(this._error);
} else {
content = this._renderProgress("Connecting");
hideActions = true;
@@ -89,8 +85,7 @@ class EwtInstallDialog extends LitElement {
} else if (this._state === "ASK_ERASE") {
[heading, content] = this._renderAskErase();
} else if (this._state === "ERROR") {
- heading = "Error";
- content = this._renderMessage(ERROR_ICON, this._error!, true);
+ [heading, content, hideActions] = this._renderError(this._error!);
} else if (this._state === "DASHBOARD") {
[heading, content, hideActions, allowClosing] = this._client
? this._renderDashboard()
@@ -112,11 +107,7 @@ class EwtInstallDialog extends LitElement {
${heading && allowClosing
? html`
-
+ ${closeIcon}
`
: ""}
@@ -127,34 +118,25 @@ class EwtInstallDialog extends LitElement {
_renderProgress(label: string | TemplateResult, progress?: number) {
return html`
-
-
-
- ${progress !== undefined
- ? html`
${progress}%
`
- : ""}
-
- ${label}
-
+
`;
}
- _renderMessage(icon: string, label: string, showClose: boolean) {
- return html`
- ${messageTemplate(icon, label)}
- ${showClose &&
- html`
-
- `}
+
+ _renderError(label: string): [string, TemplateResult, boolean] {
+ const heading = "Error";
+ const content = html`
+
+
`;
+ const hideActions = false;
+ return [heading, content, hideActions];
}
_renderDashboard(): [string, TemplateResult, boolean, boolean] {
@@ -166,25 +148,11 @@ class EwtInstallDialog extends LitElement {
content = html`
-
-
- |
+ ${firmwareIcon} |
${this._info!.firmware} ${this._info!.version} |
-
-
- |
+ ${chipIcon} |
${this._info!.chipFamily} |
@@ -340,7 +308,10 @@ class EwtInstallDialog extends LitElement {
"home_assistant_domain" in this._manifest);
hideActions = showSetupLinks;
content = html`
- ${messageTemplate(OK_ICON, "Device connected to the network!")}
+
${showSetupLinks
? html`