Add supplier messages for new orders and sounds

app/assets/javascripts/supplier/app/application.js.coffee

@@ -6,6 +6,7 @@
 #= require shared-ember-helpers/all
 #= require ./app
 #= require ./controllers/modals/base_controller
+#= require ion.sound
 #= require_tree .
 @$assets_path = '/assets/';
 @EmberENV = {FEATURES: {'query-params-new': true}}

app/assets/javascripts/supplier/app/controllers/application_controller.js.coffee

@@ -1,5 +1,6 @@
 App.ApplicationController = Ember.Controller.extend
   active_section: null
+  flash_message: ''
   #init: ->
     #success = (supplier)=>
       ## A supplier record with id current and with the content of the returned supplier is created

app/assets/javascripts/supplier/app/models/order.js.coffee

@@ -33,6 +33,11 @@ App.Order = DS.Model.extend
     @get('product_orders').map((po) -> "#{po.get('quantity')} x #{po.get('product.name')}").join(', ')
   ).property('product_orders.@each.quantity', 'product_orders.@each.product.@each.name')
 
+  display_with_table: (->
+    table = t('models.table').toLowerCase()
+    "#{@get('display')} #{table} #{@get('list.table.number')}".htmlSafe()
+  ).property('display', 'list.table.number')
+
   display_tag: (->
     "<span class='display order-display order-#{@get('id')} #{@get('state')}'><span class='pre-display'></span>#{@get('display')}<span class='post-display'></span></span>".htmlSafe()
   ).property('display', 'state')

app/assets/javascripts/supplier/app/routes/application_route.js.coffee.erb

@@ -69,16 +69,36 @@ App.ApplicationRoute = Ember.Route.extend
         body: options.body
         cancel: options.cancel
         ok: options.ok
+    newOrder: (order_id)->
+      @store.findById('order', order_id).then (order)=>
+        controller = @controllerFor('application')
+        return if controller.get('active_section.id') and order.get('section.id') isnt controller.get('active_section.id')
+        $('body').addClass('new-order')
+        controller.set 'flash_message', order.get('display_with_table')
+        setTimeout (-> $('body').removeClass('new-order')), 4000
+        try ion.sound.play('water_droplet')
   events:
-    list_needs_help: (data) -> list.markNeedsHelp() if list = @store.getById('list', data.id)
-    list_needs_payment: (data) -> list.markNeedsPayment() if list = @store.getById('list', data.id)
+    list_needs_help: (data) ->
+      if list = @store.getById('list', data.id)
+        list.markNeedsHelp()
+        controller = @controllerFor('application')
+        return if controller.get('active_section.id') and list.get('section.id') isnt controller.get('active_section.id')
+        try ion.sound.play 'bell_ring'
+    list_needs_payment: (data) ->
+      if list = @store.getById('list', data.id)
+        list.markNeedsPayment()
+        controller = @controllerFor('application')
+        return if controller.get('active_section.id') and list.get('section.id') isnt controller.get('active_section.id')
+        try ion.sound.play 'water_droplet_3'
     list_is_paid: (data) -> list.markIsPaid() if list = @store.getById('list', data.id)
     list_update: (data) ->
+      if data.new_order_id
+        @send 'newOrder', data.new_order_id
       @store.pushPayload('list', data)
       # Fix broken reference. TODO: remove this when single source of
       # truth is working
-      @store.findById('list', e.data.list.id).then (list)->
-        list.get('table').then (table)->table.set('active_list', list)
+      #@store.findById('list', data.list.id).then (list)->
+      #  list.get('table').then (table)->table.set('active_list', list)
     list_changed_table: (data) -> @store.pushPayload('list', lists: [data.list])
     list_closed: (data) -> list.markClosed() if list = @store.getById('list', data.id)
     list_helped: (data) -> list.markHelped() if list = @store.getById('list', data.id)

app/assets/javascripts/supplier/app/templates/application.emblem

