App.call_waiter = App.cable.subscriptions.create('CallWaiterChannel', {
//  App.messages = App.cable.subscriptions.create('MessagesChannel', {  

  connected: function() {},

  disconnected: function() {},

  received: function(data) {                 
   table = data.table
   
    // for Notificaiotn message
    var element        = "#notify-wrapper"
    var placementFrom  = "top";
    var placementAlign = "center";
    var animateEnter   = "";
    var animateExit    = "";
    var colorName      = "alert-warning";
    var text           = " Calling Waiter <br>  "+table.name ;

    if (text != null || colorName != null){
     showNotification(element, colorName, text, placementFrom, placementAlign, animateEnter, animateExit); 
   }

   function showNotification(element, colorName, text, placementFrom, placementAlign, animateEnter, animateExit) {
    if (colorName === null || colorName === '') { colorName = 'bg-black'; }
    if (animateEnter === null || animateEnter === '') { animateEnter = 'animated fadeInDown'; }
    if (animateExit === null || animateExit === '') { animateExit = 'animated fadeOutUp'; }
    var allowDismiss = true;

    $.notify({
      message: text
    },
    {
      element: element,
      type: colorName,
      allow_dismiss: allowDismiss,
      timer: 200000000000000,
      placement: {
        from: placementFrom,
        align: placementAlign
      },
      animate: {
        enter: animateEnter,
        exit: animateExit
      },
      template: '<div data-notify="container" style="width:180px !important;" class="bootstrap-notify-container alert alert-dismissible {0} ' + (allowDismiss ? "p-r-30" : "") + '" role="alert">' +
      '<button type="button" aria-hidden="true" class="close notify-close float-right m-l-5 m-t--5" data-notify="dismiss">×</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>'
    });
  }
  //end Notificaiotn message
}
});