forked from cory/tildefriends
Cory McWilliams
ab03692a4c
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4566 ed5197a5-7fde-0310-b194-c3ffbd925b24
225 lines
6.8 KiB
JavaScript
225 lines
6.8 KiB
JavaScript
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},
|
|
server_follows_me: {type: Boolean},
|
|
};
|
|
}
|
|
|
|
static styles = styles;
|
|
|
|
constructor() {
|
|
super();
|
|
let self = this;
|
|
this.editing = null;
|
|
this.whoami = null;
|
|
this.id = null;
|
|
this.users = {};
|
|
this.size = 0;
|
|
this.server_follows_me = undefined;
|
|
}
|
|
|
|
async initial_load() {
|
|
this.server_follows_me = undefined;
|
|
let server_id = await tfrpc.rpc.getServerIdentity();
|
|
let followed = await tfrpc.rpc.query(`
|
|
SELECT json_extract(content, '$.following') AS following FROM messages
|
|
WHERE author = ? AND
|
|
json_extract(content, '$.type') = 'contact' AND
|
|
json_extract(content, '$.contact') = ? ORDER BY sequence DESC LIMIT 1
|
|
`, [server_id, this.whoami]);
|
|
let is_followed = false;
|
|
for (let row of followed) {
|
|
is_followed = row.following != 0;
|
|
}
|
|
this.server_follows_me = is_followed;
|
|
}
|
|
|
|
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();
|
|
}
|
|
|
|
async server_follow_me(follow) {
|
|
try {
|
|
await tfrpc.rpc.setServerFollowingMe(this.whoami, follow);
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
try {
|
|
await this.initial_load();
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
if (this.id == this.whoami && this.editing && this.server_follows_me === undefined) {
|
|
this.initial_load();
|
|
}
|
|
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) {
|
|
let server_follow;
|
|
if (this.server_follows_me === true) {
|
|
server_follow = html`<input type="button" value="Server, Stop Following Me" @click=${() => this.server_follow_me(false)}></input>`;
|
|
} else if (this.server_follows_me === false) {
|
|
server_follow = html`<input type="button" value="Server, Follow Me" @click=${() => this.server_follow_me(true)}></input>`;
|
|
}
|
|
edit = html`
|
|
<input type="button" value="Save Profile" @click=${this.save_edits}></input>
|
|
<input type="button" value="Discard" @click=${this.discard_edits}></input>
|
|
${server_follow}
|
|
`;
|
|
} 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%; display: flex; flex-direction: column">
|
|
<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><label for="description">Description:</label></div>
|
|
<textarea style="flex: 1 0" id="description" @input=${event => this.editing = Object.assign({}, this.editing, {description: event.srcElement.value})}>${this.editing.description}</textarea>
|
|
<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>
|
|
<div>
|
|
<input type="button" value="Attach Image" @click=${this.attach_image}></input>
|
|
</div>
|
|
</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; gap: 1em">
|
|
${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); |