Show firmware download progress

src/components/Dashboard.tsx

@@ -109,7 +109,7 @@ const DeviceList = ({devices, rootConfig, totalConfigCount}: {devices: Device[],
   const { setConnectDialogOpen, overallFlashingState, setOverallFlashingState, selectedFirmware, firmwareList, setFirmwareList } = useAppStore();
   const [deviceSelectedToFlash, setDeviceSelectedToFlash] = useState(devices.map(d => d.flashState));    
   // const [flashingState, setFlashingState]: any = useState([]);
-  const cancelButtonVisible = overallFlashingState != "idle";
+  const cancelButtonVisible = overallFlashingState.state != "idle";
   const firmware = firmwareList.find(f => f.name == selectedFirmware);
   console.log(`Selected firmware: ${firmware?.name}`);
 
@@ -147,11 +147,11 @@ const DeviceList = ({devices, rootConfig, totalConfigCount}: {devices: Device[],
             <FirmwareSelection/>
             {deviceSelectedToFlash.filter(d => d).length > 0 && <Button
               className="gap-2 w-full"
-              disabled={totalConfigCount == 0 || overallFlashingState == "busy"}
+              disabled={totalConfigCount == 0 || overallFlashingState.state == "busy"}
               onClick={async () => {
                 rootConfig.children[0].getFinalConfig(); // FIXME
-                if(overallFlashingState == "idle")
-                  await setup(rootConfig.getAll(), firmware!, (state: OverallFlashingState) => {
+                if(overallFlashingState.state == "idle")
+                  await setup(rootConfig.getAll(), firmware!, (state: OverallFlashingState, progress?: number) => {
                     if(state == 'busy') {
                       isStoredInDb(firmware!.tag).then(b => {
                         // All FirmwareVersion objects are immutable here so we'll have to re-create each entry
@@ -165,7 +165,7 @@ const DeviceList = ({devices, rootConfig, totalConfigCount}: {devices: Device[],
                       });
                     }
                       
-                    setOverallFlashingState(state);
+                    setOverallFlashingState({state, progress});
                   });
                 nextBatch(devices,
                   deviceSelectedToFlash,    /* EXTREMELY HACKY -- FIX THIS */
@@ -180,7 +180,7 @@ const DeviceList = ({devices, rootConfig, totalConfigCount}: {devices: Device[],
                 );
               }}
             >            
-              {stateToText(overallFlashingState)}
+              {stateToText(overallFlashingState.state, overallFlashingState.progress)}
             </Button>}
             {cancelButtonVisible && <Button
               className="ml-1 p-2"
@@ -547,12 +547,14 @@ function deviceStateToText(state: FlashState) {
   }
 }
 
-function stateToText(state: OverallFlashingState) {
+function stateToText(state: OverallFlashingState, progress?: number) {
   switch(state) {
     case "idle":
       return "Flash";
+    case "downloading":
+      return progress ? `Downloading firmware... (${(progress * 100).toFixed(1)} %)` : "Downloading firmware...";
     case "busy":
-      return "In Progress...";
+      return "In Progress...";    
     case "waiting":
       return "Continue";
     default:

src/core/flashing/Flasher.ts

@@ -11,15 +11,17 @@ import { ConfigPreset } from '../stores/appStore';
 import type { Device } from '../stores/deviceStore';
 
 type DeviceFlashingState = "doNotFlash" | "doFlash" | "idle" | "connecting" | "erasing" | "flashing" | "config" | "done" | "aborted" | "failed";
-export type OverallFlashingState = "idle"  | "busy" | "waiting";
+export type OverallFlashingState = "idle" | "downloading" | "busy" | "waiting";
+
+type OverallFlashingCallback = (flashState: OverallFlashingState, progress?: number) => void;
 
 const sections: {data: Uint8Array, offset: number}[] = [ ];
 let configQueue: Protobuf.LocalConfig[] = [];
 let firmwareToUse: FirmwareVersion;
 let operations: FlashOperation[] = [];
-let callback: (flashState: OverallFlashingState) => void;
+let callback: OverallFlashingCallback;
 
-export async function setup(configs: ConfigPreset[], firmware: FirmwareVersion, overallCallback: (flashState: OverallFlashingState) => void) {        
+export async function setup(configs: ConfigPreset[], firmware: FirmwareVersion, overallCallback: OverallFlashingCallback) {
     callback = overallCallback;
     console.log(`Firmware to use: ${firmware?.name} - ${firmware?.link}`);
     firmwareToUse = firmware;

src/core/stores/appStore.ts

@@ -178,7 +178,10 @@ interface AppState {
   connectDialogOpen: boolean;
   configPresetRoot: ConfigPreset;
   configPresetSelected: ConfigPreset | undefined;
-  overallFlashingState: OverallFlashingState;
+  overallFlashingState: {
+    state: OverallFlashingState,
+    progress?: number
+  },
   firmwareRefreshing: boolean;
   firmwareList: FirmwareVersion[];
   selectedFirmware: string;
@@ -196,7 +199,7 @@ interface AppState {
   setConnectDialogOpen: (open: boolean) => void;
   setConfigPresetRoot: (root: ConfigPreset) => void;
   setConfigPresetSelected: (selection: ConfigPreset) => void;
-  setOverallFlashingState: (state: OverallFlashingState) => void;
+  setOverallFlashingState: (state: { state: OverallFlashingState, progress?: number }) => void;
   setFirmwareRefreshing: (state: boolean) => void;
   setFirmwareList: (state: FirmwareVersion[]) => void;
   setSelectedFirmware: (state: string) => void;
@@ -213,7 +216,8 @@ export const useAppStore = create<AppState>()((set) => ({
   connectDialogOpen: false,
   configPresetRoot: ConfigPreset.loadOrCreate(),
   configPresetSelected: undefined,
-  overallFlashingState: "idle",
+  overallFlashingState: { state: "idle" },
+  firmwareDownloadProgress: undefined,
   firmwareRefreshing: false,
   firmwareList: loadFirmwareListFromStorage(),
   selectedFirmware: "latest",
@@ -294,7 +298,7 @@ export const useAppStore = create<AppState>()((set) => ({
       })
     )
   },
-  setOverallFlashingState: (state: OverallFlashingState) => {    
+  setOverallFlashingState: (state: { state: OverallFlashingState, progress?: number }) => {    
     set(
       produce<AppState>((draft) => {
         draft.overallFlashingState = state;