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(); } format_message(message) { let out = { previous: message.previous ?? null, }; if (message.sequence_before_author) { out.sequence = message.sequence; out.author = message.author; } else { out.author = message.author; out.sequence = message.sequence; } out.timestamp = message.timestamp; out.hash = message.hash; out.content = JSON.parse(message.content); out.signature = message.signature; return out; } 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> <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);