From 6eef82bb6494fa69d93a83ed00b38280b8ed4928 Mon Sep 17 00:00:00 2001
From: "eric.minning" <Minning.Eric@gmail.com>
Date: Tue, 9 Dec 2025 17:03:02 +0100
Subject: [PATCH] Implemented the color change of the progressbar

---
 electron/main/preload.js  | 19 +++---------
 electron/main/renderer.js | 62 ++++++++++++++++++++++++++++++++++++++-
 electron/main/script.js   | 51 +++-----------------------------
 3 files changed, 69 insertions(+), 63 deletions(-)

diff --git a/electron/main/preload.js b/electron/main/preload.js
index fc9327c..724aca0 100644
--- a/electron/main/preload.js
+++ b/electron/main/preload.js
@@ -16,23 +16,12 @@ try {
     })
 
 
+   
 
-    ipcRenderer.on("progress", (event, resp) => {
-        try{
-            if(resp.curstep == 1){
-                setCircleOne();
-            }else if(resp.curstep == 2){
-                setCircleZwo();
-            }else if(resp.curstep == 3){
-                setCircleThree();
-            }else if(resp.curstep == 4){
-                setCircleFour();
-            }
-        }catch(error){
-            
-        }
+    contextBridge.exposeInMainWorld('electron', {
+        progress: (callback) => ipcRenderer.on('progress', callback)
     })
-
+    
     ipcRenderer.on("error", (event, err) => {alert(err)})
 } catch (error) {
     console.log("Error in preload.js");
diff --git a/electron/main/renderer.js b/electron/main/renderer.js
index 9cb6378..d75787c 100644
--- a/electron/main/renderer.js
+++ b/electron/main/renderer.js
@@ -112,4 +112,64 @@ cur_speaker.addEventListener("change", (e) =>{
   } catch (error) {
     
   }
-})
\ No newline at end of file
+})
+
+window.electron.progress((event, arg) => {
+    if(arg.curstep == 1){
+      setCircleOne();
+    }else if(arg.curstep == 2){
+      setCircleZwo();
+    } else if(arg.curstep == 3){
+      setCircleThree();
+    }else if(arg.curstep == 4){
+      setCircleFour();
+    }
+});
+
+function setCircleOne(){
+  try {
+    if(document.getElementById("box1").style.backgroundColor == "green"){
+      document.getElementById("box1").style.backgroundColor = "red";
+    }else{
+      document.getElementById("box1").style.backgroundColor = "green";
+    }
+  } catch (error) {
+  }
+
+}
+function setCircleZwo(){
+  try {
+    if(document.getElementById("box2").style.backgroundColor == "green"){
+      document.getElementById("box2").style.backgroundColor = "red";
+    }else{
+      document.getElementById("box2").style.backgroundColor = "green";
+    }
+  } catch (error) {
+    
+  }
+  
+}
+function setCircleThree(){
+  try {
+    if(document.getElementById("box3").style.backgroundColor == "green"){
+      document.getElementById("box3").style.backgroundColor = "red";
+    }else{
+      document.getElementById("box3").style.backgroundColor = "green";
+    }
+  } catch (error) {
+    
+  }
+  
+}
+function setCircleFour(){
+  try {
+    if(document.getElementById("box4").style.backgroundColor == "green"){
+      document.getElementById("box4").style.backgroundColor = "red";
+    }else{
+      document.getElementById("box4").style.backgroundColor = "green";
+    }
+  } catch (error) {
+    
+  } 
+}
+
diff --git a/electron/main/script.js b/electron/main/script.js
index c9f35f5..9367c62 100644
--- a/electron/main/script.js
+++ b/electron/main/script.js
@@ -37,6 +37,10 @@ function checkBoxes() {
           iter++;
           } 
         });
+        document.getElementById("box1").style.backgroundColor = "red";
+        document.getElementById("box2").style.backgroundColor = "red";
+        document.getElementById("box3").style.backgroundColor = "red";
+        document.getElementById("box4").style.backgroundColor = "red";
         console.log(selectedCheckboxes);
         const outputType = document.getElementById("output_type");
         const transcriptionType = document.getElementById("transkript_type");
@@ -289,53 +293,6 @@ function showStep(stepNumber) {
   currentStep = stepNumber;
 }
 
-function setCircleOne(){
-  try {
-    if(document.getElementById("block1").style.backgroundColor == "red"){
-      document.getElementById("block1").style.backgroundColor = "green";
-    }else{
-      document.getElementById("block1").style.backgroundColor = "red";
-    }   
-  } catch (error) {
-    
-  }
-
-}
-function setCircleZwo(){
-  try {
-    if(document.getElementById("block2").style.backgroundColor == "red"){
-      document.getElementById("block2").style.backgroundColor = "green";
-    }else{
-      document.getElementById("block2").style.backgroundColor = "red";
-    }
-  } catch (error) {
-    
-  }
-  
-}
-function setCircleThree(){
-  try {
-    if(document.getElementById("block3").style.backgroundColor == "red"){
-      document.getElementById("block3").style.backgroundColor = "green";
-    }else{
-      document.getElementById("block3").style.backgroundColor = "red";
-    }
-  } catch (error) {
-    
-  }
-  
-}
-function setCircleFour(){
-  try {
-    if(document.getElementById("block4").style.backgroundColor == "red"){
-      document.getElementById("block4").style.backgroundColor = "green";
-    }else{
-      document.getElementById("block4").style.backgroundColor = "red";
-    }
-  } catch (error) {
-    
-  } 
-}
 
 //Audio value setter
 var speakerAudios = {};