change file/folder label when choosed

src/event_handler.js

@@ -2,15 +2,14 @@ const { listen } = window.__TAURI__.event
 
 document.getElementById("fileLocation").innerHTML = "hey";
 
-// listen to the `click` event and get a function to remove the event listener
-// there's also a `once` function that subscribes to an event and automatically unsubscribes the listener on the first event
-const unlisten = await listen('my_event', (event) => {
-  // event.event is the event name (useful if you want to use a single callback fn for multiple event types)
-  // event.payload is the payload object
-  document.getElementById("fileLocation").innerHTML = "hello";
+// listen for file location from rust backend
+const unlistenfile = await listen('file_path_changed', (event) => {
+  document.getElementById("fileLocation").innerHTML = event.payload.message;
+  console.log("changing file label to : ", event.payload.message);
 })
 
-// emits the `click` event with the object payload
-emit('click', {
-  theMessage: 'Tauri is awesome!',
+// listen for folder location from rust backend
+const unlistenfolder = await listen('folder_path_changed', (event) => {
+  document.getElementById("folderLocation").innerHTML = event.payload.message;
+  console.log("changing folder label to : ", event.payload.message);
 })

src/index.html

@@ -16,8 +16,10 @@
     <div class="main-container">
       <h3>Welcome to the Rusty slicer! <img src="assets/cat-vibe-vibe-cat.gif"></h1>
         <div class="select-file">
-          <p><b> Input file </b> <br></p>
-          <p id="fileLocation"> no location choosen </p>
+          <div>
+            <p><b> Input file </b></p>
+            <p id="fileLocation"> no location choosen </p>
+          </div>
           <button id="fileButton">choose file 📂</button>
         </div>
 
@@ -26,7 +28,10 @@
         </div>
 
         <div class="select-file">
-          <p><b> Output folder </b> <br> no location choosen </p>
+          <div>
+            <p><b> Output folder </b> </p>
+            <p id="folderLocation"> no location choosen </p>
+          </div>
           <button id="folderButton">choose folder 📂</button>
         </div>