Improve FW update progress reporting (#90)

Made the FW update experience more informative and visually appealing

Author: RocketGod-git

src/components/FirmwareManager/FirmwareManager.tsx

@@ -81,6 +81,18 @@ export const FirmwareManager: React.FC<IFirmwareManager> = ({
     >
       Flash custom firmware
     </button>
-    <p>{updateStatus}</p>
+    <div className="space-y-2">
+      {updateStatus.includes("Progress") && (
+        <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
+          <div 
+            className="bg-blue-400 h-2.5 rounded-full transition-all duration-300" 
+            style={{ 
+              width: `${updateStatus.split('Progress: ')[1]?.split('%')[0] || 0}%` 
+            }}
+          ></div>
+        </div>
+      )}
+      <p className="whitespace-pre-wrap">{updateStatus}</p>
+    </div>
   </div>
 );

src/utils/serialUtils.tsx

@@ -84,56 +84,87 @@ export const useWriteCommand = () => {
     bytes: Uint8Array,
     setUpdateStatus: Dispatch<SetStateAction<string>>
   ) => {
+    const formatTime = (seconds: number): string => {
+      const mins = Math.floor(seconds / 60);
+      const secs = Math.floor(seconds % 60);
+      return `${mins}m ${secs}s`;
+    };
+  
     setFileUploadBlocker(true);
     await write("fclose", false);
     await write(`fopen ${filePath}`, false);
-
+  
     await write(`fseek 0`, false);
-
+  
     let blob = new Blob([bytes]);
     const arrayBuffer = await blob.arrayBuffer();
-
+  
     const chunkSize = 100000;
-
+    let successfulChunks = 0;
+    let failedChunks = 0;
+  
     console.log("Total length: ", arrayBuffer.byteLength);
-
+  
     let startTime = Date.now();
     let totalTime = 0;
-
+    let lastProgressUpdate = Date.now();
+  
     for (let i = 0; i < arrayBuffer.byteLength; i += chunkSize) {
       const chunk = arrayBuffer.slice(i, i + chunkSize);
-
+  
       await write(`fwb ${chunk.byteLength}`, false, true);
       await serial.queueWriteAndResponseBinary(new Uint8Array(chunk));
-
+      successfulChunks++;
+  
       // calculate elapsed time and average time per chunk
       let elapsed = Date.now() - startTime;
       totalTime += elapsed;
       let avgTimePerChunk = totalTime / (i / chunkSize + 1);
-
+  
       // estimate remaining time in seconds
       let remainingChunks = (arrayBuffer.byteLength - i) / chunkSize;
       let estRemainingTime = (remainingChunks * avgTimePerChunk) / 1000;
-
+  
       console.log(
         "Chunk done",
         i,
         arrayBuffer.byteLength,
         ((i / arrayBuffer.byteLength) * 100).toFixed(2) + "%",
         "Estimated time remaining: " + estRemainingTime.toFixed(0) + " seconds"
       );
-      setUpdateStatus(
-        `${((i / arrayBuffer.byteLength) * 100).toFixed(
-          2
-        )}% Estimated time remaining: ${estRemainingTime.toFixed(0)} seconds`
-      );
-
+      
+      if (Date.now() - lastProgressUpdate > 500) {
+        const percentComplete = (i / arrayBuffer.byteLength) * 100;
+        const transferSpeed = (i / totalTime) * 1000 / 1024; // KB/s
+        
+        setUpdateStatus(
+          `📊 Upload Progress\n` +
+          `━━━━━━━━━━━━━━━━━━━━━\n` +
+          `⚡ Progress: ${percentComplete.toFixed(1)}%\n` +
+          `📦 Transferred: ${(i / 1024).toFixed(1)}KB / ${(arrayBuffer.byteLength / 1024).toFixed(1)}KB\n` +
+          `🚀 Speed: ${transferSpeed.toFixed(1)} KB/s\n` +
+          `⏱️ Time Elapsed: ${formatTime(totalTime/1000)}\n` +
+          `⌛ Time Remaining: ${formatTime(estRemainingTime)}\n` +
+          `✅ Chunks: ${successfulChunks}\n` +
+          `❌ Retries: ${failedChunks}`
+        );
+        lastProgressUpdate = Date.now();
+      }
+  
       // reset start time for next iteration
       startTime = Date.now();
     }
     console.log("FILE DONE");
-    setUpdateStatus(`File upload complete!`);
-
+    
+    setUpdateStatus(
+      `✅ Upload Complete!\n` +
+      `━━━━━━━━━━━━━━━━━━━━━\n` +
+      `📦 Total Size: ${(arrayBuffer.byteLength / 1024).toFixed(1)}KB\n` +
+      `⏱️ Total Time: ${formatTime(totalTime/1000)}\n` +
+      `✅ Successful Chunks: ${successfulChunks}\n` +
+      `❌ Failed Attempts: ${failedChunks}`
+    );
+  
     await write("fclose", false);
     setFileUploadBlocker(false);
   };