@@ -1,3 +1,4 @@
 = partial "global/top_menu"
 .main-section= outlet
+= view flash_message
 = outlet modal

app/assets/javascripts/supplier/app/templates/flash_message.emblem

@@ -0,0 +1 @@
+= flash_message

app/assets/javascripts/supplier/app/views/application_view.js.coffee

@@ -11,6 +11,14 @@ App.ApplicationView = Ember.View.extend
         menu.show().animate left: 0
         toggle.animate left: 222 - 30, -> $(@).addClass('open')
 
+    ion.sound
+      sounds: [
+        {name: "bell_ring", volume: 0.8}
+        {name: "water_droplet"}
+        {name: "water_droplet_3"}
+      ]
+      path: "/sounds/"
+      preload: true
     #selector_mappings =
       #'.top-menu-root': '/'
       #'.top-menu-lists': 'lists'

app/assets/javascripts/supplier/app/views/flash-message.js.coffee

@@ -0,0 +1,10 @@
+App.FlashMessageView = Ember.View.extend
+  templateName: 'flash_message'
+  classNames: ['flash-message']
+  classNameBindings: ['message:active']
+  message: (-> @get('controller.flash_message')).property('controller.flash_message')
+
+  inactivator: (->
+    if @get('message')
+      Ember.run.later (=> @set 'controller.flash_message', ''), 4000
+  ).observes('message')

app/assets/stylesheets/supplier/foundation1/application.css.sass

@@ -1,6 +1,7 @@
 //= require qtip
 //= require_directory ../base1-shared
 //= require pickdate
+@import bourbon
 @import ./qconstants
 @import ./foundation_and_overrides
 @import ./qstructure

app/assets/stylesheets/supplier/foundation1/components/_flash_message.css.sass

@@ -0,0 +1,25 @@
+.flash-message
+  position: fixed
+  top: 60px
+  right: -440px
+  background-color: rgba(200,200,200,0.8)
+  padding: 20px
+  width: 400px
+  border-radius: 9999px
+  font-weight: bold
+  font-size: 1.4
+  +animation(flashMessageInactive 0.5s)
+  &.active
+    +animation(flashMessageActive 0.5s)
+    right: 20px
+
++keyframes(flashMessageActive)
+  from
+    right: -440px
+  to
+    right: 20px
++keyframes(flashMessageInactive)
+  from
+    right: 20px
+  to
+    right: -440px

app/models/list.rb

@@ -286,7 +286,7 @@ class List
     broadcast_users 'new_order', UserExtendedListSerializer.new(order.list).as_json
     # broadcast_users 'orders_placed_count', count: orders_placed_count
 
-    broadcast_supplier supplier.id, 'list_update', SupplierListSerializer.new(self).as_json
+    broadcast_supplier supplier.id, 'list_update', SupplierListSerializer.new(self).as_json.merge(new_order_id: order.id)
     # broadcast_supplier supplier.id, 'new_order', OrderSerializer.new(order)
     broadcast_supplier supplier.id, 'orders_placed_count', count: orders_placed_count
     order

vendor/assets/javascripts/ion.sound.js

