cory/tildefriends
5
6
Fork 2
Code Issues 38 Pull Requests Actions Releases 33 Wiki Activity

Move apps/cory/ => apps/. Going to change import and export to support this.

Browse Source 
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4163 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams
2023-02-02 00:18:22 +00:00
parent 6104af0d70
commit ec52e62908
53 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
apps/ssb/tf-profile.js Normal file
View File

@ -0,0 +1,180 @@
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>
<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);