Improve UX:- Make track non-clickable,- Make bat clickable to select …

…the track,- Add rollover text on bats.
vicb · Jul 15, 2020 · 0ae9bbf · 0ae9bbf
1 parent e5c3b15
commit 0ae9bbf
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/frontend/src/viewer/components/gm-line.ts b/frontend/src/viewer/components/gm-line.ts
@@ -1,4 +1,4 @@
-import { customElement, LitElement, property, PropertyValues } from 'lit-element';
+import { customElement, LitElement, property } from 'lit-element';
 
 import { RuntimeTrack } from '../../../../common/track';
 import { trackColor } from '../logic/map';
@@ -22,7 +22,7 @@ export class GmLineElement extends LitElement {
   line: google.maps.Polyline | null = null;
   maskLine: google.maps.Polyline | null = null;
 
-  shouldUpdate(changedProperties: PropertyValues): boolean {
+  shouldUpdate(): boolean {
     if (this.map && this.track) {
       const path: { lat: number; lng: number }[] = [];
       const track = this.track;
@@ -35,6 +35,7 @@ export class GmLineElement extends LitElement {
 
       if (!this.maskLine) {
         this.maskLine = new google.maps.Polyline({
+          clickable: false,
           map: this.map,
           strokeColor: '#fff',
           strokeOpacity: 0.6,
@@ -46,6 +47,7 @@ export class GmLineElement extends LitElement {
 
       if (!this.line) {
         this.line = new google.maps.Polyline({
+          clickable: false,
           map: this.map,
           strokeOpacity: 1.0,
           strokeWeight: 2,

diff --git a/frontend/src/viewer/components/gm-marker.ts b/frontend/src/viewer/components/gm-marker.ts
@@ -2,6 +2,7 @@ import { customElement, LitElement, property } from 'lit-element';
 import { connect } from 'pwa-helpers';
 
 import { RuntimeTrack } from '../../../../common/track';
+import { setCurrentTrack } from '../actions/map';
 import { trackColor } from '../logic/map';
 import { sampleAt } from '../logic/math';
 import { tsOffsets } from '../selectors/map';
@@ -38,16 +39,21 @@ export class GmMarkerElement extends connect(store)(LitElement) {
 
   shouldUpdate(): boolean {
     if (this.map && this.track) {
+      const track = this.track;
       if (!this.marker) {
         this.marker = new google.maps.Marker({
           map: this.map,
-          clickable: false,
+          clickable: true,
+          title: track.name,
+        });
+        google.maps.event.addListener(this.marker, 'click', () => {
+          store.dispatch(setCurrentTrack(this.index));
         });
       }
-      const track = this.track;
-      const lat = sampleAt(track.fixes.ts, track.fixes.lat, [this.timestamp + this.tsOffsets[this.index]])[0];
-      const lon = sampleAt(track.fixes.ts, track.fixes.lon, [this.timestamp + this.tsOffsets[this.index]])[0];
-      const alt = sampleAt(track.fixes.ts, track.fixes.alt, [this.timestamp + this.tsOffsets[this.index]])[0];
+      const timestamp = this.timestamp + this.tsOffsets[this.index];
+      const lat = sampleAt(track.fixes.ts, track.fixes.lat, [timestamp])[0];
+      const lon = sampleAt(track.fixes.ts, track.fixes.lon, [timestamp])[0];
+      const alt = sampleAt(track.fixes.ts, track.fixes.alt, [timestamp])[0];
       const scale = (50 * (alt - track.minAlt)) / (track.maxAlt - track.minAlt) + 20;
       this.marker.setPosition({ lat, lng: lon });
       this.marker.setIcon({