profile upload (requires server update)

.gitignore

@@ -4,3 +4,4 @@ bower_components/Leaflet.Elevation/*
 !bower_components/Leaflet.Elevation/dist/
 !bower_components/Leaflet.Elevation/src/
 nbproject/
+.idea/

css/style.css

@@ -103,10 +103,6 @@ td {
     top: 7px;
     bottom: 7px;
 
-  /*
-  height: 100%;
-  display:table;
-  */
     position: absolute;
     z-index: 1000;
     pointer-events: none;
@@ -117,9 +113,40 @@ td {
     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;
 }
+
+#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);
+}

index.html

@@ -36,6 +36,7 @@
             <tr><td>Profile:</td>
                 <td><select id="profile">
                         <!-- sample profiles -->
+                        <option value="" disabled>&lt;custom&gt;</custom></option>
                         <option value="trekking">trekking</option>
                         <option value="fastbike">fastbike</option>
                         <option value="safety">safety</option>
@@ -57,6 +58,14 @@
                 </td></tr>
         </table>
     </div>
+    <div id="profile_div" class="hidden">
+        <form id="profile_upload" name="profile_upload">
+            <input type="submit" value="Upload" />
+            <div id="textarea_container">
+                <textarea type="text" name="profile" spellcheck="false" wrap="off" maxlength="100000" placeholder="... paste your custom routing profile here ..."></textarea>
+            </div>
+        </form>
+    </div>
 
     <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet-src.js"></script>
 

js/control/Profile.js

@@ -1,11 +1,23 @@
 BR.Profile = BR.Control.extend({
     options: {
-        heading: ''
+        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);

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()});

js/index.js

@@ -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)

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);

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++) {