warning to save edits on first profile upload

css/style.css

@@ -59,8 +59,8 @@ div.elevation {
     margin-top: 0.5em;
     line-height: 1.4em;
 }
-.hint {
-    color: orange;
+.warning {
+    color: darkorange;
 }
 .error {
     color: red;

index.html

@@ -107,6 +107,7 @@
     <script src="js/control/Download.js"></script>
     <script src="js/control/Profile.js"></script>
     <script src="js/control/RoutingOptions.js"></script>
+    <script src="js/control/Message.js"></script>
 
     <script src="js/index.js"></script>
 </body>

js/control/Message.js

@@ -0,0 +1,44 @@
+BR.Message = function () {
+    this.messageTimeout = null;
+};
+
+BR.Message.prototype = {
+    _show: function (msg, type) {
+        window.clearTimeout(this.messageTimeout);
+        var ele = L.DomUtil.get('message');
+        ele.innerHTML = msg;
+        L.DomUtil.removeClass(ele, 'hidden');
+        L.DomUtil.addClass(ele, type);
+        return ele;
+    },
+
+    _hide: function (type) {
+        window.clearTimeout(this.messageTimeout);
+        var ele = L.DomUtil.get('message');
+        if (!L.DomUtil.hasClass(ele, 'hidden')) {
+            L.DomUtil.addClass(ele, 'hidden');
+            ele.innerHTML = '';
+        }
+        if (L.DomUtil.hasClass(ele, type)) {
+            L.DomUtil.removeClass(ele, type);
+        }
+    },
+
+    showError: function (err) {
+        this._show(err, 'error');
+    },
+
+    hideError: function () {
+        this._hide('error');
+    },
+
+    showWarning: function (msg) {
+        this._show(msg, 'warning');
+        this.messageTimeout = window.setTimeout(L.bind(function () {
+            this._hide('warning');
+        }, this), 10000);
+    }
+};
+
+// singleton
+BR.message = new BR.Message();

js/index.js

@@ -87,28 +87,15 @@
             elevation,
             download,
             profile,
-            leftPaneId = 'leftpane';
+            leftPaneId = 'leftpane',
+            saveWarningShown = false;
+        ;
 
         // left sidebar as additional control position
         map._controlCorners[leftPaneId] = L.DomUtil.create('div', 'leaflet-' + leftPaneId, map._controlContainer);
 
         router = L.bRouter(); //brouterCgi dummyRouter
 
-        function showError(err) {
-            var ele =L.DomUtil.get('message');
-            ele.innerText = err;
-            L.DomUtil.removeClass(ele, 'hidden');
-            L.DomUtil.addClass(ele, 'error');
-        }
-
-        function hideError() {
-            var ele =L.DomUtil.get('message');
-            if (!L.DomUtil.hasClass(ele, 'hidden')) {
-                L.DomUtil.addClass(ele, 'hidden');
-                ele.innerText = '';
-            }
-        }
-
         function updateRoute(evt) {
             router.setOptions(evt.options);
             routing.rerouteAllSegments(onUpdate);
@@ -129,13 +116,18 @@
         elevation = new BR.Elevation();
         profile = new BR.Profile();
         profile.on('update', function(evt) {
-            hideError();
+            BR.message.hideError();
             var profileId = routingOptions.getCustomProfile();
             router.uploadProfile(profileId, evt.profileText, function(err, profile) {
                 if (!err) {
                     routingOptions.setCustomProfile(profile);
+                    if (!saveWarningShown) {
+                        BR.message.showWarning('Note: Uploaded custom profiles are only cached temporarily on the server.'
+                            + '<br/>Please save your edits to your local PC.');
+                        saveWarningShown = true;
+                    }
                 } else {
-                    showError(err);
+                    BR.message.showError(err);
                     if (profile) {
                         routingOptions.setCustomProfile(profile, true);
                         router.setOptions(routingOptions.getOptions());
@@ -144,7 +136,7 @@
             });
         });
         profile.on('clear', function(evt) {
-            hideError();
+            BR.message.hideError();
             routingOptions.setCustomProfile(null);
         });