From 3d4745a9494ba15f28bf7d0cc0a0bdaaee9186fa Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Fri, 4 Jun 2021 01:13:20 -0700
Subject: [PATCH] Add log element as sibling next to button

---
 index.html            | 7 +++----
 src/install-button.ts | 6 +-----
 src/start-flash.ts    | 4 ++--
 3 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index 7525fdd..4ac3c92 100644
--- a/index.html
+++ b/index.html
@@ -14,9 +14,8 @@
         margin: 0 auto;
         padding: 12px;
       }
-      esp-web-flash-button {
-        display: inline-block;
-        margin-bottom: 8px;
+      esp-web-flash-log {
+        margin-top: 8px;
       }
       a {
         color: #03a9f4;
@@ -39,7 +38,7 @@
         browser.
       </p>
       <p>
-        To flash the ESPHome firmware, connect an ESP to your computer and hit
+        To install the ESPHome firmware, connect an ESP to your computer and hit
         the button:
       </p>
       <esp-web-install-button
diff --git a/src/install-button.ts b/src/install-button.ts
index 41a1662..ed7219c 100644
--- a/src/install-button.ts
+++ b/src/install-button.ts
@@ -31,14 +31,10 @@ class InstallButton extends HTMLElement {
       }
 
       const mod = await import("./start-flash");
-
-      const progress = document.createElement("div");
-      document.body.append(progress);
-
       await mod.startFlash(
         console,
         manifest,
-        progress,
+        (logEl) => this.parentElement!.insertBefore(logEl, this.nextSibling),
         this.eraseFirst !== undefined
           ? this.eraseFirst
           : this.hasAttribute("erase-first")
diff --git a/src/start-flash.ts b/src/start-flash.ts
index ec91807..09f494d 100644
--- a/src/start-flash.ts
+++ b/src/start-flash.ts
@@ -7,7 +7,7 @@ import { getChipFamilyName, sleep } from "./util";
 export const startFlash = async (
   logger: Logger,
   manifestPath: string,
-  logParent: HTMLElement,
+  addLogElement: (el: HTMLElement) => void,
   eraseFirst: boolean
 ) => {
   const manifestURL = new URL(manifestPath, location.toString()).toString();
@@ -30,7 +30,7 @@ export const startFlash = async (
   const logEl = document.createElement("esp-web-flash-log");
   // logEl.esploader = esploader;
   logEl.addRow({ id: "initializing", content: "Initializing..." });
-  logParent.append(logEl);
+  addLogElement(logEl);
 
   try {
     await esploader.initialize();