tildefriends/apps/ssb/tf-profile.js

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

class TfProfileElement extends LitElement {
	static get properties() {
		return {
			editing: {type: Object},
			whoami: {type: String},
			id: {type: String},
			users: {type: Object},
			size: {type: Number},
		};
	}

	static styles = styles;

	constructor() {
		super();
		let self = this;
		this.editing = null;
		this.whoami = null;
		this.id = null;
		this.users = {};
		this.size = 0;
	}

	modify(change) {
		tfrpc.rpc.appendMessage(this.whoami,
			Object.assign({
				type: 'contact',
				contact: this.id,
			}, change)).catch(function(error) {
				alert(error?.message);
			});
	}

	follow() {
		this.modify({following: true});
	}

	unfollow() {
		this.modify({following: false});
	}

	block() {
		this.modify({blocking: true});
	}

	unblock() {
		this.modify({blocking: false});
	}

	edit() {
		let original = this.users[this.id];
		this.editing = {
			name: original.name,
			description: original.description,
			image: original.image,
		};
		console.log(this.editing);
	}

	save_edits() {
		let self = this;
		let message = {
			type: 'about',
			about: this.whoami,
		};
		for (let key of Object.keys(this.editing)) {
			if (this.editing[key] !== this.users[this.id][key]) {
				message[key] = this.editing[key];
			}
		}
		tfrpc.rpc.appendMessage(this.whoami, message).then(function() {
			self.editing = null;
		}).catch(function(error) {
			alert(error?.message);
		});
	}

	discard_edits() {
		this.editing = null;
	}

	attach_image() {
		let self = this;
		let input = document.createElement('input');
		input.type = 'file';
		input.onchange = function(event) {
			let file = event.target.files[0];
			file.arrayBuffer().then(function(buffer) {
				let bin = Array.from(new Uint8Array(buffer));
				return tfrpc.rpc.store_blob(bin);
			}).then(function(id) {
				self.editing = Object.assign({}, self.editing, {image: id});
				console.log(self.editing);
			}).catch(function(e) {
				alert(e.message);
			});
		};
		input.click();
	}

	render() {
		let self = this;
		let profile = this.users[this.id] || {};
		tfrpc.rpc.query(
			`SELECT SUM(LENGTH(content)) AS size FROM messages WHERE author = ?`,
			[this.id]).then(function(result) {
				self.size = result[0].size;
			});
		let edit;
		let follow;
		let block;
		if (this.id === this.whoami) {
			if (this.editing) {
				edit = html`
					<input type="button" value="Save Profile" @click=${this.save_edits}></input>
					<input type="button" value="Discard" @click=${this.discard_edits}></input>
				`;
			} else {
				edit = html`<input type="button" value="Edit Profile" @click=${this.edit}></input>`;
			}
		}
		if (this.id !== this.whoami &&
			this.users[this.whoami]?.following) {
			follow =
				this.users[this.whoami].following[this.id] ?
				html`<input type="button" value="Unfollow" @click=${this.unfollow}></input>` :
				html`<input type="button" value="Follow" @click=${this.follow}></input>`;
		}
		if (this.id !== this.whoami &&
			this.users[this.whoami]?.blocking) {
			block =
				this.users[this.whoami].blocking[this.id] ?
				html`<input type="button" value="Unblock" @click=${this.unblock}></input>` :
				html`<input type="button" value="Block" @click=${this.block}></input>`;
		}
		let edit_profile = this.editing ? html`
			<div style="flex: 1 0 50%">
				<div>
					<label for="name">Name:</label>
					<input type="text" id="name" value=${this.editing.name} @input=${event => this.editing = Object.assign({}, this.editing, {name: event.srcElement.value})}></input>
				</div>
				<div>
					<div><label for="description">Description:</label></div>
					<textarea id="description" @input=${event => this.editing = Object.assign({}, this.editing, {description: event.srcElement.value})}>${this.editing.description}</textarea>
				</div>
				<div>
					<label for="public_web_hosting">Public Web Hosting:</label>
					<input type="checkbox" id="public_web_hosting" value=${this.editing.public_web_hosting} @input=${event => this.editing = Object.assign({}, this.editing, {publicWebHosting: event.srcElement.checked})}></input>
				</div>
				<input type="button" value="Attach Image" @click=${this.attach_image}></input>
			</div>` : null;
		let image = typeof(profile.image) == 'string' ? profile.image : profile.image?.link;
		image = this.editing?.image ?? image;
		let description = this.editing?.description ?? profile.description;
		return html`<div style="border: 2px solid black; background-color: rgba(255, 255, 255, 0.2); padding: 16px">
			<tf-user id=${this.id} .users=${this.users}></tf-user> (${tfutils.human_readable_size(this.size)})
			<div style="display: flex; flex-direction: row">
				${edit_profile}
				<div style="flex: 1 0 50%">
					<div><img src=${'/' + image + '/view'} style="width: 256px; height: auto"></img></div>
					<div>${unsafeHTML(tfutils.markdown(description))}</div>
				</div>
			</div>
			<div>
				Following ${Object.keys(profile.following || {}).length} identities.
				Followed by ${Object.values(self.users).filter(x => (x.following || {})[self.id]).length} identities.
				Blocking ${Object.keys(profile.blocking || {}).length} identities.
				Blocked by ${Object.values(self.users).filter(x => (x.blocking || {})[self.id]).length} identities.
			</div>
			<div>
				${edit}
				${follow}
				${block}
			</div>
		</div>`;
	}
}

customElements.define('tf-profile', TfProfileElement);