Added counter and switch support to nabber menu items. Take info and use callback for counter and switch from related permanent controller (if exists).

app/assets/javascripts/app/controllers/layout_ref.coffee

@@ -1757,6 +1757,12 @@ class App.CustomerChatRef extends App.Controller
 
     @render()
 
+    @interval(
+      =>
+        @updateNavMenu()
+      6800
+    )
+
   render: ->
     @html App.view('layout_ref/customer_chat')()
 
@@ -1765,11 +1771,36 @@ class App.CustomerChatRef extends App.Controller
     # @testChat @chatWindows[0], 100
     @initQuiz()
 
+    @updateNavMenu()
+
   show: (params) =>
 
     # highlight navbar
     @navupdate '#layout_ref/customer_chat'
 
+  randomCounter: (min, max) ->
+    parseInt(Math.random() * (max - min) + min)
+
+  counter: =>
+    @randomCounter(0,100)
+
+  switch: (state = undefined) =>
+
+    # read state
+    if state is undefined
+      value = App.SessionStorage.get('chat')
+      if value is undefined
+        value = false
+      return value
+
+    # write state
+    App.SessionStorage.set('chat', state)
+
+  updateNavMenu: =>
+    delay = ->
+      App.Event.trigger('menu:render')
+    @delay(delay, 200)
+
   testChat: (chat, count) ->
     for i in [0..count]
       text = @questions[Math.floor(Math.random() * @questions.length)].question
@@ -1878,7 +1909,7 @@ class CustomerChatRouter extends App.ControllerPermanent
 
 App.Config.set( 'layout_ref/customer_chat', CustomerChatRouter, 'Routes' )
 App.Config.set( 'CustomerChatRef', { controller: 'CustomerChatRef', authentication: true }, 'permanentTask' )
-App.Config.set( 'CustomerChatRef', { prio: 1200, parent: '', name: 'Customer Chat', target: '#layout_ref/customer_chat', switch: true, counter: true, role: ['Agent'], class: 'chat' }, 'NavBar' )
+App.Config.set( 'CustomerChatRef', { prio: 1200, parent: '', name: 'Customer Chat', target: '#layout_ref/customer_chat', key: 'CustomerChatRef', role: ['Agent'], class: 'chat' }, 'NavBar' )
 
 
 class chatWindowRef extends Spine.Controller

app/assets/javascripts/app/controllers/navigation.coffee

@@ -6,18 +6,25 @@ class App.Navigation extends App.ControllerWidgetPermanent
     @render()
 
     # rerender view, e. g. on langauge change
-    @bind 'ui:rerender', (data) =>
+    @bind 'ui:rerender', =>
       @renderMenu()
       @renderPersonal()
 
+    # rerender menu
+    @bind 'menu:render', =>
+      @renderMenu()
+
+    # rerender menu
+    @bind 'personal:render', =>
+      @renderPersonal()
+
     # update selected item
-    @bind 'navupdate', (data) =>
+    @bind 'navupdate', =>
-      @update( arguments[0] )
+      @update(arguments[0])
 
     # rebuild nav bar with given user data
     @bind 'auth', (user) =>
       @log 'Navigation', 'debug', 'navbar rebuild', user
-
       @render()
 
     # fetch new recent viewed after collection change
@@ -43,6 +50,16 @@ class App.Navigation extends App.ControllerWidgetPermanent
   renderMenu: =>
     items = @getItems( navbar: @Config.get( 'NavBar' ) )
 
+    # apply counter and switch info from persistant controllers (if exists)
+    for item in items
+      if item.key
+        worker = App.TaskManager.worker(item.key)
+        if worker
+          if worker.counter
+            item.counter = worker.counter()
+          if worker.switch
+            item.switch = worker.switch()
+
     # get open tabs to repopen on rerender
     open_tab = {}
     @$('.open').children('a').each( (i,d) ->
@@ -56,12 +73,24 @@ class App.Navigation extends App.ControllerWidgetPermanent
       href = $(d).attr('href')
       active_tab[href] = true
     )
+
+    # render menu
     @$('.js-menu').html App.view('navigation/menu')(
       items:      items
       open_tab:   open_tab
       active_tab: active_tab
     )
 
+    # bind on switch changes and execute it on controller
+    @$('.js-menu .js-switch').bind('change', (e) =>
+      val = $(e.target).prop('checked')
+      key = $(e.target).closest('.menu-item').data('key')
+      return if !key
+      worker = App.TaskManager.worker(key)
+      return if !worker
+      worker.switch(val)
+    )
+
   renderPersonal: =>
     @recentViewNavbarItemsRebuild()
     items = @getItems( navbar: @Config.get( 'NavBarRight' ) )
@@ -198,7 +227,6 @@ class App.Navigation extends App.ControllerWidgetPermanent
       # remove not needed popovers
       @delay( removePopovers, 280, 'removePopovers' )
 
-
     # observer search box
     @$('#global-search').bind( 'focusout', (e) =>
       # delay to be able to click x

app/assets/javascripts/app/views/navigation/menu.jst.eco

@@ -21,19 +21,19 @@
     </ul>
   </div>
   <% else: %>
-  <a class="menu-item js-<%- item.class %>MenuItem<%- ' is-active' if @active_tab[item.target] %>" href="<%= item.target %>">
+  <a class="menu-item js-<%- item.class %>MenuItem<%- ' is-active' if @active_tab[item.target] %>" href="<%= item.target %>" data-key="<%- item.key %>">
     <%- @Icon(item.class, 'menu-item-icon') %>
     <span class="menu-item-name">
       <%- @T(item.name) %>
     </span>
-    <% if item.counter: %>
+    <% if item.counter isnt undefined: %>
-    <span class="counter badge badge--big"></span>
+      <span class="counter badge badge--big"><%= item.counter %></span>
     <% end %>
-    <% if item.switch: %>
+    <% if item.switch isnt undefined: %>
-    <span class="zammad-switch zammad-switch--dark zammad-switch--small">
+      <span class="zammad-switch zammad-switch--dark zammad-switch--small">
-       <input type="checkbox" id="<%- item.class %>-switch">
+         <input type="checkbox" id="<%- item.class %>-switch" class="js-switch" <% if item.switch: %>checked<% end %>>
-       <label for="<%- item.class %>-switch"></label>
+         <label for="<%- item.class %>-switch"></label>
-    </span>
+      </span>
     <% end %>
   </a>
   <% end %>