Merge pull request #132 from openplannerteam/dev

npm version from master
openplannerteam · Oct 4, 2019 · ac550dc · ac550dc
2 parents bcd833e + 77119bb
commit ac550dc
Show file tree

Hide file tree

Showing 190 changed files with 11,658 additions and 5,870 deletions.
diff --git a/.gitignore b/.gitignore
@@ -7,3 +7,4 @@ stats.json
 lib
 docs/code/*
 docs/js/planner*
+distances
diff --git a/README.md b/README.md
@@ -9,37 +9,41 @@ $ npm install plannerjs
 Include it in the browser:
 ```html
 <script src="https://planner.js.org/js/planner-latest.js"></script>
+
+...
+
+<script>
+  const { BasicTrainPlanner, Units } = PlannerJS;
+</script>
 ```
 
 Include it in your JavaScript project:
 ```javascript
-const Planner = require('plannerjs').default;
+const { BasicTrainPlanner, Units } = require('plannerjs');
 
 // or
 
-import Planner              from 'plannerjs';
+import { BasicTrainPlanner, Units } from 'plannerjs';
 ```
 
 Use it in both environments:
 ```javascript
-const planner = new Planner();
+const planner = new BasicTrainPlanner();
 
 planner.query({
   from: "http://irail.be/stations/NMBS/008812005", // Brussels North
   to: "http://irail.be/stations/NMBS/008892007", // Ghent-Sint-Pieters
-  minimumDepartureTime: new Date("Mon Feb 11 2019 16:00:00"),
-  maximumArrivalTime: new Date("Mon Feb 11 2019 19:00:00"),
-  publicTransportOnly: true,
+  minimumDepartureTime: new Date(),
 
   walkingSpeed: 3, // KmH
   minimumWalkingSpeed: 3, // KmH
 
   maximumWalkingDistance: 200, // meters
 
-  minimumTransferDuration: Planner.Units.fromMinutes(1),
-  maximumTransferDuration: Planner.Units.fromMinutes(30),
+  minimumTransferDuration: Units.fromMinutes(1),
+  maximumTransferDuration: Units.fromMinutes(30),
 
-  maximumTravelDuration: Planner.Units.fromHours(1.5),
+  maximumTravelDuration: Units.fromHours(1.5),
 
   maximumTransfers: 4,
 })

diff --git a/docs/css/style.css b/docs/css/style.css
@@ -1,10 +1,86 @@
-html,
-body {
+html, body {
     margin: 0;
     height: 100%;
     width: 100%;
 }
 
+#optionsBar {
+    position: absolute;
+    text-align: center;
+    width: 100%;
+    background-color: white;
+    z-index: 900;
+}
+
+#optionsBar .optionLabel {
+    font-size: 19px;
+    font-family: sans-serif;
+    vertical-align: middle;
+    top: 6px;
+    position: relative;
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+input:checked+.slider {
+    background-color: #2196F3;
+}
+
+input:focus+.slider {
+    box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked+.slider:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+}
+
+/* Rounded sliders */
+
+.slider.round {
+    border-radius: 34px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}
+
 #mapid {
     height: 100%;
 }
@@ -23,7 +99,7 @@ body {
     width: 500px;
 }
 
-#results > .path {
+#results>.path {
     margin: 10px;
     background: rgba(255, 255, 255, .8);
     border: 1px solid #ccc;
@@ -33,14 +109,14 @@ body {
     flex-wrap: wrap;
 }
 
-#results > .path > .header {
+#results>.path>.header {
     padding: 10px;
-    background: rgba(0, 0, 0, .25);
+    background: rgba(0, 0, 0, .7);
     color: #fff;
     text-shadow: 0 0 1px black;
 }
 
-#results > .path > .step {
+#results>.path>.step {
     display: flex;
     flex-direction: row;
     margin: 10px;
@@ -53,7 +129,10 @@ body {
     background-repeat: no-repeat;
 }
 
