comparison web/src/main.ts @ 14:b9c2b7fedbcd

fix up deployment and connect ui to server again
author drewp@bigasterisk.com
date Thu, 11 Jul 2024 22:11:41 -0700
parents f23b21bd0fce
children
comparison
equal deleted inserted replaced
13:403eff4a16c8 14:b9c2b7fedbcd
2 import "@shoelace-style/shoelace/dist/themes/light.css"; 2 import "@shoelace-style/shoelace/dist/themes/light.css";
3 import { LitElement, PropertyValueMap, css, html } from "lit"; 3 import { LitElement, PropertyValueMap, css, html } from "lit";
4 import { customElement, queryAsync, state } from "lit/decorators.js"; 4 import { customElement, queryAsync, state } from "lit/decorators.js";
5 import { unsafeHTML } from "lit/directives/unsafe-html.js"; 5 import { unsafeHTML } from "lit/directives/unsafe-html.js";
6 setBasePath("@fs/opt/node_modules/@shoelace-style/shoelace/dist"); 6 setBasePath("@fs/opt/node_modules/@shoelace-style/shoelace/dist");
7
8 interface Doc {
9 sourceTitle: string
10 phrase: string
11 snippetHtml: string
12 }
7 13
8 @customElement("sco-search-page") 14 @customElement("sco-search-page")
9 export class ScoSearchPage extends LitElement { 15 export class ScoSearchPage extends LitElement {
10 static styles = [ 16 static styles = [
11 css` 17 css`
50 margin-bottom: 25px; 56 margin-bottom: 25px;
51 } 57 }
52 `, 58 `,
53 ]; 59 ];
54 @state() query: string = "climate"; 60 @state() query: string = "climate";
55 @state() results: Object[] = []; 61 @state() results: Doc[] = [];
56 @state() queryError: string = ""; 62 @state() queryError: string = "";
57 @queryAsync("sl-textarea") queryEl?: Promise<SlTextarea>; 63 @queryAsync("sl-textarea") queryEl?: Promise<SlTextarea>;
58 protected async firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>) { 64 protected async firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>) {
59 super.firstUpdated(_changedProperties); 65 super.firstUpdated(_changedProperties);
60 66
112 </form> 118 </form>
113 </section> 119 </section>
114 <section id="results"> 120 <section id="results">
115 <dl> 121 <dl>
116 ${this.results.map( 122 ${this.results.map(
117 (r) => 123 (r: Doc) =>
118 html`<dt>${r.title}</dt> 124 html`<dt>${r.sourceTitle}</dt>
119 <dd>${unsafeHTML(r.snippetHtml)}</dd>` 125 <dd>${unsafeHTML(r.snippetHtml)}</dd>`
120 )} 126 )}
121 </dl> 127 </dl>
122 <div>Matching results: ${this.results.length}</div> 128 <div>Matching results: ${this.results.length}</div>
123 </section> 129 </section>
124 `; 130 `;
125 } 131 }