90 lines
2.6 KiB
JavaScript
90 lines
2.6 KiB
JavaScript
import {LitElement, html, unsafeHTML} from './lit-all.min.js';
|
|
import * as tfrpc from '/static/tfrpc.js';
|
|
import {styles} from './tf-styles.js';
|
|
|
|
class TfTabSearchElement extends LitElement {
|
|
static get properties() {
|
|
return {
|
|
whoami: {type: String},
|
|
users: {type: Object},
|
|
following: {type: Array},
|
|
query: {type: String},
|
|
expanded: {type: Object},
|
|
};
|
|
}
|
|
|
|
static styles = styles;
|
|
|
|
constructor() {
|
|
super();
|
|
let self = this;
|
|
this.whoami = null;
|
|
this.users = {};
|
|
this.following = [];
|
|
this.expanded = {};
|
|
}
|
|
|
|
async search(query) {
|
|
console.log('Searching...', this.whoami, query);
|
|
let search = this.renderRoot.getElementById('search');
|
|
if (search) {
|
|
search.value = query;
|
|
search.focus();
|
|
search.select();
|
|
}
|
|
await tfrpc.rpc.setHash('#q=' + encodeURIComponent(query));
|
|
let results = await tfrpc.rpc.query(
|
|
`
|
|
SELECT messages.id, messages.previous, messages.author, messages.sequence, messages.timestamp, messages.hash, json(messages.content) AS content, messages.signature
|
|
FROM messages_fts(?)
|
|
JOIN messages ON messages.rowid = messages_fts.rowid
|
|
JOIN json_each(?) AS following ON messages.author = following.value
|
|
ORDER BY timestamp DESC limit 100
|
|
`,
|
|
['"' + query.replace('"', '""') + '"', JSON.stringify(this.following)]
|
|
);
|
|
console.log('Done.');
|
|
search = this.renderRoot.getElementById('search');
|
|
if (search) {
|
|
search.value = query;
|
|
search.focus();
|
|
search.select();
|
|
}
|
|
this.renderRoot.getElementById('news').messages = results;
|
|
}
|
|
|
|
search_keydown(event) {
|
|
if (event.keyCode == 13) {
|
|
this.query = this.renderRoot.getElementById('search').value;
|
|
}
|
|
}
|
|
|
|
on_expand(event) {
|
|
if (event.detail.expanded) {
|
|
let expand = {};
|
|
expand[event.detail.id] = true;
|
|
this.expanded = Object.assign({}, this.expanded, expand);
|
|
} else {
|
|
delete this.expanded[event.detail.id];
|
|
this.expanded = Object.assign({}, this.expanded);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
if (this.query !== this.last_query) {
|
|
this.last_query = this.query;
|
|
this.search(this.query);
|
|
}
|
|
let self = this;
|
|
return html`
|
|
<div style="display: flex; flex-direction: row; gap: 4px">
|
|
<input type="text" class="w3-input w3-theme-d1" id="search" value=${this.query} style="flex: 1" @keydown=${this.search_keydown}></input>
|
|
<button class="w3-button w3-theme-d1" @click=${(event) => self.search(self.renderRoot.getElementById('search').value)}>Search</button>
|
|
</div>
|
|
<tf-news id="news" whoami=${this.whoami} .messages=${this.messages} .users=${this.users} .expanded=${this.expanded} @tf-expand=${this.on_expand}></tf-news>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define('tf-tab-search', TfTabSearchElement);
|