library picker lit element w reactive properties

2025-04-08 18:18:00 -05:00
parent bbc33ce3bc
commit c46c631fb0
12 changed files with 109 additions and 49 deletions
@@ -9,10 +9,9 @@

    <meta charset="UTF-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
-    <link rel="stylesheet" type="text/css" href="/node_modules/@picocss/pico/css/pico.css">
    <title>yellowjacket - config</title>
 </head>
-<script src="./config.js" type="module"></script>
+<script src="./config.ts" type="module"></script>

 <body>
    <header class="container">
@@ -47,10 +46,7 @@
    </header>
    <hr />
    <main class="container">
-        <section id="library-selector">
-            <label id="library-directory-label">No Library Directory Selected</label>
-            <button onclick="dirPicker()">Choose Directory...</button>
-        </section>
+        <library-picker></library-picker>
    </main>
 </body>

@@ -1,30 +0,0 @@
-import { DirectoryPicker } from '/wailsjs/go/frontendbindings/FrontendBindings.js';
-import { GetDir as GetLibraryDir } from '/wailsjs/go/library/Library.js';
-
-let libraryDirectoryLabel = document.getElementById("library-directory-label");
-
-window.updateLibraryDirLabel = function(value) {
-  libraryDirectoryLabel.innerText = value;
-}
-
-// on load update the library dir label
-GetLibraryDir().
-  then((result) => {
-    if (result.length === 0) { return; }
-    window.updateLibraryDirLabel(result);
-  }).catch((err) => { console.error(err) })
-
-
-window.dirPicker = function() {
-  try {
-    DirectoryPicker()
-      .then((result) => { 
-        window.updateLibraryDirLabel(result); })
-      .catch((err) => {
-        console.error("There is an error with directory picker: " + err);
-      });
-  }
-  catch (err) {
-    console.error(err);
-  }
-}
@@ -0,0 +1 @@
+import '@components/config/library-picker/library-picker.ts';
				`@@ -0,0 +1 @@`
				`import '@components/config/library-picker/library-picker.ts';`