cory/tildefriends
4
5
Fork 1
Code Issues 33 Pull Requests 1 Actions Releases 27 Wiki Activity

Add a work-in-progress collections app.

Browse Source 
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4589 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2023-10-30 00:22:30 +00:00
parent b394140f9e
commit 01ba90fdba
9 changed files with 485 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/collections.json Normal file
View File

@ -0,0 +1,5 @@
{
"type": "tildefriends-app",
"emoji": "📦",
"previous": "&tXxiPMH8FZ9m1Jwq37QZi7QMLdFPWLkg6AVyvsJ4V8s=.sha256"
}

62
apps/collections/app.js Normal file
View File

@ -0,0 +1,62 @@
import * as tfrpc from '/tfrpc.js';
tfrpc.register(async function getIdentities() {
return ssb.getIdentities();
});
tfrpc.register(async function query(sql, args) {
let result = [];
await ssb.sqlAsync(sql, args, function callback(row) {
result.push(row);
});
return result;
});
tfrpc.register(async function localStorageGet(key) {
return app.localStorageGet(key);
});
tfrpc.register(async function localStorageSet(key, value) {
return app.localStorageSet(key, value);
});
tfrpc.register(async function following(ids, depth) {
return ssb.following(ids, depth);
});
tfrpc.register(async function appendMessage(id, message) {
return ssb.appendMessageWithIdentity(id, message);
});
tfrpc.register(async function store_blob(blob) {
if (Array.isArray(blob)) {
blob = Uint8Array.from(blob);
}
return await ssb.blobStore(blob);
});
tfrpc.register(async function get_blob(id) {
return utf8Decode(await ssb.blobGet(id));
});
async function get_collections(kind) {
let me = await ssb.getIdentities();
let them = await ssb.following(me, 2);
let collections = {};
print('querying');
for (let row of await query(`
SELECT author, content, timestamp
FROM messages JOIN json_each(?) AS id ON messages.author = id.value
WHERE json_extract(content, '$.type') = 'collection' AND json_extract(content, '$.kind') = ?
`, [JSON.stringify(them), kind])) {
print(row);
}
print('done');
return collections;
}
async function main() {
await app.setDocument(utf8Decode(await getFile('index.html')));
}
main();

13
apps/collections/index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
</head>
<body style="color: #fff">
<tf-collections-app></tf-collections-app>
<script>window.litDisableBundleWarning = true;</script>
<script src="tf-collections-app.js" type="module"></script>
<script src="tf-collections.js" type="module"></script>
<script src="tf-id-picker.js" type="module"></script>
<script src="tf-wiki-doc.js" type="module"></script>
</body>
</html>

120
apps/collections/lit-all.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
apps/collections/lit-all.min.js.map Normal file
View File

File diff suppressed because one or more lines are too long

56
apps/collections/tf-collections-app.js Normal file
View File

