Collections progress.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4593 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2023-11-01 22:21:42 +00:00
parent 4414676076
commit 391da742fd
5 changed files with 162 additions and 44 deletions

View File

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

View File

@ -1,5 +1,7 @@
import * as tfrpc from '/tfrpc.js'; import * as tfrpc from '/tfrpc.js';
let g_hash;
tfrpc.register(async function getIdentities() { tfrpc.register(async function getIdentities() {
return ssb.getIdentities(); return ssb.getIdentities();
}); });
@ -39,6 +41,30 @@ tfrpc.register(async function get_blob(id) {
return utf8Decode(await ssb.blobGet(id)); return utf8Decode(await ssb.blobGet(id));
}); });
ssb.addEventListener('message', async function(id) {
let message;
await ssb.sqlAsync('SELECT * FROM messages WHERE id = ?', [id], function(row) { message = row; });
await tfrpc.rpc.notify_new_message(message);
});
core.register('message', async function message_handler(message) {
if (message.event == 'hashChange') {
print('hash change');
g_hash = message.hash;
await tfrpc.rpc.hash_changed(message.hash);
}
});
tfrpc.register(function set_hash(hash) {
if (g_hash != hash) {
return app.setHash(hash);
}
});
tfrpc.register(function get_hash(id, message) {
return g_hash;
});
async function get_collections(kind) { async function get_collections(kind) {
let me = await ssb.getIdentities(); let me = await ssb.getIdentities();
let them = await ssb.following(me, 2); let them = await ssb.following(me, 2);

View File

@ -6,8 +6,9 @@ class TfCollectionsAppElement extends LitElement {
return { return {
ids: {type: Array}, ids: {type: Array},
whoami: {type: String}, whoami: {type: String},
wiki: {type: String}, wiki: {type: Object},
wiki_doc: {type: Object}, wiki_doc: {type: Object},
hash: {type: String},
}; };
} }
@ -15,6 +16,14 @@ class TfCollectionsAppElement extends LitElement {
super(); super();
this.ids = []; this.ids = [];
this.load(); this.load();
let self = this;
tfrpc.register(function notify_new_message(message) {
self.notify_new_message(message);
});
tfrpc.register(function hash_changed(hash) {
self.hash = hash;
});
tfrpc.rpc.get_hash().then(hash => self.hash = hash);
} }
async load() { async load() {
@ -22,12 +31,61 @@ class TfCollectionsAppElement extends LitElement {
this.whoami = await tfrpc.rpc.localStorageGet('collections_whoami'); this.whoami = await tfrpc.rpc.localStorageGet('collections_whoami');
} }
notify_new_message(message) {
console.log('notify_new_message', message);
console.log('this', this);
console.log('qs', this.shadowRoot.querySelectorAll('tf-collection'));
for (let element of this.shadowRoot.querySelectorAll('tf-collection')) {
element.notify_new_message(message);
}
}
async notify_hash_changed(hash) {
this.hash = hash;
console.log('notify_hash_changed', hash);
let parts = (hash.startsWith('#') ? hash.substring(1) : hash).split('/');
console.log('parts', parts);
let wiki = this.shadowRoot.querySelector('tf-collection[type="wiki"]');
console.log('selecting', wiki, parts[0]);
wiki.set_selected_by_name(parts[0]);
/*console.log('SET wiki', this.wiki);
if (parts.length > 1) {
let wiki_doc = this.shadowRoot.querySelector('tf-collection[type="wiki-doc"]');
if (wiki_doc) {
this.wiki_doc = wiki_doc.get_by_name(parts[1]);
}
} else {
this.wiki_doc = undefined;
}*/
}
async on_whoami_changed(event) { async on_whoami_changed(event) {
let new_id = event.srcElement.selected; let new_id = event.srcElement.selected;
await tfrpc.rpc.localStorageSet('collections_whoami', new_id); await tfrpc.rpc.localStorageSet('collections_whoami', new_id);
this.whoami = new_id; this.whoami = new_id;
} }
update_hash() {
tfrpc.rpc.set_hash(this.wiki_doc ? `${this.wiki.name}/${this.wiki_doc.name}` : `${this.wiki.name}`);
}
async on_wiki_changed(event) {
console.log('wiki changed', event.detail.value);
this.wiki = event.detail.value;
console.log(this.wiki);
if (event.detail.by_user) {
this.update_hash();
}
}
async on_wiki_doc_changed(event) {
console.log(event);
this.wiki_doc = event.detail.value;
if (event.detail.by_user) {
this.update_hash();
}
}
async on_wiki_publish(event) { async on_wiki_publish(event) {
let blob_id = event.detail.id; let blob_id = event.detail.id;
let message = { let message = {
@ -38,17 +96,18 @@ class TfCollectionsAppElement extends LitElement {
}; };
print(message); print(message);
await tfrpc.rpc.appendMessage(this.whoami, message); await tfrpc.rpc.appendMessage(this.whoami, message);
return this.load(); return this.shadowRoot.getElementById('docs').load();
} }
render() { render() {
let self = this; let self = this;
console.log('render', this.wiki?.name, this.wiki_doc?.name, this.hash);
return html` return html`
<h1 style="color: #fff">Hello!</h1> <h1 style="color: #fff">Hello! ${this.hash}</h1>
<tf-id-picker .ids=${this.ids} selected=${this.whoami} @change=${this.on_whoami_changed}></tf-id-picker> <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> <tf-collection whoami=${this.whoami} type="wiki" selectname=${this.hash?.substring(1)?.split('/')?.[0]} @selected=${this.on_wiki_changed}></tf-collection>
${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?.id ? html`<tf-collection id="docs" whoami=${this.whoami} type="wiki-doc" parent=${this.wiki.id} selectname=${this.hash?.split('/')?.[1]} @selected=${this.on_wiki_doc_changed}></tf-collection>` : undefined}
${this.wiki_doc ? html`<tf-wiki-doc whoami=${this.whoami} .value=${this.wiki_doc} @publish=${this.on_wiki_publish}></tf-wiki-doc>` : undefined} ${this.wiki_doc && this.wiki_doc.parent === this.wiki?.id ? html`<tf-wiki-doc whoami=${this.whoami} .value=${this.wiki_doc} @publish=${this.on_wiki_publish}></tf-wiki-doc>` : undefined}
`; `;
} }
} }

