git ssb

3+

dangerousbeans / scuttle-vue



Commit 71017c48c22279ca599d00429a772a88887eb7e1

Browse Files

add navbar, profile page, raw messages, infinite scroller

Jolyon committed on 11/15/2017, 4:43:18 PM
Parent: 68d042cfbe29198d1147fd3e4d3d90fe1d485648

Files changed

modules/sbot.jschanged
package-lock.jsonchanged
package.jsonchanged
src/App.vuechanged
src/components/Infinitely.vuechanged
src/components/Message.vuechanged
src/components/Public.vuechanged
src/components/Navbar.vueadded
src/components/Profile.vueadded
src/main.jschanged
src/router/index.jschanged
modules/sbot.jsView
@@ -52,9 +52,11 @@
5252 … sbot_whoami: true,
5353 … sbot_stream: true,
5454 … sbot_friends_get: true,
5555 … sbot_signs_get: true,
56- sbot_relatedMessages_get: true
56 …+ sbot_relatedMessages_get: true,
57 …+ sbot_the_log: true,
58 …+ sbot_getLatest: true
5759 … },
5860 …
5961 … create: function (api) {
6062 …
@@ -117,8 +119,14 @@
117119 … CACHE[e.key] = CACHE[e.key] || e.value
118120 … })
119121 … )
120122 … }),
123 …+ sbot_the_log: rec.source(function (opts) {
124 …+ return sbot.createLogStream(opts)
125 …+ }),
126 …+ sbot_getLatest: rec.source(function (opts) {
127 …+ return sbot.getLatest(opts)
128 …+ }),
121129 … sbot_user_feed: rec.source(function (opts) {
122130 … return sbot.createUserStream(opts)
123131 … }),
124132 … sbot_fulltext_search: rec.source(function (opts) {
package-lock.jsonView
The diff is too large to show. Use a local git client to view these changes.
Old file size: 375977 bytes
New file size: 376323 bytes
package.jsonView
@@ -41,8 +41,9 @@
4141 … "is-visible": "^2.1.1",
4242 … "kvgraph": "^0.1.0",
4343 … "map-filter-reduce": "^3.0.3",
4444 … "minimist": "^1.2.0",
45 …+ "moment": "^2.19.2",
4546 … "multiblob": "^1.12.0",
4647 … "muxrpcli": "^1.1.0",
4748 … "nevernull": "^1.3.0",
4849 … "open-external": "^0.1.1",
src/App.vueView
@@ -1,14 +1,17 @@
11 … <template>
22 … <div id="app" class="container">
3 …+ <navbar></navbar>
34 … <router-view></router-view>
45 … </div>
56 … </template>
67 …
78 … <script>
9 …+import Navbar from './components/Navbar.vue'
810 …
911 … export default {
1012 … name: 'app',
1113 … components: {
14 …+ Navbar
1215 … }
1316 … }
1417 … </script>
src/components/Infinitely.vueView
@@ -13,9 +13,9 @@
1313 …
1414 … export default {
1515 … data() {
1616 … return {
17- list: [],
17 …+ list: []
1818 … }
1919 … },
2020 … methods: {
2121 … infiniteHandler($state) {
@@ -26,12 +26,12 @@
2626 … }
2727 … this.list = this.list.concat(temp);
2828 … $state.loaded()
2929 … }, 1000)
30- },
30 …+ }
3131 … },
3232 … components: {
33- InfiniteLoading,
34- },
33 …+ InfiniteLoading
34 …+ }
3535 … }
3636 … </script>
3737 …
src/components/Message.vueView
@@ -7,15 +7,18 @@
77 … {{ author }}
88 … <span class="text-muted">
99 … {{ message.value.content.type() }}
1010 … <strong v-if="message.value.content.channel()">#{{ message.value.content.channel() }}</strong>
11 …+ {{ message.value.timestamp() | formatDate}}
12 …+ <button type="button" class="btn btn-outline-info btn-sm" @click="raw = !raw">Raw</button>
1113 … </span>
1214 … </h5>
1315 …
14- <p v-html="content_text()"></p>
15-
16 …+ <p v-html="content_text_md()"></p>
17 …+
18 …+ <pre v-if="raw" v-html="content_json()"></pre>
1619 … </div>
17-
20 …+
1821 … {{ relatedMessages.length }}
1922 … <!-- <message v-for="mess in relatedMessages" :message="mess">
2023 … </message> -->
2124 …
@@ -36,9 +39,10 @@
3639 … data () {
3740 … return {
3841 … author: "...",
3942 … image_url: "http://via.placeholder.com/90x90",
40- relatedMessages: []
43 …+ relatedMessages: [],
44 …+ raw: false
4145 … }
4246 … },
4347 …
4448 … methods: {
@@ -55,11 +59,21 @@
5559 … if(a)
5660 … this.relatedMessages = a.every(function(e){ return nn(e) })
5761 … },
5862 …
59- // Get markdown formatted version of message content
63 …+ // Get raw pretty printed json version of message
64 …+ content_json()
65 …+ {
66 …+ return JSON.stringify(this.message.value(), null, 2)
67 …+ },
68 …+ // Get text formatted version of message content
6069 … content_text()
6170 … {
71 …+ return this.message.value.content.text()
72 …+ },
73 …+ // Get markdown formatted version of message content
74 …+ content_text_md()
75 …+ {
6276 … return md.block( this.message.value.content.text() )
6377 … }
6478 … },
6579 … updated() {
src/components/Public.vueView
@@ -1,30 +1,69 @@
1-
21 … <template>
32 … <div id="public" class="row">
43 … <div class="col-md-12">
5- <h2>Public feed</h2>
4 …+ <!-- <h2>Public feed</h2> -->
65 …
7- <Message v-for="message in messages" :message="message">
8- </Message>
6 …+ <Message v-for="message in messages" :message="message"></Message>
7 …+ <!-- <infinite-loading @infinite="infiniteHandler"></infinite-loading> -->
98 … </div>
109 … </div>
1110 … </template>
1211 …
1312 … <script>
1413 … import Message from "./Message.vue"
14 …+import InfiniteLoading from 'vue-infinite-loading'
1515 …
1616 … export default {
1717 … name: 'public',
1818 … components: {
19- "Message": Message
19 …+ Message,
20 …+ InfiniteLoading
2021 … },
22 …+ data() {
23 …+ return {
24 …+ list: [],
25 …+ lastMsg: {}
26 …+ }
27 …+ },
28 …+ methods: {
29 …+ infiniteHandler($state) {
30 …+ setTimeout(() => {
31 …+ console.log('messages', this.messages)
32 …+ // this.lastMsg = this.messages.slice(-1)[0]() // a timestamp 1510740987518
33 …+ console.log('last message', this.lastMsg)
34 …+ const temp = []
35 …+ for (let i = this.list.length + 1; i <= this.list.length + 20; i++) {
36 …+ temp.push(i)
37 …+ }
38 …+ this.list = this.list.concat(temp);
39 …+ $state.loaded()
40 …+ }, 1000)
41 …+ }
42 …+ },
2143 … subscriptions: function () {
2244 … return {
2345 … messages: this.$observers.accumulated_observable(
24- this.$depject_api.sbot_log[0](
25- { limit: 20, reverse: true, live: true }
46 …+ // this.$depject_api.sbot_user_feed[0](
47 …+ // { id: '@dfCIY3rP5idQFdjuOHrBJqrv6EgsSiNyn1NKz87UTJw=.ed25519', lte: 1502583510, limit: 20, reverse: false, live: true } // fillCache: true = leveldb LRU-cache filled with read data
48 …+ // )
49 …+
50 …+ // dangerousbeans: sbot_the_log appears to output the same feed as sbot_log
51 …+ // but without being wrapped in a pull-stream
52 …+ // see sbot.js line 114 to 124
53 …+ // ought to be able to filter with lt lte gt gte on timestamp but it doesn't seem to work
54 …+ // eg gte: 1510707316, lte: 1510756323,
55 …+ this.$depject_api.sbot_the_log[0](
56 …+ { limit: 60, reverse: true, live: false }
2657 … )
58 …+
59 …+ // this.$depject_api.sbot_getLatest[0](
60 …+ // function (e) {
61 …+ // console.log('sbot_getLatest', e)
62 …+ // return e
63 …+ // }
64 …+ // )
65 …+ // sbot_getLatest
2766 … )
2867 … }
2968 … }
3069 … }
src/components/Navbar.vueView
@@ -1,0 +1,24 @@
1 …+<template>
2 …+ <!-- <div class="col-md-12"> -->
3 …+ <!-- <span> -->
4 …+ <!-- <div id="navbar" class="column"> -->
5 …+ <nav class="navbar navbar-light bg-light justify-content-between">
6 …+ <span>
7 …+ <a class="navbar-brand" href="#/public">Public</a>
8 …+ <a class="navbar-brand" href="#/profile">Profile</a>
9 …+ <a class="navbar-brand" href="#/infinitely">Infinite scroller</a>
10 …+ </span>
11 …+ <form class="form-inline">
12 …+ <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
13 …+ <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
14 …+ </form>
15 …+ </nav>
16 …+ <!-- </span> -->
17 …+ <!-- </div> -->
18 …+</template>
19 …+
20 …+<script>
21 …+ export default {
22 …+ name: 'navbar'
23 …+ }
24 …+</script>
src/components/Profile.vueView
@@ -1,0 +1,49 @@
1 …+<template>
2 …+ <div id="profile" class="row">
3 …+ <div class="col-md-12">
4 …+ <!-- <h2>Profile feed</h2> -->
5 …+ <Message v-for="message in messages" :message="message"></Message>
6 …+ </div>
7 …+ </div>
8 …+</template>
9 …+
10 …+<script>
11 …+import Message from "./Message.vue"
12 …+
13 …+export default {
14 …+ name: 'profile',
15 …+ components: {
16 …+ Message
17 …+ },
18 …+ data() {
19 …+ return {
20 …+ whoami: ''
21 …+ }
22 …+ },
23 …+ subscriptions: function () {
24 …+ return {
25 …+ messages: this.$observers.accumulated_observable(
26 …+ this.$depject_api.sbot_user_feed[0]( // todo: whoami
27 …+ { id: '@dfCIY3rP5idQFdjuOHrBJqrv6EgsSiNyn1NKz87UTJw=.ed25519', limit: 200, gte: 170, lte: 199, reverse: false, live: false } // fillCache: true = leveldb LRU-cache filled with read data // lte: seq
28 …+ )
29 …+ )
30 …+ }
31 …+ },
32 …+ mounted() {
33 …+ this.whoami = localStorage.getItem('whoami')
34 …+ console.log('whoami', this.whoami) // ugh. looks fine in console! errors when calling id: this.whoami in the subscription
35 …+ // Object {message: "Param 0 must have a .id of type "feedId"", name: "UsageError", stack: "UsageError: Param 0 must have a .id of type "feedI…lebot\node_modules\packet-stream\index.js:230:11)"}
36 …+ // "Param 0 must have a .id of type "feedId""
37 …+ // name
38 …+ // :
39 …+ // "UsageError"
40 …+ // stack
41 …+ // :
42 …+ // "UsageError: Param 0 must have a .id of type "feedId"↵ at new ZE (C:\Users\av8ta\AppData\Roaming\nvm\v8.8.0\node_modules\scuttlebot\node_modules\zerr\index.js:11:42)↵ at ZError (C:\Users\av8ta\AppData\Roaming\nvm\v8.8.0\node_modules\scuttlebot\node_modules\zerr\index.js:13:14)↵ at Object.createUserStreamOpts (C:\Users\av8ta\AppData\Roaming\nvm\v8.8.0\node_modules\scuttlebot\lib\validators.js:142:14)↵ at validate (C:\Users\av8ta\AppData\Roaming\nvm\v8.8.0\node_modules\scuttlebot\node_modules\muxrpc-validation\index.js:130:15)↵ at Object.<anonymous> (C:\Users\av8ta\AppData\Roaming\nvm\v8.8.0\node_modules\scuttlebot\node_modules\muxrpc-validation\index.js:91:17)↵ at Object.hooked (C:\Users\av8ta\AppData\Roaming\nvm\v8.8.0\node_modules\scuttlebot\node_modules\hoox\index.js:10:15)↵ at Object.localCall (C:\Users\av8ta\AppData\Roaming\nvm\v8.8.0\node_modules\scuttlebot\node_modules\muxrpc\local-api.js:31:31)↵ at Object.<anonymous> (C:\Users\av8ta\AppData\Roaming\nvm\v8.8.0\node_modules\scuttlebot\node_modules\muxrpc\local-api.js:37:22)↵ at PacketStreamSubstream.stream.read (C:\Users\av8ta\AppData\Roaming\nvm\v8.8.0\node_modules\scuttlebot\node_modules\muxrpc\stream.js:67:23)↵ at PacketStream._onstream (C:\Users\av8ta\AppData\Roaming\nvm\v8.8.0\node_modules\scuttlebot\node_modules\packet-stream\index.js:230:11)"
43 …+
44 …+ }
45 …+}
46 …+</script>
47 …+
48 …+<style scoped>
49 …+</style>
src/main.jsView
@@ -25,8 +25,16 @@
2525 … // Observable adapters for pull-streams etc
2626 … import SourceObserver from './plugins/source_observer'
2727 … Vue.use(SourceObserver)
2828 …
29 …+import moment from 'moment'
30 …+
31 …+Vue.filter('formatDate', function(value) {
32 …+ if (value) {
33 …+ return moment(value).format('YYYY/MM/DD hh:mm')
34 …+ }
35 …+})
36 …+
2937 … var vm = new Vue({ // eslint-disable-line no-new
3038 … el: '#app',
3139 … router,
3240 … components: { App },
src/router/index.jsView
@@ -1,10 +1,10 @@
11 … import Vue from 'vue'
22 … import Router from 'vue-router'
33 … import Public from './../components/Public.vue'
4 …+import Profile from './../components/Profile.vue'
45 … import Infinitely from './../components/Infinitely.vue'
56 …
6-
77 … Vue.use(Router)
88 …
99 … export default new Router({
1010 … routes: [
@@ -19,8 +19,14 @@
1919 … component: Public,
2020 … props: true
2121 … },
2222 … {
23 …+ path: '/profile',
24 …+ name: 'profile',
25 …+ component: Profile,
26 …+ props: true
27 …+ },
28 …+ {
2329 … path: '/infinitely',
2430 … name: 'infinitely',
2531 … component: Infinitely
2632 … }

Built with git-ssb-web