@ -0,0 +1,56 @@
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: String},
wiki_doc: {type: Object},
};
}
constructor() {
super();
this.ids = [];
this.load();
}
async load() {
this.ids = await tfrpc.rpc.getIdentities();
this.whoami = await tfrpc.rpc.localStorageGet('collections_whoami');
}
async on_whoami_changed(event) {
let new_id = event.srcElement.selected;
await tfrpc.rpc.localStorageSet('collections_whoami', new_id);
this.whoami = new_id;
}
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.load();
}
render() {
let self = this;
return html`
<h1 style="color: #fff">Hello!</h1>
<tf-id-picker .ids=${this.ids} selected=${this.whoami} @change=${this.on_whoami_changed}></tf-id-picker>
<tf-collections whoami=${this.whoami} kind="wiki" @selected=${(event) => self.wiki = event.detail.id}></tf-collections>
${this.wiki ? html`<tf-collections whoami=${this.whoami} type="wiki-doc" parent=${this.wiki} @selected=${(event) => self.wiki_doc = event.detail.value}></tf-collections>` : undefined}
${this.wiki_doc ? 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);

138
apps/collections/tf-collections.js Normal file
View File

@ -0,0 +1,138 @@
import {LitElement, html} from './lit-all.min.js';
import * as tfrpc from '/static/tfrpc.js';
class TfCollectionsElement extends LitElement {
static get properties() {
return {
whoami: {type: String},
collections: {type: Object},
collections_loading: {type: Number},
type: {type: String},
kind: {type: String},
parent: {type: String},
};
}
constructor() {
super();
this.ids = [];
this.load();
this.type = 'collection';
this.collections_loading = 0;
}
async load() {
try {
this.collections_loading++;
if (this.whoami) {
let following = await tfrpc.rpc.following([this.whoami], 2);
if (this.type || this.kind) {
let collections = await tfrpc.rpc.query(`
SELECT messages.id, author, content, timestamp
FROM messages JOIN json_each(?1) AS id ON messages.author = id.value
WHERE
json_extract(content, '$.type') = ?2 AND
(?3 IS NULL OR json_extract(content, '$.kind') = ?3) AND
(?4 IS NULL OR json_extract(content, '$.parent') = ?4)
ORDER BY timestamp
`, [JSON.stringify(following), this.type, this.kind, this.parent]);
let by_id = {};
for (let collection of collections) {
let content = JSON.parse(collection.content);
console.log(content);
if (content?.key) {
if (content?.tombstone) {
delete by_id[content.key];
} else if (by_id[content.key]) {
by_id[content.key] = Object.assign(by_id[content.key], content);
}
} else {
by_id[collection.id] = Object.assign(content, {id: collection.id});
}
}
this.collections = Object.values(by_id);
}
}
} finally {
this.collections_loading--;
}
}
async create(name, editors) {
let message = {
type: this.type,
kind: this.kind,
name: name,
parent: this.parent,
editors: editors,
};
print(message);
await tfrpc.rpc.appendMessage(this.whoami, message);
return this.load();
}
async on_create(event) {
let name = this.shadowRoot.getElementById('create_name').value;
if (name) {
await this.create(name, [this.whoami]);
}
}
async on_tombstone(id) {
let message = {
type: this.type,
kind: this.kind,
key: id,
tombstone: {
date: new Date().valueOf(),
reason: 'archived',
},
};
print(message);
await tfrpc.rpc.appendMessage(this.whoami, message);
return this.load();
}
set_selected(id, value) {
this.dispatchEvent(new CustomEvent('selected', {
bubbles: true,
detail: {
id: id,
value: value,
},
}));
}
render_collection(collection) {
return html`
<div>
<button @click=${() => this.set_selected(collection.id, collection)}>${collection.name}</button>
<span>${collection.id}</span>
<button @click=${() => this.on_tombstone(collection.id)}>🪦</button>
</div>
<div>
${collection.editors.map(id => html`<span>${id}</span>`)}
</div>
`;
}
render() {
let state = JSON.stringify([this.whoami, this.ids, this.kind, this.parent]);
if (state !== this.loaded_for) {
this.loaded_for = state;
this.load();
}
return html`
<h2 style="color: #fff">${this.kind ?? this.type}s</h2>
<div style="color: #fff">${this.whoami}</div>
<input type="text" id="create_name"></input><button @click=${this.on_create}>Create ${this.kind}</button>
${this.collections_loading ? html`<div>Loading...</div>` : html`
<ul>
${this.collections?.map(x => html`<li>${this.render_collection(x)}</li>`)}
</ul>
`}
`;
}
}
customElements.define('tf-collections', TfCollectionsElement);

36
apps/collections/tf-id-picker.js Normal file
View File

@ -0,0 +1,36 @@
import {LitElement, html} from './lit-all.min.js';
import * as tfrpc from '/static/tfrpc.js';
/*
** Provide a list of IDs, and this lets the user pick one.
*/
class TfIdentityPickerElement extends LitElement {
static get properties() {
return {
ids: {type: Array},
selected: {type: String},
};
}
constructor() {
super();
this.ids = [];
}
changed(event) {
this.selected = event.srcElement.value;
this.dispatchEvent(new Event('change', {
srcElement: this,
}));
}
render() {
return html`
<select @change=${this.changed} style="max-width: 100%">
${(this.ids ?? []).map(id => html`<option ?selected=${id == this.selected} value=${id}>${id}</option>`)}
</select>
`;
}
}
customElements.define('tf-id-picker', TfIdentityPickerElement);

54
apps/collections/tf-wiki-doc.js Normal file
View File

@ -0,0 +1,54 @@
import {LitElement, html} from './lit-all.min.js';
import * as tfrpc from '/static/tfrpc.js';
class TfWikiDocElement extends LitElement {
static get properties() {
return {
whoami: {type: String},
value: {type: Object},
blob: {type: String},
blob_original: {type: String},
blob_for_id: {type: String},
};
}
constructor() {
super();
}
async load_blob() {
this.blob = await tfrpc.rpc.get_blob(this.value?.blob);
this.blob_original = this.blob;
}
on_edit(event) {
this.blob = event.srcElement.value;
}
async publish() {
let id = await tfrpc.rpc.store_blob(this.blob);
this.dispatchEvent(new CustomEvent('publish', {
bubbles: true,
detail: {
id: id,
},
}));
}
render() {
if (this.blob_for_id != this.value?.blob) {
this.blob_for_id = this.value?.blob;
this.load_blob();
}
return html`
<div>WIKI DOC ${this.value.name}</div>
<pre>${JSON.stringify(this.value, null, 2)}</pre>
<div>
<textarea @input=${this.on_edit}>${this.blob}</textarea>
<div>${this.blob}</div>
<button ?disabled=${this.blob == this.blob_original} @click=${this.publish}>Publish</button>
`;
}
}
customElements.define('tf-wiki-doc', TfWikiDocElement);