added pnpm, lit, manually load runtime on frontend

2025-03-27 17:43:51 -05:00
parent 078bd726f0
commit 30683d268d
19 changed files with 219 additions and 2918 deletions
@@ -1,46 +0,0 @@
-import { DirectoryPicker } from '../../../wailsjs/go/frontendbindings/FrontendBindings';
-import { GetDir as GetLibraryDir } from '../../../wailsjs/go/library/Library';
-import { Play } from '../../../wailsjs/go/player/Player';
-
-
-let libraryDirectoryLabel = document.getElementById("library-directory-label");
-let playPauseButtonIcon = document.getElementById("playPauseButtonIcon");
-
-GetLibraryDir().
-  then((result) => {
-    if (result.length === 0) { return; }
-    window.updateLibraryDirLabel(result);
-  }).catch((err) => { console.error(err) })
-
-window.onPlayPauseButtonClick = function() {
-  try {
-    Play().then((result) => {
-      console.log(result)
-      playPauseButtonIcon.setAttribute("src", "/src/assets/images/icons/music/pause-solid.svg")
-    }).catch((err) => {
-      console.log("There is an error with playing")
-      console.error(err);
-    });
-  }
-  catch (err) {
-    console.error(err);
-  }
-}
-
-window.dirPicker = function() {
-  try {
-    DirectoryPicker()
-      .then((result) => { window.updateLibraryDirLabel(result); })
-      .catch((err) => {
-        console.log("There is an error with directory picker")
-        console.error(err);
-      });
-  }
-  catch (err) {
-    console.error(err);
-  }
-}
-
-window.updateLibraryDirLabel = function(value) {
-  libraryDirectoryLabel.innerText = value;
-}
@@ -0,0 +1,5 @@
+<section>
+  <button onclick="onPlayPauseButtonClick()">
+    <img src="/src/assets/images/icons/music/play-solid.svg" id="playPauseButtonIcon" />
+  </button>
+</section>
@@ -0,0 +1,39 @@
+import { LitElement, html } from 'lit';
+import { Play } from '/wailsjs/go/player/Player';
+
+export class Player extends LitElement {
+  static properties = {
+    version: {},
+  };
+
+  constructor() {
+    super();
+    this.version = 'STARTING';
+  }
+
+  render() {
+    return html`
+    <p>Welcome to the Lit tutorial!</p>
+    <p>This is the ${this.version} code.</p>
+    `;
+  }
+
+  onPlayPauseButtonClick = function() {
+    let playPauseButtonIcon = document.getElementById("playPauseButtonIcon");
+    try {
+      Play().then((result) => {
+        console.log(result)
+        playPauseButtonIcon.setAttribute("src", "/src/assets/images/icons/music/pause-solid.svg")
+      }).catch((err) => {
+        console.log("There is an error with playing")
+        console.error(err);
+      });
+    }
+    catch (err) {
+      console.error(err);
+    }
+  }
+}
+customElements.define('player-controls', Player);
+
+
@@ -1,21 +0,0 @@
-import {LitElement, html} from 'lit';
-
-export class Player extends LitElement {
-  static properties = {
-    version: {},
-  };
-
-  constructor() {
-    super();
-    this.version = 'STARTING';
-  }
-
-  render() {
-    return html`
-    <p>Welcome to the Lit tutorial!</p>
-    <p>This is the ${this.version} code.</p>
-    `;
-  }
-}
-customElements.define('player-controls', Player);
-
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <!-- manually including wails runtime -->
+    <meta name="wails-options" content="noautoinject" />
+    <script src="/wails/ipc.js"></script>
+    <script src="/wails/runtime.js"></script>
+
+    <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>
+
+<body>
+    <header class="container">
+        <nav>
+            <ul>
+                <li>
+                    <hgroup>
+                        <a href="/index.html">
+                            <h1>YellowJacket</h1>
+                        </a>
+                        <p>Config</p>
+                    </hgroup>
+                </li>
+            </ul>
+            <ul>
+                <li>
+                    <details class="dropdown">
+                        <summary role="button" class="outline">
+                            YJ
+                        </summary>
+                        <ul>
+                            <li>
+                                <a href="/src/pages/config/config.html">
+                                    <img src="/src/assets/images/icons/ui/settings.svg" />
+                                </a>
+                            </li>
+                        </ul>
+                    </details>
+                </li>
+            </ul>
+        </nav>
+    </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>
+    </main>
+</body>
+
+</html>
@@ -0,0 +1,31 @@
+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) => { 
+        if (result.length === 0 ) { };
+        window.updateLibraryDirLabel(result); })
+      .catch((err) => {
+        console.error("There is an error with directory picker: " + err);
+      });
+  }
+  catch (err) {
+    console.error(err);
+  }
+}