From 8e9746781c0394c36b3253c95f14cc37d8961e14 Mon Sep 17 00:00:00 2001
From: Norbert Renner <norbert.renner@gmx.de>
Date: Thu, 26 Mar 2015 20:55:35 +0100
Subject: [PATCH] use Bootstrap alerts for error/warning messages; profile
 messages in place

---
 css/style.css         | 18 ++++++++------
 index.html            |  4 ++--
 js/control/Message.js | 56 ++++++++++++++++++++++++-------------------
 js/control/Profile.js |  3 +++
 js/index.js           | 14 +++++------
 5 files changed, 54 insertions(+), 41 deletions(-)
diff --git a/css/style.css b/css/style.css
index ef7d392..1eb35d7 100644
--- a/css/style.css
+++ b/css/style.css
@@ -26,7 +26,6 @@ div.elevation {
     top: 0px;
     margin-top: 10px;
     z-index: 1000;
-    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
 }
 
 #header {
@@ -52,12 +51,6 @@ div.elevation {
     margin-top: 0.5em;
     line-height: 1.4em;
 }
-.warning {
-    color: darkorange;
-}
-.error {
-    color: red;
-}
 
 .heading {
     font-weight: bold;
@@ -232,6 +225,17 @@ textarea:focus {
     padding: 2px 15px;
 }
 
+.alert {
+    margin-top: 3px;
+    margin-bottom: 0px;
+    padding-left: 35px;
+}
+.alert span.glyphicon {
+    position: relative;
+    left: -23px;
+    margin-right: -1em;
+}
+
 /*
  * DataTables
  */
diff --git a/index.html b/index.html
index 75f8b42..4b55ee6 100644
--- a/index.html
+++ b/index.html
@@ -22,8 +22,7 @@
 <body>
     <div id="map"></div>
 
-    <div id="message" class="info hidden">
-    </div>
+    <div id="message"></div>
     <div id="header" class="hidden">
         <div class="title"><span class="title-name">BRouter web</span>&nbsp;&nbsp;<sup class="version">0.4.0</sup></div>
         <div class="header-text">
@@ -62,6 +61,7 @@
             <div class="tab-pane active" id="tab_profile">
                 <form id="profile_upload" name="profile_upload">
                     <textarea type="text" name="profile" spellcheck="false" wrap="off" maxlength="100000" placeholder="... paste your custom routing profile here ..."></textarea>
+                    <div id="profile_message"></div>
                     <div id="profile_buttons">
                         <button id="upload" type="button" class="btn btn-default btn-xs" data-uploading-text="Uploading..."><span class="glyphicon glyphicon-upload"></span> Upload</button>
                         <button id="clear" type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-ban-circle"></span> Clear</button>
diff --git a/js/control/Message.js b/js/control/Message.js
index 684a08d..4f6243d 100644
--- a/js/control/Message.js
+++ b/js/control/Message.js
@@ -1,27 +1,36 @@
-BR.Message = function () {
-    this.messageTimeout = null;
-};
+BR.Message = L.Class.extend({
+    options: {
+        // true to manually attach click event to close button,
+        // Bootstrap data-api's auto-initialization doesn't work in Controls because of stopPropagation
+        alert: false
+    },
+    
+    initialize: function (id, options) {
+        L.setOptions(this, options);
+        this.id = id;
+    },
 
-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;
+        var ele = L.DomUtil.get(this.id),
+            iconClass = (type === 'warning') ? 'glyphicon-warning-sign' : 'glyphicon-remove',
+            alertClass = (type === 'warning') ? 'alert-warning' : 'alert-danger';
+
+        ele.innerHTML =
+              '<div class="alert ' + alertClass + ' alert-dismissible fade in" role="alert">'
+            + '  <button type="button" class="close" data-dismiss="alert" aria-label="Close">'
+            + '    <span aria-hidden="true">&times;</span>'
+            + '  </button>'
+            + '  <span class="glyphicon ' + iconClass + '" aria-hidden="true"/></span>'
+            + msg
+            + '</div>';
+
+        if (this.options.alert) {
+            $('#' + this.id + ' .alert').alert();
+        }
     },
 
     _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);
-        }
+        $('#' + this.id + ' .alert').alert('close');
     },
 
     showError: function (err) {
@@ -34,11 +43,8 @@ BR.Message.prototype = {
 
     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();
\ No newline at end of file
+// static instance as global control
+BR.message = new BR.Message('message');
diff --git a/js/control/Profile.js b/js/control/Profile.js
index c76a722..3ceb166 100644
--- a/js/control/Profile.js
+++ b/js/control/Profile.js
@@ -6,6 +6,9 @@ BR.Profile = L.Class.extend({
         L.DomUtil.get('clear').onclick = L.bind(this.clear, this);
         
         this.ele = document.profile_upload.profile;
+        this.message = new BR.Message('profile_message', {
+            alert: true
+        });
     },
 
     clear: function(evt) {
diff --git a/js/index.js b/js/index.js
index 9195d22..2eedcb9 100644
--- a/js/index.js
+++ b/js/index.js
@@ -147,21 +147,21 @@
         profile.on('update', function(evt) {
             BR.message.hideError();
             var profileId = routingOptions.getCustomProfile();
-            router.uploadProfile(profileId, evt.profileText, function(err, profile) {
+            router.uploadProfile(profileId, evt.profileText, function(err, profileId) {
                 if (!err) {
-                    routingOptions.setCustomProfile(profile, true);
+                    routingOptions.setCustomProfile(profileId, true);
                     updateRoute({
                         options: routingOptions.getOptions()
                     });
                     if (!saveWarningShown) {
-                        BR.message.showWarning('Note: Uploaded custom profiles are only cached temporarily on the server.'
+                        profile.message.showWarning('<strong>Note:</strong> Uploaded custom profiles are only cached temporarily on the server.'
                             + '<br/>Please save your edits to your local PC.');
                         saveWarningShown = true;
                     }
                 } else {
-                    BR.message.showError(err);
-                    if (profile) {
-                        routingOptions.setCustomProfile(profile, true);
+                    profile.message.showError(err);
+                    if (profileId) {
+                        routingOptions.setCustomProfile(profileId, true);
                         router.setOptions(routingOptions.getOptions());
                     }
                 }
@@ -172,7 +172,7 @@
             });
         });
         profile.on('clear', function(evt) {
-            BR.message.hideError();
+            profile.message.hideError();
             routingOptions.setCustomProfile(null);
         });
         trackMessages = new BR.TrackMessages({
