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
|
||||
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
|
||||
class App.ChannelChat extends App.Controller
|
||||
events:
|
||||
'click .js-new': 'new'
|
||||
'click .js-add': 'new'
|
||||
'click .js-edit': 'edit'
|
||||
'click .js-delete': 'delete'
|
||||
'click .js-remove': 'remove'
|
||||
'click .js-widget': 'widget'
|
||||
'change .js-params': 'updateParams'
|
||||
'keyup .js-params': 'updateParams'
|
||||
|
||||
constructor: ->
|
||||
super
|
||||
@interval(@load, 30000)
|
||||
#@load()
|
||||
|
||||
@widgetDesignerPermanentParams =
|
||||
id: 'id'
|
||||
|
||||
load: =>
|
||||
@startLoading()
|
||||
@ajax(
|
||||
|
|
@ -51,9 +34,16 @@ class App.ChannelChatOverview extends App.Controller
|
|||
for chat_id in data.chat_ids
|
||||
chats.push App.Chat.find(chat_id)
|
||||
|
||||
@html App.view('channel/chat_overview')(
|
||||
@html App.view('channel/chat')(
|
||||
baseurl: window.location.origin
|
||||
chats: chats
|
||||
)
|
||||
@updateParams()
|
||||
|
||||
new App.SettingsArea(
|
||||
el: @$('.js-settings')
|
||||
area: 'Chat::Base'
|
||||
)
|
||||
|
||||
new: (e) =>
|
||||
new App.ControllerGenericNew(
|
||||
|
|
@ -69,7 +59,7 @@ class App.ChannelChatOverview extends App.Controller
|
|||
|
||||
edit: (e) =>
|
||||
e.preventDefault()
|
||||
id = $(e.target).closest('.action').data('id')
|
||||
id = $(e.target).closest('tr').data('id')
|
||||
new App.ControllerGenericEdit(
|
||||
id: id
|
||||
genericObject: 'Chat'
|
||||
|
|
@ -79,9 +69,9 @@ class App.ChannelChatOverview extends App.Controller
|
|||
callback: @load
|
||||
)
|
||||
|
||||
delete: (e) =>
|
||||
remove: (e) =>
|
||||
e.preventDefault()
|
||||
id = $(e.target).closest('.action').data('id')
|
||||
id = $(e.target).closest('tr').data('id')
|
||||
item = App.Chat.find(id)
|
||||
new App.ControllerGenericDestroyConfirm(
|
||||
item: item
|
||||
|
|
@ -97,26 +87,6 @@ class App.ChannelChatOverview extends App.Controller
|
|||
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: =>
|
||||
quote = (value) ->
|
||||
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>
|
||||
|
||||
<h2><%- @T('Settings') %></h2>
|
||||
<hr>
|
||||
|
||||
<h2><%- @T('Widget Designer') %></h2>
|
||||
<form class="js-params">
|
||||
|
||||
<fieldset>
|
||||
|
|
|
|||
Loading…
Reference in a new issue