From b654c4d34bbf3021ad2e9edf8bc9e11800be16a1 Mon Sep 17 00:00:00 2001 From: Martin Edenhofer Date: Thu, 12 Nov 2015 14:19:41 +0100 Subject: [PATCH 1/4] Added "connection" placeholder screen for 10 sec. Fixed updating wait list counter in backend. --- lib/sessions/event/chat_base.rb | 17 ++++++--------- lib/sessions/event/chat_session_init.rb | 2 +- lib/sessions/event/chat_session_start.rb | 24 ++++++++++++++------- public/assets/chat/chat.coffee | 27 +++++++++++++++++++++--- 4 files changed, 48 insertions(+), 22 deletions(-) diff --git a/lib/sessions/event/chat_base.rb b/lib/sessions/event/chat_base.rb index 66a35b44b..bdc790cdd 100644 --- a/lib/sessions/event/chat_base.rb +++ b/lib/sessions/event/chat_base.rb @@ -10,16 +10,13 @@ class Sessions::Event::ChatBase def pre # check if feature is enabled - if !Setting.get('chat') - return { - event: 'chat_error', - data: { - state: 'chat_disabled', - }, - } - end - - false + return if Setting.get('chat') + { + event: 'chat_error', + data: { + state: 'chat_disabled', + }, + } end def post diff --git a/lib/sessions/event/chat_session_init.rb b/lib/sessions/event/chat_session_init.rb index 298cbcd3d..6efb8d64a 100644 --- a/lib/sessions/event/chat_session_init.rb +++ b/lib/sessions/event/chat_session_init.rb @@ -34,7 +34,7 @@ class Sessions::Event::ChatSessionInit < Sessions::Event::ChatBase # return new session { - event: 'chat_session_init', + event: 'chat_session_queue', data: { state: 'queue', position: Chat.waiting_chat_count, diff --git a/lib/sessions/event/chat_session_start.rb b/lib/sessions/event/chat_session_start.rb index 13eed93f7..8de9fce3f 100644 --- a/lib/sessions/event/chat_session_start.rb +++ b/lib/sessions/event/chat_session_start.rb @@ -36,15 +36,23 @@ class Sessions::Event::ChatSessionStart < Sessions::Event::ChatBase session_id: chat_session.session_id, }, } - chat_session.send_to_recipients(data, @client_id) + chat_session.send_to_recipients(data) - # send chat_session_init to agent - { - event: 'chat_session_start', - data: { - state: 'ok', - session: chat_session, - }, + # send position update to other waiting sessions + position = 0 + Chat::Session.where(state: 'waiting').order('created_at ASC').each {|local_chat_session| + position += 1 + data = { + event: 'chat_session_queue', + data: { + state: 'queue', + position: position, + session_id: local_chat_session.session_id, + }, + } + local_chat_session.send_to_recipients(data) } + + nil end end diff --git a/public/assets/chat/chat.coffee b/public/assets/chat/chat.coffee index 7c5e9fa99..18b7894d9 100644 --- a/public/assets/chat/chat.coffee +++ b/public/assets/chat/chat.coffee @@ -19,6 +19,7 @@ do($ = window.jQuery, window) -> inputTimeout: null isTyping: false isOnline: true + initialQueueDelay: 10000, debug: true host: 'ws://localhost:6042' strings: @@ -92,9 +93,9 @@ do($ = window.jQuery, window) -> onWebSocketMessage: (e) => pipes = JSON.parse( e.data ) - @log 'debug', 'ws:onmessage', pipes for pipe in pipes + @log 'debug', 'ws:onmessage', pipe switch pipe.event when 'chat_session_message' return if pipe.data.self_written @@ -104,10 +105,9 @@ do($ = window.jQuery, window) -> @onAgentTypingStart() when 'chat_session_start' @onConnectionEstablished pipe.data.agent - @sessionId = pipe.data.session_id when 'chat_session_queue' - @onQueue pipe.data.position @sessionId = pipe.data.session_id + @onQueueScreen pipe.data.position when 'chat_session_closed' @onSessionClosed pipe.data when 'chat_session_left' @@ -254,6 +254,22 @@ do($ = window.jQuery, window) -> @el.find('.zammad-chat-input').prop('disabled', false) @el.find('.zammad-chat-send').prop('disabled', false) + onQueueScreen: (data) => + + # delay initial queue position, show connecting first + show = => + @onQueue data.position + if @initialQueueDelay && !@onInitialQueueDelayId + @onInitialQueueDelayId = setTimeout(show, @initialQueueDelay) + return + + # stop delay of initial queue position + if @onInitialQueueDelayId + clearTimeout(@onInitialQueueDelayId) + + # show queue position + show() + onQueue: (position) => @log 'notice', 'onQueue', position @inQueue = true @@ -361,6 +377,11 @@ do($ = window.jQuery, window) -> @el.find('.zammad-chat-agent-status').addClass('zammad-chat-is-hidden') onConnectionEstablished: (agent) => + + # stop delay of initial queue position + if @onInitialQueueDelayId + clearTimeout(@onInitialQueueDelayId) + @inQueue = false @agent = agent From 02470aa78a296e403586d9cca8b43e6c930add88 Mon Sep 17 00:00:00 2001 From: Martin Edenhofer Date: Thu, 12 Nov 2015 14:35:19 +0100 Subject: [PATCH 2/4] Now use own templates (not from layout ref). --- .../javascripts/app/controllers/chat.coffee | 12 +++++------ .../views/customer_chat/chat_loader.jst.eco | 7 +++++++ .../views/customer_chat/chat_message.jst.eco | 1 + .../customer_chat/chat_status_message.jst.eco | 1 + .../customer_chat/chat_timestamp.jst.eco | 1 + .../views/customer_chat/chat_window.jst.eco | 20 +++++++++++++++++++ 6 files changed, 36 insertions(+), 6 deletions(-) create mode 100644 app/assets/javascripts/app/views/customer_chat/chat_loader.jst.eco create mode 100644 app/assets/javascripts/app/views/customer_chat/chat_message.jst.eco create mode 100644 app/assets/javascripts/app/views/customer_chat/chat_status_message.jst.eco create mode 100644 app/assets/javascripts/app/views/customer_chat/chat_timestamp.jst.eco create mode 100644 app/assets/javascripts/app/views/customer_chat/chat_window.jst.eco diff --git a/app/assets/javascripts/app/controllers/chat.coffee b/app/assets/javascripts/app/controllers/chat.coffee index b16afb616..151370c94 100644 --- a/app/assets/javascripts/app/controllers/chat.coffee +++ b/app/assets/javascripts/app/controllers/chat.coffee @@ -220,7 +220,7 @@ class chatWindow extends App.Controller ) render: -> - @html App.view('layout_ref/customer_chat_window') + @html App.view('customer_chat/chat_window') name: @options.name @el.one 'transitionend', @onTransitionend @@ -353,7 +353,7 @@ class chatWindow extends App.Controller @lastAddedType = sender - @body.append App.view('layout_ref/customer_chat_message') + @body.append App.view('customer_chat/chat_message') message: message sender: sender isNew: isNew @@ -365,7 +365,7 @@ class chatWindow extends App.Controller if !@isTyping @isTyping = true @maybeAddTimestamp() - @body.append App.view('layout_ref/customer_chat_loader')() + @body.append App.view('customer_chat/chat_loader')() @scrollToBottom() # clear old delay, set new @@ -397,7 +397,7 @@ class chatWindow extends App.Controller @lastAddedType = 'timestamp' addTimestamp: (label, time) => - @body.append App.view('layout_ref/customer_chat_timestamp') + @body.append App.view('customer_chat/chat_timestamp') label: label time: time @@ -405,12 +405,12 @@ class chatWindow extends App.Controller @body .find('.js-timestamp') .last() - .replaceWith App.view('layout_ref/customer_chat_timestamp') + .replaceWith App.view('customer_chat/chat_timestamp') label: label time: time addStatusMessage: (message) -> - @body.append App.view('layout_ref/customer_chat_status_message') + @body.append App.view('customer_chat/chat_status_message') message: message @scrollToBottom() diff --git a/app/assets/javascripts/app/views/customer_chat/chat_loader.jst.eco b/app/assets/javascripts/app/views/customer_chat/chat_loader.jst.eco new file mode 100644 index 000000000..bc76c0e36 --- /dev/null +++ b/app/assets/javascripts/app/views/customer_chat/chat_loader.jst.eco @@ -0,0 +1,7 @@ +
+
+ <%- @Icon('loading') %> + <%- @Icon('loading') %> + <%- @Icon('loading') %> +
+
\ No newline at end of file diff --git a/app/assets/javascripts/app/views/customer_chat/chat_message.jst.eco b/app/assets/javascripts/app/views/customer_chat/chat_message.jst.eco new file mode 100644 index 000000000..096477697 --- /dev/null +++ b/app/assets/javascripts/app/views/customer_chat/chat_message.jst.eco @@ -0,0 +1 @@ +
<%- @message %>
\ No newline at end of file diff --git a/app/assets/javascripts/app/views/customer_chat/chat_status_message.jst.eco b/app/assets/javascripts/app/views/customer_chat/chat_status_message.jst.eco new file mode 100644 index 000000000..eff398aa6 --- /dev/null +++ b/app/assets/javascripts/app/views/customer_chat/chat_status_message.jst.eco @@ -0,0 +1 @@ +
<%- @message %>
\ No newline at end of file diff --git a/app/assets/javascripts/app/views/customer_chat/chat_timestamp.jst.eco b/app/assets/javascripts/app/views/customer_chat/chat_timestamp.jst.eco new file mode 100644 index 000000000..c3b688a8e --- /dev/null +++ b/app/assets/javascripts/app/views/customer_chat/chat_timestamp.jst.eco @@ -0,0 +1 @@ +
<%= @label %> <%= @time %>
\ No newline at end of file diff --git a/app/assets/javascripts/app/views/customer_chat/chat_window.jst.eco b/app/assets/javascripts/app/views/customer_chat/chat_window.jst.eco new file mode 100644 index 000000000..183d31f4d --- /dev/null +++ b/app/assets/javascripts/app/views/customer_chat/chat_window.jst.eco @@ -0,0 +1,20 @@ +
+
+
+ <%- @Icon('status') %> + <%- @Icon('status-modified-outer-circle') %> + <%- @Icon('status-modified-inner-circle') %> +
+
+
<%- @name %>
+
+ <%- @Icon('diagonal-cross') %> +
+
+
+
+
+
+
+
<%= @T('Send') %>
+
\ No newline at end of file From 9066ef64b85d7f6c7209274b282a91ec56d7c439 Mon Sep 17 00:00:00 2001 From: Martin Edenhofer Date: Thu, 12 Nov 2015 14:39:46 +0100 Subject: [PATCH 3/4] Now use own templates (not from layout ref). --- app/assets/javascripts/app/controllers/chat.coffee | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/app/controllers/chat.coffee b/app/assets/javascripts/app/controllers/chat.coffee index 151370c94..a75f10345 100644 --- a/app/assets/javascripts/app/controllers/chat.coffee +++ b/app/assets/javascripts/app/controllers/chat.coffee @@ -410,7 +410,7 @@ class chatWindow extends App.Controller time: time addStatusMessage: (message) -> - @body.append App.view('customer_chat/chat_status_message') + @body.append App.view('customer_chat/customer_chat_status_message') message: message @scrollToBottom() From 275ab9a931878678033e64693076d233fdbc0400 Mon Sep 17 00:00:00 2001 From: Martin Edenhofer Date: Thu, 12 Nov 2015 14:42:35 +0100 Subject: [PATCH 4/4] Fixed position in view. --- public/assets/chat/chat.coffee | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/assets/chat/chat.coffee b/public/assets/chat/chat.coffee index 18b7894d9..17f336151 100644 --- a/public/assets/chat/chat.coffee +++ b/public/assets/chat/chat.coffee @@ -107,7 +107,7 @@ do($ = window.jQuery, window) -> @onConnectionEstablished pipe.data.agent when 'chat_session_queue' @sessionId = pipe.data.session_id - @onQueueScreen pipe.data.position + @onQueueScreen pipe.data when 'chat_session_closed' @onSessionClosed pipe.data when 'chat_session_left'