From 3aba471c0ae564cd02f37509649673846ea05321 Mon Sep 17 00:00:00 2001
From: Gautier Pelloux-Prayer <gautier+git@damsy.net>
Date: Thu, 9 May 2019 15:32:09 +0200
Subject: [PATCH] Add track name

---
 .prettierignore        |   3 +-
 index.html             | 186 ++++++++++++++++++++++++++++++++---------
 js/control/Download.js |  16 ----
 js/control/Export.js   | 114 +++++++++++++++++++++++++
 js/index.js            |  16 +---
 js/router/BRouter.js   |   4 +-
 locales/en.json        |  22 +++--
 7 files changed, 284 insertions(+), 77 deletions(-)
 delete mode 100644 js/control/Download.js
 create mode 100644 js/control/Export.js

diff --git a/.prettierignore b/.prettierignore
index 54d938a..788368c 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -6,4 +6,5 @@ yarn.lock
 .gitignore
 .prettierignore
 .tx/
-layers/
\ No newline at end of file
+layers/
+locales/*.json
\ No newline at end of file
diff --git a/index.html b/index.html
index 469275f..3c1ace7 100644
--- a/index.html
+++ b/index.html
@@ -89,9 +89,10 @@
                     </form>
                     <div class="nav-item dropdown">
                         <a
-                            class="nav-link dropdown-toggle"
-                            href=""
-                            data-toggle="dropdown"
+                            class="nav-link"
+                            data-toggle="modal"
+                            data-target="#export"
+                            id="exportButton"
                             href="#"
                             role="button"
                             aria-haspopup="true"
@@ -102,44 +103,8 @@
                                 aria-hidden="true"
                             >
                             </span>
-                            <span data-i18n="navbar.download.title"
-                                >Download</span
-                            >
+                            <span data-i18n="navbar.export">Export</span>
                         </a>
-                        <div class="dropdown-menu">
-                            <a
-                                class="dropdown-item"
-                                data-i18n="navbar.download.gpx"
-                                id="dl-gpx"
-                                href="#"
-                                disabled
-                                >GPX</a
-                            >
-                            <a
-                                class="dropdown-item"
-                                data-i18n="navbar.download.kml"
-                                id="dl-kml"
-                                href="#"
-                                disabled
-                                >KML</a
-                            >
-                            <a
-                                class="dropdown-item"
-                                data-i18n="navbar.download.geojson"
-                                id="dl-geojson"
-                                href="#"
-                                disabled
-                                >GeoJSON</a
-                            >
-                            <a
-                                class="dropdown-item"
-                                data-i18n="navbar.download.csv"
-                                id="dl-csv"
-                                href="#"
-                                disabled
-                                >data CSV</a
-                            >
-                        </div>
                     </div>
                     <div class="nav-item dropdown">
                         <a
@@ -569,6 +534,147 @@
             </div>
         </div>
 
+        <!-- Export modal window -->
+        <div
+            class="modal fade"
+            id="export"
+            tabindex="-1"
+            role="dialog"
+            aria-labelledby="Export route window"
+            aria-hidden="true"
+        >
+            <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button
+                            type="button"
+                            class="close"
+                            data-dismiss="modal"
+                            aria-label="Close"
+                        >
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                        <h4 class="modal-title" data-i18n="export.title">
+                            Export route
+                        </h4>
+                    </div>
+                    <div class="modal-body">
+                        <form name="export">
+                            <div class="form-group row">
+                                <label
+                                    class="col-form-label col-sm-2"
+                                    data-i18n="export.trackname"
+                                    >Name</label
+                                >
+                                <div class="col-sm-10">
+                                    <input
+                                        type="text"
+                                        class="form-control"
+                                        id="trackname"
+                                    />
+                                </div>
+                            </div>
+                            <fieldset class="form-group row">
+                                <legend
+                                    class="col-form-legend col-sm-2"
+                                    data-i18n="export.format"
+                                >
+                                    Format
+                                </legend>
+                                <div class="col-sm-10">
+                                    <div class="form-check">
+                                        <label class="form-check-label">
+                                            <input
+                                                class="form-check-input"
+                                                id="format-gpx"
+                                                type="radio"
+                                                name="format"
+                                                value="gpx"
+                                                checked
+                                            />
+                                            <span data-i18n="export.format_gpx"
+                                                >GPX</span
+                                            >
+                                        </label>
+                                    </div>
+                                    <div class="form-check">
+                                        <label
+                                            class="form-check-label"
+                                            for="format-kml"
+                                        >
+                                            <input
+                                                class="form-check-input"
+                                                id="format-kml"
+                                                type="radio"
+                                                name="format"
+                                                value="kml"
+                                            />
+                                            <span data-i18n="export.format_kml"
+                                                >KML</span
+                                            >
+                                        </label>
+                                    </div>
+                                    <div class="form-check">
+                                        <label
+                                            class="form-check-label"
+                                            for="format-geojson"
+                                        >
+                                            <input
+                                                class="form-check-input"
+                                                id="format-geojson"
+                                                type="radio"
+                                                name="format"
+                                                value="geojson"
+                                            />
+                                            <span
+                                                data-i18n="export.format_geojson"
+                                                >GeoJSON</span
+                                            >
+                                        </label>
+                                    </div>
+                                    <div class="form-check">
+                                        <label
+                                            class="form-check-label"
+                                            for="format-csv"
+                                        >
+                                            <input
+                                                class="form-check-input"
+                                                id="format-csv"
+                                                type="radio"
+                                                name="format"
+                                                value="csv"
+                                            />
+                                            <span data-i18n="export.format_csv"
+                                                >CSV</span
+                                            >
+                                        </label>
+                                    </div>
+                                </div>
+                            </fieldset>
+                            <div class="modal-footer">
+                                <button
+                                    type="button"
+                                    class="btn btn-secondary"
+                                    data-i18n="[value]modal.close"
+                                    data-dismiss="modal"
+                                >
+                                    Close
+                                </button>
+                                <button
+                                    type="button"
+                                    class="btn btn-primary"
+                                    data-i18n="[value]export.title"
+                                    id="submitExport"
+                                >
+                                    Export route
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <div id="content" class="flexcolumn flexgrow">
             <div id="sidebarTabs" class="leaflet-sidebar-tabs collapsed">
                 <ul role="tablist">
diff --git a/js/control/Download.js b/js/control/Download.js
deleted file mode 100644
index 4097c66..0000000
--- a/js/control/Download.js
+++ /dev/null
@@ -1,16 +0,0 @@
-BR.Download = L.Class.extend({
-    update: function(urls) {
-        if (urls) {
-            ['gpx', 'kml', 'geojson', 'csv'].forEach(function(e, i, a) {
-                var a = L.DomUtil.get('dl-' + e);
-                a.setAttribute('href', urls[e]);
-                a.setAttribute('download', 'brouter.' + e);
-                a.removeAttribute('disabled');
-            });
-        }
-    }
-});
-
-BR.download = function() {
-    return new BR.Download();
-};
diff --git a/js/control/Export.js b/js/control/Export.js
new file mode 100644
index 0000000..c1ccde5
--- /dev/null
+++ b/js/control/Export.js
@@ -0,0 +1,114 @@
+BR.Export = L.Class.extend({
+    latLngs: [],
+
+    initialize: function(router) {
+        this.router = router;
+        this.exportButton = $('#exportButton');
+
+        this.exportButton.on('click', L.bind(this._generateTrackname, this));
+        L.DomUtil.get('submitExport').onclick = L.bind(this._export, this);
+
+        this.update([]);
+    },
+
+    update: function(latLngs) {
+        this.latLngs = latLngs;
+
+        if (latLngs.length < 2) {
+            this.exportButton.addClass('disabled');
+        } else {
+            this.exportButton.removeClass('disabled');
+        }
+    },
+
+    _export: function() {
+        var exportForm = document.forms['export'];
+        var format = exportForm['format'].value;
+        var name = encodeURIComponent(exportForm['trackname'].value);
+
+        var uri = this.router.getUrl(this.latLngs, format, name);
+
+        var evt = document.createEvent('MouseEvents');
+        evt.initMouseEvent(
+            'click',
+            true,
+            true,
+            window,
+            0,
+            0,
+            0,
+            0,
+            0,
+            false,
+            false,
+            false,
+            false,
+            0,
+            null
+        );
+        var link = document.createElement('a');
+        link.download = name + '.' + format;
+        link.href = uri;
+        link.dispatchEvent(evt);
+    },
+
+    _generateTrackname: function() {
+        var trackname = document.getElementById('trackname');
+        this._getCityAtPosition(
+            this.latLngs[0],
+            L.bind(function(from) {
+                this._getCityAtPosition(
+                    this.latLngs[this.latLngs.length - 1],
+                    L.bind(function(to) {
+                        var distance = document.getElementById('distance')
+                            .innerHTML;
+                        if (!from || !to) {
+                            trackname.value = null;
+                        } else if (from === to) {
+                            trackname.value = i18next.t('export.route-loop', {
+                                from,
+                                distance
+                            });
+                        } else {
+                            trackname.value = i18next.t(
+                                'export.route-from-to',
+                                { from, to, distance }
+                            );
+                        }
+                    }, this)
+                );
+            }, this)
+        );
+    },
+
+    _getCityAtPosition: function(lonlat, cb) {
+        var url = L.Util.template(
+            'https://nominatim.openstreetmap.org/reverse?lon={lng}&lat={lat}&format=json',
+            lonlat
+        );
+        BR.Util.get(
+            url,
+            L.bind(function(err, response) {
+                try {
+                    var addr = JSON.parse(response).address;
+                    cb(
+                        addr.village ||
+                            addr.town ||
+                            addr.hamlet ||
+                            addr.city_district ||
+                            addr.city
+                    );
+                } catch (err) {
+                    BR.message.showError(
+                        'Error getting position city "' + lonlat + '": ' + err
+                    );
+                    return cb(null);
+                }
+            })
+        );
+    }
+});
+
+BR.export = function() {
+    return new BR.Export();
+};
diff --git a/js/index.js b/js/index.js
index 6c1df79..f9402bd 100644
--- a/js/index.js
+++ b/js/index.js
@@ -33,7 +33,7 @@
             stats,
             itinerary,
             elevation,
-            download,
+            exportRoute,
             profile,
             trackMessages,
             sidebar,
@@ -164,7 +164,7 @@
         } else {
             stats = new BR.TrackStats();
         }
-        download = new BR.Download();
+        exportRoute = new BR.Export(router);
         elevation = new BR.Elevation();
 
         profile = new BR.Profile();
@@ -240,8 +240,7 @@
             var track = routing.toPolyline(),
                 segments = routing.getSegments(),
                 latLngs = routing.getWaypoints(),
-                segmentsLayer = routing._segments,
-                urls = {};
+                segmentsLayer = routing._segments;
 
             elevation.update(track, segmentsLayer);
             if (BR.conf.transit) {
@@ -251,14 +250,7 @@
             }
             trackMessages.update(track, segments);
 
-            if (latLngs.length > 1) {
-                urls.gpx = router.getUrl(latLngs, 'gpx');
-                urls.kml = router.getUrl(latLngs, 'kml');
-                urls.geojson = router.getUrl(latLngs, 'geojson');
-                urls.csv = router.getUrl(latLngs, 'csv');
-            }
-
-            download.update(urls);
+            exportRoute.update(latLngs);
         }
 
         routing.addTo(map);
diff --git a/js/router/BRouter.js b/js/router/BRouter.js
index 2efa8a1..0d3e148 100644
--- a/js/router/BRouter.js
+++ b/js/router/BRouter.js
@@ -112,7 +112,7 @@ L.BRouter = L.Class.extend({
         return opts;
     },
 
-    getUrl: function(latLngs, format) {
+    getUrl: function(latLngs, format, trackname) {
         var urlParams = this.getUrlParams(latLngs, format);
 
         var args = [];
@@ -132,6 +132,8 @@ L.BRouter = L.Class.extend({
             );
         if (urlParams.format != null)
             args.push(L.Util.template('format={format}', urlParams));
+        if (trackname)
+            args.push(L.Util.template('trackname={trackname}', { trackname }));
 
         var prepend_host = format != null;
 
diff --git a/locales/en.json b/locales/en.json
index d71082a..c5afd80 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -21,6 +21,17 @@
     "nominatim": "Search by <a href=\"https://wiki.openstreetmap.org/wiki/Nominatim\" target=\"_blank\" data-i18n=\"credits.nominatim\">Nominatim</a>",
     "openstreetmap": "&copy; <a target=\"_blank\" href=\"https://www.openstreetmap.org/copyright\" >OpenStreetMap contributors</a> under <a target=\"_blank\" href=\"https://opendatacommons.org/licenses/odbl/\" >ODbL</a>"
   },
+  "export": {
+    "format": "Format",
+    "format_csv": "CSV",
+    "format_geojson": "GeoJSON",
+    "format_gpx": "GPX",
+    "format_kml": "KML",
+    "route-from-to": "{{from}} -> {{to}} ({{distance}}km)",
+    "route-loop": "{{from}} ({{distance}}km)",
+    "title": "Export route",
+    "trackname": "Name"
+  },
   "footer": {
     "ascend": "Ascend (Plain ascend)",
     "cost": "Cost (Mean cost factor)",
@@ -100,6 +111,9 @@
     "zoomInTitle": "Zoom in",
     "zoomOutTitle": "Zoom out"
   },
+  "modal": {
+    "close": "Close"
+  },
   "navbar": {
     "about": "About",
     "alternative": {
@@ -108,13 +122,7 @@
       "second": "2nd alternative",
       "third": "3rd alternative"
     },
-    "download": {
-      "csv": "data CSV",
-      "geojson": "GeoJSON",
-      "gpx": "GPX",
-      "kml": "KML",
-      "title": "Download"
-    },
+    "export": "Export",
     "load": {
       "nogos": "No-go areas",
       "title": "Load"