tasiaiso/tildefriends
1
0
Fork 0
forked from cory/tildefriends
Code Issues Pull Requests Releases Wiki Activity

Close to the general experience I want for editing wiki pages. Bugs galore.

Browse Source 
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4595 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2023-11-01 23:39:34 +00:00
parent 950273da41
commit 8f3883563f
6 changed files with 77 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/collections.json
View File

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

4
apps/collections/app.js
View File

@ -2,6 +2,10 @@ import * as tfrpc from '/tfrpc.js';
let g_hash; let g_hash;
tfrpc.register(async function getOwnerIdentities() {
return ssb.getOwnerIdentities();
});
tfrpc.register(async function getIdentities() { tfrpc.register(async function getIdentities() {
return ssb.getIdentities(); return ssb.getIdentities();
}); });

2
apps/collections/index.html
View File

@ -6,7 +6,7 @@
<tf-collections-app></tf-collections-app> <tf-collections-app></tf-collections-app>
<script>window.litDisableBundleWarning = true;</script> <script>window.litDisableBundleWarning = true;</script>
<script src="tf-collections-app.js" type="module"></script> <script src="tf-collections-app.js" type="module"></script>
<script src="tf-collections.js" type="module"></script> <script src="tf-collection.js" type="module"></script>
<script src="tf-id-picker.js" type="module"></script> <script src="tf-id-picker.js" type="module"></script>
<script src="tf-wiki-doc.js" type="module"></script> <script src="tf-wiki-doc.js" type="module"></script>
</body> </body>

54
apps/collections/tf-collections.js → apps/collections/tf-collection.js
View File

