Rough reworked.

This commit is contained in:
Martin Edenhofer 2015-11-16 13:47:19 +01:00
parent 5933dd8b49
commit 0a291f9e4c
5 changed files with 166 additions and 171 deletions

View file

@ -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

View 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="&lt;strong&gt;Chat&lt;/strong&gt; 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>
&lt;script src="<%= @baseurl %>/assets/chat/chat.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(function() {
new ZammadChat({
<span class="js-modal-params"></span>
});
});
&lt;/script&gt;</pre>
</form>
</div>

View file

@ -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="&lt;strong&gt;Chat&lt;/strong&gt; 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>
&lt;script src="<%= @baseurl %>/assets/chat/chat.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(function() {
new ZammadChat({
<span class="js-modal-params"></span>
});
});
&lt;/script&gt;</pre>

View file

@ -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>

View file

@ -8,7 +8,9 @@
<div class="js-settings"></div>
<h2><%- @T('Settings') %></h2>
<hr>
<h2><%- @T('Widget Designer') %></h2>
<form class="js-params">
<fieldset>