WIP: Almost all functionality of Map rewritten

src/Map.vue

@@ -8,21 +8,26 @@
         <vl-layer-vector v-for="(gpxURL, name) in routes" :key="name">
           <vl-source-vector :url="gpxURL" :format-factory="gpxFormatFactory">
           </vl-source-vector>
+          <vl-style-box>
+            <vl-style-stroke color="hsl(200, 90%, 30%)" :width="5">
+            </vl-style-stroke>
+          </vl-style-box>
         </vl-layer-vector>
-        <vl-style-stroke color="hsl(200, 90%, 30%)" :width="5">
-        </vl-style-stroke>
       </vl-layer-group>
 
+      <!-- Station Paths -->
       <vl-layer-group>
         <vl-layer-group
-          v-for="(packets, callsign, idx) in paths"
+          v-for="(packets, callsign, idx) in stationPaths"
           :key="callsign"
         >
           <!--Paths -->
           <vl-layer-vector>
             <vl-source-vector>
               <vl-feature>
-                <vl-geom-line-string :coordinates="packetsToPoints(packets)">
+                <vl-geom-line-string
+                  :coordinates="packetsToStationPathPoints(packets)"
+                >
                 </vl-geom-line-string>
               </vl-feature>
             </vl-source-vector>
@@ -36,7 +41,9 @@
           <vl-layer-vector>
             <vl-source-vector>
               <vl-feature>
-                <vl-geom-multi-point :coordinates="packetsToPoints(packets)">
+                <vl-geom-multi-point
+                  :coordinates="packetsToStationPathPoints(packets)"
+                >
                 </vl-geom-multi-point>
               </vl-feature>
             </vl-source-vector>
@@ -49,6 +56,49 @@
           </vl-layer-vector>
         </vl-layer-group>
       </vl-layer-group>
+
+      <!-- Digipeater locations -->
+      <vl-layer-vector>
+        <vl-source-vector>
+          <vl-feature v-for="(position, callsign) in digiPos" :key="callsign">
+            <vl-geom-point :coordinates="position"> </vl-geom-point>
+            <vl-style-box>
+              <vl-style-circle>
+                <vl-style-fill :color="digiColors[callsign].hex()">
+                </vl-style-fill
+              ></vl-style-circle>
+              <vl-style-text :text="callsign" :offsetY="12"> </vl-style-text>
+            </vl-style-box>
+          </vl-feature>
+        </vl-source-vector>
+      </vl-layer-vector>
+
+      <!-- Packet Paths -->
+      <vl-layer-group>
+        <vl-layer-group
+          v-for="(pkts, callsign) in stationPaths"
+          :key="callsign"
+        >
+          <!--Paths -->
+          <vl-layer-vector render-mode="image">
+            <vl-source-vector>
+              <template v-for="packet in pkts">
+                <vl-feature
+                  v-for="[coords, digi] in packetToPacketPathPoints(packet)"
+                  :key="digi"
+                >
+                  <vl-geom-line-string :coordinates="coords">
+                  </vl-geom-line-string>
+                  <vl-style-box>
+                    <vl-style-stroke :color="colorForDigi(digi)">
+                    </vl-style-stroke>
+                  </vl-style-box>
+                </vl-feature>
+              </template>
+            </vl-source-vector>
+          </vl-layer-vector>
+        </vl-layer-group>
+      </vl-layer-group>
     </vl-view>
   </vl-map>
 </template>
@@ -98,16 +148,60 @@ export default {
       return new GPX(options);
     },
 
-    packetsToPoints(packets) {
+    packetsToStationPathPoints(packets) {
       return packets.map(packet => [
         packet.data.longitude,
         packet.data.latitude
       ]);
+    },
+
+    packetToPacketPathPoints(packet) {
+      return this.pathToString(packet.via).map((hop, index, hops) => {
+        if (this.digiPos[hop] === undefined) {
+          console.log(hop);
+        }
+
+        // first point in path is originating station
+        let previous =
+          index === 0
+            ? [packet.data.longitude, packet.data.latitude]
+            : this.digiPos[hops[index - 1]] || [0, 0];
+
+        return [[previous, this.digiPos[hop] || [0, 0]], hop];
+      });
+    },
+
+    pathToString(path) {
+      return path
+        .filter(
+          station => !station.call.match(/WIDE[12]|qA?|UV[123]|.*\*$|UNCAN/)
+        )
+        .map(station =>
+          station
+            .toString()
+            .trim()
+            .replace(/\*$/, "")
+        );
+    },
+
+    groupByCall(acc, packet) {
+      let callsign = packet.from.toString().trim();
+      if (!(callsign in acc)) acc[callsign] = [];
+      acc[callsign].push(packet);
+      return acc;
+    },
+
+    colorForDigi(digi) {
+      if (digi in this.digiColors) {
+        return this.digiColors[digi].hex();
+      } else {
+        return "black";
+      }
     }
   },
 
   computed: {
-    paths() {
+    stationPaths() {
       return (
         this.packets
           .filter(
@@ -117,22 +211,55 @@ export default {
           )
           // filter to just positional data
           .filter(packet => "data" in packet && "latitude" in packet.data)
-          // join into Arrays of points
-          .reduce((acc, packet) => {
-            let callsign = packet.from.toString().trim();
-            if (!(callsign in acc)) acc[callsign] = [];
-            acc[callsign].push(packet);
-            return acc;
-          }, {})
+          // group by callsign
+          .reduce(this.groupByCall, {})
       );
     },
 
+    digis() {
+      let digiCalls = new Set(
+        this.packets
+          .map(packet => this.pathToString(packet.via))
+          .reduce((acc, stations) => acc.concat(stations))
+      );
+
+      return (
+        this.packets
+          // filter to digis
+          .filter(packet => digiCalls.has(packet.from.toString().trim()))
+          // filter to just positional data
+          .filter(packet => "data" in packet && "latitude" in packet.data)
+          // group by call
+          .reduce(this.groupByCall, {})
+      );
+    },
+
+    digiPos() {
+      return Object.entries(this.digis).reduce((acc, [digi, packets]) => {
+        let lastPacket = packets[packets.length - 1];
+        acc[digi] = [lastPacket.data.longitude, lastPacket.data.latitude];
+        return acc;
+      }, {});
+    },
+
     stationColors() {
       return distinctColors({
-        count: Object.keys(this.paths).length,
+        count: Object.keys(this.stationPaths).length,
         lightMin: 20,
         lightMax: 80
       });
+    },
+
+    digiColors() {
+      let colors = distinctColors({
+        count: Object.keys(this.digis).length,
+        lightMin: 20,
+        lightMax: 80
+      });
+      return Object.keys(this.digis).reduce((acc, callsign, index) => {
+        acc[callsign] = colors[index];
+        return acc;
+      }, {});
     }
   }
 };