adding file select

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["tauri-apps.tauri-vscode", "rust-lang.rust-analyzer"]
+}

README.md

@@ -1,5 +1,7 @@
-# Rusty Slicer
-This is really WIP so don't use it.
+# Tauri + Vanilla
 
-## Compiling
-After installing Tauri, run ```cargo tauri dev```
+This template should help get you started developing with Tauri in vanilla HTML, CSS and Javascript.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)

src-tauri/Cargo.toml

@@ -11,9 +11,11 @@ edition = "2021"
 tauri-build = { version = "1.5", features = [] }
 
 [dependencies]
-tauri = { version = "1.5", features = ["shell-open"] }
+tauri = { version = "1.5", features = [ "api-all"] }
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
+native-dialog = "0.7.0"
+lazy_static = "1.4.0"
 
 [features]
 # this feature is used for production builds or when `devPath` points to the filesystem

src-tauri/src/main.rs

@@ -1,22 +1,64 @@
 // Prevents additional console window on Windows in release, DO NOT REMOVE!!
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
-// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
-/*#[tauri::command]
-fn greet(name: &str) -> String {
-    format!("Hello, {}! You've been greeted from Rust!", name)
+use native_dialog::FileDialog;
+use tauri::{AppHandle, Manager};
+use std::sync::Mutex;
+
+#[macro_use]
+extern crate lazy_static;
+
+// define file and folder path variable, don't know if it's the right way of doing it
+lazy_static! {
+    static ref FILE_PATH: Mutex<String> = Mutex::new("".to_string());
+    static ref FOLDER_PATH: Mutex<String> = Mutex::new("".to_string());
+}
+
+#[derive(Clone, serde::Serialize)]
+struct Payload {
+  message: String,
+}
+
+// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
+#[tauri::command]
+async fn select_file_button(app: tauri::AppHandle) {
+    let _ = app.emit_all("my_event", ());
+    FILE_PATH.lock().unwrap().replace_range(.., &choose_file());
+    println!("{}",FILE_PATH.lock().unwrap());
 }
-*/
 
 #[tauri::command]
-fn slice() {
-  println!("I was invoked from JS!");
+async fn select_folder_button() {
+    FOLDER_PATH.lock().unwrap().replace_range(.., &choose_folder());
+    println!("{}",FOLDER_PATH.lock().unwrap());
+}
+
+#[tauri::command]
+fn debug_call(message: &str){
+    println!("[DBG] {}", message);
+}
+
+// prompt user file chooser using native_dialogue crate
+fn choose_file() -> String{
+    println!("Let's choose a file !");
+    let path = FileDialog::new()
+        .show_open_single_file()
+        .unwrap();
+    format!("{:?}", path) // turn the FileDialog into a string
+}
+
+fn choose_folder() -> String{
+    println!("Let's choose a folder !");
+    let path = FileDialog::new()
+        .show_open_single_dir()
+        .unwrap();
+    format!("{:?}", path) // turn the FileDialog into a string
 }
 
 fn main() {
-    println!("launched");
+    // generate the tauri app
     tauri::Builder::default()
-        //.invoke_handler(tauri::generate_handler![greet])
+        .invoke_handler(tauri::generate_handler![select_file_button, select_folder_button, debug_call])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }

src-tauri/tauri.conf.json

@@ -10,9 +10,9 @@
   },
   "tauri": {
     "allowlist": {
-      "all": false,
+      "all": true,
       "shell": {
-        "all": false,
+        "all": true,
         "open": true
       }
     },

src/event_handler.js

@@ -0,0 +1,16 @@
+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";
+})
+
+// emits the `click` event with the object payload
+emit('click', {
+  theMessage: 'Tauri is awesome!',
+})

src/index.html

@@ -5,17 +5,20 @@
     <link rel="stylesheet" href="styles.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Rusty slicer</title>
-    <script src="main.js"></script>
+    <script type="module" src="/main.js" defer></script>
+    <script type="module" src="/event_handler.js" defer></script>
   </head>
 
-<!-- Made by ayabusa (www.ayabusa.dev) with pain, because making html and css is awfully painfull :) -->
+<!-- UI made by ayabusa (www.ayabusa.dev) with pain,
+     because making html and css is awfully painfull :) -->
 
   <body>
     <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> no location choosen </p>
-          <button type="file-button">choose file 📂</button>
+          <p><b> Input file </b> <br></p>
+          <p id="fileLocation"> no location choosen </p>
+          <button id="fileButton">choose file 📂</button>
         </div>
 
         <div class="chapter-list">
@@ -24,7 +27,7 @@
 
         <div class="select-file">
           <p><b> Output folder </b> <br> no location choosen </p>
-          <button type="file-button">choose folder 📂</button>
+          <button id="folderButton">choose folder 📂</button>
         </div>
 
         <div class="select-file">
@@ -37,8 +40,7 @@
           </select>
         </div>
 
-        <button onclick="myFunction()" class="slice-button"> Slice 🔪</button>
-        <p id="demo">ddqdz</p>
+        <button class="slice-button" type="button"> Slice 🔪</button>
           
         <footer>
           <br>

src/main.js

@@ -1,6 +1,17 @@
 const { invoke } = window.__TAURI__.tauri;
 
-function myFunction() {
-  document.getElementById("demo").innerHTML = "Hello World";
-  invoke("slice")
+
+invoke("debug_call", { message: 'JS init' });
+
+function select_file_button_pressed(){
+    let t = invoke("select_file_button");
 }
+
+function select_folder_button_pressed(){
+    invoke("select_folder_button")
+}
+
+
+document.getElementById("folderButton").addEventListener("click", select_folder_button_pressed);
+document.getElementById("fileButton").addEventListener("click", select_file_button_pressed);
+