-.details {
+.details {}
+
+.travelMode.profile {
+    background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJ3YWxraW5nIiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtd2Fsa2luZyBmYS13LTEwIiByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDMyMCA1MTIiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTIwOCA5NmMyNi41IDAgNDgtMjEuNSA0OC00OFMyMzQuNSAwIDIwOCAwcy00OCAyMS41LTQ4IDQ4IDIxLjUgNDggNDggNDh6bTk0LjUgMTQ5LjFsLTIzLjMtMTEuOC05LjctMjkuNGMtMTQuNy00NC42LTU1LjctNzUuOC0xMDIuMi03NS45LTM2LS4xLTU1LjkgMTAuMS05My4zIDI1LjItMjEuNiA4LjctMzkuMyAyNS4yLTQ5LjcgNDYuMkwxNy42IDIxM2MtNy44IDE1LjgtMS41IDM1IDE0LjIgNDIuOSAxNS42IDcuOSAzNC42IDEuNSA0Mi41LTE0LjNMODEgMjI4YzMuNS03IDkuMy0xMi41IDE2LjUtMTUuNGwyNi44LTEwLjgtMTUuMiA2MC43Yy01LjIgMjAuOC40IDQyLjkgMTQuOSA1OC44bDU5LjkgNjUuNGM3LjIgNy45IDEyLjMgMTcuNCAxNC45IDI3LjdsMTguMyA3My4zYzQuMyAxNy4xIDIxLjcgMjcuNiAzOC44IDIzLjMgMTcuMS00LjMgMjcuNi0yMS43IDIzLjMtMzguOGwtMjIuMi04OWMtMi42LTEwLjMtNy43LTE5LjktMTQuOS0yNy43bC00NS41LTQ5LjcgMTcuMi02OC43IDUuNSAxNi41YzUuMyAxNi4xIDE2LjcgMjkuNCAzMS43IDM3bDIzLjMgMTEuOGMxNS42IDcuOSAzNC42IDEuNSA0Mi41LTE0LjMgNy43LTE1LjcgMS40LTM1LjEtMTQuMy00M3pNNzMuNiAzODUuOGMtMy4yIDguMS04IDE1LjQtMTQuMiAyMS41bC01MCA1MC4xYy0xMi41IDEyLjUtMTIuNSAzMi44IDAgNDUuM3MzMi43IDEyLjUgNDUuMiAwbDU5LjQtNTkuNGM2LjEtNi4xIDEwLjktMTMuNCAxNC4yLTIxLjVsMTMuNS0zMy44Yy01NS4zLTYwLjMtMzguNy00MS44LTQ3LjQtNTMuN2wtMjAuNyA1MS41eiI+PC9wYXRoPjwvc3ZnPg==);
 }
 
 .travelMode.walking {
@@ -68,24 +147,18 @@ body {
     background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJidXMiIGNsYXNzPSJzdmctaW5saW5lLS1mYSBmYS1idXMgZmEtdy0xNiIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik00ODggMTI4aC04VjgwYzAtNDQuOC05OS4yLTgwLTIyNC04MFMzMiAzNS4yIDMyIDgwdjQ4aC04Yy0xMy4yNSAwLTI0IDEwLjc0LTI0IDI0djgwYzAgMTMuMjUgMTAuNzUgMjQgMjQgMjRoOHYxNjBjMCAxNy42NyAxNC4zMyAzMiAzMiAzMnYzMmMwIDE3LjY3IDE0LjMzIDMyIDMyIDMyaDMyYzE3LjY3IDAgMzItMTQuMzMgMzItMzJ2LTMyaDE5MnYzMmMwIDE3LjY3IDE0LjMzIDMyIDMyIDMyaDMyYzE3LjY3IDAgMzItMTQuMzMgMzItMzJ2LTMyaDYuNGMxNiAwIDI1LjYtMTIuOCAyNS42LTI1LjZWMjU2aDhjMTMuMjUgMCAyNC0xMC43NSAyNC0yNHYtODBjMC0xMy4yNi0xMC43NS0yNC0yNC0yNHpNMTEyIDQwMGMtMTcuNjcgMC0zMi0xNC4zMy0zMi0zMnMxNC4zMy0zMiAzMi0zMiAzMiAxNC4zMyAzMiAzMi0xNC4zMyAzMi0zMiAzMnptMTYtMTEyYy0xNy42NyAwLTMyLTE0LjMzLTMyLTMyVjEyOGMwLTE3LjY3IDE0LjMzLTMyIDMyLTMyaDI1NmMxNy42NyAwIDMyIDE0LjMzIDMyIDMydjEyOGMwIDE3LjY3LTE0LjMzIDMyLTMyIDMySDEyOHptMjcyIDExMmMtMTcuNjcgMC0zMi0xNC4zMy0zMi0zMnMxNC4zMy0zMiAzMi0zMiAzMiAxNC4zMyAzMiAzMi0xNC4zMyAzMi0zMiAzMnoiPjwvcGF0aD48L3N2Zz4=);
 }
 
