Fix frontend map and other fixes
This commit is contained in:
parent
58f07d139b
commit
54c5bdbcbc
5 changed files with 19 additions and 11 deletions
|
@ -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;
|
||||
|
Before Width: | Height: | Size: 171 KiB After Width: | Height: | Size: 171 KiB |
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue