Show a dialog when no port is selected (#187)

Author: balloob

src/install-choose/install-choose-dialog.ts

@@ -306,16 +306,16 @@ class ESPHomeInstallChooseDialog extends LitElement {
     this._close();
   }
 
-  private async _handleBrowserInstall() {
+  private _handleBrowserInstall() {
     if (!supportsWebSerial || !allowsWebSerial) {
       this._storeDialogWidth();
       this._state = "web_instructions";
       return;
     }
 
-    if (await openInstallWebDialog({ configuration: this.configuration })) {
-      this._close();
-    }
+    openInstallWebDialog({ configuration: this.configuration }, () =>
+      this._close()
+    );
   }
 
   private _close() {

src/install-web/index.ts

@@ -1,11 +1,14 @@
 import { connect, ESPLoader } from "esp-web-flasher";
+import { openNoPortPickedDialog } from "../no-port-picked";
 import type { ESPHomeInstallWebDialog } from "./install-web-dialog";
 
 const preload = () => import("./install-web-dialog");
 
 export const openInstallWebDialog = async (
-  params: ESPHomeInstallWebDialog["params"]
-): Promise<boolean> => {
+  params: ESPHomeInstallWebDialog["params"],
+  // Called if a port has been picked and the dialog will be opened.
+  onDialogOpen?: () => void
+): Promise<void> => {
   preload();
 
   let esploader: ESPLoader;
@@ -16,16 +19,23 @@ export const openInstallWebDialog = async (
     try {
       esploader = await connect(console);
     } catch (err: any) {
-      if ((err as DOMException).name !== "NotFoundError") {
+      if ((err as DOMException).name === "NotFoundError") {
+        openNoPortPickedDialog(() =>
+          openInstallWebDialog(params, onDialogOpen)
+        );
+      } else {
         alert(`Unable to connect: ${err.message}`);
       }
-      return false;
+      return;
     }
   }
 
+  if (onDialogOpen) {
+    onDialogOpen();
+  }
+
   const dialog = document.createElement("esphome-install-web-dialog");
   dialog.params = params;
   dialog.esploader = esploader;
   document.body.append(dialog);
-  return true;
 };

src/install-web/install-web-dialog.ts

@@ -164,10 +164,8 @@ export class ESPHomeInstallWebDialog extends LitElement {
     this._close();
   }
 
-  private async _handleRetry() {
-    if (await openInstallWebDialog(this.params)) {
-      this._close();
-    }
+  private _handleRetry() {
+    openInstallWebDialog(this.params, () => this._close());
   }
 
   private async _handleInstall() {

src/no-port-picked/index.ts

@@ -0,0 +1,12 @@
+const preload = () => import("./no-port-picked-dialog");
+
+export const openNoPortPickedDialog = async (
+  doTryAgain?: () => void
+): Promise<boolean> => {
+  preload();
+
+  const dialog = document.createElement("esphome-no-port-picked-dialog");
+  dialog.doTryAgain = doTryAgain;
+  document.body.append(dialog);
+  return true;
+};

src/no-port-picked/no-port-picked-dialog.ts

@@ -0,0 +1,108 @@
+import { LitElement, html, css } from "lit";
+import { customElement } from "lit/decorators.js";
+import "@material/mwc-dialog";
+import "@material/mwc-list/mwc-list-item.js";
+import "@material/mwc-circular-progress";
+import "@material/mwc-button";
+
+@customElement("esphome-no-port-picked-dialog")
+class ESPHomeNoPortPickedDialog extends LitElement {
+  public doTryAgain?: () => void;
+
+  public render() {
+    return html`
+      <mwc-dialog
+        open
+        heading="No port selected"
+        scrimClickAction
+        @closed=${this._handleClose}
+      >
+        <p>
+          If you didn't select a port because you didn't see your device listed,
+          try the following steps:
+        </p>
+        <ol>
+          <li>
+            Make sure that the device is connected to this computer (the one
+            that runs the browser that shows this website)
+          </li>
+          <li>
+            Most devices have a tiny light when it is powered on. Make sure it
+            is on.
+          </li>
+          <li>
+            Make sure you have the right drivers installed. Below are the
+            drivers for common chips used in ESP devices:
+            <ul>
+              <li>
+                CP2102 (square chip):
+                <a
+                  href="https://www.silabs.com/products/development-tools/software/usb-to-uart-bridge-vcp-drivers"
+                  target="_blank"
+                  rel="noopener"
+                  >driver</a
+                >
+              </li>
+              <li>
+                CH341:
+                <a
+                  href="https://github.com/nodemcu/nodemcu-devkit/tree/master/Drivers"
+                  target="_blank"
+                  rel="noopener"
+                  >driver</a
+                >
+              </li>
+            </ul>
+          </li>
+        </ol>
+        ${this.doTryAgain
+          ? html`
+              <mwc-button
+                slot="primaryAction"
+                dialogAction="close"
+                label="Try Again"
+                @click=${this.doTryAgain}
+              ></mwc-button>
+
+              <mwc-button
+                no-attention
+                slot="secondaryAction"
+                dialogAction="close"
+                label="Cancel"
+              ></mwc-button>
+            `
+          : html`
+              <mwc-button
+                slot="primaryAction"
+                dialogAction="close"
+                label="Close"
+              ></mwc-button>
+            `}
+      </mwc-dialog>
+    `;
+  }
+
+  private async _handleClose() {
+    this.parentNode!.removeChild(this);
+  }
+
+  static styles = css`
+    a {
+      color: var(--mdc-theme-primary);
+    }
+    mwc-button[no-attention] {
+      --mdc-theme-primary: #444;
+      --mdc-theme-on-primary: white;
+    }
+    li + li,
+    li > ul {
+      margin-top: 8px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "esphome-no-port-picked-dialog": ESPHomeNoPortPickedDialog;
+  }
+}

web.esphome.io/src/dashboard/connect-card.ts

@@ -2,6 +2,7 @@ import { LitElement, html, css, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import "../../../src/components/esphome-card";
 import { DOCS_WEBSERIAL } from "../../../src/const";
+import { openNoPortPickedDialog } from "../../../src/no-port-picked";
 import "./device-card";
 
 @customElement("ew-connect-card")
@@ -45,6 +46,7 @@ class EWConnectCard extends LitElement {
       port = await navigator.serial.requestPort();
     } catch (err: any) {
       if ((err as DOMException).name === "NotFoundError") {
+        openNoPortPickedDialog();
         return;
       }
       alert(`Error: ${err.message}`);

web.esphome.io/src/install-adoptable/install-adoptable-dialog.ts

@@ -42,8 +42,8 @@ class ESPHomeInstallAdoptableDialog extends LitElement {
   }
 
   private async _handleInstall() {
-    if (
-      await openInstallWebDialog({
+    openInstallWebDialog(
+      {
         port: this.port,
         async filesCallback(platform: string): Promise<FileToFlash[]> {
           if (platform !== "ESP8266" && platform !== "ESP32") {
@@ -70,10 +70,9 @@ class ESPHomeInstallAdoptableDialog extends LitElement {
           improv.port = this.port;
           document.body.appendChild(improv);
         },
-      })
-    ) {
-      this._close();
-    }
+      },
+      () => this._close()
+    );
   }
 
   private _close() {

web.esphome.io/src/install-upload/install-upload-dialog.ts

@@ -60,15 +60,14 @@ class ESPHomeInstallUploadDialog extends LitElement {
       },
     ];
 
-    if (
-      await openInstallWebDialog({
+    openInstallWebDialog(
+      {
         port: this.port,
         erase: true,
         filesCallback: async () => files,
-      })
-    ) {
-      this._close();
-    }
+      },
+      () => this._close()
+    );
   }
 
   private _close() {