nicd/tilastokeskus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix frontend map and other fixes

Browse source
This commit is contained in:
Mikko Ahlroth 2020-04-03 20:56:37 +03:00
parent 58f07d139b
commit 54c5bdbcbc
5 changed files with 19 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/style.css → frontend/assets/style.css
View file

@ -80,13 +80,14 @@ table td {
}
#world-map img {
display: block;
width: 100%;
}
#world-map .spot {
width: 10px;
height: 10px;
border-radius: 10px;
width: 7px;
height: 7px;
border-radius: 7px;
background-color: var(--alert-color);
opacity: 1;

0
frontend/src/world-map.png → frontend/assets/world-map.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 171 KiB

After

Width:  |  Height:  |  Size: 171 KiB

2
frontend/index.html
View file

@ -4,7 +4,7 @@
<head>
<meta charset="utf-8" />
<title>Tilastokeskus</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="assets/style.css" />
</head>
<body>

4
frontend/src/archive-client.ts
View file

@ -1,4 +1,4 @@
const ARCHIVE_BASE_URL = "/live";
const ARCHIVE_BASE_URL = "<%= SERVER_PATH %>";
const PAGE_VIEW_EVENT = "view";
@ -25,7 +25,7 @@ export function connectListener(
openCallback(source, e);
});
source.addEventListener("view", (e: Event): void => {
source.addEventListener(PAGE_VIEW_EVENT, (e: Event): void => {
msgCallback(source, e as MessageEvent);
});

15
frontend/src/world-map.ts
View file

@ -17,11 +17,12 @@ export class WorldMap extends Component {
const img = document.createElement("img");
img.alt = "World map";
img.src = "src/world-map.png";
img.src = "assets/world-map.png";
img.id = "world-map";
el.append(img);
setInterval(() => this.render(), 1);
setInterval(() => this.render(), SPOT_UPDATE_INTERVAL * 1000);
}
public handleView(view: IPageView) {
@ -38,8 +39,10 @@ export class WorldMap extends Component {
spot.className = "spot";
spot.title = (view.loc_city ? `${view.loc_city}, ` : "") + `${view.loc_country} (${view.session})`;
spot.style.bottom = `${(view.loc_lat + 90) / 180 * 100}%`;
spot.style.top = `${100 - ((view.loc_lat + 90) / 180 * 100)}%`;
spot.style.left = `${(view.loc_lon + 180) / 360 * 100}%`;
spot.style.transform = "translate(-50%, -50%)";
spot.style.opacity = String(this.spotLife(Date.now(), view.at.getTime()));
this.el.append(spot);
this.spots.set(view.session, [spot, view.at]);
@ -49,7 +52,7 @@ export class WorldMap extends Component {
public render() {
const now = Date.now();
for (const [session, [el, at]] of this.spots.entries()) {
const life = 1 - ((now - at.getTime()) / (SPOT_LIFETIME * 1000));
const life = this.spotLife(now, at.getTime());
if (life <= 0) {
this.el.removeChild(el);
@ -59,4 +62,8 @@ export class WorldMap extends Component {
}
}
}
private spotLife(now: number, spotDate: number) {
return 1 - ((now - spotDate) / (SPOT_LIFETIME * 1000));
}
}