Added to Step 2 and 3. Added a first new version of the progressbar + functions in Step 4. Implemented the basics and functions for Step 5

electron/main/index.html

@@ -52,7 +52,9 @@
         <select name="transkript_type" id="transkript_type">
         </select>
         <select name="output_type" id="output_type">
-        <option value="mp4">mp4</option>
+          <option value="pdf">.pdf</option>
+          <option value="word">.word</option>
+          <option value="txt">.txt</option>
         </select>
         <select name="language_option" id="language_option">
         </select>
@@ -66,17 +68,74 @@
           <input type="checkbox" name ="docFormat" id="docFormat" value="Meeting report">
           <label id="label_format" for="docFormat">Meeting report</label>
         </div>
-
         <div class="checkbox-container">
           <input type="checkbox" name="docFormat" id="docFormatSummary" value="Summary with timestamps">
           <label id="label_summary" for="docFormatSummary">Summary with timestamps</label>
         </div>
+        <div class="checkbox-container">
+          <input type="checkbox" name="docFormat" id="docFormatSummary" value="Summary with timestamps">
+          <label id="label_summary" for="docFormatSummary">Summary with timestamps</label>
+        </div>
+        <div class="checkbox-container">
+          <input type="checkbox" name="docFormat" id="docFormatSummary" value="Summary with timestamps">
+          <label id="label_summary" for="docFormatSummary">Summary with timestamps</label>
+        </div>
+        <div class="checkbox-container">
+          <input type="checkbox" name="docFormat" id="docFormatCustom" value="Summary with timestamps">
+          <select name="ai_type" id="ai_type">
+            <option>nichts</option>
+          </select>
+        </div>
       </div>
     </div>
 
     <div class="step" id="step4" style="display:none;">
       <button class="submit-btn" id="submitButton" onclick="checkBoxes()" disabled>Submit</button>
 
+      <div class="progressbar" id="progressbar">
+        <div class="progress_fill"></div>
+        <span class="progress_text">0%</span>
+      </div>
+      <div class="testy">
+        <div class="box2" id="box1">
+        </div>
+        <p>---Starting---</p>
+        <div class="box2" id="box2">
+        </div>
+        <p>---Transkribing---</p>
+        <div class="box2" id="box3">
+        </div>
+        <p>---Document creation---</p>
+        <div class="box2" id="box4">
+        </div>
+      </div>
+    </div>
+
+    <div class="step" id="step5" style="display:none;">
+      <div class="speakerView" id="speakerView">
+       <label id="labelSpeaker">Select Speaker:</label>
+       <select name="cur_speaker">
+          <options>Stefan</options>
+       </select>
+      </div>
+      <div class="speakerAudio" id="speakerAutio">
+        <label id="labelSpeakerAudio">Selected Speaker</label>
+        <audio controls id="speakerAudioViewer">
+          <source src="horse.ogg" type="audio/ogg">
+          <source src="horse.mp3" type="audio/mpeg">
+        Currently there is no audio file here.
+        </audio> 
+      </div>
+      <div class="speakerWrite" id="speakerWrite">
+        <label id="labelSpeakerWriter">Write name:</label>
+        <input type="text">
+      </div>
+      <button id="speakerLocker" >Lock Speaker</button>
+    </div>
+
+    <div class="step" id="step6" style="display:none;">
+      <button class="submit-btn" id="submitButton" onclick="checkBoxes()" disabled>Submit</button>
+
       <div class="progressbar" id="progressbar">
         <div class="progress_fill"></div>
         <span class="progress_text">0%</span>

electron/main/renderer.js

@@ -104,3 +104,8 @@ prevBtn.addEventListener("click", () => {
 nextBtn.addEventListener("click", () => {
   if(currentStep < totalSteps) showStep(currentStep + 1);
 });
+
+//Speaker change listener
+cur_speaker.addEventListener("change", (e) =>{
+  document.getElementById("speakerAudioViewer").src = valy[e.target.value].source;
+})

electron/main/script.js

@@ -167,6 +167,25 @@ function loadTranscriptionOptions(options){
   }
 }
 
+//function to load data type options to the drop down list
+function loadDataTypeOptions(options){
+  try {
+    var menu = document.getElementById('output_type');
+    var object_holdy;
+    var choice ;
+    object_holdy = options
+    for(i = 0; i < options.length; i++){
+      choice = document.createElement('option');
+      choice.textContent = object_holdy[i].displayname;
+      choice.value = object_holdy[i].name;
+      menu.appendChild(choice);
+    }
+  } catch (error) {
+    console.log("Error in script.js function loadDataTypeOptions");
+    console.log(error);
+  }
+}
+
 //function to load language options to the drop down list
 function loadLanguageOptions(){
   try {
@@ -180,13 +199,44 @@ function loadLanguageOptions(){
       choice.value = object_holdy[i];
       menu.appendChild(choice);
     }
-    
   } catch (error) {
     console.log("Error in script.js loadLanguageOptions function");
     console.log(error);
   }
 }
 
+//function to load speaker options to the drop down list
+function loadSpeakerOptions(options){
+  try {
+    var menu = document.getElementById('speaker_option');
+    var object_holdy;
+    var choice ;
+    object_holdy = options
+    for(i = 0; i < options.length; i++){
+      choice = document.createElement('option');
+      choice.textContent = object_holdy[i].displayname;
+      choice.value = object_holdy[i].name;
+      menu.appendChild(choice);
+    }
+  } catch (error) {
+    console.log("Error in script.js loadSpeakerOptions function");
+    console.log(error);
+  }
+}
+
+//function to load speaker audio file options to the drop down list
+function loadSpeakerAudio(option){
+  try {
+    var menu = document.getElementById('speakerAudioViewer');
+    var aud = document.createElement("source");
+    aud.src = options;
+    menu.appendChild(aud);
+  } catch (error) {
+    console.log("Error in script.js loadSpeakerAudio function");
+    console.log(error);
+  }
+}
+
 
 function activateSubmitBtn(hasFile){
   try {
@@ -217,7 +267,6 @@ function generateThumbnail(path){
 }
 
 //Step-navigation
-
 const steps = document.querySelectorAll(".step");
 const stepButtons = document.querySelectorAll(".step-item");
 let currentStep = 1;
@@ -237,3 +286,63 @@ function showStep(stepNumber) {
   nextBtn.disabled = stepNumber === totalSteps;
   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 = {};
+function setSpeakerAudiosValue(valy){
+  try {
+    speakerAudios = valy;
+    document.getElementById("speakerAudioViewer").src = valy.speakerA.source;
+  } catch (error) {
+    
+  }
+}
+

electron/main/style.css

@@ -265,3 +265,29 @@ h1 {
   background-color: #ccc;
   cursor: not-allowed;
 }
+
+.testy{
+  background-color: #FFF;
+  display: flex;
+  width: 700px;
+  flex-direction: row;
+  align-items: center;
+  padding: 5% 50px;
+  margin-top: 20px;
+  gap: 10px;
+  border: 0px;
+  border-color: black;
+  border-style: solid;
+  border-radius: 6px;
+  box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
+}
+
+.box2 {
+    background-color: red;
+    width: 40px;
+    height: 40px;
+    padding: 5px;
+    border: 1px solid black;
+    margin: 5px;
+    border-radius: 100px;
+}