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:
		@@ -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()});
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
@@ -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,13 +28,36 @@ 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]">
 | 
			
		||||
					<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>
 | 
			
		||||
@@ -43,8 +72,10 @@ Vue.component('tf-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') {
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user