Rusty slicer is now dummy proof

src/about.html

@@ -18,7 +18,7 @@
         <a href="https://crates.io/crates/native-dialog" target="_blank">Native Dialog crate</a> <br> to open file select dialog (Really easy to use) <br>
         <a href="https://crates.io/crates/lazy_static" target="_blank">Lazy static crate</a> <br> to create global variables more easly <br>
         <a href="https://codepen.io/algcifaldi" target="_blank">Amanda Cifaldi</a> <br> For the animated background template <br>
-
+        <a href="https://mozilla.github.io/Fira/" target="_blank">Fira Sans</a> <br> By Erik Spiekermann is a clean font <br>
         </b>
     </p>
     <h2 class="credit"> About Me </h2>

src/event_handler.js

@@ -2,12 +2,34 @@ const { listen } = window.__TAURI__.event
 
 // listen for file location from rust backend
 const unlistenfile = await listen('file_path_changed', (event) => {
+  document.getElementById("fileLocation").style.color = "white";
   document.getElementById("fileLocation").innerHTML = event.payload.message;
   console.log("changing file label to : ", event.payload.message);
 })
 
 // listen for folder location from rust backend
 const unlistenfolder = await listen('folder_path_changed', (event) => {
+  document.getElementById("folderLocation").style.color = "white";
   document.getElementById("folderLocation").innerHTML = event.payload.message;
   console.log("changing folder label to : ", event.payload.message);
+})
+
+// listen for error from rust backend
+const unlistenerror = await listen('backend_error', (event) => {
+  switch (event.payload.message) {
+    case "file_empty":
+      document.getElementById("fileLocation").style.color = "red";
+      document.getElementById("fileLocation").innerHTML = "please select an input file"
+      console.log("please select an input file");
+      break;
+    case "folder_empty":
+      document.getElementById("folderLocation").style.color = "red";
+      document.getElementById("folderLocation").innerHTML = "please select an output folder"
+      console.log("please select an output folder");
+      break;
+      case "formating_issue":
+        document.getElementById("errorLabel").innerHTML = "error: wrong chapter format. use 0:13 - my title"
+        console.log("error: wrong chapter format. use \n0:00 - first song title \n2:13 - second song title \n3:45 - third song title \n...");
+        break;
+  }
 })

src/index.html

@@ -29,6 +29,7 @@
 0:00 - my first song
 3:30 - another one
 13:37 - one more time - Daft punk</textarea>
+          <p id="errorLabel" style="color: red;"></p>
         </div>
 
         <div class="select-file">

src/main.js

@@ -11,6 +11,7 @@ function select_folder_button_pressed(){
 }
 
 function slice_button_pressed(){
+    document.getElementById("errorLabel").innerHTML = "";
     invoke("slice_button", {chapter: document.getElementById("chapterList").value, fileformat: document.getElementById("fileFormatSelect").value})
 }
 

src/styles.css

@@ -1,5 +1,10 @@
+@font-face {
+  font-family: FiraSans-extrabold;
+  src: url(fonts/FiraSans-Bold.ttf);
+}
+
 :root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-family: FiraSans-extrabold, Inter, Avenir, Helvetica, Arial, sans-serif;
 
   color: #f6f6f6;
   background-color: #292829;