-.duration {
-    margin-bottom: 5px;
-    margin-top: 5px;
-}
-
-.enterConnectionId,
-.exitConnectionId {
+.enterConnectionId, .exitConnectionId {
     opacity: 0.5;
 }
 
 #actions {
     position: absolute;
-    top: 10px;
+    top: 41px;
     right: 10px;
     z-index: 500;
 }
 
-#actions > button {
+#actions>button {
     border-radius: 100px;
     background: rgba(255, 255, 255, .8);
     font-size: 2em;
@@ -94,7 +167,7 @@ body {
 
 #prefetch {
     position: absolute;
-    top: 10px;
+    top: 41px;
     left: 54px;
     max-width: calc(100% - 225px);
     z-index: 500;
@@ -123,3 +196,16 @@ body {
     max-width: 100%;
     overflow: hidden;
 }
+
+#loading {
+    display: none;
+    position: fixed;
+    z-index: 900;
+    left: 89%;
+    top: 80%;
+    width: 9%;
+}
+
+.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
+    top: 25px;
+}
diff --git a/docs/example.html b/docs/example.html
@@ -1,26 +1,38 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <title>Map</title>
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
-          integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
-          crossorigin=""/>
+        integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
+        crossorigin="" />
     <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
-            integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
-            crossorigin=""></script>
+        integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
+        crossorigin=""></script>
     <link rel="stylesheet" href="css/style.css">
 </head>
+
 <body>
-<div id="mapid"></div>
-<div id="results"></div>
-<div id="prefetch">
-    <div id="prefetch-bar" class="prefetch-view"></div>
-</div>
-<div id="actions">
-    <button id="reset">Reset</button>
-</div>
-<script src="js/planner-latest.js"></script>
-<script src="js/example.js"></script>
+    <div id="optionsBar">
+        <span class="optionLabel">Use Public Transport: </span>
+        <!-- Rounded switch -->
+        <label class="switch">
+            <input id="usePublicTransport" type="checkbox" checked>
+            <span class="slider round"></span>
+        </label>
+    </div>
+    <img id="loading" src="./img/rocket.gif">
+    <div id="mapid"></div>
+    <div id="results"></div>
+    <div id="prefetch">
+        <div id="prefetch-bar" class="prefetch-view"></div>
+    </div>
+    <div id="actions">
+        <button id="reset">Reset</button>
+    </div>
+    <script src="js/planner-latest.js"></script>
+    <script src="js/example.js"></script>
 </body>
-</html>
+
+</html>
diff --git a/docs/img/rocket.gif b/docs/img/rocket.gif
diff --git a/docs/index.html b/docs/index.html
@@ -2,9 +2,9 @@
 <head>
     <title>Doc Planner.js – The ultimate JavaScript route planning framework</title>
     <link href="code/assets/css/main.css" rel="stylesheet">
-    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/github.min.css">
-    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/languages/typescript.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/github.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/languages/typescript.min.js"></script>
     <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 </head>
 <body>
@@ -34,18 +34,12 @@ <h2>Getting Started</h2>
             </ul>
 
             <h2 id="demo">Demo</h2>
-            <p
-                    data-height="398"
-                    data-theme-id="light"
-                    data-slug-hash="bQZMoj"
-                    data-default-tab="js,result"
-                    data-user="maximtmartin"
-                    data-pen-title="Using the new JavaScript route planner (work in progress)"
-                    class="codepen"
-            >
-                See the Pen <a href="https://codepen.io/maximtmartin/pen/bQZMoj">Using the new JavaScript route
-                planner</a> on <a href="https://codepen.io">CodePen</a>.
-            </p>
+            <p class="codepen" data-height="398" data-theme-id="light" data-default-tab="js,result" data-user="julianrojas87" data-slug-hash="agYgGo" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Planner.js results NMBS">
+                <span>See the Pen <a href="https://codepen.io/julianrojas87/pen/agYgGo/">
+                Planner.js results NMBS</a> by Julian Rojas (<a href="https://codepen.io/julianrojas87">@julianrojas87</a>)
+                on <a href="https://codepen.io">CodePen</a>.</span>
+              </p>
+              <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
             <h2 id="architecture">Architecture</h2>
             <p>