forked from cory/tildefriends
Cory McWilliams
5988fddf8d
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@3643 ed5197a5-7fde-0310-b194-c3ffbd925b24
163 lines
6.3 KiB
HTML
163 lines
6.3 KiB
HTML
<html>
|
|
<head>
|
|
<meta content="width=device-width,initial-scale=1,minimal-ui" name="viewport">
|
|
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons">
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css">
|
|
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default-dark.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
|
<script src="vue-material.js"></script>
|
|
<script src="tf-user.js"></script>
|
|
<script src="tf-message.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/commonmark/0.29.1/commonmark.min.js"></script>
|
|
<script>
|
|
var g_data = {
|
|
whoami: null,
|
|
connections: [],
|
|
messages: [],
|
|
users: {},
|
|
broadcasts: [],
|
|
showUsers: false,
|
|
show_connect_dialog: false,
|
|
show_user_dialog: null,
|
|
connect: null,
|
|
pubs: [],
|
|
votes: [],
|
|
apps: {},
|
|
share_app: null,
|
|
};
|
|
var g_data_initial = JSON.parse(JSON.stringify(g_data));
|
|
window.addEventListener('message', function(event) {
|
|
var key = Object.keys(event.data)[0];
|
|
if (key + 's' in g_data && Array.isArray(g_data[key + 's'])) {
|
|
g_data[key + 's'].push(event.data[key]);
|
|
} else if (key == 'user') {
|
|
Vue.set(g_data.users, event.data.user.user, Object.assign({}, g_data.users[event.data.user.user] || {}, event.data.user.about));
|
|
} else if (key == 'followers') {
|
|
if (!g_data.users[event.data.followers.id]) {
|
|
Vue.set(g_data.users, event.data.followers.id, {});
|
|
}
|
|
Vue.set(g_data.users[event.data.followers.id], 'followers', event.data.followers.users);
|
|
} else if (key == 'following') {
|
|
if (!g_data.users[event.data.following.id]) {
|
|
Vue.set(g_data.users, event.data.following.id, {});
|
|
}
|
|
Vue.set(g_data.users[event.data.following.id], 'following', event.data.following.users);
|
|
} else if (key == 'broadcasts') {
|
|
g_data.broadcasts = event.data.broadcasts;
|
|
} else if (key == 'pubs') {
|
|
g_data.pubs = event.data.pubs;
|
|
} else if (key == 'apps') {
|
|
g_data.apps = event.data.apps;
|
|
} else if (key == 'clear') {
|
|
Object.keys(g_data_initial).forEach(function(key) {
|
|
Vue.set(g_data, key, JSON.parse(JSON.stringify(g_data_initial[key])));
|
|
});
|
|
} else {
|
|
g_data[key] = event.data[key];
|
|
}
|
|
});
|
|
window.addEventListener('load', function() {
|
|
Vue.use(VueMaterial.default);
|
|
var vue = new Vue({
|
|
el: '#app',
|
|
data: g_data,
|
|
methods: {
|
|
post_message: function() {
|
|
if (g_data.share_app) {
|
|
window.parent.postMessage({share_app: {
|
|
app: g_data.apps[g_data.share_app],
|
|
name: g_data.share_app,
|
|
text: document.getElementById('post_text').value,
|
|
}}, '*');
|
|
} else {
|
|
window.parent.postMessage({post: document.getElementById('post_text').value}, '*');
|
|
}
|
|
document.getElementById('post_text').value = '';
|
|
},
|
|
ssb_connect: function(connection) {
|
|
window.parent.postMessage({connect: connection}, '*');
|
|
},
|
|
content_json: function(message) {
|
|
try {
|
|
return JSON.parse(message.content);
|
|
} catch {
|
|
return undefined;
|
|
}
|
|
},
|
|
refresh: function() {
|
|
window.parent.postMessage({refresh: true}, '*');
|
|
},
|
|
}
|
|
});
|
|
});
|
|
window.parent.postMessage('ready', '*');
|
|
</script>
|
|
</head>
|
|
<body style="color: #fff">
|
|
<div id="app">
|
|
<md-dialog :md-active.sync="show_connect_dialog">
|
|
<md-dialog-title>Connect</md-dialog-title>
|
|
<md-dialog-content>
|
|
<md-field>
|
|
<label>net:127.0.0.1:8008~shs:id</label>
|
|
<md-input v-model="connect"></md-input>
|
|
</md-field>
|
|
</md-dialog-content>
|
|
<md-dialog-actions>
|
|
<md-button class="md-primary" @click="ssb_connect(connect); connect = null; show_connect_dialog = false">Connect</md-button>
|
|
<md-button @click="connect = null; show_connect_dialog = false">Cancel</md-button>
|
|
</md-dialog-actions>
|
|
</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-list>
|
|
<md-subheader>Network</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-list>
|
|
</md-app-drawer>
|
|
<md-app-content>
|
|
<md-button @click="refresh()" class="md-icon-button md-dense md-raised md-primary">
|
|
<md-icon>cached</md-icon>
|
|
</md-button>
|
|
Welcome, <tf-user :id="whoami"></tf-user>.
|
|
<md-card class="md-elevation-8">
|
|
<md-card-header>
|
|
<div class="md-title">What's up?</div>
|
|
</md-card-header>
|
|
<md-card-content>
|
|
<md-chip v-if="share_app" md-deletable @md-delete="share_app = null">
|
|
{{share_app}}: {{apps[share_app]}}
|
|
</md-chip>
|
|
<md-field>
|
|
<label>Post a message</label>
|
|
<md-textarea id="post_text"></md-textarea>
|
|
</md-field>
|
|
</md-card-content>
|
|
<md-card-actions>
|
|
<md-menu>
|
|
<md-button md-menu-trigger>Share App</md-button>
|
|
<md-menu-content>
|
|
<md-menu-item v-for="app in Object.keys(apps)" v-bind:key="app" @click="share_app = app">
|
|
{{app}}
|
|
</md-menu-item>
|
|
</md-menu-content>
|
|
</md-menu>
|
|
<md-button class="md-raised md-primary" v-on:click="post_message()">Submit Post</md-button>
|
|
</md-card-actions>
|
|
</md-card>
|
|
<tf-message v-for="message in messages" v-if="!content_json(message).root || !messages.some(m => m.id == content_json(message).root)" v-bind:message="message" v-bind:messages="messages" v-bind:key="message.id"></tf-message>
|
|
</md-app-content>
|
|
</md-app>
|
|
</div>
|
|
</body>
|
|
</html> |