diff --git a/.gitignore b/.gitignore index 1acc10c..0260fee 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,4 @@ bower_components/Leaflet.Elevation/* !bower_components/Leaflet.Elevation/dist/ !bower_components/Leaflet.Elevation/src/ nbproject/ +.idea/ diff --git a/css/style.css b/css/style.css index fe2854c..12cbc09 100644 --- a/css/style.css +++ b/css/style.css @@ -100,26 +100,53 @@ td { .leaflet-leftpane { left: 5px; - top: 7px; - bottom: 7px; + top: 7px; + bottom: 7px; - /* - height: 100%; - display:table; - */ - position: absolute; - z-index: 1000; - pointer-events: none; + position: absolute; + z-index: 1000; + pointer-events: none; } .leaflet-leftpane .leaflet-control { - margin: 3px 5px; - width: 370px; + margin: 3px 5px; + width: 370px; } -/* TODO hack to maximize last div, further table-row tests, check out flex box */ +/* Profile Control */ + .leaflet-leftpane .leaflet-control:last-child { position: absolute; top: 432px; bottom: 0px; -} \ No newline at end of file +} + +#profile_upload input { + position: absolute; + top: 6px; + right: 8px; +} + +/* http://snook.ca/archives/html_and_css/absolute-position-textarea */ +#textarea_container { + position: absolute; + top: 32px; + bottom: 6px; + left: 8px; + right: 8px; + +} +textarea { + width: 100%; + height: 100%; + box-sizing: border-box; + + font-size: 10px; + font-family: "Courier New", Courier, monospace; + line-height: 1.2em; + + background-color: rgba(255,255,255,0); +} +textarea:focus { + background-color: rgba(255,255,255,255); +} diff --git a/index.html b/index.html index 65bdec0..7a6e4e6 100644 --- a/index.html +++ b/index.html @@ -25,9 +25,9 @@
BRouter web  alpha1
'q' to cancel drawing, 'd' to enable drawing
- Web client for BRouter · - about · - GitHub · + Web client for BRouter · + about · + GitHub · contact
@@ -36,6 +36,7 @@ Profile: +
+ +
+ + diff --git a/js/control/Profile.js b/js/control/Profile.js index e87ffe1..71f60e9 100644 --- a/js/control/Profile.js +++ b/js/control/Profile.js @@ -1,11 +1,23 @@ BR.Profile = BR.Control.extend({ - options: { - heading: '' + options: { + heading: 'Profile', + divId: 'profile_div' }, onAdd: function (map) { - var container = BR.Control.prototype.onAdd.call(this, map); - container.innerHTML = " "; - return container; + L.DomUtil.get('profile_upload').onsubmit = L.bind(this._submit, this) + + return BR.Control.prototype.onAdd.call(this, map); + }, + + _submit: function(evt) { + var form = evt.target || evt.srcElement, + profile = document.profile_upload.profile.value; + + evt.preventDefault(); + + this.fire('update', { profileText: profile }); } }); + +BR.Profile.include(L.Mixin.Events); diff --git a/js/control/RoutingOptions.js b/js/control/RoutingOptions.js index 6030128..d755f18 100644 --- a/js/control/RoutingOptions.js +++ b/js/control/RoutingOptions.js @@ -19,14 +19,39 @@ BR.RoutingOptions = BR.Control.extend({ }, setOptions: function(options) { - if (options.profile) { - L.DomUtil.get('profile').value = options.profile; + var select, + profile = options.profile; + + if (profile) { + select = L.DomUtil.get('profile'); + select.value = profile; + + // profile got not selected = not in option values -> custom profile passed with permalink + if (select.value != profile) { + this.setCustomProfile(profile, true); + } + } if (options.alternative) { L.DomUtil.get('alternative').value = options.alternative; } }, + setCustomProfile: function(profile, noUpdate) { + var select, + option; + + select = L.DomUtil.get('profile'); + option = select.options[0] + option.value = profile; + select.value = profile; + option.disabled = false; + + if (!noUpdate) { + this.fire('update', {options: this.getOptions()}); + } + }, + _getChangeHandler: function() { return L.bind(function(evt) { this.fire('update', {options: this.getOptions()}); diff --git a/js/index.js b/js/index.js index dfdccc5..3aa4988 100644 --- a/js/index.js +++ b/js/index.js @@ -103,7 +103,7 @@ routingOptions.on('update', updateRoute); nogos = new BR.NogoAreas(); - nogos.on('update', updateRoute); + nogos.on('update', updateRoute); // initial option settings router.setOptions(nogos.getOptions()); @@ -113,6 +113,11 @@ download = new BR.Download(); elevation = new BR.Elevation(); profile = new BR.Profile(); + profile.on('update', function(evt) { + router.uploadProfile(evt.profileText, function(profile) { + routingOptions.setCustomProfile(profile); + }); + }); routing = new BR.Routing({routing: { router: L.bind(router.getRouteSegment, router) diff --git a/js/plugin/Permalink.Routing.js b/js/plugin/Permalink.Routing.js index 8c6a356..10f0f5d 100644 --- a/js/plugin/Permalink.Routing.js +++ b/js/plugin/Permalink.Routing.js @@ -46,7 +46,6 @@ L.Control.Permalink.include({ this.options.routing.on('waypoint:click', function(evt) { var r = evt.marker._routing; if (!r.prevMarker && ! r.nextMarker) { - console.log('delete last'); this._update_routing(evt); } }, this); diff --git a/js/router/BRouter.js b/js/router/BRouter.js index 6d384f3..c17c34f 100644 --- a/js/router/BRouter.js +++ b/js/router/BRouter.js @@ -1,7 +1,11 @@ + +BR.HOST = 'http://localhost:17777'; + L.BRouter = L.Class.extend({ statics: { - // http://localhost:17777/brouter?lonlats=1.1,1.2|2.1,2.2|3.1,3.2|4.1,4.2&nogos=-1.1,-1.2,1|-2.1,-2.2,2&profile=shortest&alternativeidx=1&format=kml - URL_TEMPLATE: 'http://localhost:17777/brouter?lonlats={lonlats}&nogos={nogos}&profile={profile}&alternativeidx={alternativeidx}&format={format}', + // /brouter?lonlats=1.1,1.2|2.1,2.2|3.1,3.2|4.1,4.2&nogos=-1.1,-1.2,1|-2.1,-2.2,2&profile=shortest&alternativeidx=1&format=kml + URL_TEMPLATE: BR.HOST + '/brouter?lonlats={lonlats}&nogos={nogos}&profile={profile}&alternativeidx={alternativeidx}&format={format}', + URL_PROFILE_UPLOAD: BR.HOST + '/brouter/profile', PRECISION: 6, NUMBER_SEPARATOR: ',', GROUP_SEPARATOR: '|' @@ -88,6 +92,26 @@ L.BRouter = L.Class.extend({ return this.getRoute([l1, l2], cb); }, + uploadProfile: function(profileText, cb) { + var xhr = new XMLHttpRequest(); + xhr.open('POST', L.BRouter.URL_PROFILE_UPLOAD, true); + xhr.onload = L.bind(this._handleProfileResponse, this, xhr, cb); + + // send profile text only, as text/plain;charset=UTF-8 + xhr.send(profileText); + }, + + _handleProfileResponse: function(xhr, cb) { + var profile; + + if (xhr.status === 200 && xhr.responseText && xhr.responseText.length > 0) { + // e.g. profileid=1400498280259 + profile = xhr.responseText.split('=')[1]; + + cb(profile); + } + }, + _getLonLatsString: function(latLngs) { var s = ''; for (var i = 0; i < latLngs.length; i++) {