Rough reworked.
This commit is contained in:
Martin Edenhofer
parent
5933dd8b49
commit
0a291f9e4c
5 changed files with 166 additions and 171 deletions
|
|
@ -1,37 +1,20 @@
|
||||||
class App.ChannelChat extends App.ControllerTabs
|
class App.ChannelChat extends App.Controller
|
||||||
header: 'Chat'
|
|
||||||
constructor: ->
|
|
||||||
super
|
|
||||||
|
|
||||||
@title 'Chat', true
|
|
||||||
|
|
||||||
@tabs = [
|
|
||||||
{
|
|
||||||
name: 'Chat Channels',
|
|
||||||
target: 'channels',
|
|
||||||
controller: App.ChannelChatOverview
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Settings',
|
|
||||||
target: 'setting',
|
|
||||||
controller: App.SettingsArea, params: { area: 'Chat::Base' },
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
@render()
|
|
||||||
|
|
||||||
class App.ChannelChatOverview extends App.Controller
|
|
||||||
events:
|
events:
|
||||||
'click .js-new': 'new'
|
'click .js-add': 'new'
|
||||||
'click .js-edit': 'edit'
|
'click .js-edit': 'edit'
|
||||||
'click .js-delete': 'delete'
|
'click .js-remove': 'remove'
|
||||||
'click .js-widget': 'widget'
|
'click .js-widget': 'widget'
|
||||||
|
'change .js-params': 'updateParams'
|
||||||
|
'keyup .js-params': 'updateParams'
|
||||||
|
|
||||||
constructor: ->
|
constructor: ->
|
||||||
super
|
super
|
||||||
@interval(@load, 30000)
|
@interval(@load, 30000)
|
||||||
#@load()
|
#@load()
|
||||||
|
|
||||||
|
@widgetDesignerPermanentParams =
|
||||||
|
id: 'id'
|
||||||
|
|
||||||
load: =>
|
load: =>
|
||||||
@startLoading()
|
@startLoading()
|
||||||
@ajax(
|
@ajax(
|
||||||
|
|
@ -51,9 +34,16 @@ class App.ChannelChatOverview extends App.Controller
|
||||||
for chat_id in data.chat_ids
|
for chat_id in data.chat_ids
|
||||||
chats.push App.Chat.find(chat_id)
|
chats.push App.Chat.find(chat_id)
|
||||||
|
|
||||||
@html App.view('channel/chat_overview')(
|
@html App.view('channel/chat')(
|
||||||
|
baseurl: window.location.origin
|
||||||
chats: chats
|
chats: chats
|
||||||
)
|
)
|
||||||
|
@updateParams()
|
||||||
|
|
||||||
|
new App.SettingsArea(
|
||||||
|
el: @$('.js-settings')
|
||||||
|
area: 'Chat::Base'
|
||||||
|
)
|
||||||
|
|
||||||
new: (e) =>
|
new: (e) =>
|
||||||
new App.ControllerGenericNew(
|
new App.ControllerGenericNew(
|
||||||
|
|
@ -62,14 +52,14 @@ class App.ChannelChatOverview extends App.Controller
|
||||||
object: 'Chat'
|
object: 'Chat'
|
||||||
objects: 'Chats'
|
objects: 'Chats'
|
||||||
genericObject: 'Chat'
|
genericObject: 'Chat'
|
||||||
callback: @load
|
callback: @load
|
||||||
container: @el.closest('.content')
|
container: @el.closest('.content')
|
||||||
large: true
|
large: true
|
||||||
)
|
)
|
||||||
|
|
||||||
edit: (e) =>
|
edit: (e) =>
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
id = $(e.target).closest('.action').data('id')
|
id = $(e.target).closest('tr').data('id')
|
||||||
new App.ControllerGenericEdit(
|
new App.ControllerGenericEdit(
|
||||||
id: id
|
id: id
|
||||||
genericObject: 'Chat'
|
genericObject: 'Chat'
|
||||||
|
|
@ -79,9 +69,9 @@ class App.ChannelChatOverview extends App.Controller
|
||||||
callback: @load
|
callback: @load
|
||||||
)
|
)
|
||||||
|
|
||||||
delete: (e) =>
|
remove: (e) =>
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
id = $(e.target).closest('.action').data('id')
|
id = $(e.target).closest('tr').data('id')
|
||||||
item = App.Chat.find(id)
|
item = App.Chat.find(id)
|
||||||
new App.ControllerGenericDestroyConfirm(
|
new App.ControllerGenericDestroyConfirm(
|
||||||
item: item
|
item: item
|
||||||
|
|
@ -97,26 +87,6 @@ class App.ChannelChatOverview extends App.Controller
|
||||||
id: id
|
id: id
|
||||||
)
|
)
|
||||||
|
|
||||||
class Widget extends App.ControllerModal
|
|
||||||
events:
|
|
||||||
'change .js-params': 'updateParams'
|
|
||||||
'keyup .js-params': 'updateParams'
|
|
||||||
|
|
||||||
constructor: ->
|
|
||||||
super
|
|
||||||
@head = 'Widget'
|
|
||||||
@close = true
|
|
||||||
@render()
|
|
||||||
@show()
|
|
||||||
|
|
||||||
render: ->
|
|
||||||
@content = $( App.view('channel/chat_js_widget')(
|
|
||||||
baseurl: window.location.origin
|
|
||||||
))
|
|
||||||
|
|
||||||
onShown: =>
|
|
||||||
@updateParams()
|
|
||||||
|
|
||||||
updateParams: =>
|
updateParams: =>
|
||||||
quote = (value) ->
|
quote = (value) ->
|
||||||
if value.replace
|
if value.replace
|
||||||
|
|
|
||||||
141
app/assets/javascripts/app/views/channel/chat.jst.eco
Normal file
141
app/assets/javascripts/app/views/channel/chat.jst.eco
Normal file
|
|
@ -0,0 +1,141 @@
|
||||||
|
<div class="page-header">
|
||||||
|
<div class="page-header-title">
|
||||||
|
<h1><%- @T('Chat') %> <small></small></h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p><%- @T('With form you can add a formular to your web page witch directly generates a Ticket for you.') %></p>
|
||||||
|
|
||||||
|
<div class="js-settings"></div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h2><%- @T('Topics') %></h2>
|
||||||
|
|
||||||
|
<% if _.isEmpty(@chats): %>
|
||||||
|
<p><%- @T('You have no configured chat\'s right now.') %></p>
|
||||||
|
<% else: %>
|
||||||
|
<table class="settings-list">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th style="white-space: nowrap;"><%- @T('Name') %></th>
|
||||||
|
<th style="white-space: nowrap;"><%- @T('Note') %></th>
|
||||||
|
<th style="white-space: nowrap;"><%- @T('Max Queue') %></th>
|
||||||
|
<th style="white-space: nowrap;"><%- @T('Delete') %></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<% for chat in @chats: %>
|
||||||
|
<tr data-id="<%= chat.id %>">
|
||||||
|
<td>
|
||||||
|
<label class="inline-label">
|
||||||
|
<a class="js-edit is-clickable"><%= chat.name %></a>
|
||||||
|
</label>
|
||||||
|
<td>
|
||||||
|
<label class="inline-label">
|
||||||
|
<%= chat.note %>
|
||||||
|
</label>
|
||||||
|
<td>
|
||||||
|
<label class="inline-label">
|
||||||
|
<%= chat.max_queue %>
|
||||||
|
</label>
|
||||||
|
<td>
|
||||||
|
<div class="settings-list-rowControls">
|
||||||
|
<div class="btn btn--text js-remove">
|
||||||
|
<%- @Icon('trash') %> <%- @T('Remove') %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
|
<tr class="settings-list-controlRow">
|
||||||
|
<td>
|
||||||
|
<td>
|
||||||
|
<td>
|
||||||
|
<td>
|
||||||
|
<div class="btn btn--text js-add">
|
||||||
|
<%- @Icon('plus-small') %> <%- @T('Add') %>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<% end %>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h2><%- @T('Widget Designer') %></h2>
|
||||||
|
|
||||||
|
<form class="js-params">
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<div class="input form-group">
|
||||||
|
<div class="formGroup-label">
|
||||||
|
<label for="form-chat-title"><%- @T('Title of the Chat') %></label>
|
||||||
|
</div>
|
||||||
|
<div class="controls">
|
||||||
|
<input type="text" id="form-chat-title" name="title" value="<strong>Chat</strong> with us!">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="input form-group">
|
||||||
|
<div class="formGroup-label">
|
||||||
|
<label for="form-chat-background"><%- @T('Background color') %></label>
|
||||||
|
</div>
|
||||||
|
<div class="controls">
|
||||||
|
<input type="text" id="form-chat-background" name="background" value="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="input form-group">
|
||||||
|
<div class="formGroup-label">
|
||||||
|
<label for="form-chat-fontsize"><%- @T('Fontsize') %></label>
|
||||||
|
</div>
|
||||||
|
<div class="controls">
|
||||||
|
<input type="text" id="form-chat-fontsize" name="fontSize" value="12px">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<table class="settings-list">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th style="white-space: nowrap;"><%- @T('Option') %></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<label class="inline-label">
|
||||||
|
<span class="checkbox-replacement checkbox-replacement--inline">
|
||||||
|
<input type="checkbox" name="debug" value="true">
|
||||||
|
<%- @Icon('checkbox', 'icon-unchecked') %>
|
||||||
|
<%- @Icon('checkbox-checked', 'icon-checked') %>
|
||||||
|
</span>
|
||||||
|
<%- @T('Enable debugging for implementation.') %>
|
||||||
|
</label>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<label class="inline-label">
|
||||||
|
<span class="checkbox-replacement checkbox-replacement--inline">
|
||||||
|
<input type="checkbox" name="flat" value="true">
|
||||||
|
<%- @Icon('checkbox', 'icon-unchecked') %>
|
||||||
|
<%- @Icon('checkbox-checked', 'icon-checked') %>
|
||||||
|
</span>
|
||||||
|
<%- @T('Flat design.') %>
|
||||||
|
</label>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p><%- @T('You need to add the following Java Script code snipped to your web page') %>:
|
||||||
|
|
||||||
|
<pre>
|
||||||
|
<script src="<%= @baseurl %>/assets/chat/chat.min.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$(function() {
|
||||||
|
new ZammadChat({
|
||||||
|
<span class="js-modal-params"></span>
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script></pre>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
@ -1,74 +0,0 @@
|
||||||
<div class="js-params">
|
|
||||||
|
|
||||||
<fieldset>
|
|
||||||
<div class="input form-group">
|
|
||||||
<div class="formGroup-label">
|
|
||||||
<label for="form-chat-title"><%- @T('Title of the Chat') %></label>
|
|
||||||
</div>
|
|
||||||
<div class="controls">
|
|
||||||
<input type="text" id="form-chat-title" name="title" value="<strong>Chat</strong> with us!">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="input form-group">
|
|
||||||
<div class="formGroup-label">
|
|
||||||
<label for="form-chat-background"><%- @T('Background color') %></label>
|
|
||||||
</div>
|
|
||||||
<div class="controls">
|
|
||||||
<input type="text" id="form-chat-background" name="background" value="">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="input form-group">
|
|
||||||
<div class="formGroup-label">
|
|
||||||
<label for="form-chat-fontsize"><%- @T('Fontsize') %></label>
|
|
||||||
</div>
|
|
||||||
<div class="controls">
|
|
||||||
<input type="text" id="form-chat-fontsize" name="fontSize" value="12px">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<table class="settings-list">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th style="white-space: nowrap;"><%- @T('Option') %></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<label class="inline-label">
|
|
||||||
<span class="checkbox-replacement checkbox-replacement--inline">
|
|
||||||
<input type="checkbox" name="debug" value="true">
|
|
||||||
<%- @Icon('checkbox', 'icon-unchecked') %>
|
|
||||||
<%- @Icon('checkbox-checked', 'icon-checked') %>
|
|
||||||
</span>
|
|
||||||
<%- @T('Enable debugging for implementation.') %>
|
|
||||||
</label>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<label class="inline-label">
|
|
||||||
<span class="checkbox-replacement checkbox-replacement--inline">
|
|
||||||
<input type="checkbox" name="flat" value="true">
|
|
||||||
<%- @Icon('checkbox', 'icon-unchecked') %>
|
|
||||||
<%- @Icon('checkbox-checked', 'icon-checked') %>
|
|
||||||
</span>
|
|
||||||
<%- @T('Flat design.') %>
|
|
||||||
</label>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p><%- @T('You need to add the following Java Script code snipped to your web page') %>:
|
|
||||||
|
|
||||||
<pre>
|
|
||||||
<script src="<%= @baseurl %>/assets/chat/chat.min.js"></script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
$(function() {
|
|
||||||
new ZammadChat({
|
|
||||||
<span class="js-modal-params"></span>
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script></pre>
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
|
|
||||||
<h2><%- @T('Channels') %></h2>
|
|
||||||
|
|
||||||
<% if _.isEmpty(@chats): %>
|
|
||||||
<p><%- @T('You have no configured chat\'s right now.') %></p>
|
|
||||||
<% else: %>
|
|
||||||
<% for chat in @chats: %>
|
|
||||||
<div class="action" data-id="<%- chat.id %>">
|
|
||||||
|
|
||||||
<div class="action-flow action-flow--row">
|
|
||||||
<div class="action-row">
|
|
||||||
<h2><%= chat.name %></h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="action-block action-block--flex">
|
|
||||||
<div class="label"><%- @T('Note') %></div>
|
|
||||||
<%= chat.note %>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="action-block action-block--flex">
|
|
||||||
<div class="label"><%- @T('At a glance') %></div>
|
|
||||||
<%- @T('Sessions last 24 h') %><%= chat.last_24_h %><br>
|
|
||||||
<%- @T('Sessions last week') %><%= chat.last_week %><br>
|
|
||||||
<%- @T('Sessions last month') %><%= chat.last_month %><br>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="action-block action-block--flex">
|
|
||||||
<div class="label"><%- @T('Public') %></div>
|
|
||||||
<%= chat.public %>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="action-controls">
|
|
||||||
<div class="btn btn--danger btn--secondary js-delete"><%- @T('Delete') %></div>
|
|
||||||
<div class="btn js-edit"><%- @T('Edit') %></div>
|
|
||||||
<% if chat.public: %><div class="btn js-widget"><%- @T('Design Widget') %></div><% end %>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<% end %>
|
|
||||||
<% end %>
|
|
||||||
|
|
||||||
<a class="btn btn--success js-new"><%- @T('New') %></a>
|
|
||||||
|
|
@ -8,7 +8,9 @@
|
||||||
|
|
||||||
<div class="js-settings"></div>
|
<div class="js-settings"></div>
|
||||||
|
|
||||||
<h2><%- @T('Settings') %></h2>
|
<hr>
|
||||||
|
|
||||||
|
<h2><%- @T('Widget Designer') %></h2>
|
||||||
<form class="js-params">
|
<form class="js-params">
|
||||||
|
|
||||||
<fieldset>
|
<fieldset>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue