fixes #146: use toaster for notifications

angular_app/event-tickets.html

@@ -1,6 +1,5 @@
 <!-- show details of an Event -->
 <div class="container">
-    <div eventman-message="eventman-message" control="message"></div>
     <div class="container">
         <div class="row">
             <div class="col-md-8">

angular_app/index.html

@@ -98,6 +98,7 @@
 
         <div class="main-header">
         </div>
+        <toaster-container toaster-options="{'time-out': 4000, 'position-class': 'toast-top-center'}"></toaster-container>
 
         <!-- main error handling -->
         <div ng-if="error.error" ng-class="{clearfix: true, alert: true, 'alert-danger': true}">

angular_app/js/controllers.js

@@ -192,11 +192,10 @@ eventManControllers.controller('EventDetailsCtrl', ['$scope', '$state', 'Event',
 );
 
 
-eventManControllers.controller('EventTicketsCtrl', ['$scope', '$state', 'Event', 'EventTicket', 'Setting', '$log', '$translate', '$rootScope', 'EventUpdates', '$uibModal', '$filter',
-    function ($scope, $state, Event, EventTicket, Setting, $log, $translate, $rootScope, EventUpdates, $uibModal, $filter) {
+eventManControllers.controller('EventTicketsCtrl', ['$scope', '$state', 'Event', 'EventTicket', 'Setting', '$log', '$translate', '$rootScope', 'EventUpdates', '$uibModal', '$filter', 'toaster',
+    function ($scope, $state, Event, EventTicket, Setting, $log, $translate, $rootScope, EventUpdates, $uibModal, $filter, toaster) {
         $scope.ticketsOrder = ["name", "surname"];
         $scope.countAttendees = 0;
-        $scope.message = {};
         $scope.query = '';
         $scope.event = {};
         $scope.event.tickets = [];
@@ -294,7 +293,7 @@ eventManControllers.controller('EventTicketsCtrl', ['$scope', '$state', 'Event',
                             return false;
                         }
                         if (data.error && data.message) {
-                            $scope.showMessage({message: data.message, isError: true});
+                            toaster.pop({type: 'error', title: 'Error', body: data.message, timeout: 5000});
                             return;
                         }
                         if (!$scope.event.tickets) {
@@ -482,15 +481,16 @@ eventManControllers.controller('EventTicketsCtrl', ['$scope', '$state', 'Event',
 
         $scope.showAttendedMessage = function(ticket, attends) {
             var msg = {};
+            var msg_type = 'success';
             var name = $scope.buildTicketLabel(ticket);
 
             if (attends) {
                 msg.message = name + ' successfully added to event ' + $scope.event.title;
             } else {
                 msg.message = name + ' successfully removed from event ' + $scope.event.title;
-                msg.isWarning = true;
+                msg_type = 'warning';
             }
-            $scope.showMessage(msg);
+            toaster.pop({type: msg_type, title: msg.message});
         };
 
         $scope.setTicketAttributeAndRefocus = function(ticket, key, value) {
@@ -597,7 +597,7 @@ eventManControllers.controller('EventTicketsCtrl', ['$scope', '$state', 'Event',
             });
             if ($state.is('event.ticket.edit')) {
                 $scope.updateTicket($scope.ticket, function() {
-                    $scope.showMessage({message: 'ticket successfully updated'});
+                    toaster.pop({type: 'info', title: 'ticket successfully updated'});
                 });
             } else {
                 $scope.addTicket($scope.ticket);
@@ -651,10 +651,6 @@ eventManControllers.controller('EventTicketsCtrl', ['$scope', '$state', 'Event',
             $scope.filterTickets();
         };
 
-        $scope.showMessage = function(cfg) {
-            $scope.message && $scope.message.show && $scope.message.show(cfg);
-        };
-
         $scope.$on('$destroy', function() {
             $scope.EventUpdates && $scope.EventUpdates.close();
         });

angular_app/js/directives.js

@@ -40,36 +40,3 @@ eventManApp.directive('resetFocus', function () {
     };
 });
 
-
-eventManApp.directive('eventmanMessage', ['$timeout',
-    function($timeout) {
-        function link(scope, element, attrs) {
-            scope.dControl = scope.control || {};
-            scope.dControl.isVisible = false;
-
-            scope.dControl.show = function(cfg) {
-                cfg = cfg || {};
-                scope.dControl.isVisible = true;
-                scope.dControl.message = cfg.message;
-                scope.dControl.isSuccess = true;
-                scope.dControl.isError = cfg.isError;
-                scope.dControl.isWarning = cfg.isWarning;
-                if (cfg.isError || cfg.isWarning) {
-                    scope.dControl.isSuccess = false;
-                }
-                $timeout(function () {
-                    scope.dControl.isVisible = false;
-                }, cfg.timeout || 4000);
-            };
-        };
-
-        return {
-            scope: {
-                control: '='
-            },
-            link: link,
-            template: '<div ng-if="dControl.isVisible" ng-class="{\'eventman-message\': true, clearfix: true, \'alert\': true, \'alert-success\': dControl.isSuccess, \'alert-danger\': dControl.isError, \'alert-warning\': dControl.isWarning}">{{dControl.message}}</div>'
-        };
-    }]
-);
-

angular_app/ticket-edit.html

@@ -1,7 +1,5 @@
 <!-- show details of an Event -->
 <div class="container">
-    <div eventman-message="eventman-message" control="message"></div>
-
     <!-- FIXME: ideally, here we would have put a ng-if="!ticket.cancelled" directive, but for some
          odd reason, any kind ng-if directive will prevent the form being populated with the formData model.
     -->

static/css/eventman.css

@@ -99,3 +99,7 @@ input[type=text].form-control, input[type=search].form-control {
 .registered-counter {
     margin-right: 5px;
 }
+
+#toast-container.toast-bottom-center>div, #toast-container.toast-center>div, #toast-container.toast-top-center>div {
+    margin-bottom: 4px;
+}