Files: ed0d0518717fe16a686399588766fb35b3e6e37a / app / page / network / index.js
2538 bytesRaw
1 | const nest = require('depnest') |
2 | const { h, Value, computed } = require('mutant') |
3 | |
4 | const Connections = require('./connections') |
5 | const ReplicationIn = require('./replication-in') |
6 | const ReplicationOut = require('./replication-out') |
7 | const InvitePub = require('./invite-pub') |
8 | const InvitePeer = require('./invite-peer') |
9 | |
10 | exports.gives = nest({ |
11 | 'app.html.menuItem': true, |
12 | 'app.page.network': true |
13 | }) |
14 | |
15 | exports.needs = nest({ |
16 | 'about.html.avatar': 'first', |
17 | 'app.html.scroller': 'first', |
18 | 'app.sync.goTo': 'first', |
19 | 'sbot.obs.connection': 'first', |
20 | 'sbot.obs.localPeers': 'first', |
21 | 'sbot.obs.connectedPeers': 'first' |
22 | }) |
23 | |
24 | exports.create = function (api) { |
25 | return nest({ |
26 | 'app.html.menuItem': menuItem, |
27 | 'app.page.network': networkPage |
28 | }) |
29 | |
30 | function menuItem () { |
31 | return h('a', { |
32 | 'ev-click': () => api.app.sync.goTo({ page: 'network' }) |
33 | }, '/network') |
34 | } |
35 | |
36 | function networkPage (location) { |
37 | const { connection, localPeers, connectedPeers } = api.sbot.obs |
38 | const { avatar } = api.about.html |
39 | |
40 | const state = { |
41 | groups: [ |
42 | { |
43 | name: 'connections', |
44 | subgroups: [ |
45 | ...Connections({ localPeers, connectedPeers, avatar }) |
46 | ] |
47 | }, |
48 | { |
49 | name: 'replication', |
50 | subgroups: [ |
51 | ReplicationIn({ connection }), |
52 | ReplicationOut({ connection }) |
53 | ] |
54 | }, |
55 | { |
56 | name: 'invites', |
57 | subgroups: [ |
58 | InvitePub({ connection }), |
59 | InvitePeer({ connection }) |
60 | ] |
61 | } |
62 | ], |
63 | activeGroup: Value(0) |
64 | } |
65 | |
66 | const page = h('NetworkPage', [ |
67 | computed(state.activeGroup, index => { |
68 | return h('div.container', [ |
69 | h('section.groups', state.groups.map((group, i) => { |
70 | return h('div.group', |
71 | { |
72 | 'className': i === index ? '-active' : '', |
73 | 'ev-click': () => state.activeGroup.set(i) |
74 | }, |
75 | group.name |
76 | ) |
77 | })), |
78 | h('section.subgroups', state.groups[index].subgroups.map(Subgroup)) |
79 | ]) |
80 | }) |
81 | ]) |
82 | |
83 | function Subgroup (subgroup) { |
84 | return h('div.subgroup', [ |
85 | h('h2', subgroup.title), |
86 | subgroup.body |
87 | ]) |
88 | } |
89 | |
90 | var { container } = api.app.html.scroller({ prepend: page }) |
91 | container.title = '/network' |
92 | container.keyboardScroll = function (n) { |
93 | if (isNaN(n)) return |
94 | |
95 | state.activeGroup.set((state.activeGroup() + n) % state.groups.length) |
96 | } |
97 | return container |
98 | } |
99 | } |
100 |
Built with git-ssb-web