pezkuwichain/pezkuwi-telemetry
1
0
Fork 0
mirror of https://github.com/pezkuwichain/pezkuwi-telemetry.git synced 2026-06-13 10:21:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Tweak map, remove legacy version msg

Browse Source
This commit is contained in:
maciejhirsz
2018-07-17 17:03:06 +02:00
parent efff299113
commit f4a4f1091a
6 changed files with 48 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/src/components/Chain.css
+2 -2
View File
@@ -8,7 +8,7 @@
position: relative;
}
.Chain-map-toggle {
.Chain-map-toggle .Icon {
position: absolute;
right: 20px;
bottom: 0;
@@ -21,7 +21,7 @@
border-radius: 4px 4px 0 0;
}
.Chain-map-toggle-on {
.Chain-map-toggle-on .Icon {
color: #fff;
}
packages/frontend/src/components/Chain.tsx
+44 -35
View File
@@ -65,32 +65,13 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
}
public componentWillMount() {
const vp = viewport();
this.calculateMapDimensions();
vp.height -= HEADER;
window.addEventListener('resize', this.calculateMapDimensions);
}
const ratio = vp.width / vp.height;
let top = 0;
let left = 0;
let width = 0;
let height = 0;
if (ratio >= MAP_RATIO) {
console.log('wider');
width = Math.round(vp.height * MAP_RATIO);
height = Math.round(vp.height);
left = (vp.width - width) / 2;
} else {
console.log('taller');
width = Math.round(vp.width);
height = Math.round(vp.width / MAP_RATIO);
top = (vp.height - height) / 2;
}
this.setState({ map: { top, left, width, height }});
public componentWillUnmount() {
window.removeEventListener('resize', this.calculateMapDimensions);
}
public render() {
@@ -109,7 +90,9 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
<Tile icon={blockIcon} title="Best Block">#{formatNumber(best)}</Tile>
<Tile icon={blockTimeIcon} title="Avgerage Time">{ blockAverage == null ? '-' : secondsWithPrecision(blockAverage / 1000) }</Tile>
<Tile icon={lastTimeIcon} title="Last Block"><Ago when={blockTimestamp} /></Tile>
<Icon src={worldIcon} alt="Toggle Map" className={toggleClass.join(' ')} onClick={this.toggleMap} />
<div className={toggleClass.join(' ')}>
<Icon src={worldIcon} alt="Toggle Map" onClick={this.toggleMap} />
</div>
</div>
<div className="Chain-content-container">
<div className="Chain-content">
@@ -148,10 +131,11 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
// const location = [36.7183391, -4.5193071]as Types.NodeLocation; // Malaga
return (
<div
<span
key={node.id}
className="Chain-map-node"
style={this.pixelPosition(location[0], location[1])}
title={node.nodeDetails[0]}
data-location={JSON.stringify(node.location)}
/>
);
@@ -161,15 +145,6 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
);
}
private pixelPosition(lat: Types.Latitude, lon: Types.Longitude): { left: number, top: number } {
const { map } = this.state;
const left = Math.round(((lon + 180) / 360) * map.width + map.left) - 35;
const top = Math.round(((-lat + 90) / 180) * map.height + map.top) + 4;
return { left, top }
}
private renderTable() {
return (
<table className="Chain-node-list">
@@ -198,4 +173,38 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
private nodes() {
return Array.from(this.props.appState.nodes.values());
}
private pixelPosition(lat: Types.Latitude, lon: Types.Longitude): { left: number, top: number } {
const { map } = this.state;
const left = Math.round(((lon + 180) / 360) * map.width + map.left) - 35;
const top = Math.round(((-lat + 90) / 180) * map.height + map.top) + 4;
return { left, top }
}
private calculateMapDimensions: () => void = () => {
const vp = viewport();
vp.height -= HEADER;
const ratio = vp.width / vp.height;
let top = 0;
let left = 0;
let width = 0;
let height = 0;
if (ratio >= MAP_RATIO) {
width = Math.round(vp.height * MAP_RATIO);
height = Math.round(vp.height);
left = (vp.width - width) / 2;
} else {
width = Math.round(vp.width);
height = Math.round(vp.width / MAP_RATIO);
top = (vp.height - height) / 2;
}
this.setState({ map: { top, left, width, height }});
}
}