View File

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

View File

@ -8,7 +8,7 @@ class TfWikiDocElement extends LitElement {
value: {type: Object}, value: {type: Object},
blob: {type: String}, blob: {type: String},
blob_original: {type: String}, blob_original: {type: String},
blob_for_id: {type: String}, blob_for_value: {type: String},
}; };
} }
@ -36,15 +36,18 @@ class TfWikiDocElement extends LitElement {
} }
render() { render() {
if (this.blob_for_id != this.value?.blob) { let value = JSON.stringify(this.value);
this.blob_for_id = this.value?.blob; if (this.blob_for_value != value) {
this.blob_for_value = value;
this.blob = undefined;
this.blob_original = undefined;
this.load_blob(); this.load_blob();
} }
return html` return html`
<div>WIKI DOC ${this.value.name}</div> <div>WIKI DOC ${this.value.name}</div>
<pre>${JSON.stringify(this.value, null, 2)}</pre> <pre>${JSON.stringify(this.value, null, 2)}</pre>
<div> <div>
<textarea @input=${this.on_edit}>${this.blob}</textarea> <textarea @input=${this.on_edit} .value=${this.blob ?? ''}></textarea>
<div>${this.blob}</div> <div>${this.blob}</div>
<button ?disabled=${this.blob == this.blob_original} @click=${this.publish}>Publish</button> <button ?disabled=${this.blob == this.blob_original} @click=${this.publish}>Publish</button>
`; `;