ben/brouter-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

use Bootstrap alerts for error/warning messages; profile messages in place

Browse source
This commit is contained in:
Norbert Renner 2015-03-26 20:55:35 +01:00
parent d79de3966a
commit 8e9746781c
5 changed files with 54 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

18
css/style.css
View file

@ -26,7 +26,6 @@ div.elevation {
top: 0px; top: 0px;
margin-top: 10px; margin-top: 10px;
z-index: 1000; z-index: 1000;
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
} }
#header { #header {
@ -52,12 +51,6 @@ div.elevation {
margin-top: 0.5em; margin-top: 0.5em;
line-height: 1.4em; line-height: 1.4em;
} }
.warning {
color: darkorange;
}
.error {
color: red;
}
.heading { .heading {
font-weight: bold; font-weight: bold;
@ -232,6 +225,17 @@ textarea:focus {
padding: 2px 15px; padding: 2px 15px;
} }
.alert {
margin-top: 3px;
margin-bottom: 0px;
padding-left: 35px;
}
.alert span.glyphicon {
position: relative;
left: -23px;
margin-right: -1em;
}
/* /*
* DataTables * DataTables
*/ */

4
index.html
View file

@ -22,8 +22,7 @@
<body> <body>
<div id="map"></div> <div id="map"></div>
<div id="message" class="info hidden"> <div id="message"></div>
</div>
<div id="header" class="hidden"> <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="title"><span class="title-name">BRouter web</span>&nbsp;&nbsp;<sup class="version">0.4.0</sup></div>
<div class="header-text"> <div class="header-text">
@ -62,6 +61,7 @@
<div class="tab-pane active" id="tab_profile"> <div class="tab-pane active" id="tab_profile">
<form id="profile_upload" name="profile_upload"> <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> <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"> <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="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> <button id="clear" type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-ban-circle"></span> Clear</button>

56
js/control/Message.js
View file

@ -1,27 +1,36 @@
BR.Message = function () { BR.Message = L.Class.extend({
this.messageTimeout = null; 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) { _show: function (msg, type) {
window.clearTimeout(this.messageTimeout); var ele = L.DomUtil.get(this.id),
var ele = L.DomUtil.get('message'); iconClass = (type === 'warning') ? 'glyphicon-warning-sign' : 'glyphicon-remove',
ele.innerHTML = msg; alertClass = (type === 'warning') ? 'alert-warning' : 'alert-danger';
L.DomUtil.removeClass(ele, 'hidden');
L.DomUtil.addClass(ele, type); ele.innerHTML =
return ele; '<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) { _hide: function (type) {
window.clearTimeout(this.messageTimeout); $('#' + this.id + ' .alert').alert('close');
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) { showError: function (err) {
@ -34,11 +43,8 @@ BR.Message.prototype = {
showWarning: function (msg) { showWarning: function (msg) {
this._show(msg, 'warning'); this._show(msg, 'warning');
this.messageTimeout = window.setTimeout(L.bind(function () {
this._hide('warning');
}, this), 10000);
} }
}; });
// singleton // static instance as global control
BR.message = new BR.Message(); BR.message = new BR.Message('message');

3
js/control/Profile.js
View file

@ -6,6 +6,9 @@ BR.Profile = L.Class.extend({
L.DomUtil.get('clear').onclick = L.bind(this.clear, this); L.DomUtil.get('clear').onclick = L.bind(this.clear, this);
this.ele = document.profile_upload.profile; this.ele = document.profile_upload.profile;
this.message = new BR.Message('profile_message', {
alert: true
});
}, },
clear: function(evt) { clear: function(evt) {

14
js/index.js
View file

@ -147,21 +147,21 @@
profile.on('update', function(evt) { profile.on('update', function(evt) {
BR.message.hideError(); BR.message.hideError();
var profileId = routingOptions.getCustomProfile(); var profileId = routingOptions.getCustomProfile();
router.uploadProfile(profileId, evt.profileText, function(err, profile) { router.uploadProfile(profileId, evt.profileText, function(err, profileId) {
if (!err) { if (!err) {
routingOptions.setCustomProfile(profile, true); routingOptions.setCustomProfile(profileId, true);
updateRoute({ updateRoute({
options: routingOptions.getOptions() options: routingOptions.getOptions()
}); });
if (!saveWarningShown) { 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.'); + '<br/>Please save your edits to your local PC.');
saveWarningShown = true; saveWarningShown = true;
} }
} else { } else {
BR.message.showError(err); profile.message.showError(err);
if (profile) { if (profileId) {
routingOptions.setCustomProfile(profile, true); routingOptions.setCustomProfile(profileId, true);
router.setOptions(routingOptions.getOptions()); router.setOptions(routingOptions.getOptions());
} }
} }
@ -172,7 +172,7 @@
}); });
}); });
profile.on('clear', function(evt) { profile.on('clear', function(evt) {
BR.message.hideError(); profile.message.hideError();
routingOptions.setCustomProfile(null); routingOptions.setCustomProfile(null);
}); });
trackMessages = new BR.TrackMessages({ trackMessages = new BR.TrackMessages({