--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/web/effects/Light9EffectListing.ts	Sun May 12 19:02:10 2024 -0700
@@ -0,0 +1,113 @@
+import debug from "debug";
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import { NamedNode } from "n3";
+import { sortBy } from "underscore";
+import { getTopGraph } from "../RdfdbSyncedGraph";
+import { SyncedGraph } from "../SyncedGraph";
+export { ResourceDisplay } from "../ResourceDisplay";
+
+debug.enable("*");
+const log = debug("listing");
+
+@customElement("light9-effect-listing")
+export class Light9EffectListing extends LitElement {
+  render() {
+    return html`
+      <h1>Effects</h1>
+      <rdfdb-synced-graph></rdfdb-synced-graph>
+
+      ${this.effects.map((e: NamedNode) => html`<light9-effect-class .uri=${e}></light9-effect-class>`)}
+    `;
+  }
+  graph!: SyncedGraph;
+  effects: NamedNode[] = [];
+
+  constructor() {
+    super();
+    getTopGraph().then((g) => {
+      this.graph = g;
+      this.graph.runHandler(this.getClasses.bind(this), "getClasses");
+    });
+  }
+
+  getClasses() {
+    const U = this.graph.U();
+    this.effects = this.graph.subjects(U("rdf:type"), U(":Effect")) as NamedNode[];
+    this.effects = sortBy(this.effects, (ec: NamedNode) => {
+      try {
+        return this.graph.stringValue(ec, U("rdfs:label"));
+      } catch (e) {
+        return ec.value;
+      }
+    });
+    this.requestUpdate();
+  }
+}
+
+@customElement("light9-effect-class")
+export class Light9EffectClass extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        padding: 5px;
+        border: 1px solid green;
+        background: #1e271e;
+        margin-bottom: 3px;
+      }
+      a {
+        color: #7992d0;
+        background: #00000859;
+        min-width: 4em;
+        min-height: 2em;
+        display: inline-block;
+        text-align: center;
+        vertical-align: middle;
+      }
+      resource-display {
+        min-width: 12em;
+        font-size: 180%;
+      }
+    `,
+  ];
+  render() {
+    if (!this.uri) {
+      return html`loading...`;
+    }
+    return html`
+      Effect
+      <resource-display .uri=${this.uri} rename></resource-display>
+      <a href="../live?effect=${this.uri.value}">Edit</a>
+      <iron-ajax id="songEffects" url="/effectEval/songEffects" method="POST" content-type="application/x-www-form-urlencoded"></iron-ajax>
+      <span style="float:right">
+        <button disabled @click=${this.onAdd}>Add to current song</button>
+        <button disabled @mousedown=${this.onMomentaryPress} @mouseup=${this.onMomentaryRelease}>Add momentary</button>
+      </span>
+    `;
+  }
+  graph!: SyncedGraph;
+  uri?: NamedNode;
+
+  onAdd() {
+    // this.$.songEffects.body = { drop: this.uri.value };
+    // this.$.songEffects.generateRequest();
+  }
+
+  onMomentaryPress() {
+    // this.$.songEffects.body = { drop: this.uri.value, event: "start" };
+    // this.lastPress = this.$.songEffects.generateRequest();
+    // return this.lastPress.completes.then((request: { response: { note: any } }) => {
+    //   return (this.lastMomentaryNote = request.response.note);
+    // });
+  }
+
+  onMomentaryRelease() {
+    // if (!this.lastMomentaryNote) {
+    //   return;
+    // }
+    // this.$.songEffects.body = { drop: this.uri.value, note: this.lastMomentaryNote };
+    // this.lastMomentaryNote = null;
+    // return this.$.songEffects.generateRequest();
+  }
+}