@ -5,11 +5,14 @@ class TfCollectionElement extends LitElement {
static get properties() { static get properties() {
return { return {
whoami: {type: String}, whoami: {type: String},
collections: {type: Object}, ids: {type: Array},
collections: {type: Array},
collections_loading: {type: Number}, collections_loading: {type: Number},
type: {type: String}, type: {type: String},
parent: {type: String}, parent: {type: String},
selectname: {type: String}, selectname: {type: String},
selectid: {type: String},
is_creating: {type: Boolean},
}; };
} }
@ -19,6 +22,7 @@ class TfCollectionElement extends LitElement {
this.loaded = this.load(); this.loaded = this.load();
this.type = 'collection'; this.type = 'collection';
this.collections_loading = 0; this.collections_loading = 0;
console.log('CONSTRUCTOR');
} }
process_message(message) { process_message(message) {
@ -36,10 +40,11 @@ class TfCollectionElement extends LitElement {
async load() { async load() {
try { try {
console.log('loading...');
this.collections_loading++; this.collections_loading++;
if (this.whoami) { if (this.ids) {
let following = await tfrpc.rpc.following([this.whoami], 2); let visible = this.ids;
this.following = following; this.visible = visible;
if (this.type) { 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
@ -48,7 +53,7 @@ class TfCollectionElement extends LitElement {
json_extract(content, '$.type') = ?2 AND json_extract(content, '$.type') = ?2 AND
(?3 IS NULL OR json_extract(content, '$.parent') = ?3) (?3 IS NULL OR json_extract(content, '$.parent') = ?3)
ORDER BY timestamp ORDER BY timestamp
`, [JSON.stringify(following), this.type, this.parent]); `, [JSON.stringify(visible), this.type, this.parent]);
this.by_id = {}; this.by_id = {};
for (let collection of collections) { for (let collection of collections) {
this.process_message(collection); this.process_message(collection);
@ -56,7 +61,6 @@ class TfCollectionElement extends LitElement {
this.collections = Object.values(this.by_id); this.collections = Object.values(this.by_id);
} }
} }
console.log('loaded', this.collections);
} finally { } finally {
this.collections_loading--; this.collections_loading--;
} }
@ -77,11 +81,9 @@ class TfCollectionElement extends LitElement {
} }
notify_new_message(message) { notify_new_message(message) {
console.log('got notify new message', message); if (this.visible &&
if (this.following && this.visible.indexOf(message.author) != -1 &&
this.following.indexOf(message.author) != -1 &&
JSON.parse(message.content).type == this.type) { JSON.parse(message.content).type == this.type) {
console.log('processing message', message);
this.process_message(message); this.process_message(message);
this.collections = [...Object.values(this.by_id)]; this.collections = [...Object.values(this.by_id)];
} }
@ -110,6 +112,7 @@ class TfCollectionElement extends LitElement {
} }
set_selected(id, value, by_user) { set_selected(id, value, by_user) {
this.selectedid = id;
this.dispatchEvent(new CustomEvent('selected', { this.dispatchEvent(new CustomEvent('selected', {
bubbles: true, bubbles: true,
detail: { detail: {
@ -144,23 +147,36 @@ class TfCollectionElement extends LitElement {
`; `;
} }
on_selected(event) {
if (this.collections) {
for (let collection of this.collections) {
if (collection.id === event.srcElement.value) {
this.set_selected(collection.id, collection, true);
break;
}
}
}
}
render() { render() {
let self = this;
let state = JSON.stringify([this.whoami, this.ids, 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;
console.log('start load', state);
this.loaded = this.load(); this.loaded = this.load();
} }
return html` return html`
<h2 style="color: #fff">${this.type}s</h2> ${this.collections_loading > 0 ? html`<div>Loading...</div>` : html`
<div style="color: #fff">${this.whoami} ${this.selectname}</div> <select @change=${this.on_selected}>
<div>${this.parent}</div> ${this.collections?.map(x => html`<option value=${x.id} ?selected=${this.selectedid === x.id}>${x.name}</option>`)}
<input type="text" id="create_name"></input><button @click=${this.on_create}>Create ${this.type}</button> </select>
${this.collections_loading ? html`<div>Loading...</div>` : html`
<ul>
${this.collections?.map(x => html`<li>${this.render_collection(x)}</li>`)}
</ul>
`} `}
<span ?hidden=${!this.is_creating}>
<input type="text" id="create_name"></input>
<button @click=${this.on_create}>Create ${this.type}</button>
<button @click=${() => self.is_creating = false}>x</button>
</span>
<button @click=${() => self.is_creating = true} ?hidden=${this.is_creating}>+</button>
`; `;
} }
} }

33
apps/collections/tf-collections-app.js
View File

@ -5,6 +5,7 @@ class TfCollectionsAppElement extends LitElement {
static get properties() { static get properties() {
return { return {
ids: {type: Array}, ids: {type: Array},
owner_ids: {type: Array},
whoami: {type: String}, whoami: {type: String},
wiki: {type: Object}, wiki: {type: Object},
wiki_doc: {type: Object}, wiki_doc: {type: Object},
@ -15,6 +16,7 @@ class TfCollectionsAppElement extends LitElement {
constructor() { constructor() {
super(); super();
this.ids = []; this.ids = [];
this.owner_ids = [];
this.load(); this.load();
let self = this; let self = this;
tfrpc.register(function notify_new_message(message) { tfrpc.register(function notify_new_message(message) {
@ -28,6 +30,7 @@ class TfCollectionsAppElement extends LitElement {
async load() { async load() {
this.ids = await tfrpc.rpc.getIdentities(); this.ids = await tfrpc.rpc.getIdentities();
this.owner_ids = await tfrpc.rpc.getOwnerIdentities();
this.whoami = await tfrpc.rpc.localStorageGet('collections_whoami'); this.whoami = await tfrpc.rpc.localStorageGet('collections_whoami');
} }
@ -103,11 +106,33 @@ class TfCollectionsAppElement extends LitElement {
let self = this; let self = this;
console.log('render', this.wiki?.name, this.wiki_doc?.name, this.hash); console.log('render', this.wiki?.name, this.wiki_doc?.name, this.hash);
return html` return html`
<h1 style="color: #fff">Hello! ${this.hash}</h1> <div>
<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-collection whoami=${this.whoami} type="wiki" selectname=${this.hash?.substring(1)?.split('/')?.[0]} @selected=${this.on_wiki_changed}></tf-collection> </div>
${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} <div>
${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} <tf-collection
whoami=${this.whoami}
.ids=${this.owner_ids}
type="wiki"
selectname=${this.hash?.substring(1)?.split('/')?.[0]}
@selected=${this.on_wiki_changed}></tf-collection>
${this.wiki?.id ? html`
<tf-collection
id="docs"
whoami=${this.whoami}
.ids=${this.owner_ids}
type="wiki-doc"
parent=${this.wiki.id}
selectname=${this.hash?.split('/')?.[1]}
@selected=${this.on_wiki_doc_changed}></tf-collection>
` : undefined}
</div>
${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}
`; `;
} }
} }

11
apps/collections/tf-wiki-doc.js
View File

@ -44,11 +44,12 @@ class TfWikiDocElement extends LitElement {
this.load_blob(); this.load_blob();
} }
return html` return html`
<div>WIKI DOC ${this.value.name}</div> <div style="display: flex; flex-direction: row">
<pre>${JSON.stringify(this.value, null, 2)}</pre> <textarea
<div> style="flex: 1 1; min-height: 10em"
<textarea @input=${this.on_edit} .value=${this.blob ?? ''}></textarea> @input=${this.on_edit} .value=${this.blob ?? ''}></textarea>
<div>${this.blob}</div> <div style="flex: 1 1">${this.blob}</div>
</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>
`; `;
} }