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
@@ -1 +1 @@
-c8268978cc1672b8c925fd9aaff81ad7
+a08fc53bd03e73d3ce16aefd412e00b2
@@ -14,7 +14,7 @@ export class PlayerControls extends LitElement {
  <button>
    <img src="/src/assets/images/icons/music/skip-prev-solid.svg"></img>
  </button>
-  <button @click="${this.onPlayPauseButtonClick}">
+  <button @click="${this.onPlayPauseClick}">
    <img src="/src/assets/images/icons/music/play-solid.svg"></img>
  </button>
  <button>
@@ -27,14 +27,13 @@ export class PlayerControls extends LitElement {
 `;
  }

-  onPlayPauseButtonClick(event: { target: HTMLButtonElement; }) {
+  onPlayPauseClick(event: { target: HTMLButtonElement; }) {
    try {
      Play().then((result) => {
        console.log(result)
        event.target.setAttribute("src", "/src/assets/images/icons/music/pause-solid.svg")
      }).catch((err) => {
-        console.log("There is an error with playing")
-        console.error(err);
+        console.error("there is an error with playing " + err);
      });
    }
    catch (err) {
@@ -8,7 +8,7 @@ const seekBar = () => html`
@customElement('seek-bar')
 export class SeekBar extends LitElement {

-  render() {
+  override render() {
    return seekBar();
  }
 }
@@ -0,0 +1,49 @@
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { GetDir, SetDir } from '@go/library/Library.js';
+import { DirectoryPicker } from '@go/frontendbindings/FrontendBindings.js';
+
+@customElement('library-picker')
+export class LibraryPicker extends LitElement {
+
+  @property({ type: String })
+  currentLibraryDirectoryText: string = "No Library Directory selected";
+
+  override render() {
+    return html`
+      <div>
+        <label>${this.currentLibraryDirectoryText}</label>
+        <button @click="${this.onSelectLibraryClick}">Choose Directory...</button>
+      </div>
+    `;
+  }
+
+  constructor() {
+    super();
+    GetDir().
+      then((result) => {
+        if (result.length === 0) { return; }
+        this.currentLibraryDirectoryText = result;
+      }).catch((err) => { console.error(err) })
+  }
+
+  onSelectLibraryClick() {
+    try {
+      DirectoryPicker()
+        .then((result: string) => {
+          SetDir(result).then(() => {
+            this.currentLibraryDirectoryText = result;
+          }).catch((err: string) => {
+            console.error("There is an error with saving selected directory: " + err);
+          });
+        })
+        .catch((err) => {
+          console.error("There is an error with directory picker: " + err);
+        });
+    }
+    catch (err) {
+      console.error(err);
+    }
+  }
+
+}
@@ -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';
@@ -28,10 +28,12 @@
      "@go/*": ["./wailsjs/go/*"],
      "@components/*": ["./src/components/*"],
      "@assets/*": ["./src/assets/*"],
+      "@pages/*": ["./src/pages/*"],
      "@node_modules/*": ["./node_modules/*"]
    },
    // needed for Lit Elements
    "experimentalDecorators": true,
+    "useDefineForClassFields": false, // allows us to define properties as class fields
    // plugins
    "plugins": [
      {"name": "ts-lit-plugin"},
@@ -5,3 +5,5 @@ import {context} from '../models';
 export function GetDir():Promise<string>;

 export function Init(arg1:context.Context):Promise<void>;
+
+export function SetDir(arg1:string):Promise<void>;
@@ -9,3 +9,7 @@ export function GetDir() {
 export function Init(arg1) {
  return window['go']['library']['Library']['Init'](arg1);
 }
+
+export function SetDir(arg1) {
+  return window['go']['library']['Library']['SetDir'](arg1);
+}
				`@@ -0,0 +1 @@`
				`import '@components/config/library-picker/library-picker.ts';`