Merge branch 'feature/ui-test' into 'develop'

Implemented a dropdown field for the languages as well as functions and a file...

See merge request proj-wise2526-video2document/video2document!23

electron/main/index.html

@@ -10,9 +10,10 @@
  
 <div class="mitte" id="mitte"> 
   <div class="flagsBtns" id="flagsBtns">
-    <button class="de_Btn" id="de_Btn" onclick="changeLanguage('de')"><img src="flags/germany-flag-png-large.jpg" width="25px" height="20px"/></button>
+    <select name="ai_type" id="ai_type">
-    <button class="eng_Btn" id="eng_Btn" onclick="changeLanguage('en')"><img src="flags/united-kingdom-flag-png-large.jpg" width="25px" height="20px"/></button>
+    </select>
-    <button class="in_Btn" id="in_Btn" onclick="changeLanguage('in')"><img src="flags/india-flag-png-large.png" width="25px" height="20px"/></button>
+    <select name="language_option" id="language_option">
+    </select>
   </div>
 
   <h1 id="h1">Video to document</h1> 
@@ -46,7 +47,8 @@
 </div>
 </div>
   
-  <script src="script.js"></script>
+<script src="languages.js"></script>
-  <script src="./renderer.js"></script>
+<script src="script.js"></script>
+<script src="./renderer.js"></script>
 </body>
 </html>

electron/main/languages.js

@@ -0,0 +1,36 @@
+var languageOptions = {
+    "eng":{
+        "title": "Video to document",
+        "h1": "Video to document",
+        "p1": "Drag and drop video file",
+        "fileName": "No video chosen",
+        "manualUploadBtn": "Search video",
+        "checkbox_group": "Choose prefered document style:",
+        "label_format": "Meeting report",
+        "label_summary": "Summary with timestamps",
+        "submitButton": "Submit"
+    },
+    "de":{
+        "title": "Video zu Dokument",
+        "h1": "Video zu Dokument",
+        "p1": "Video per Drag & Drop ablegen",
+        "fileName": "Kein Video ausgewaehlt",
+        "manualUploadBtn": "Video suchen",
+        "checkbox_group": "Bevorzugte Dokumentvarianten:",
+        "label_format": "Meeting Bericht",
+        "label_summary": "Zusammenfassung mit Zeitstempeln",
+        "submitButton": "Absenden"
+    },
+    "in":{
+        "title": "दस्तावेज़ के लिए वीडियो",
+        "h1": "दस्तावेज़ के लिए वीडियो",
+        "p1": "वीडियो फ़ाइल खींचें और छोड़ें",
+        "fileName": "कोई वीडियो नहीं चुना गया",
+        "manualUploadBtn": "वीडियो खोजें",
+        "checkbox_group": "पसंदीदा दस्तावेज़ शैली चुनें:",
+        "label_format": "बैठक रिपोर्ट",
+        "label_summary": "टाइमस्टैम्प के साथ सारांश",
+        "submitButton": "जमा करना"
+    }
+    
+};

electron/main/preload.js

@@ -1,5 +1,3 @@
-
-
 const { contextBridge, ipcRenderer, webUtils } = require('electron')
 
 try {
@@ -14,5 +12,4 @@ try {
     })
 } catch (error) {
     console.log("Error in preload.js");
-}
+}
-

electron/main/renderer.js

@@ -25,7 +25,17 @@ uploadContainer.addEventListener("drop", (e) => {
         }
     } catch (error) {
         console.log("Error in renderer.js with the listerner for the drop function");
-    }
+    } 
-    
+})
-    
+
-})
+
+ window.addEventListener('load', (e) => { 
+    console.log("test");
+    loadLanguageOptions(); 
+});
+
+language_option.addEventListener('change', (e)=>{
+    const select = document.getElementById('language_option');
+    console.log(select.value);
+    changeLanguage(select.value);
+});

electron/main/script.js

