sfasd

kevinleedrum · Jun 2, 2024 · 196c0f8 · 196c0f8
1 parent a14f03e
commit 196c0f8
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 45 deletions.
diff --git a/src-tauri/src/import.rs b/src-tauri/src/import.rs
@@ -39,7 +39,7 @@ pub fn import_files(
         let ext = ext.unwrap().to_str().unwrap();
         let datetime =
             get_exif_datetime(&path).unwrap_or_else(|| get_file_datetime(&path).unwrap());
-        let mut new_filename = datetime.format(filename_template).to_string() + "." + ext;
+        let new_filename = datetime.format(filename_template).to_string() + "." + ext;
         let mut new_path = Path::new(&destination).join(new_filename.clone());
 
         let mut i = 1;
@@ -207,10 +207,13 @@ fn emit(app_handle: tauri::AppHandle, payload: Payload) {
 }
 
 fn is_media_extension(ext: Option<&OsStr>) -> Result<bool, ()> {
+    let valid_extensions = vec![
+        "jpg", "jpeg", "png", "tif", "tiff", "mp4", "mov", "avi", "mpg", "wmv",
+    ];
     match ext {
         Some(ext) => {
             let ext = ext.to_str().unwrap().to_lowercase();
-            Ok(ext == "jpg" || ext == "jpeg" || ext == "png")
+            Ok(valid_extensions.contains(&ext.as_str()))
         }
         None => Ok(false),
     }

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -29,8 +29,8 @@
     "windows": [
       {
         "title": "PAM Import Tool",
-        "width": 700,
-        "height": 500
+        "width": 600,
+        "height": 460
       }
     ],
     "security": {

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -19,6 +19,7 @@
   let progressMax = 0;
   let isStarted = false;
   let osType = "";
+  let formStatus = "";
 
   let unlisten: () => void;
 
@@ -89,17 +90,18 @@
 
   function validateStart() {
     if (!sourceDir || !destinationDir) {
-      status = "Source and destination directories are required.";
+      formStatus = "Source and destination directories are required.";
       return false;
     }
     if (sourceDir === destinationDir) {
-      status = "Source and destination directories cannot be the same.";
+      formStatus = "Source and destination directories cannot be the same.";
       return false;
     }
     if (!template || !example) {
-      status = "A valid filename template is required.";
+      formStatus = "A valid filename template is required.";
       return false;
     }
+    formStatus = "";
     return true;
   }
 </script>
@@ -109,16 +111,16 @@
     <form on:submit|preventDefault={start}>
       <label for="source">Source</label>
       <div class="dir-field">
-        <input id="source" bind:value={sourceDir} disabled />
         <button type="button" on:click={chooseSourceDir}>Select&hellip;</button>
+        <input id="source" bind:value={sourceDir} disabled />
       </div>
 
       <label for="destination">Destination</label>
       <div class="dir-field">
+        <button type="button" on:click={chooseDestinationDir}>
+          Select&hellip;
+        </button>
         <input id="destination" bind:value={destinationDir} disabled />
-        <button type="button" on:click={chooseDestinationDir}
-          >Select&hellip;</button
-        >
       </div>
 
       <label for="template">Filename Template</label>
@@ -132,44 +134,57 @@
       </div>
 
       <button type="submit">Import</button>
+
+      <p class="form-status">{formStatus}</p>
     </form>
   {:else}
     <h1>Importing {sourceDir} to {destinationDir}</h1>
-  {/if}
+    <p class="status">{status}</p>
 
-  <p class="status">{status}</p>
+    {#if progressValue === null}
+      <ProgressBar max={progressMax} />
+      Found {progressMax} files
+    {:else}
+      <ProgressBar max={progressMax} value={progressValue} />
+      <p>Importing {progressValue} of {progressMax} files</p>
+    {/if}
 
-  {#if progressValue === null}
-    <ProgressBar max={progressMax} />
-    Found {progressMax} files
-  {:else if progressValue > 0}
-    <ProgressBar max={progressMax} value={progressValue} />
-    <p>Importing {progressValue} of {progressMax} files</p>
-  {/if}
-
-  {#if isStarted}
     <button
       class="stop-button"
       type="button"
       on:click={stop}
       disabled={!isStarted}>Stop</button
     >
+
+    <section class="log"></section>
   {/if}
 </div>
 
 <style>
+  :global(html, body) {
+    height: 100%;
+  }
+  :global(body) {
+    display: flex;
+    flex-direction: column;
+  }
   :root {
     --bg-color: #f0f0f0;
     --text-color: #0f0f0f;
     --button-color: #fff;
-    --input-color: #f8f8f8;
+    --primary-color: #c53b18;
+    --secondary-color: #fec2b9;
+    --primary-button-color: var(--primary-color);
+    --primary-button-text-color: #fff;
+    --input-color: #f4f4f4;
     --focus-color: #000;
     --progress-bg-color: #fff;
-    --progress-fg-color: #08f;
+    --progress-fg-color: var(--primary-color);
     --border-color: rgba(0, 0, 0, 0.2);
-    --shadow-color: rgba(0, 0, 0, 0.1);
+    --shadow-color: rgba(0, 0, 0, 0.05);
+    --form-status-color: var(--secondary-color);
     font-family: "Roboto", system-ui, sans-serif;
-    font-size: 16px;
+    font-size: 14px;
     line-height: 24px;
     font-weight: 400;
 
@@ -189,12 +204,11 @@
   }
 
   .container {
-    margin: auto;
     padding: 1rem;
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
-    max-width: 600px;
+    height: 100%;
   }
 
   form {
@@ -205,10 +219,8 @@
   h1 {
     margin: 0;
     justify-self: start;
-    font-size: 0.9rem;
-    font-weight: 600;
-    opacity: 0.8;
-    letter-spacing: 0.03rem;
+    font-weight: 700;
+    letter-spacing: 0.02rem;
     user-select: none;
     -webkit-user-select: none;
   }
@@ -217,10 +229,24 @@
     margin-top: 1rem;
   }
 
+  .form-status {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 2rem;
+    font-size: 0.9rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--form-status-color);
+    color: var(--form-status-text-color);
+  }
+
   .dir-field {
     display: flex;
     gap: 0.25rem;
-    align-items: center;
+    align-items: stretch;
   }
 
   .dir-field input {
@@ -248,7 +274,6 @@
   button {
     color: inherit;
     border-radius: 4px;
-    border: 1px solid transparent;
     padding: 0.5rem 0.75rem;
     font-size: 1rem;
     font-family: inherit;
@@ -263,37 +288,39 @@
   input:disabled,
   input:read-only {
     background-color: transparent;
+    border-color: transparent;
   }
 
   button {
     cursor: pointer;
     font-weight: 500;
     background-color: var(--button-color);
-    box-shadow: 0 2px 0 var(--shadow-color);
     user-select: none;
     -webkit-user-select: none;
   }
 
-  button:hover {
+  button:hover:not(:active) {
     transform: translateY(-1px);
-    box-shadow: 0 3px 0 var(--shadow-color);
+    box-shadow: 0 2px 0 var(--shadow-color);
   }
 
   input:focus,
   button:focus {
     border-color: var(--focus-color);
   }
 
-  button:active {
-    transform: translateY(1px);
-    box-shadow: 0 1px 0 var(--shadow-color);
-  }
-
   input,
   button {
     outline: none;
   }
 
+  button[type="submit"] {
+    border-color: transparent;
+    background-color: var(--primary-button-color);
+    color: var(--primary-button-text-color);
+    font-weight: 700;
+  }
+
   button[type="submit"],
   button.stop-button {
     margin-top: 2rem;
@@ -310,16 +337,27 @@
     text-overflow: ellipsis;
   }
 
+  section.log {
+    flex: 1;
+    overflow: auto;
+    margin-top: 2rem;
+    padding: 0.5rem;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+  }
+
   @media (prefers-color-scheme: dark) {
     :root {
+      --secondary-color: #341b14;
       --bg-color: #111;
       --text-color: #f0f0f0;
       --button-color: #222;
-      --input-color: #333;
+      --input-color: #2a2a2a;
       --focus-color: #fff;
       --progress-bg-color: #222;
-      --border-color: #444;
-      --shadow-color: #222;
+      --border-color: rgba(192, 192, 192, 0.2);
+      --shadow-color: rgba(192, 192, 192, 0.05);
+      --form-status-text-color: #fff;
     }
   }
 </style>