diff --git a/packages/backend/src/aggregator.ts b/packages/backend/src/aggregator.ts index 3eb8138..4e2af6e 100644 --- a/packages/backend/src/aggregator.ts +++ b/packages/backend/src/aggregator.ts @@ -1,11 +1,11 @@ import * as EventEmitter from 'events'; import Node from './node'; import Feed from './feed'; -import { timestamp, Types, IdSet, FeedMessage } from '@dotstats/common'; +import { timestamp, Types, FeedMessage } from '@dotstats/common'; export default class Aggregator extends EventEmitter { - private nodes = new IdSet(); - private feeds = new IdSet(); + private nodes = new Set(); + private feeds = new Set(); private messages: Array = []; public height = 0 as Types.BlockNumber; @@ -24,7 +24,7 @@ export default class Aggregator extends EventEmitter { node.once('disconnect', () => { node.removeAllListeners(); - this.nodes.remove(node); + this.nodes.delete(node); this.broadcast(Feed.removedNode(node)); }); @@ -44,7 +44,7 @@ export default class Aggregator extends EventEmitter { feed.sendMessages(messages); feed.once('disconnect', () => { - this.feeds.remove(feed); + this.feeds.delete(feed); }); } diff --git a/packages/common/src/id.ts b/packages/common/src/id.ts index 49bb372..7a6ba26 100644 --- a/packages/common/src/id.ts +++ b/packages/common/src/id.ts @@ -13,27 +13,3 @@ export function idGenerator>(): () => I { return () => current++ as I; } - -interface HasId { - id: I; -} - -export class IdSet, T> { - private map: Map = new Map(); - - public add(item: T & HasId) { - this.map.set(item.id, item); - } - - public remove(item: T & HasId) { - this.map.delete(item.id); - } - - public entries(): IterableIterator<[I, T]> { - return this.map.entries(); - } - - public values(): IterableIterator { - return this.map.values(); - } -} diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx index 8f7704b..35589d0 100644 --- a/packages/frontend/src/App.tsx +++ b/packages/frontend/src/App.tsx @@ -13,7 +13,7 @@ import transactionsIcon from './icons/inbox.svg'; import blockIcon from './icons/package.svg'; import blockHashIcon from './icons/file-binary.svg'; import blockTimeIcon from './icons/history.svg'; -import lastTimeIcon from './icons/dashboard.svg'; +import lastTimeIcon from './icons/watch.svg'; export default class App extends React.Component<{}, State> { public state: State = { @@ -72,6 +72,6 @@ export default class App extends React.Component<{}, State> { } private nodes(): Node.Props[] { - return Array.from(this.state.nodes.values()); + return Array.from(this.state.nodes.values()).sort((a, b) => b.blockDetails[0] - a.blockDetails[0]); } } diff --git a/packages/frontend/src/components/Ago.tsx b/packages/frontend/src/components/Ago.tsx index 10b55a3..b0c4e39 100644 --- a/packages/frontend/src/components/Ago.tsx +++ b/packages/frontend/src/components/Ago.tsx @@ -58,6 +58,10 @@ export class Ago extends React.Component { } public render() { + if (this.props.when === 0) { + return -; + } + const ago = Math.max(this.state.now - this.props.when, 0) / 1000; let agoStr: string; diff --git a/packages/frontend/src/components/Icon.css b/packages/frontend/src/components/Icon.css index 38da8fe..3bb5b46 100644 --- a/packages/frontend/src/components/Icon.css +++ b/packages/frontend/src/components/Icon.css @@ -1,6 +1,8 @@ .Icon { fill: currentColor; height: 1em; + width: 1em; + text-align: center; vertical-align: middle; display: inline-block; } diff --git a/packages/frontend/src/components/Tile.css b/packages/frontend/src/components/Tile.css index aa0d66d..9d28574 100644 --- a/packages/frontend/src/components/Tile.css +++ b/packages/frontend/src/components/Tile.css @@ -2,6 +2,32 @@ font-size: 2.5em; padding: 20px; text-align: left; - width: 7em; + width: 230px; display: inline-block; + position: relative; +} + +.Tile-label { + position: absolute; + top: 20px; + left: 90px; + right: 0; + font-size: 0.4em; + text-transform: uppercase; + font-weight: bold; +} + +.Tile-content { + position: absolute; + bottom: 20px; + left: 90px; + right: 0; + font-size: 0.75em; +} + +.Tile .Icon { + padding: 0.25em; + border-radius: 1em; + background: #d64ca8; + color: #fff; } diff --git a/packages/frontend/src/components/Tile.tsx b/packages/frontend/src/components/Tile.tsx index fa05e80..71d4f40 100644 --- a/packages/frontend/src/components/Tile.tsx +++ b/packages/frontend/src/components/Tile.tsx @@ -13,7 +13,9 @@ export namespace Tile { export function Tile(props: Tile.Props) { return (
- {props.children} + + {props.title} + {props.children}
); }