@@ -1,4 +1,3 @@
-
 //listener for the file explorer search
 manualUploadBtn.addEventListener('click', () => {
   try {
@@ -40,40 +39,22 @@ function checkBoxes() {
 
 //language changing feature
 function changeLanguage(language) {
-    if (language === 'en') {
+  try {
-        document.getElementById('title').textContent = 'Video to document';
+    document.getElementById('title').textContent = languageOptions[language].title;
-        document.getElementById('h1').textContent = 'Video to document';
+    document.getElementById('h1').textContent = languageOptions[language].h1;
-        document.getElementById('p1').textContent = 'Drag and drop video file';
+    document.getElementById('p1').textContent = languageOptions[language].p1;
-        document.getElementById('fileName').textContent = 'No video chosen';
+    document.getElementById('fileName').textContent = languageOptions[language].fileName;
-        document.getElementById('manualUploadBtn').textContent = 'Search video';
+    document.getElementById('manualUploadBtn').textContent = languageOptions[language].manualUploadBtn;
-        document.getElementById('checkbox_group').textContent = 'Choose prefered document style:';
+    document.getElementById('checkbox_group').textContent = languageOptions[language].checkbox_group;
-        document.getElementById('label_format').textContent = 'Meeting report';
+    document.getElementById('label_format').textContent = languageOptions[language].label_format;
-        document.getElementById('label_summary').textContent = 'Summary with timestamps';
+    document.getElementById('label_summary').textContent = languageOptions[language].label_summary;
-        document.getElementById('submitButton').textContent = 'Submit';
+    document.getElementById('submitButton').textContent = languageOptions[language].submitButton;
-    } else if (language === 'de') {
+  } catch (error) {
-        document.getElementById('title').textContent = 'Video zu Dokument';
+    console.log(error);
-        document.getElementById('h1').textContent = 'Video zu Dokument';
+  }
-        document.getElementById('p1').textContent = 'Video per Drag & Drop ablegen';
+        
-        document.getElementById('fileName').textContent = 'Kein Video ausgewaehlt';
-        document.getElementById('manualUploadBtn').textContent = 'Video suchen';
-        document.getElementById('checkbox_group').textContent = 'Bevorzugte Dokumentvarianten:';
-        document.getElementById('label_format').textContent = 'Meeting Bericht';
-        document.getElementById('label_summary').textContent = 'Zusammenfassung mit Zeitstempeln';
-        document.getElementById('submitButton').textContent = 'Absenden';
-    } else if(language == "in") {
-        document.getElementById('title').textContent = 'दस्तावेज़ के लिए वीडियो';
-        document.getElementById('h1').textContent = 'दस्तावेज़ के लिए वीडियो';
-        document.getElementById('p1').textContent = 'वीडियो फ़ाइल खींचें और छोड़ें';
-        document.getElementById('fileName').textContent = 'कोई वीडियो नहीं चुना गया';
-        document.getElementById('manualUploadBtn').textContent = 'वीडियो खोजें';
-        document.getElementById('checkbox_group').textContent = 'पसंदीदा दस्तावेज़ शैली चुनें:';
-        document.getElementById('label_format').textContent = 'बैठक रिपोर्ट';
-        document.getElementById('label_summary').textContent = 'टाइमस्टैम्प के साथ सारांश';
-        document.getElementById('submitButton').textContent = 'जमा करना';
-    }
 }
 
-
 //listener for the file explorer search when something got selected
 videoUpload.addEventListener('change', () => {
   try {
@@ -84,8 +65,6 @@ videoUpload.addEventListener('change', () => {
   
 });
 
-
-
 //function to display the file path in the drop down box
 function handleFiles(files) {
   try {
@@ -112,4 +91,42 @@ function updateProgressBar(bar, value){
     console.log("Error in scripts.js updateProgressBar function");
   }
   
+}
+
+//function to load ai options to the drop down list
+function loadAiOptions(options){
+  try {
+    var menu = document.getElementById('ai_type');
+    for(i = 0; i < options.length; i++){
+      var opty = options[i];
+      var namey = "option" + i;
+      var choice = document.createElement(namey);
+      choice.textContent = "t";
+      choice.value = i;
+      menu.appendChild(choice);
+    }
+  } catch (error) {
+    console.log("Error in script.js loadAiOptions function");
+    console.log(error);
+  }
+}
+
+//function to load language options to the drop down list
+function loadLanguageOptions(){
+  try {
+    var menu = document.getElementById('language_option');
+    var object_holdy;
+    var choice ;
+    object_holdy = Object.keys(languageOptions);
+    for(i = 0; i < object_holdy.length; i++){
+      choice = document.createElement('option');
+      choice.textContent = object_holdy[i];
+      choice.value = object_holdy[i];
+      menu.appendChild(choice);
+    }
+    
+  } catch (error) {
+    console.log("Error in script.js loadLanguageOptions function");
+    console.log(error);
+  }
 }