tildefriends/apps/collections/tf-collections-app.js

import {LitElement, html} from './lit-all.min.js';
import * as tfrpc from '/static/tfrpc.js';

class TfCollectionsAppElement extends LitElement {
	static get properties() {
		return {
			ids: {type: Array},
			whoami: {type: String},
			wiki: {type: Object},
			wiki_doc: {type: Object},
			hash: {type: String},
		};
	}

	constructor() {
		super();
		this.ids = [];
		this.load();
		let self = this;
		tfrpc.register(function notify_new_message(message) {
			self.notify_new_message(message);
		});
		tfrpc.register(function hash_changed(hash) {
			self.hash = hash;
		});
		tfrpc.rpc.get_hash().then(hash => self.hash = hash);
	}

	async load() {
		this.ids = await tfrpc.rpc.getIdentities();
		this.whoami = await tfrpc.rpc.localStorageGet('collections_whoami');
	}

	notify_new_message(message) {
		console.log('notify_new_message', message);
		console.log('this', this);
		console.log('qs', this.shadowRoot.querySelectorAll('tf-collection'));
		for (let element of this.shadowRoot.querySelectorAll('tf-collection')) {
			element.notify_new_message(message);
		}
	}

	async notify_hash_changed(hash) {
		this.hash = hash;
		console.log('notify_hash_changed', hash);
		let parts = (hash.startsWith('#') ? hash.substring(1) : hash).split('/');
		console.log('parts', parts);
		let wiki = this.shadowRoot.querySelector('tf-collection[type="wiki"]');
		console.log('selecting', wiki, parts[0]);
		wiki.set_selected_by_name(parts[0]);
		/*console.log('SET wiki', this.wiki);
		if (parts.length > 1) {
			let wiki_doc = this.shadowRoot.querySelector('tf-collection[type="wiki-doc"]');
			if (wiki_doc) {
				this.wiki_doc = wiki_doc.get_by_name(parts[1]);
			}
		} else {
			this.wiki_doc = undefined;
		}*/
	}

	async on_whoami_changed(event) {
		let new_id = event.srcElement.selected;
		await tfrpc.rpc.localStorageSet('collections_whoami', new_id);
		this.whoami = new_id;
	}

	update_hash() {
		tfrpc.rpc.set_hash(this.wiki_doc ? `${this.wiki.name}/${this.wiki_doc.name}` : `${this.wiki.name}`);
	}

	async on_wiki_changed(event) {
		console.log('wiki changed', event.detail.value);
		this.wiki = event.detail.value;
		console.log(this.wiki);
		if (event.detail.by_user) {
			this.update_hash();
		}
	}

	async on_wiki_doc_changed(event) {
		console.log(event);
		this.wiki_doc = event.detail.value;
		if (event.detail.by_user) {
			this.update_hash();
		}
	}

	async on_wiki_publish(event) {
		let blob_id = event.detail.id;
		let message = {
			type: 'wiki-doc',
			key: this.wiki_doc.id,
			parent: this.wiki_doc.parent,
			blob: blob_id,
		};
		print(message);
		await tfrpc.rpc.appendMessage(this.whoami, message);
		return this.shadowRoot.getElementById('docs').load();
	}

	render() {
		let self = this;
		console.log('render', this.wiki?.name, this.wiki_doc?.name, this.hash);
		return html`
			<h1 style="color: #fff">Hello! ${this.hash}</h1>
			<tf-id-picker .ids=${this.ids} selected=${this.whoami} @change=${this.on_whoami_changed}></tf-id-picker>
			<tf-collection whoami=${this.whoami} type="wiki" selectname=${this.hash?.substring(1)?.split('/')?.[0]} @selected=${this.on_wiki_changed}></tf-collection>
			${this.wiki?.id ? html`<tf-collection id="docs" whoami=${this.whoami} type="wiki-doc" parent=${this.wiki.id} selectname=${this.hash?.split('/')?.[1]} @selected=${this.on_wiki_doc_changed}></tf-collection>` : undefined}
			${this.wiki_doc && this.wiki_doc.parent === this.wiki?.id ? html`<tf-wiki-doc whoami=${this.whoami} .value=${this.wiki_doc} @publish=${this.on_wiki_publish}></tf-wiki-doc>` : undefined}
		`;
	}
}

customElements.define('tf-collections-app', TfCollectionsAppElement);