@@ -0,0 +1,345 @@
+/**
+ * Ion.Sound
+ * version 2.1.3 Build 47
+ * © 2014 Denis Ineshin | IonDen.com
+ *
+ * Project page:    http://ionden.com/a/plugins/ion.sound/en.html
+ * GitHub page:     https://github.com/IonDen/ion.sound
+ *
+ * Released under MIT licence:
+ * http://ionden.com/a/plugins/licence-en.html
+ */
+
+var ion = ion || {};
+
+(function (ion) {
+
+    var warn = function (text) {
+        if (text && console) {
+            if (console.warn && typeof console.warn === "function") {
+                console.warn(text);
+            } else if (console.log && typeof console.log === "function") {
+                console.log(text);
+            }
+        }
+    };
+
+    if (ion.sound) {
+        warn("ion.sound already exists!");
+        return;
+    }
+
+    if (typeof Audio !== "function" && typeof Audio !== "object") {
+        var func = function () {
+            warn("HTML5 Audio is not supported in this browser");
+        };
+        ion.sound = function () {};
+        ion.sound.play = func;
+        ion.sound.stop = func;
+        ion.sound.destroy = func;
+        func();
+        return;
+    }
+
+
+
+    var Sound,
+        is_iOS = /iPad|iPhone/.test(navigator.appVersion),
+        global_sound,
+        settings = {},
+        sounds = {},
+        sounds_num,
+        ext,
+        i;
+
+
+
+    if (is_iOS) {
+
+        Sound = function (options) {
+            this.name = options.name;
+            this.loop = false;
+            this.paused = false;
+            this.sound = null;
+            this.callback = null;
+        };
+
+        Sound.prototype = {
+            init: function () {
+                this.sound = global_sound;
+            },
+
+            play: function (obj) {
+                if (!obj) {
+                    obj = {};
+                }
+
+                if (obj.loop) {
+                    if (this.paused) {
+                        this._playLoop(this.loop + 1);
+                    } else {
+                        this._playLoop(obj.loop);
+                    }
+                } else {
+                    this.loop = false;
+                    this._play();
+                }
+
+                if (obj.onEnded && typeof obj.onEnded === "function") {
+                    this.callback = obj.onEnded;
+                }
+            },
+
+            _play: function () {
+                if (this.paused) {
+                    this.paused = false;
+                } else {
+                    try {
+                        this.sound.currentTime = 0;
+                    } catch (e) {}
+                }
+
+                this.sound.removeEventListener("ended");
+                this.sound.addEventListener("ended", this._ended.bind(this), false);
+                this.sound.src = settings.path + this.name + ext;
+                this.sound.load();
+                this.sound.play();
+            }
+        }
+
+    } else {
+
+        Sound = function (options) {
+            this.name = options.name;
+            this.volume = settings.volume || 0.5;
+            this.preload = settings.preload ? "auto" : "none";
+            this.loop = false;
+            this.paused = false;
+            this.sound = null;
+            this.callback = null;
+
+            if ("volume" in options) {
+                this.volume = +options.volume;
+            }
+
+            if ("preload" in options) {
+                this.preload = options.preload ? "auto" : "none"
+            }
+        };
+
+        Sound.prototype = {
+            init: function () {
+                this.sound = new Audio();
+                this.sound.src = settings.path + this.name + ext;
+                this.sound.load();
+                this.sound.preload = this.preload;
+                this.sound.volume = this.volume;
+
+                this.sound.addEventListener("ended", this._ended.bind(this), false);
+            },
+
+            play: function (obj) {
+                if (!obj) {
+                    obj = {};
+                }
+
+                if (obj.volume || obj.volume === 0) {
+                    this.volume = +obj.volume;
+                    this.sound.volume = this.volume;
+                }
+
+                if (obj.loop) {
+                    if (this.paused) {
+                        this._playLoop(this.loop + 1);
+                    } else {
+                        this._playLoop(obj.loop);
+                    }
+                } else {
+                    this.loop = false;
+                    this._play();
+                }
+
+                if (obj.onEnded && typeof obj.onEnded === "function") {
+                    this.callback = obj.onEnded;
+                }
+            },
+
+            _play: function () {
+                if (this.paused) {
+                    this.paused = false;
+                } else {
+                    try {
+                        this.sound.currentTime = 0;
+                    } catch (e) {}
+                }
+
+                this.sound.play();
+            }
+        };
+
+    }
+
+    Sound.prototype._playLoop = function (loop) {
+        if (typeof loop === "boolean") {
+            // FF 3.6 and iOS,
+            // sound.loop = true not supported or buggy
+            this.loop = 9999999;
+            this._play();
+        } else if (typeof loop === "number") {
+            this.loop = loop - 1;
+            this._play();
+        }
+    };
+
+    Sound.prototype._ended = function () {
+        if (this.loop > 0) {
+            this.loop -= 1;
+            this._play();
+        }
+
+        if (this.callback) {
+            this.callback(this.name);
+        }
+    };
+
+    Sound.prototype.pause = function () {
+        this.paused = true;
+        this.sound.pause();
+    };
+
+    Sound.prototype.stop = function () {
+        this.loop = false;
+        this.sound.pause();
+
+        try {
+            this.sound.currentTime = 0;
+        } catch (e) {}
+    };
+
+    Sound.prototype.destroy = function () {
+        this.stop();
+        this.sound.removeEventListener("ended", this._ended.bind(this), false);
+        this.sound.src = "";
+        this.sound = null;
+    };
+
+
+
+    var checkSupport = function () {
+        global_sound = new Audio();
+
+        var can_play_mp3 = global_sound.canPlayType('audio/mpeg'),
+            can_play_ogg = global_sound.canPlayType('audio/ogg'),
+            can_play_aac = global_sound.canPlayType('audio/mp4; codecs="mp4a.40.2"');
+
+        if (is_iOS) {
+
+            if (can_play_mp3 === "probably") {
+                ext = ".mp3";
+            } else if (can_play_aac === "probably") {
+                ext = ".aac";
+            } else if (can_play_mp3 === "maybe") {
+                ext = ".mp3";
+            } else if (can_play_aac === "maybe") {
+                ext = ".aac";
+            }
+
+        } else {
+
+            if (can_play_mp3 === "probably") {
+                ext = ".mp3";
+            } else if (can_play_ogg === "probably") {
+                ext = ".ogg";
+            } else if (can_play_mp3 === "maybe") {
+                ext = ".mp3";
+            } else if (can_play_ogg === "maybe") {
+                ext = ".ogg";
+            } else {
+                ext = ".wav";
+            }
+
+        }
+    };
+
+    var createSound = function (obj) {
+        sounds[obj.name] = new Sound(obj);
+        sounds[obj.name].init();
+    };
+
+    ion.sound = function (options) {
+        settings = JSON.parse(JSON.stringify(options));
+        settings.path = settings.path || "";
+        settings.volume = settings.volume || 0.5;
+        settings.preload = settings.preload || false;
+        settings.mix = settings.mix || true;
+
+        sounds_num = settings.sounds.length;
+
+        if (!sounds_num) {
+            warn("No sound-files provided!");
+            return;
+        }
+
+        checkSupport();
+
+        for (i = 0; i < sounds_num; i++) {
+            createSound(settings.sounds[i]);
+        }
+    };
+
+    ion.sound.version = "2.1.3";
+
+    ion.sound.play = function (name, options) {
+        if (sounds[name]) {
+            sounds[name].play(options);
+        }
+    };
+
+    ion.sound.pause = function (name) {
+        if (name && sounds[name]) {
+            sounds[name].pause();
+        } else {
+            for (i in sounds) {
+                if (!sounds.hasOwnProperty(i)) {
+                    continue;
+                }
+                if (sounds[i]) {
+                    sounds[i].pause();
+                }
+            }
+        }
+    };
+
+    ion.sound.stop = function (name) {
+        if (name && sounds[name]) {
+            sounds[name].stop();
+        } else {
+            for (i in sounds) {
+                if (!sounds.hasOwnProperty(i)) {
+                    continue;
+                }
+                if (sounds[i]) {
+                    sounds[i].stop();
+                }
+            }
+        }
+    };
+
+    ion.sound.destroy = function (name) {
+        if (name && sounds[name]) {
+            sounds[name].destroy();
+            sounds[name] = null;
+        } else {
+            for (i in sounds) {
+                if (!sounds.hasOwnProperty(i)) {
+                    continue;
+                }
+                if (sounds[i]) {
+                    sounds[i].destroy();
+                    sounds[i] = null;
+                }
+            }
+        }
+    };
+
+} (ion));