changed to leaflet for real map

Signed-off-by: Pascal Syma <pascal@syma.dev>

src/Line.ts

@@ -3,25 +3,30 @@
  * All rights reserved.
  */
 
+import {LatLng, Map, Polyline} from "leaflet";
 import Stop from "./Stop";
 import Coordinate from "./Coordinate";
 
 export default class Line {
-    readonly name: String;
+    readonly map: Map;
+    readonly name: string;
     readonly stops: Stop[] = [];
+    readonly ends: string[] = [];
 
     readonly breaks: number[] = [];
     readonly stopBreaks: number[] = [];
+    readonly endBreaks: number[] = [];
     readonly duration: number = 0;
     readonly coords: Coordinate[];
     readonly color: string = '#000';
 
-    constructor(name: String, stops: string, color: string) {
+    constructor(map: Map, name: string, stops: string, color: string) {
+        this.map = map;
         this.color = color
         this.name = name;
         let coords = stops.split("\n").map(e => {
             let a = e.split(',');
-            return a.length > 2 ? new Stop(Number.parseFloat(a[0]), Number.parseFloat(a[1]), Number.parseFloat(a[2]), a[3]) : new Coordinate(Number.parseFloat(a[0]), Number.parseFloat(a[1]));
+            return a.length > 2 ? new Stop(Number.parseFloat(a[0]), Number.parseFloat(a[1]), Number.parseFloat(a[2]), a[3], a.length === 5 ? a[4] : null) : new Coordinate(Number.parseFloat(a[0]), Number.parseFloat(a[1]));
         });
         this.coords = coords;
 
@@ -33,6 +38,10 @@ export default class Line {
                 let stop = <Stop>coords[i];
                 this.stops.push(stop)
                 this.stopBreaks.push(stop.minute)
+                if (stop.end) {
+                    this.endBreaks.push(stop.minute)
+                    this.ends.push(stop.end)
+                }
 
                 const td = stop.minute - lastStop.minute
                 if (coords[i - 1])
@@ -55,32 +64,49 @@ export default class Line {
         this.duration = lastStop.minute
     }
 
-    draw(ctx: CanvasRenderingContext2D) {
-        let last: Coordinate = null;
-        this.coords.forEach(c => {
-            ctx.beginPath()
-            ctx.textAlign = "center";
-            if (c instanceof Stop) {
-                let stop: Stop = c;
-                ctx.arc(c.x, c.y, 5, 0, 2 * Math.PI);
-                ctx.strokeStyle = this.color
-                ctx.fillStyle = '#000'
-                ctx.fillText(stop.name, c.x, c.y - 10);
-            }
-            ctx.stroke()
-            ctx.closePath()
-            if (last) {
-                ctx.beginPath()
-                ctx.moveTo(last.x, last.y)
-                ctx.lineWidth = 3;
-                ctx.lineTo(c.x, c.y)
-                ctx.strokeStyle = this.color
-                ctx.stroke()
-                ctx.closePath()
-            }
-            last = c;
-        })
+    drawStops(show: boolean = true) {
+        if (show) {
+            this.stops.forEach(s => s.marker.addTo(this.map))
+        } else {
+            this.stops.forEach(s => s.marker.removeFrom(this.map))
+        }
+    }
 
+    draw() {
+        let pointList = this.coords.map(c => new LatLng(c.x, c.y));
+        new Polyline(pointList, {
+            color: this.color,
+            weight: 5,
+            // opacity: 0.7
+        }).addTo(this.map)
+        this.stops.forEach(s => {
+            // if (s.isEnd)
+            //     new Popup().setLatLng([s.x, s.y]).setContent(this.name + ' - ' + s.name).openOn(this.map)
+        })
+        // let last: Coordinate = null;
+        // this.coords.forEach(c => {
+        //     ctx.beginPath()
+        //     ctx.textAlign = "center";
+        //     if (c instanceof Stop) {
+        //         let stop: Stop = c;
+        //         ctx.arc(c.x, c.y, 5, 0, 2 * Math.PI);
+        //         ctx.strokeStyle = this.color
+        //         ctx.fillStyle = '#000'
+        //         ctx.fillText(stop.name, c.x, c.y - 10);
+        //     }
+        //     ctx.stroke()
+        //     ctx.closePath()
+        //     if (last) {
+        //         ctx.beginPath()
+        //         ctx.moveTo(last.x, last.y)
+        //         ctx.lineWidth = 3;
+        //         ctx.lineTo(c.x, c.y)
+        //         ctx.strokeStyle = this.color
+        //         ctx.stroke()
+        //         ctx.closePath()
+        //     }
+        //     last = c;
+        // })
     }