Trying to make the SSB client webapp tolerable. Middling success. Let me set some 'about' information. Tweak what information is shown where as I experiment. Mess with the feed logic.
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@3714 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
parent
12ab2f4b85
commit
0f7472fa22
@ -1 +1 @@
|
||||
{"type":"tildefriends-app","files":{"app.js":"&sZTfWDIl4CjCU0ZxbkkwvpR+xlBtrgf6meH5+Vx7AHo=.sha256","index.html":"&V0OKwISmSZZH/9QbJyp9rdCgscD5bO9yw4dpzS5pFCw=.sha256","vue-material.js":"&K5cdLqXYCENPak/TCINHQhyJhpS4G9DlZHGwoh/LF2g=.sha256","tf-user.js":"&V9Ol799hM6i1PZDbAS91CMhgx7aENDTJnT+KrwK4Lh4=.sha256","tf-message.js":"&VNC8ptzGXWAVl9LBBZfrk3YmweA8PQ02d7/wZxWXoAA=.sha256","tf.js":"&kQT5zbrevsHUlxIoHw0gBaIhT4dwuCUSazORCwZOiS4=.sha256","commonmark.min.js":"&5x6ek3tFrKTZX6hXNNyFsjmhvrjmWpUkwuuaiyVV1Us=.sha256","vue.js":"&g1wvA+yHl1sVC+eufTsg9If7ZeVyMTBU+h0tks7ZNzE=.sha256","vue-material-theme-default-dark.css":"&RP2nr+2CR18BpHHw5ST9a5GJUCOG9n0G2kuGkcQioWE=.sha256","vue-material.min.css":"&kGbUM2QgFSyHZRzqQb0b+0S3EVIlZ0AXpdiAVjIhou8=.sha256","roboto.css":"&jJv43Om673mQO5JK0jj7714s5E+5Yrf82H6LcDx7wUs=.sha256","material-icons.css":"&a28PdcVvgq/DxyIvJAx/e+ZOEtOuHnr3kjLWKyzH11M=.sha256"}}
|
||||
{"type":"tildefriends-app","files":{"app.js":"&CuC9hpnUkbbSAgR4E30aVNWMXySrbHDhoIXI/pxU1g8=.sha256","index.html":"&mv6A+VsR0hIDWLtczTB1SlexmT1FTpU/IjfL46Je6Y4=.sha256","vue-material.js":"&K5cdLqXYCENPak/TCINHQhyJhpS4G9DlZHGwoh/LF2g=.sha256","tf-user.js":"&xkxw1x8obGvv2Tly3M8xDGCIiI/EYMgjZWWji2wUUe4=.sha256","tf-message.js":"&VNC8ptzGXWAVl9LBBZfrk3YmweA8PQ02d7/wZxWXoAA=.sha256","tf.js":"&swCMB9K4dkPCPC2tYS5aTUZSGUmaezlW6FNeLM9QNXI=.sha256","commonmark.min.js":"&5x6ek3tFrKTZX6hXNNyFsjmhvrjmWpUkwuuaiyVV1Us=.sha256","vue.js":"&g1wvA+yHl1sVC+eufTsg9If7ZeVyMTBU+h0tks7ZNzE=.sha256","vue-material-theme-default-dark.css":"&RP2nr+2CR18BpHHw5ST9a5GJUCOG9n0G2kuGkcQioWE=.sha256","vue-material.min.css":"&kGbUM2QgFSyHZRzqQb0b+0S3EVIlZ0AXpdiAVjIhou8=.sha256","roboto.css":"&jJv43Om673mQO5JK0jj7714s5E+5Yrf82H6LcDx7wUs=.sha256","material-icons.css":"&a28PdcVvgq/DxyIvJAx/e+ZOEtOuHnr3kjLWKyzH11M=.sha256"}}
|
||||
@ -150,7 +150,7 @@ function fnv32a(value)
|
||||
}
|
||||
|
||||
async function getRecentPostIds(db, id, ids, limit) {
|
||||
const k_version = 7;
|
||||
const k_version = 9;
|
||||
var o = await db.get(id + ':recent_posts');
|
||||
var recent = [];
|
||||
var f = o ? JSON.parse(o) : o;
|
||||
@ -161,14 +161,15 @@ async function getRecentPostIds(db, id, ids, limit) {
|
||||
await ssb.sqlStream(
|
||||
"SELECT "+
|
||||
" rowid, "+
|
||||
" id "+
|
||||
" id, "+
|
||||
" timestamp "+
|
||||
"FROM messages "+
|
||||
"WHERE "+
|
||||
" rowid > ? AND "+
|
||||
" author IN (" + ids.map(x => '?').join(", ") + ") AND "+
|
||||
" json_extract(content, '$.type') IN ('post', 'tildefriends-app') "+
|
||||
"UNION SELECT MAX(rowid) as rowid, NULL FROM messages "+
|
||||
"ORDER BY rowid DESC LIMIT ?",
|
||||
"UNION SELECT MAX(rowid) as rowid, NULL, NULL FROM messages "+
|
||||
"ORDER BY timestamp DESC LIMIT ?",
|
||||
[].concat([f.rowid], ids, [limit + 1]),
|
||||
function(row) {
|
||||
if (row.id) {
|
||||
@ -240,7 +241,7 @@ async function ready() {
|
||||
return refresh();
|
||||
}
|
||||
|
||||
core.register('onBroadcastsChanged', async function() {
|
||||
ssb.addEventListener('broadcasts', async function() {
|
||||
await app.postMessage({broadcasts: await ssb.getBroadcasts()});
|
||||
});
|
||||
|
||||
@ -270,8 +271,8 @@ async function refresh() {
|
||||
}
|
||||
});
|
||||
roots = roots.filter(function(root) {
|
||||
return root && posts.every(post => post.id != root);
|
||||
});
|
||||
return root && posts.every(post => post.id != root);
|
||||
});
|
||||
return [].concat(posts, await getPosts(db, roots));
|
||||
}).then(function(posts) {
|
||||
return Promise.all(posts.map(x => app.postMessage({message: x})));
|
||||
@ -321,6 +322,8 @@ core.register('message', async function(m) {
|
||||
} else if (m.message.refresh) {
|
||||
await refresh();
|
||||
}
|
||||
} else if (m.event == 'focus' || m.event == 'blur') {
|
||||
/* Shh. */
|
||||
} else {
|
||||
print(JSON.stringify(m));
|
||||
}
|
||||
|
||||
@ -29,18 +29,17 @@
|
||||
</md-dialog>
|
||||
<md-app style="position: absolute; height: 100%; width: 100%">
|
||||
<md-app-toolbar class="md-primary">
|
||||
<md-button class="md-icon-button" @click="showUsers = !showUsers">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
<span class="md-title">Tilde Friends Secure Scuttlebutt Test</span>
|
||||
</md-app-toolbar>
|
||||
<md-app-drawer :md-active.sync="showUsers" md-persistent="full">
|
||||
<md-app-drawer md-permanent="full">
|
||||
<md-list>
|
||||
<md-subheader>Network</md-subheader>
|
||||
<md-subheader>Broadcasts</md-subheader>
|
||||
<md-list-item v-for="broadcast in broadcasts" v-bind:key="JSON.stringify(broadcast)" @click="ssb_connect(broadcast)">{{broadcast.address}}:{{broadcast.port}} <tf-user :id="broadcast.pubkey"></tf-user></md-list-item>
|
||||
<md-subheader>Connections</md-subheader>
|
||||
<md-list-item v-for="connection in connections" v-bind:key="'connection-' + JSON.stringify(connection)"><tf-user :id="connection"></tf-user></md-list-item>
|
||||
<md-list-item @click="show_connect_dialog = true">Connect</md-list-item>
|
||||
<md-subheader>Users</md-subheader>
|
||||
<md-list-item v-for="user in Object.keys(users)" v-bind:key="'user-' + user"><tf-user v-bind:id="user"/></md-list-item>
|
||||
</md-list>
|
||||
</md-app-drawer>
|
||||
<md-app-content>
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
Vue.component('tf-user', {
|
||||
data: function() { return {users: g_data.users, show_user_dialog: false, show_follow_dialog: false} },
|
||||
data: function() { return {
|
||||
users: g_data.users,
|
||||
show_user_dialog: false,
|
||||
show_follow_dialog: false,
|
||||
edit_profile_name: null,
|
||||
edit_profile_description: null,
|
||||
} },
|
||||
props: ['id'],
|
||||
mounted: function() {
|
||||
window.parent.postMessage({user: this.id}, '*');
|
||||
@ -22,29 +28,54 @@ Vue.component('tf-user', {
|
||||
}
|
||||
},
|
||||
},
|
||||
whoami: { get: function() { return g_data.whoami; } },
|
||||
},
|
||||
methods: {
|
||||
save_profile: function() {
|
||||
var message = {appendMessage: {
|
||||
type: 'about',
|
||||
about: this.id,
|
||||
name: this.edit_profile_name,
|
||||
description: this.edit_profile_description,
|
||||
}};
|
||||
window.parent.postMessage(message, '*');
|
||||
},
|
||||
},
|
||||
template: `<span @click="show_user_dialog = true">
|
||||
{{users[id] && users[id].name ? users[id].name : id}}
|
||||
<md-tooltip v-if="users[id] && users[id].name">{{id}}</md-tooltip>
|
||||
<md-dialog :md-active.sync="show_user_dialog">
|
||||
<md-dialog-title>{{users[id] && users[id].name ? users[id].name : id}}</md-dialog-title>
|
||||
<md-dialog-content v-if="users[id]">
|
||||
<div v-if="users[id].image"><img :src="'/' + users[id].image + '/view'"></div>
|
||||
<div v-if="users[id].name">{{id}}</div>
|
||||
<div>{{users[id].description}}</div>
|
||||
<div><md-switch v-model="following">Following</md-switch></div>
|
||||
<md-list>
|
||||
<md-subheader>Followers</md-subheader>
|
||||
<md-list-item v-for="follower in (users[id] || []).followers" v-bind:key="'follower-' + follower">
|
||||
<tf-user :id="follower"></tf-user>
|
||||
</md-list-item>
|
||||
<md-subheader>Following</md-subheader>
|
||||
<md-list-item v-for="user in (users[id] || []).following" v-bind:key="'following-' + user">
|
||||
<tf-user :id="user"></tf-user>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
<md-dialog-content>
|
||||
<div v-if="id == whoami">
|
||||
<md-field>
|
||||
<label>Name</label>
|
||||
<md-input v-model="edit_profile_name"></md-input>
|
||||
</md-field>
|
||||
<md-field>
|
||||
<label>Description</label>
|
||||
<md-textarea v-model="edit_profile_description"></md-textarea>
|
||||
</md-field>
|
||||
</div>
|
||||
<template v-if="users[id]">
|
||||
<div v-if="users[id].image"><img :src="'/' + users[id].image + '/view'"></div>
|
||||
<div v-if="users[id].name">{{id}}</div>
|
||||
<div>{{users[id].description}}</div>
|
||||
<div><md-switch v-model="following">Following</md-switch></div>
|
||||
<md-list>
|
||||
<md-subheader>Followers</md-subheader>
|
||||
<md-list-item v-for="follower in (users[id] || []).followers" v-bind:key="'follower-' + follower">
|
||||
<tf-user :id="follower"></tf-user>
|
||||
</md-list-item>
|
||||
<md-subheader>Following</md-subheader>
|
||||
<md-list-item v-for="user in (users[id] || []).following" v-bind:key="'following-' + user">
|
||||
<tf-user :id="user"></tf-user>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</template>
|
||||
</md-dialog-content>
|
||||
<md-dialog-actions>
|
||||
<md-button @click="save_profile">Save Profile</md-button>
|
||||
<md-button @click="show_user_dialog = false">Close</md-button>
|
||||
</md-dialog-actions>
|
||||
</md-dialog>
|
||||
|
||||
@ -5,7 +5,6 @@ var g_data = {
|
||||
messages: [],
|
||||
users: {},
|
||||
broadcasts: [],
|
||||
showUsers: false,
|
||||
show_connect_dialog: false,
|
||||
show_user_dialog: null,
|
||||
connect: null,
|
||||
@ -21,6 +20,7 @@ window.addEventListener('message', function(event) {
|
||||
if (key == 'message') {
|
||||
g_data.messages.push(event.data[key]);
|
||||
g_data.messages.sort((x, y) => y.timestamp - x.timestamp);
|
||||
g_data.messages.splice(100);
|
||||
} else if (key + 's' in g_data && Array.isArray(g_data[key + 's'])) {
|
||||
g_data[key + 's'].push(event.data[key]);
|
||||
} else if (key == 'user') {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user