From eda5dd4f0e0f059b9add8efefc0a25cc300eb36b Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 14 Jul 2024 17:06:21 +1200
Subject: [PATCH] improved flashing flow

---
 index.html | 67 ++++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 55 insertions(+), 12 deletions(-)
diff --git a/index.html b/index.html
index ae69755..73a2647 100644
--- a/index.html
+++ b/index.html
@@ -8,35 +8,44 @@
     <script src="./rnode.js"></script>
     <script src="./nrf52_dfu_flasher.js"></script>
     <script src="./zip.min.js"></script>
+
+    <!-- tailwind css -->
+    <script src="https://cdn.tailwindcss.com?plugins=forms"></script>
+
+    <!-- vue js -->
     <script src="https://unpkg.com/vue@3"></script>
 
 </head>
 <body>
 
-<div id="app">
-    <button @click="connect">Connect</button>
-    <input ref="file" @change="onFileChange" type="file"/>
+<div id="app" class="space-y-1">
+
+    <div>
+        <button @click="enterDfuMode" class="border px-2 bg-gray-100 hover:bg-gray-200 rounded">
+            Enter DFU Mode
+        </button>
+    </div>
+
+    <div>
+        <input ref="file" type="file"/>
+        <button @click="flash" class="border px-2 bg-gray-100 hover:bg-gray-200 rounded">
+            Flash
+        </button>
+    </div>
+
 </div>
 
 <script>
     Vue.createApp({
         data() {
             return {
-                flasher: null,
+
             };
         },
         mounted() {
 
         },
         methods: {
-            async onFileChange() {
-
-                const file = this.$refs["file"].files[0];
-                console.log(file);
-
-                await this.flasher.flash(file);
-
-            },
             async connect() {
 
                 if(!navigator.serial){
@@ -50,6 +59,7 @@
                 });
 
                 this.flasher = new Nrf52DfuFlasher(serialPort);
+
                 // await this.flasher.enterDfuMode();
 
                 return;
@@ -152,6 +162,39 @@
                 // https://github.com/markqvist/Reticulum/discussions/471
 
 
+            },
+            async initFlasher() {
+
+                if(!navigator.serial){
+                    alert("Web Serial is not supported in this browser");
+                    return;
+                }
+
+                // ask user to select device
+                const serialPort = await navigator.serial.requestPort({
+                    filters: [],
+                });
+
+                return new Nrf52DfuFlasher(serialPort);
+
+            },
+            async enterDfuMode() {
+                const flasher = await this.initFlasher();
+                await flasher.enterDfuMode();
+            },
+            async flash() {
+
+                // ensure firmware file selected
+                const file = this.$refs["file"].files[0];
+                if(!file){
+                    alert("Select a firmware file first");
+                    return;
+                }
+
+                // flash file
+                const flasher = await this.initFlasher();
+                await flasher.flash(file);
+
             },
         },
     }).mount('#app');
