Trying to organize ssblit better.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@3980 ed5197a5-7fde-0310-b194-c3ffbd925b24
2022-09-11 17:42:41 +00:00
parent 26691051a5
commit f983c3d987
9 changed files with 435 additions and 286 deletions
--- a/apps/cory/ssblit/tf-tab-news.js
+++ b/apps/cory/ssblit/tf-tab-news.js
@@ -0,0 +1,106 @@
+import {LitElement, html, unsafeHTML, until} from './lit-all.min.js';
+import * as tfrpc from '/static/tfrpc.js';
+import {styles} from './tf-styles.js';
+
+class TfTabNewsElement extends LitElement {
+	static get properties() {
+		return {
+			whoami: {type: String},
+			users: {type: Object},
+			hash: {type: String},
+			unread: {type: Array},
+			following: {type: Array},
+		}
+	}
+
+	static styles = styles;
+
+	constructor() {
+		super();
+		let self = this;
+		this.whoami = null;
+		this.users = {};
+		this.hash = '#';
+		this.unread = [];
+		this.following = [];
+		this.cache = {};
+	}
+
+	async fetch_messages() {
+		if (this.hash.startsWith('#@')) {
+			return await tfrpc.rpc.query(
+				`
+					SELECT messages.*
+					FROM messages
+					WHERE messages.author = ?
+					ORDER BY sequence DESC
+					LIMIT 20
+				`,
+				[
+					this.hash.substring(1),
+				]);
+		} else if (this.hash.startsWith('#%')) {
+			return await tfrpc.rpc.query(
+				`
+					SELECT messages.*
+					FROM messages
+					WHERE id = ?
+				`,
+				[
+					this.hash.substring(1),
+				]);
+		} else {
+			return await tfrpc.rpc.query(
+				`
+					SELECT messages.*
+					FROM messages
+					JOIN json_each(?) AS following ON messages.author = following.value
+					WHERE messages.timestamp > ?
+					ORDER BY messages.timestamp DESC
+				`,
+				[
+					JSON.stringify(this.following),
+					new Date().valueOf() - 24 * 60 * 60 * 1000,
+				]);
+		}
+	}
+
+	async show_more() {
+		let unread = this.unread;
+		this.unread = [];
+		this.process_messages(unread);
+		await this.finalize_messages();
+	}
+
+	async render_news() {
+		if (this.cache.hash !== this.hash ||
+			this.cache.whoami !== this.whoami ||
+			this.cache.users !== this.users ||
+			!this.cache.messages) {
+			this.cache = {
+				hash: this.hash,
+				whoami: this.whoami,
+				users: this.users,
+				messages: this.fetch_messages(),
+			};
+		}
+		let messages = await this.cache.messages;
+		return html`<tf-news whoami=${this.whoami} .users=${this.users} .messages=${messages}></tf-news>`;
+	}
+
+	render() {
+		let profile = this.hash.startsWith('#@') ?
+			html`<tf-profile id=${this.hash.substring(1)} whoami=${this.whoami} .users=${this.users}></tf-profile>` : undefined;
+		return html`
+			<div><input type="button" value=${'Show ' + this.unread.length + ' New Messages'} @click=${this.show_more}></input></div>
+			<button id="load_button" @click=${this.load}>Load</button>
+			<a target="_top" href="#" ?hidden=${this.hash.length <= 1}>🏠Home</a>
+			<div>Welcome, <tf-user id=${this.whoami} .users=${this.users}></tf-user>!</div>
+			<div><tf-compose whoami=${this.whoami} .users=${this.users}></tf-compose></div>
+			${profile}
+			${until(this.render_news(), html`<div>Loading...</div>`)}
+		`;
+	}
+}
+
+customElements.define('tf-tab-news', TfTabNewsElement);