Fix marker rotation and last update times (#179)

wtg · Oct 30, 2018 · d61764b · d61764b
1 parent 80623cc
commit d61764b
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 32 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@types/leaflet": "^1.2.10",
+    "@types/leaflet-rotatedmarker": "^0.2.1",
     "leaflet": "^1.3.4",
     "leaflet-rotatedmarker": "^0.2.0",
     "vue": "^2.5.17",

diff --git a/frontend/src/components/Public.vue b/frontend/src/components/Public.vue
@@ -133,7 +133,7 @@ export default Vue.extend({
         let legendstring = '';
         this.$store.state.Routes.forEach((route: Route) => {
           if (route.enabled) {
-            legendstring += `<li><img class="legend-icon" src=` + getMarkerString(route.color, 0) + `
+            legendstring += `<li><img class="legend-icon" src=` + getMarkerString(route.color) + `
 			      width="12" height="12"> ` +
             route.name;
           }

diff --git a/frontend/src/store.ts b/frontend/src/store.ts
@@ -45,7 +45,7 @@ const store: StoreOptions<StoreState> = {
         let found = false;
         for (let i = 0; i < updates.length; i++) {
           if (Number(vehicle.id) === Number(updates[i].vehicle_id)) {
-            vehicle.lastUpdate = new Date(updates[i].date) ;
+            vehicle.lastUpdate = new Date(updates[i].time);
             found = true;
             vehicle.speed = Number(updates[i].speed);
             vehicle.setRoute(undefined);

diff --git a/frontend/src/structures/leaflet/rotatedMarker.ts b/frontend/src/structures/leaflet/rotatedMarker.ts
@@ -1,5 +1,5 @@
 const icon: string = `<?xml version="1.0" encoding="UTF-8"?>
-<svg transform="rotate(HEADING)" width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>shuttle</title>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
@@ -10,6 +10,6 @@ const icon: string = `<?xml version="1.0" encoding="UTF-8"?>
     </g>
 </svg>`;
 
-export default function getMarkerString(color: string, angle: number) {
-    return 'data:image/svg+xml;base64,' + btoa(icon.replace('#33A7FF', color).replace('HEADING', String(angle)));
+export default function getMarkerString(color: string) {
+    return 'data:image/svg+xml;base64,' + btoa(icon.replace('#33A7FF', color));
 }
diff --git a/frontend/src/structures/update.ts b/frontend/src/structures/update.ts
@@ -6,10 +6,8 @@ export default interface Update {
     heading: number;
     speed: number;
     time: string;
-    date: string;
     status: string;
     created: string;
     route_id: number | null;
     vehicle_id: number;
-
 }
diff --git a/frontend/src/structures/vehicle.ts b/frontend/src/structures/vehicle.ts
@@ -2,6 +2,7 @@ import * as L from 'leaflet';
 import Route from '@/structures/route';
 import getMarkerString from '@/structures/leaflet/rotatedMarker';
 import getCardinalDirection from '@/structures/cardinalDirection';
+import 'leaflet-rotatedmarker';
 
 const ShuttleIcon = require('@/assets/shuttle.svg') as string;
 const maxMissedUpdatesBeforeHide = 5;
@@ -25,7 +26,7 @@ export default class Vehicle {
     public shownOnMap: boolean;
     public map: L.Map | undefined;
     public Route: Route | undefined;
-    public lastUpdate: Date;
+    public lastUpdate: Date | undefined;
 
     constructor(id: number, name: string, created: Date, updated: Date, enabled: boolean) {
         this.id = id;
@@ -40,26 +41,29 @@ export default class Vehicle {
         this.RouteID = null;
         this.marker = new L.Marker([this.lat, this.lng], {
             icon: L.icon({
-                iconUrl: getMarkerString('#FFF', this.heading),
-                iconSize:     [32, 32], // size of the icon
-                iconAnchor:   [16, 16], // point of the icon which will correspond to marker's location
-                popupAnchor:  [0, 0],   // point from which the popup should open relative to the iconAnchor
+                iconUrl: getMarkerString('#FFF'),
+                iconSize: [32, 32], // size of the icon
+                iconAnchor: [16, 16], // point of the icon which will correspond to marker's location
+                popupAnchor: [0, 0],   // point from which the popup should open relative to the iconAnchor
             }),
             zIndexOffset: 1000,
+            rotationOrigin: 'center',
         });
         this.shownOnMap = false;
         this.map = undefined;
         this.Route = undefined;
-        this.lastUpdate = new Date();
+        this.lastUpdate = undefined;
     }
 
     public getMessage(): string {
         const speed = Math.round(this.speed * 100) / 100;
-        const date = new Date(this.created);
         const direction = getCardinalDirection(this.heading + 45);
-        return `<b>` + this.name + `</b><br>` +
-            `Traveling ` + direction + ` at ` + speed + ` mph<br>` +
-            `as of ` + date.toLocaleTimeString();
+        let message = `<b>${this.name}</b><br>`
+            + `Traveling ${direction} at ${speed} mph`;
+        if (this.lastUpdate !== undefined) {
+            message += '<br>as of ' + this.lastUpdate.toLocaleTimeString();
+        }
+        return message;
     }
 
     public addToMap(map: L.Map) {
@@ -87,34 +91,28 @@ export default class Vehicle {
 
     public setHeading(heading: number) {
         this.heading = heading - 45;
-        if (this.Route) {
-            this.marker.setIcon(L.icon(({
-                iconUrl: getMarkerString(this.Route.color, this.heading),
-                rotationOrigin: 'center',
-            } as L.IconOptions)));
-        }
+        this.marker.setRotationAngle(this.heading);
         this.marker.bindPopup(this.getMessage());
-
     }
 
     public setRoute(r: Route | undefined) {
         if (r === undefined) {
             this.marker.setIcon(L.icon({
-                iconUrl: getMarkerString('#FFF', this.heading),
-                iconSize:     [32, 32], // size of the icon
-                iconAnchor:   [16, 16], // point of the icon which will correspond to marker's location
-                popupAnchor:  [0, 0],   // point from which the popup should open relative to the iconAnchor
+                iconUrl: getMarkerString('#FFF'),
+                iconSize: [32, 32], // size of the icon
+                iconAnchor: [16, 16], // point of the icon which will correspond to marker's location
+                popupAnchor: [0, 0],   // point from which the popup should open relative to the iconAnchor
             }));
 
             return;
         }
         this.Route = r;
         this.RouteID = r.id;
         this.marker.setIcon(L.icon({
-            iconUrl: getMarkerString(r.color, this.heading),
-            iconSize:     [32, 32], // size of the icon
-            iconAnchor:   [16, 16], // point of the icon which will correspond to marker's location
-            popupAnchor:  [0, 0],   // point from which the popup should open relative to the iconAnchor
+            iconUrl: getMarkerString(r.color),
+            iconSize: [32, 32], // size of the icon
+            iconAnchor: [16, 16], // point of the icon which will correspond to marker's location
+            popupAnchor: [0, 0],   // point from which the popup should open relative to the iconAnchor
         }));
         this.marker.bindPopup(this.getMessage());