Use bootstrap notify to notify messages

Makefile.am

@@ -18,6 +18,8 @@ lms_images_DATA = \
 		docroot/images/unknown-artist.jpg
 
 lms_js_DATA = \
+	      	docroot/js/bootstrap-notify.js	\
+	      	docroot/js/jquery-1.10.2.min.js	\
 	      	docroot/js/mediaplayer.js
 
 lms_approot_DATA = \

README.md

@@ -90,3 +90,4 @@ To connect to LMS, just open your favorite browser and go to http://localhost:50
 - ffmpeg project (https://ffmpeg.org/)
 - Magick++ (http://www.imagemagick.org/Magick++/)
 - MetaBrainz (https://metabrainz.org/)
+- Bootstrap Notify: https://github.com/mouse0270/bootstrap-notify

docroot/js/bootstrap-notify.js

@@ -0,0 +1,417 @@
+/*
+* Project: Bootstrap Notify = v3.1.5
+* Description: Turns standard Bootstrap alerts into "Growl-like" notifications.
+* Author: Mouse0270 aka Robert McIntosh
+* License: MIT License
+* Website: https://github.com/mouse0270/bootstrap-growl
+*/
+
+/* global define:false, require: false, jQuery:false */
+
+(function (factory) {
+	if (typeof define === 'function' && define.amd) {
+		// AMD. Register as an anonymous module.
+		define(['jquery'], factory);
+	} else if (typeof exports === 'object') {
+		// Node/CommonJS
+		factory(require('jquery'));
+	} else {
+		// Browser globals
+		factory(jQuery);
+	}
+}(function ($) {
+	// Create the defaults once
+	var defaults = {
+		element: 'body',
+		position: null,
+		type: "info",
+		allow_dismiss: true,
+		allow_duplicates: true,
+		newest_on_top: false,
+		showProgressbar: false,
+		placement: {
+			from: "top",
+			align: "right"
+		},
+		offset: 20,
+		spacing: 10,
+		z_index: 1031,
+		delay: 5000,
+		timer: 1000,
+		url_target: '_blank',
+		mouse_over: null,
+		animate: {
+			enter: 'animated fadeInDown',
+			exit: 'animated fadeOutUp'
+		},
+		onShow: null,
+		onShown: null,
+		onClose: null,
+		onClosed: null,
+        onClick: null,
+		icon_type: 'class',
+		template: '<div data-notify="container" class="col-xs-11 col-sm-4 alert alert-{0}" role="alert"><button type="button" aria-hidden="true" class="close" data-notify="dismiss">&times;</button><span data-notify="icon"></span> <span data-notify="title">{1}</span> <span data-notify="message">{2}</span><div class="progress" data-notify="progressbar"><div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div></div><a href="{3}" target="{4}" data-notify="url"></a></div>'
+	};
+
+	String.format = function () {
+		var args = arguments;
+        var str = arguments[0];
+        return str.replace(/(\{\{\d\}\}|\{\d\})/g, function (str) {
+            if (str.substring(0, 2) === "{{") return str;
+            var num = parseInt(str.match(/\d/)[0]);
+            return args[num + 1];
+        });
+	};
+
+	function isDuplicateNotification(notification) {
+		var isDupe = false;
+
+		$('[data-notify="container"]').each(function (i, el) {
+			var $el = $(el);
+			var title = $el.find('[data-notify="title"]').html().trim();
+			var message = $el.find('[data-notify="message"]').html().trim();
+
+			// The input string might be different than the actual parsed HTML string!
+			// (<br> vs <br /> for example)
+			// So we have to force-parse this as HTML here!
+			var isSameTitle = title === $("<div>" + notification.settings.content.title + "</div>").html().trim();
+			var isSameMsg = message === $("<div>" + notification.settings.content.message + "</div>").html().trim();
+			var isSameType = $el.hasClass('alert-' + notification.settings.type);
+
+			if (isSameTitle && isSameMsg && isSameType) {
+				//we found the dupe. Set the var and stop checking.
+				isDupe = true;
+			}
+			return !isDupe;
+		});
+
+		return isDupe;
+	}
+
+	function Notify(element, content, options) {
+		// Setup Content of Notify
+		var contentObj = {
+			content: {
+				message: typeof content === 'object' ? content.message : content,
+				title: content.title ? content.title : '',
+				icon: content.icon ? content.icon : '',
+				url: content.url ? content.url : '#',
+				target: content.target ? content.target : '-'
+			}
+		};
+
+		options = $.extend(true, {}, contentObj, options);
+		this.settings = $.extend(true, {}, defaults, options);
+		this._defaults = defaults;
+		if (this.settings.content.target === "-") {
+			this.settings.content.target = this.settings.url_target;
+		}
+		this.animations = {
+			start: 'webkitAnimationStart oanimationstart MSAnimationStart animationstart',
+			end: 'webkitAnimationEnd oanimationend MSAnimationEnd animationend'
+		};
+
+		if (typeof this.settings.offset === 'number') {
+			this.settings.offset = {
+				x: this.settings.offset,
+				y: this.settings.offset
+			};
+		}
+
+		//if duplicate messages are not allowed, then only continue if this new message is not a duplicate of one that it already showing
+		if (this.settings.allow_duplicates || (!this.settings.allow_duplicates && !isDuplicateNotification(this))) {
+			this.init();
+		}
+	}
+
+	$.extend(Notify.prototype, {
+		init: function () {
+			var self = this;
+
+			this.buildNotify();
+			if (this.settings.content.icon) {
+				this.setIcon();
+			}
+			if (this.settings.content.url != "#") {
+				this.styleURL();
+			}
+			this.styleDismiss();
+			this.placement();
+			this.bind();
+
+			this.notify = {
+				$ele: this.$ele,
+				update: function (command, update) {
+					var commands = {};
+					if (typeof command === "string") {
+						commands[command] = update;
+					} else {
+						commands = command;
+					}
+					for (var cmd in commands) {
+						switch (cmd) {
+							case "type":
+								this.$ele.removeClass('alert-' + self.settings.type);
+								this.$ele.find('[data-notify="progressbar"] > .progress-bar').removeClass('progress-bar-' + self.settings.type);
+								self.settings.type = commands[cmd];
+								this.$ele.addClass('alert-' + commands[cmd]).find('[data-notify="progressbar"] > .progress-bar').addClass('progress-bar-' + commands[cmd]);
+								break;
+							case "icon":
+								var $icon = this.$ele.find('[data-notify="icon"]');
+								if (self.settings.icon_type.toLowerCase() === 'class') {
+									$icon.removeClass(self.settings.content.icon).addClass(commands[cmd]);
+								} else {
+									if (!$icon.is('img')) {
+										$icon.find('img');
+									}
+									$icon.attr('src', commands[cmd]);
+								}
+								self.settings.content.icon = commands[command];
+								break;
+							case "progress":
+								var newDelay = self.settings.delay - (self.settings.delay * (commands[cmd] / 100));
+								this.$ele.data('notify-delay', newDelay);
+								this.$ele.find('[data-notify="progressbar"] > div').attr('aria-valuenow', commands[cmd]).css('width', commands[cmd] + '%');
+								break;
+							case "url":
+								this.$ele.find('[data-notify="url"]').attr('href', commands[cmd]);
+								break;
+							case "target":
+								this.$ele.find('[data-notify="url"]').attr('target', commands[cmd]);
+								break;
+							default:
+								this.$ele.find('[data-notify="' + cmd + '"]').html(commands[cmd]);
+						}
+					}
+					var posX = this.$ele.outerHeight() + parseInt(self.settings.spacing) + parseInt(self.settings.offset.y);
+					self.reposition(posX);
+				},
+				close: function () {
+					self.close();
+				}
+			};
+
+		},
+		buildNotify: function () {
+			var content = this.settings.content;
+			this.$ele = $(String.format(this.settings.template, this.settings.type, content.title, content.message, content.url, content.target));
+			this.$ele.attr('data-notify-position', this.settings.placement.from + '-' + this.settings.placement.align);
+			if (!this.settings.allow_dismiss) {
+				this.$ele.find('[data-notify="dismiss"]').css('display', 'none');
+			}
+			if ((this.settings.delay <= 0 && !this.settings.showProgressbar) || !this.settings.showProgressbar) {
+				this.$ele.find('[data-notify="progressbar"]').remove();
+			}
+		},
+		setIcon: function () {
+			if (this.settings.icon_type.toLowerCase() === 'class') {
+				this.$ele.find('[data-notify="icon"]').addClass(this.settings.content.icon);
+			} else {
+				if (this.$ele.find('[data-notify="icon"]').is('img')) {
+					this.$ele.find('[data-notify="icon"]').attr('src', this.settings.content.icon);
+				} else {
+					this.$ele.find('[data-notify="icon"]').append('<img src="' + this.settings.content.icon + '" alt="Notify Icon" />');
+				}
+			}
+		},
+		styleDismiss: function () {
+			this.$ele.find('[data-notify="dismiss"]').css({
+				position: 'absolute',
+				right: '10px',
+				top: '5px',
+				zIndex: this.settings.z_index + 2
+			});
+		},
+		styleURL: function () {
+			this.$ele.find('[data-notify="url"]').css({
+				backgroundImage: 'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)',
+				height: '100%',
+				left: 0,
+				position: 'absolute',
+				top: 0,
+				width: '100%',
+				zIndex: this.settings.z_index + 1
+			});
+		},
+		placement: function () {
+			var self = this,
+				offsetAmt = this.settings.offset.y,
+				css = {
+					display: 'inline-block',
+					margin: '0px auto',
+					position: this.settings.position ? this.settings.position : (this.settings.element === 'body' ? 'fixed' : 'absolute'),
+					transition: 'all .5s ease-in-out',
+					zIndex: this.settings.z_index
+				},
+				hasAnimation = false,
+				settings = this.settings;
+
+			$('[data-notify-position="' + this.settings.placement.from + '-' + this.settings.placement.align + '"]:not([data-closing="true"])').each(function () {
+				offsetAmt = Math.max(offsetAmt, parseInt($(this).css(settings.placement.from)) + parseInt($(this).outerHeight()) + parseInt(settings.spacing));
+			});
+			if (this.settings.newest_on_top === true) {
+				offsetAmt = this.settings.offset.y;
+			}
+			css[this.settings.placement.from] = offsetAmt + 'px';
+
+			switch (this.settings.placement.align) {
+				case "left":
+				case "right":
+					css[this.settings.placement.align] = this.settings.offset.x + 'px';
+					break;
+				case "center":
+					css.left = 0;
+					css.right = 0;
+					break;
+			}
+			this.$ele.css(css).addClass(this.settings.animate.enter);
+			$.each(Array('webkit-', 'moz-', 'o-', 'ms-', ''), function (index, prefix) {
+				self.$ele[0].style[prefix + 'AnimationIterationCount'] = 1;
+			});
+
+			$(this.settings.element).append(this.$ele);
+
+			if (this.settings.newest_on_top === true) {
+				offsetAmt = (parseInt(offsetAmt) + parseInt(this.settings.spacing)) + this.$ele.outerHeight();
+				this.reposition(offsetAmt);
+			}
+
+			if ($.isFunction(self.settings.onShow)) {
+				self.settings.onShow.call(this.$ele);
+			}
+
+			this.$ele.one(this.animations.start, function () {
+				hasAnimation = true;
+			}).one(this.animations.end, function () {
+				self.$ele.removeClass(self.settings.animate.enter);
+				if ($.isFunction(self.settings.onShown)) {
+					self.settings.onShown.call(this);
+				}
+			});
+
+			setTimeout(function () {
+				if (!hasAnimation) {
+					if ($.isFunction(self.settings.onShown)) {
+						self.settings.onShown.call(this);
+					}
+				}
+			}, 600);
+		},
+		bind: function () {
+			var self = this;
+
+			this.$ele.find('[data-notify="dismiss"]').on('click', function () {
+				self.close();
+			});
+
+			if ($.isFunction(self.settings.onClick)) {
+			    this.$ele.on('click', function (event) {
+			        if (event.target != self.$ele.find('[data-notify="dismiss"]')[0]) {
+			            self.settings.onClick.call(this, event);
+			        }
+			    });
+			}
+
+			this.$ele.mouseover(function () {
+				$(this).data('data-hover', "true");
+			}).mouseout(function () {
+				$(this).data('data-hover', "false");
+			});
+			this.$ele.data('data-hover', "false");
+
+			if (this.settings.delay > 0) {
+				self.$ele.data('notify-delay', self.settings.delay);
+				var timer = setInterval(function () {
+					var delay = parseInt(self.$ele.data('notify-delay')) - self.settings.timer;
+					if ((self.$ele.data('data-hover') === 'false' && self.settings.mouse_over === "pause") || self.settings.mouse_over != "pause") {
+						var percent = ((self.settings.delay - delay) / self.settings.delay) * 100;
+						self.$ele.data('notify-delay', delay);
+						self.$ele.find('[data-notify="progressbar"] > div').attr('aria-valuenow', percent).css('width', percent + '%');
+					}
+					if (delay <= -(self.settings.timer)) {
+						clearInterval(timer);
+						self.close();
+					}
+				}, self.settings.timer);
+			}
+		},
+		close: function () {
+			var self = this,
+				posX = parseInt(this.$ele.css(this.settings.placement.from)),
+				hasAnimation = false;
+
+			this.$ele.attr('data-closing', 'true').addClass(this.settings.animate.exit);
+			self.reposition(posX);
+
+			if ($.isFunction(self.settings.onClose)) {
+				self.settings.onClose.call(this.$ele);
+			}
+
+			this.$ele.one(this.animations.start, function () {
+				hasAnimation = true;
+			}).one(this.animations.end, function () {
+				$(this).remove();
+				if ($.isFunction(self.settings.onClosed)) {
+					self.settings.onClosed.call(this);
+				}
+			});
+
+			setTimeout(function () {
+				if (!hasAnimation) {
+					self.$ele.remove();
+					if ($.isFunction(self.settings.onClosed)) {
+						self.settings.onClosed.call(this);
+					}
+				}
+			}, 600);
+		},
+		reposition: function (posX) {
+			var self = this,
+				notifies = '[data-notify-position="' + this.settings.placement.from + '-' + this.settings.placement.align + '"]:not([data-closing="true"])',
+				$elements = this.$ele.nextAll(notifies);
+			if (this.settings.newest_on_top === true) {
+				$elements = this.$ele.prevAll(notifies);
+			}
+			$elements.each(function () {
+				$(this).css(self.settings.placement.from, posX);
+				posX = (parseInt(posX) + parseInt(self.settings.spacing)) + $(this).outerHeight();
+			});
+		}
+	});
+
+	$.notify = function (content, options) {
+		var plugin = new Notify(this, content, options);
+		return plugin.notify;
+	};
+	$.notifyDefaults = function (options) {
+		defaults = $.extend(true, {}, defaults, options);
+		return defaults;
+	};
+
+	$.notifyClose = function (selector) {
+
+		if (typeof selector === "undefined" || selector === "all") {
+			$('[data-notify]').find('[data-notify="dismiss"]').trigger('click');
+		}else if(selector === 'success' || selector === 'info' || selector === 'warning' || selector === 'danger'){
+			$('.alert-' + selector + '[data-notify]').find('[data-notify="dismiss"]').trigger('click');
+		} else if(selector){
+			$(selector + '[data-notify]').find('[data-notify="dismiss"]').trigger('click');
+		}
+		else {
+			$('[data-notify-position="' + selector + '"]').find('[data-notify="dismiss"]').trigger('click');
+		}
+	};
+
+	$.notifyCloseExcept = function (selector) {
+
+		if(selector === 'success' || selector === 'info' || selector === 'warning' || selector === 'danger'){
+			$('[data-notify]').not('.alert-' + selector).find('[data-notify="dismiss"]').trigger('click');
+		} else{
+			$('[data-notify]').not(selector).find('[data-notify="dismiss"]').trigger('click');
+		}
+	};
+
+
+}));
+
+

src/ui/LmsApplication.cpp

@@ -110,7 +110,9 @@ LmsApplication::LmsApplication(const Wt::WEnvironment& env, Wt::Dbo::SqlConnecti
 	messageResourceBundle().use(appRoot() + "templates");
 
 	// Require js here to avoid async problems
+	requireJQuery("/js/jquery-1.10.2.min.js");
 	require("/js/mediaplayer.js");
+	require("/js/bootstrap-notify.js");
 
 	setTitle("LMS");
 
@@ -459,7 +461,7 @@ LmsApplication::createHome()
 
 			if (_isAdmin)
 			{
-				notifyMsg(Wt::WString::tr("Lms.Admin.Database.scan-complete")
+				notifyMsg(MsgType::Info, Wt::WString::tr("Lms.Admin.Database.scan-complete")
 					.arg(static_cast<unsigned>(stats.nbFiles()))
 					.arg(static_cast<unsigned>(stats.additions))
 					.arg(static_cast<unsigned>(stats.updates))
@@ -518,11 +520,33 @@ LmsApplication::notify(const Wt::WEvent& event)
 	}
 }
 
-void
+static std::string msgTypeToString(MsgType type)
-LmsApplication::notifyMsg(const Wt::WString& message)
 {
-	LMS_LOG(UI, INFO) << "Notifying message '" << message.toUTF8() << "'";
+	switch(type)
-	root()->addNew<Wt::WText>(message);
+	{
+		case MsgType::Success:	return "success";
+		case MsgType::Info:	return "info";
+		case MsgType::Warning:	return "warning";
+		case MsgType::Danger:	return "danger";
+	}
+	return "";
+}
+
+void
+LmsApplication::notifyMsg(MsgType type, const Wt::WString& message)
+{
+	LMS_LOG(UI, INFO) << "Notifying message '" << message.toUTF8() << "' of type '" << msgTypeToString(type);
+
+	std::ostringstream oss;
+
+	oss << "$.notify({"
+			"message: '" << message.toUTF8() << "'"
+		"},{"
+			"type: '" << msgTypeToString(type) << "',"
+			"placement: {from: 'top', align: 'center'}"
+		"});";
+
+	LmsApp->doJavaScript(oss.str());
 }
 
 

src/ui/LmsApplication.hpp

@@ -44,6 +44,14 @@ struct GroupEvents
 	Wt::Signal<LmsApplicationInfo> appClosed;
 };
 
+enum class MsgType
+{
+	Success,
+	Info,
+	Warning,
+	Danger,
+};
+
 class LmsApplication : public Wt::WApplication
 {
 	public:
@@ -70,7 +78,8 @@ class LmsApplication : public Wt::WApplication
 		// Utils
 		void goHome();
 		void goHomeAndQuit();
-		void notifyMsg(const Wt::WString& message);
+
+		void notifyMsg(MsgType type, const Wt::WString& message);
 
 		static Wt::WLink createArtistLink(Database::Artist::pointer artist);
 		static std::unique_ptr<Wt::WAnchor> createArtistAnchor(Database::Artist::pointer artist, bool addText = true);

src/ui/PlayQueueView.cpp

@@ -236,7 +236,7 @@ void
 PlayQueue::addTracks(const std::vector<Database::Track::pointer>& tracks)
 {
 	enqueueTracks(tracks);
-	LmsApp->notifyMsg(Wt::WString::tr("Lms.PlayQueue.nb-tracks-added").arg(tracks.size()));
+	LmsApp->notifyMsg(MsgType::Info, Wt::WString::tr("Lms.PlayQueue.nb-tracks-added").arg(tracks.size()));
 }
 
 void
@@ -248,7 +248,7 @@ PlayQueue::playTracks(const std::vector<Database::Track::pointer>& tracks)
 	enqueueTracks(tracks);
 	play(0);
 
-	LmsApp->notifyMsg(Wt::WString::tr("Lms.PlayQueue.nb-tracks-playing").arg(tracks.size()));
+	LmsApp->notifyMsg(MsgType::Info, Wt::WString::tr("Lms.PlayQueue.nb-tracks-playing").arg(tracks.size()));
 }
 
 

src/ui/SettingsView.cpp

@@ -301,7 +301,7 @@ SettingsView::refreshView()
 
 			if (LmsApp->getUser()->isDemo())
 			{
-				LmsApp->notifyMsg(Wt::WString::tr("Lms.Settings.demo-cannot-save"));
+				LmsApp->notifyMsg(MsgType::Warning, Wt::WString::tr("Lms.Settings.demo-cannot-save"));
 				return;
 			}
 		}
@@ -311,7 +311,7 @@ SettingsView::refreshView()
 		if (model->validate())
 		{
 			model->saveData();
-			LmsApp->notifyMsg(Wt::WString::tr("Lms.Settings.settings-saved"));
+			LmsApp->notifyMsg(MsgType::Success, Wt::WString::tr("Lms.Settings.settings-saved"));
 		}
 
 		// Udate the view: Delete any validation message in the view, etc.

src/ui/admin/DatabaseSettingsView.cpp

@@ -288,7 +288,7 @@ DatabaseSettingsView::refreshView()
 			model->saveData();
 
 			LmsApp->getMediaScanner().reschedule();
-			LmsApp->notifyMsg(Wt::WString::tr("Lms.Admin.Database.settings-saved"));
+			LmsApp->notifyMsg(MsgType::Success, Wt::WString::tr("Lms.Admin.Database.settings-saved"));
 		}
 
 		// Udate the view: Delete any validation message in the view, etc.
@@ -305,7 +305,7 @@ DatabaseSettingsView::refreshView()
 	immScanBtn->clicked().connect(std::bind([=] ()
 	{
 		LmsApp->getMediaScanner().scheduleImmediateScan();
-		LmsApp->notifyMsg(Wt::WString::tr("Lms.Admin.Database.scan-launched"));
+		LmsApp->notifyMsg(MsgType::Info, Wt::WString::tr("Lms.Admin.Database.scan-launched"));
 	}));
 
 	t->updateView(model.get());

src/ui/admin/InitWizardView.cpp

@@ -140,7 +140,7 @@ InitWizardView::InitWizardView()
 		if (model->validate())
 		{
 			model->saveData();
-			LmsApp->notifyMsg(Wt::WString::tr("Lms.Admin.InitWizard.done"));
+			LmsApp->notifyMsg(MsgType::Success, Wt::WString::tr("Lms.Admin.InitWizard.done"));
 			saveButton->setEnabled(false);
 		}
 

src/ui/admin/UserView.cpp

@@ -306,7 +306,7 @@ UserView::refreshView()
 		if (model->validate())
 		{
 			model->saveData();
-			LmsApp->notifyMsg(Wt::WString::tr(userId ? "Lms.Admin.User.user-updated" : "Lms.Admin.User.user-created"));
+			LmsApp->notifyMsg(MsgType::Success, Wt::WString::tr(userId ? "Lms.Admin.User.user-updated" : "Lms.Admin.User.user-created"));
 			LmsApp->setInternalPath("/admin/users", true);
 		}
 		else