git ssb

16+

Dominic / patchbay



Commit 83811f3eeab7f9cae46ca83ffe34c19b2974a4ac

Browse Files

styled network page, NOW WITH LABELS!

mix irving committed on 1/11/2017, 3:14:40 AM
Parent: 7d510f40ceb47f6b4863bc121426ce7492a1bbbc

Files changed

modules_basic/avatar.jschanged
modules_extra/network.jschanged
modules_extra/network.mcssadded
modules_basic/avatar.jsView
@@ -9,29 +9,37 @@
99 …
1010 … exports.gives = {
1111 … avatar: true,
1212 … avatar_image_name_link: true,
13- avatar_image_link: true
13 …+ avatar_image_link: true,
14 …+ avatar_name_link: true
1415 … }
1516 …
1617 … exports.create = function (api) {
18 …+ return {
19 …+ avatar,
20 …+ avatar_image_name_link,
21 …+ avatar_image_link,
22 …+ avatar_name_link
23 …+ }
1724 …
18- var exports = {}
19- exports.avatar = function (author, classes) {
25 …+ function avatar (author, classes) {
2026 … return exports.avatar_image_name_link(author, classes)
2127 … }
2228 …
23- exports.avatar_image_name_link = function (author, classes) {
29 …+ function avatar_image_name_link (author, classes) {
2430 … return api.avatar_link(author, [
2531 … api.avatar_image(author, classes),
2632 … api.avatar_name(author)
2733 … ])
2834 … }
2935 …
30- exports.avatar_image_link = function (author, classes) {
36 …+ function avatar_image_link (author, classes) {
3137 … return api.avatar_link(author, api.avatar_image(author, classes))
3238 … }
3339 …
34- return exports
40 …+ function avatar_name_link (author, classes) {
41 …+ return api.avatar_link(author, api.avatar_name(author))
42 …+ }
3543 … }
3644 …
3745 …
modules_extra/network.jsView
@@ -1,29 +1,33 @@
1 …+const fs = require('fs')
12 … const isVisible = require('is-visible').isVisible
23 … const h = require('../h')
4 …+const human = require('human-time')
5 …+
36 … const mutantMap = require('@mmckegg/mutant/map')
4-const mutantDict = require('@mmckegg/mutant/dict')
7 …+const dict = require('@mmckegg/mutant/dict')
58 … const Struct = require('@mmckegg/mutant/struct')
69 … const Value = require('@mmckegg/mutant/value')
710 … const toCollection = require('@mmckegg/mutant/dict-to-collection')
811 … const when = require('@mmckegg/mutant/when')
912 … const computed = require('@mmckegg/mutant/computed')
10-const human = require('human-time')
1113 …
1214 … //var avatar = plugs.first(exports.avatar = [])
1315 … //var sbot_gossip_peers = plugs.first(exports.sbot_gossip_peers = [])
1416 … //var sbot_gossip_connect = plugs.first(exports.sbot_gossip_connect = [])
1517 …
1618 … exports.needs = {
17- avatar: 'first',
19 …+ avatar_image_link: 'first',
20 …+ avatar_name_link: 'first',
1821 … sbot_gossip_peers: 'first',
1922 … sbot_gossip_connect: 'first'
2023 … }
2124 …
2225 … exports.gives = {
2326 … menu_items: true,
2427 … builtin_tabs: true,
25- screen_view: true
28 …+ screen_view: true,
29 …+ mcss: true
2630 … }
2731 …
2832 … //sbot_gossip_connect
2933 … //sbot_gossip_add
@@ -121,17 +125,18 @@
121125 … return new Date(time).toString()
122126 … }
123127 …
124128 … function humanDate (time) {
125- return human(new Date(time))
129 …+ return human(new Date(time)).replace(/minute/, 'min').replace(/second/, 'sec')
126130 … }
127131 …
128132 … exports.create = function (api) {
129133 …
130134 … return {
131135 … menu_items: () => h('a', {href: '#/network'}, '/network'),
132136 … builtin_tabs: () => ['/network'],
133- screen_view
137 …+ screen_view,
138 …+ mcss: () => fs.readFileSync(__filename.replace(/js$/, 'mcss'), 'utf8')
134139 … }
135140 …
136141 … function screen_view (path) {
137142 … if (path !== '/network') return
@@ -142,39 +147,56 @@
142147 … h('Network', [
143148 … mutantMap(peers, peer => {
144149 … var { key, ping, source, state, stateChange } = peer
145150 …
146- console.log('ping', ping())
147-
148151 … return h('NetworkConnection', [
149- api.avatar(key(), 'thumbnail'),
150- h('div', [
151- when(state, state, 'not connected'),
152- ' ',
152 …+ h('section.avatar', [
153 …+ api.avatar_image_link(key()),
154 …+ ]),
155 …+ h('section.name', [
156 …+ api.avatar_name_link(key()),
157 …+ ]),
158 …+ h('section.type', [
153159 … computed(peer, getType),
154- ' ',
155- // //TODO: show nicer details, with labels. etc.
156- computed(ping.rtt.mean, duration),
157- ' ',
158- computed(ping.skew.mean, duration),
159- ' ',
160- h('label',
160 …+ ]),
161 …+ h('section.source', [
162 …+ 'source: ',
163 …+ h('code', source)
164 …+ ]),
165 …+ h('section.state', [
166 …+ 'state: ',
167 …+ h('code', when(state, state, 'not connected'))
168 …+ ]),
169 …+ h('section.actions', [
170 …+ h('button', {
171 …+ 'ev-click': () => {
172 …+ api.sbot_gossip_connect(peer(), (err) => {
173 …+ if(err) console.error(err)
174 …+ else console.log('connected to', peer())
175 …+ })
176 …+ }},
177 …+ 'connect'
178 …+ )
179 …+ ]),
180 …+ h('section.time-ago', [
181 …+ h('div',
161182 … { title: computed(stateChange, formatDate) },
162183 … [ computed(stateChange, humanDate) ]
163184 … )
164185 … ]),
165- 'source: ',
166- source,
167- h('pre', computed(peer, legacyToMultiServer)),
168- h('button', {
169- 'ev-click': () => {
170- api.sbot_gossip_connect(peer(), (err) => {
171- if(err) console.error(err)
172- else console.log('connected to', peer())
173- })
174- }},
175- 'connect'
176- )
186 …+ h('section.ping', [
187 …+ h('div.rtt', [
188 …+ 'rtt: ',
189 …+ h('code', computed(ping.rtt.mean, duration))
190 …+ ]),
191 …+ h('div.skew', [
192 …+ 'skew: ',
193 …+ h('code', computed(ping.skew.mean, duration))
194 …+ ]),
195 …+ ]),
196 …+ h('section.address', [
197 …+ h('code', computed(peer, legacyToMultiServer))
198 …+ ])
177199 … ])
178200 … })
179201 … ])
180202 … ])
@@ -182,9 +204,9 @@
182204 … }
183205 …
184206 … function obs_gossip_peers (api) {
185207 … var timer = null
186- var state = mutantDict({}, {
208 …+ var state = dict({}, {
187209 … onListen: () => {
188210 … timer = setInterval(refresh, 5e3)
189211 … },
190212 … onUnlisten: () => {
modules_extra/network.mcssView
@@ -1,0 +1,91 @@
1 …+Network {
2 …+ div {
3 …+ margin: .8rem
4 …+ border-bottom: 1px solid gainsboro
5 …+ }
6 …+
7 …+}
8 …+
9 …+NetworkConnection {
10 …+ padding-left: 6rem
11 …+ padding-bottom: .8rem
12 …+ position: relative
13 …+
14 …+ display: flex
15 …+ flex-direction: row
16 …+ flex-wrap: wrap
17 …+ align-items: center
18 …+
19 …+ section.avatar {
20 …+ position: absolute
21 …+ left: 0
22 …+ top: 0
23 …+
24 …+ a img {
25 …+ height: 3rem
26 …+ width: 3rem
27 …+ }
28 …+ }
29 …+
30 …+ section.time-ago {
31 …+ position: absolute
32 …+ left: 0
33 …+ top: 3.5rem
34 …+
35 …+ font-size: .8rem
36 …+ $textSubtle
37 …+ }
38 …+
39 …+ section.name {
40 …+ flex-basis: 100%
41 …+
42 …+ margin-right: 1rem
43 …+ }
44 …+
45 …+ section.type {
46 …+ flex-basis: 100%
47 …+
48 …+ font-size: .8rem
49 …+ $textSubtle
50 …+ }
51 …+
52 …+ section.source {
53 …+ flex-basis: 100%
54 …+ }
55 …+
56 …+ section.state {
57 …+ margin-right: 2rem
58 …+ }
59 …+
60 …+ section.actions {
61 …+ button {
62 …+ padding: .2rem
63 …+ font-size: .7rem
64 …+ }
65 …+ }
66 …+
67 …+
68 …+ section.ping {
69 …+ flex-basis: 100%
70 …+ display: flex
71 …+
72 …+ font-size: .8rem
73 …+ $textSubtle
74 …+
75 …+ div.rtt {
76 …+ flex-basis: 8rem
77 …+ }
78 …+
79 …+ div.skew {
80 …+ flex-basis: 8rem
81 …+ }
82 …+ }
83 …+
84 …+ section.address{
85 …+ flex-basis: 100%
86 …+
87 …+ font-size: .8rem
88 …+ $textSubtle
89 …+ }
90 …+}
91 …+

Built with git-ssb-web