Warn when server quick fix will remove track name chars (#194, #202)

config.template.js

@@ -122,4 +122,7 @@
             'car-test'
         ];
     }
+
+    // regex needs to be in sync with server, see ServerHandler.getTrackName()
+    BR.conf.tracknameAllowedChars = 'a-zA-Z0-9 \\._\\-';
 })();

css/style.css

@@ -119,6 +119,20 @@ footer {
     margin-bottom: 0;
 }
 
+input#trackname:invalid,
+input#trackname:focus:invalid {
+    border-color: orange;
+}
+:not(output):-moz-ui-invalid:not(:focus),
+:not(output):-moz-ui-invalid:-moz-focusring:not(:focus) {
+    box-shadow: none;
+}
+
+.validation-warning {
+    color: orange;
+    font-size: small;
+}
+
 /*
  * elevation diagram
  */

index.html

@@ -594,6 +594,10 @@
                                         class="form-control"
                                         id="trackname"
                                     />
+                                    <span
+                                        id="trackname-message"
+                                        class="validation-warning"
+                                    ></span>
                                 </div>
                             </div>
                             <fieldset id="export-format" class="form-group">

js/control/Export.js

@@ -4,6 +4,24 @@ BR.Export = L.Class.extend({
     initialize: function(router) {
         this.router = router;
         this.exportButton = $('#exportButton');
+        var trackname = (this.trackname = document.getElementById('trackname'));
+        this.tracknameAllowedChars = BR.conf.tracknameAllowedChars;
+
+        if (this.tracknameAllowedChars) {
+            this.tracknameMessage = document.getElementById(
+                'trackname-message'
+            );
+            var patternRegex = new RegExp(
+                '[' + this.tracknameAllowedChars + ']+'
+            );
+
+            // warn about special characters getting removed by server quick fix (#194)
+            trackname.pattern = patternRegex.toString().slice(1, -1);
+            trackname.addEventListener(
+                'input',
+                L.bind(this._validationMessage, this)
+            );
+        }
 
         this.exportButton.on('click', L.bind(this._generateTrackname, this));
         L.DomUtil.get('submitExport').onclick = L.bind(this._export, this);
@@ -53,8 +71,25 @@ BR.Export = L.Class.extend({
         link.dispatchEvent(evt);
     },
 
+    _validationMessage: function() {
+        var trackname = this.trackname;
+        var replaceRegex = new RegExp(
+            '[^' + this.tracknameAllowedChars + ']',
+            'g'
+        );
+
+        if (trackname.validity.patternMismatch) {
+            var replaced = trackname.value.replace(replaceRegex, '');
+            var patternStr = this.tracknameAllowedChars.replace(/\\/g, '');
+            this.tracknameMessage.textContent =
+                '[' + patternStr + '] --> ' + replaced;
+        } else {
+            this.tracknameMessage.textContent = '';
+        }
+    },
+
     _generateTrackname: function() {
-        var trackname = document.getElementById('trackname');
+        var trackname = this.trackname;
         this._getCityAtPosition(
             this.latLngs[0],
             L.bind(function(from) {
@@ -63,6 +98,9 @@ BR.Export = L.Class.extend({
                     L.bind(function(to) {
                         var distance = document.getElementById('distance')
                             .innerHTML;
+                        if (this.tracknameAllowedChars) {
+                            distance = distance.replace(',', '.'); // temp. fix (#202)
+                        }
                         if (!from || !to) {
                             trackname.value = null;
                         } else if (from === to) {
@@ -76,6 +114,14 @@ BR.Export = L.Class.extend({
                                 { from: from, to: to, distance: distance }
                             );
                         }
+
+                        if (this.tracknameAllowedChars) {
+                            // temp. fix: replace and remove characters that will get removed by server quick fix (#194)
+                            trackname.value = trackname.value
+                                .replace(/[>)]/g, '')
+                                .replace(/ \(/g, ' - ');
+                            this._validationMessage();
+                        }
                     }, this)
                 );
             }, this)