SLA layout_ref WIP
This commit is contained in:
Felix Niklas
parent
61986606f9
commit
aee2bb7969
5 changed files with 692 additions and 11 deletions
|
|
@ -1282,5 +1282,16 @@ class userListRef extends App.ControllerContent
|
||||||
|
|
||||||
App.Config.set( 'layout_ref/user_list', userListRef, 'Routes' )
|
App.Config.set( 'layout_ref/user_list', userListRef, 'Routes' )
|
||||||
|
|
||||||
|
class slaRef extends App.ControllerContent
|
||||||
|
|
||||||
|
constructor: ->
|
||||||
|
super
|
||||||
|
@render()
|
||||||
|
|
||||||
|
render: ->
|
||||||
|
@html App.view('layout_ref/sla')()
|
||||||
|
|
||||||
|
App.Config.set( 'layout_ref/sla', slaRef, 'Routes' )
|
||||||
|
|
||||||
|
|
||||||
App.Config.set( 'LayoutRef', { prio: 1700, parent: '#current_user', name: 'Layout Reference', translate: true, target: '#layout_ref', role: [ 'Admin' ] }, 'NavBarRight' )
|
App.Config.set( 'LayoutRef', { prio: 1700, parent: '#current_user', name: 'Layout Reference', translate: true, target: '#layout_ref', role: [ 'Admin' ] }, 'NavBarRight' )
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
|
<li><a href="#layout_ref/sla">Sla Modal</a></li>
|
||||||
<li><a href="#layout_ref/user_list">User List</a></li>
|
<li><a href="#layout_ref/user_list">User List</a></li>
|
||||||
<li><a href="#layout_ref/admin_placeholder">Admin Placeholder (Inline Tutorials)</a></li>
|
<li><a href="#layout_ref/admin_placeholder">Admin Placeholder (Inline Tutorials)</a></li>
|
||||||
<li><a href="#layout_ref/clues">First Steps (Clues)</a></li>
|
<li><a href="#layout_ref/clues">First Steps (Clues)</a></li>
|
||||||
|
|
|
||||||
500
app/assets/javascripts/app/views/layout_ref/sla.jst.eco
Normal file
500
app/assets/javascripts/app/views/layout_ref/sla.jst.eco
Normal file
|
|
@ -0,0 +1,500 @@
|
||||||
|
<div class="modal modal--local">
|
||||||
|
<div class="modal-backdrop"></div>
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<form>
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<div class="modal-close js-close">
|
||||||
|
<svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
|
||||||
|
</div>
|
||||||
|
<h1 class="modal-title">New Service Level Agreement (SLA)</h1>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<h2>Define Selector</h2>
|
||||||
|
<p>Create rules that single out the tickets for the Service Level Agreement.</p>
|
||||||
|
<div class="horizontal-filters">
|
||||||
|
<div class="horizontal-filter">
|
||||||
|
<div class="horizontal-filter-body">
|
||||||
|
<div class="controls">
|
||||||
|
<div class="u-positionOrigin">
|
||||||
|
<select class="form-control" name="filter_attribute_1">
|
||||||
|
<optgroup label="Ticket">
|
||||||
|
<option>Number</option>
|
||||||
|
<option>Title</option>
|
||||||
|
<option>Group</option>
|
||||||
|
<option>State</option>
|
||||||
|
<option>Priority</option>
|
||||||
|
<option>Owner</option>
|
||||||
|
</optgroup>
|
||||||
|
<optgroup label="Customer">
|
||||||
|
<option>Email</option>
|
||||||
|
<option>Country</option>
|
||||||
|
<option>Group</option>
|
||||||
|
<option>Organization</option>
|
||||||
|
<option>Department</option>
|
||||||
|
<option>VIP</option>
|
||||||
|
</optgroup>
|
||||||
|
<optgroup label="Organization">
|
||||||
|
<option>Country</option>
|
||||||
|
<option>VIP</option>
|
||||||
|
</optgroup>
|
||||||
|
</select>
|
||||||
|
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="controls">
|
||||||
|
<div class="u-positionOrigin">
|
||||||
|
<select class="form-control" name="filter_operator_1">
|
||||||
|
<option>equals to</option>
|
||||||
|
<option>contains</option>
|
||||||
|
<option>begins with</option>
|
||||||
|
<option>ends with</option>
|
||||||
|
<option>is</option>
|
||||||
|
<option>is not</option>
|
||||||
|
</select>
|
||||||
|
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input id="filter_value_1" type="text" class="form-control">
|
||||||
|
</div>
|
||||||
|
<div class="filter-controls">
|
||||||
|
<div class="filter-control filter-control-remove js-remove is-disabled" title="Remove rule">
|
||||||
|
<svg class="icon icon-minus"><use xlink:href="#icon-minus" /></svg>
|
||||||
|
</div>
|
||||||
|
<div class="filter-control filter-control-add js-add" title="Add new rule">
|
||||||
|
<svg class="icon icon-plus"><use xlink:href="#icon-plus" /></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="filter-preview">
|
||||||
|
<table class="table table-hover ">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th style="width: 28px"></th>
|
||||||
|
<th>Customer</th>
|
||||||
|
<th style="width: 42%">Title</th>
|
||||||
|
<th>Group</th>
|
||||||
|
<th style="width: 25%">Created</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr class="item" data-id="1" data-position="1" style="cursor: pointer;">
|
||||||
|
<td>
|
||||||
|
<svg class="icon-priority level-1">
|
||||||
|
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-priority"></use>
|
||||||
|
</svg>
|
||||||
|
</td>
|
||||||
|
<td> <span class="user-popover" data-id="2" data-original-title="" title="">
|
||||||
|
Nicole Braun (Zammad Foundation)
|
||||||
|
</span> </td>
|
||||||
|
<td>
|
||||||
|
<a href="#ticket/zoom/1"> <span title="Welcome to our little planet with flowers and forests asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf">
|
||||||
|
Welcome to our little planet with flowers and forests asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf
|
||||||
|
</span> </a>
|
||||||
|
</td>
|
||||||
|
<td> <span>
|
||||||
|
Users
|
||||||
|
</span> </td>
|
||||||
|
<td class="noTruncate"> <span>
|
||||||
|
<span class="humanTimeFromNow undefined" data-time="2015-01-12T12:58:42.000Z" data-tooltip="01/12/2015 13:58">01/12/2015</span> </span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="item" data-id="3" data-position="3" style="cursor: pointer;">
|
||||||
|
<td>
|
||||||
|
<svg class="icon-priority level-2">
|
||||||
|
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-priority"></use>
|
||||||
|
</svg>
|
||||||
|
</td>
|
||||||
|
<td> <span class="user-popover" data-id="4" data-original-title="" title="">
|
||||||
|
Hans Huber
|
||||||
|
</span> </td>
|
||||||
|
<td>
|
||||||
|
<a href="#ticket/zoom/3"> <span title="Noch mehr Tickets bitte">
|
||||||
|
Noch mehr Tickets bitte
|
||||||
|
</span> </a>
|
||||||
|
</td>
|
||||||
|
<td> <span>
|
||||||
|
Users
|
||||||
|
</span> </td>
|
||||||
|
<td class="noTruncate"> <span>
|
||||||
|
<span class="humanTimeFromNow undefined" data-time="2015-01-20T11:47:43.000Z" data-tooltip="01/20/2015 12:47">01/20/2015</span> </span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="item" data-id="4" data-position="4" style="cursor: pointer;">
|
||||||
|
<td>
|
||||||
|
<svg class="icon-priority level-3">
|
||||||
|
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-priority"></use>
|
||||||
|
</svg>
|
||||||
|
</td>
|
||||||
|
<td> <span class="user-popover" data-id="2" data-original-title="" title="">
|
||||||
|
Nicole Braun (Zammad Foundation)
|
||||||
|
</span> </td>
|
||||||
|
<td>
|
||||||
|
<a href="#ticket/zoom/4"> <span title="Welcome to Zammad!">
|
||||||
|
Welcome to Zammad!
|
||||||
|
</span> </a>
|
||||||
|
</td>
|
||||||
|
<td> <span>
|
||||||
|
Users
|
||||||
|
</span> </td>
|
||||||
|
<td class="noTruncate"> <span>
|
||||||
|
<span class="humanTimeFromNow undefined" data-time="2015-05-04T14:26:51.000Z" data-tooltip="05/04/2015 16:26">05/04/2015</span> </span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="item" data-id="5" data-position="5" style="cursor: pointer;">
|
||||||
|
<td>
|
||||||
|
<svg class="icon-priority level-3">
|
||||||
|
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-priority"></use>
|
||||||
|
</svg>
|
||||||
|
</td>
|
||||||
|
<td> <span class="user-popover" data-id="2" data-original-title="" title="">
|
||||||
|
Nicole Braun (Zammad Foundation)
|
||||||
|
</span> </td>
|
||||||
|
<td>
|
||||||
|
<a href="#ticket/zoom/5"> <span title="das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debugge">
|
||||||
|
das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debugge
|
||||||
|
</span> </a>
|
||||||
|
</td>
|
||||||
|
<td> <span>
|
||||||
|
Users
|
||||||
|
</span> </td>
|
||||||
|
<td class="noTruncate"> <span>
|
||||||
|
<span class="humanTimeFromNow undefined" data-time="2015-06-10T13:41:29.000Z" data-tooltip="06/10/2015 15:41">5 days 21 hours ago</span> </span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="item" data-id="6" data-position="6" style="cursor: pointer;">
|
||||||
|
<td>
|
||||||
|
<svg class="icon-priority level-2">
|
||||||
|
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-priority"></use>
|
||||||
|
</svg>
|
||||||
|
</td>
|
||||||
|
<td> <span class="user-popover" data-id="2" data-original-title="" title="">
|
||||||
|
Nicole Braun (Zammad Foundation)
|
||||||
|
</span> </td>
|
||||||
|
<td>
|
||||||
|
<a href="#ticket/zoom/6"> <span title="script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler">
|
||||||
|
script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler
|
||||||
|
</span> </a>
|
||||||
|
</td>
|
||||||
|
<td> <span>
|
||||||
|
Users
|
||||||
|
</span> </td>
|
||||||
|
<td class="noTruncate"> <span>
|
||||||
|
<span class="humanTimeFromNow undefined" data-time="2015-06-11T07:26:31.000Z" data-tooltip="06/11/2015 09:26">5 days 3 hours ago</span> </span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Auto Attributes</h2>
|
||||||
|
<div class="horizontal-filters">
|
||||||
|
<div class="horizontal-filter">
|
||||||
|
<div class="horizontal-filter-body">
|
||||||
|
<div class="horizontal-filter-text">Set</div>
|
||||||
|
<div class="controls">
|
||||||
|
<div class="u-positionOrigin">
|
||||||
|
<select class="form-control" name="filter_attribute_2">
|
||||||
|
<option>Owner</option>
|
||||||
|
<option>Group</option>
|
||||||
|
<option>State</option>
|
||||||
|
<option>Priority</option>
|
||||||
|
</select>
|
||||||
|
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="horizontal-filter-text">to</div>
|
||||||
|
<div class="controls">
|
||||||
|
<div class="u-positionOrigin">
|
||||||
|
<select class="form-control" name="filter_operator_2">
|
||||||
|
<option>Max Reuter</option>
|
||||||
|
<option>Caroline Blank</option>
|
||||||
|
<option>Joe Noes</option>
|
||||||
|
<option>Fizz Buzz</option>
|
||||||
|
<option>Captain Chunk</option>
|
||||||
|
<option>Marele Moon</option>
|
||||||
|
</select>
|
||||||
|
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="horizontal-filter-text">or</div>
|
||||||
|
<div class="controls">
|
||||||
|
<div class="u-positionOrigin">
|
||||||
|
<select class="form-control" name="filter_operator_2">
|
||||||
|
<option>-</option>
|
||||||
|
<option>Caroline Blank</option>
|
||||||
|
<option>Joe Noes</option>
|
||||||
|
<option>Fizz Buzz</option>
|
||||||
|
<option>Captain Chunk</option>
|
||||||
|
<option>Marele Moon</option>
|
||||||
|
</select>
|
||||||
|
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="filter-controls">
|
||||||
|
<div class="filter-control filter-control-remove js-remove" title="Remove rule">
|
||||||
|
<svg class="icon icon-minus"><use xlink:href="#icon-minus" /></svg>
|
||||||
|
</div>
|
||||||
|
<div class="filter-control filter-control-add js-add" title="Add new rule">
|
||||||
|
<svg class="icon icon-plus"><use xlink:href="#icon-plus" /></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="horizontal-filter">
|
||||||
|
<div class="horizontal-filter-body">
|
||||||
|
<div class="horizontal-filter-text">Set</div>
|
||||||
|
<div class="controls">
|
||||||
|
<div class="u-positionOrigin">
|
||||||
|
<select class="form-control" name="filter_attribute_2">
|
||||||
|
<option>Owner</option>
|
||||||
|
<option>Group</option>
|
||||||
|
<option>State</option>
|
||||||
|
<option selected>Priority</option>
|
||||||
|
</select>
|
||||||
|
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="horizontal-filter-text">to</div>
|
||||||
|
<div class="controls">
|
||||||
|
<div class="u-positionOrigin">
|
||||||
|
<select class="form-control" name="filter_operator_2">
|
||||||
|
<option>High</option>
|
||||||
|
<option>Normal</option>
|
||||||
|
<option>Low</option>
|
||||||
|
</select>
|
||||||
|
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="filter-controls">
|
||||||
|
<div class="filter-control filter-control-remove js-remove" title="Remove rule">
|
||||||
|
<svg class="icon icon-minus"><use xlink:href="#icon-minus" /></svg>
|
||||||
|
</div>
|
||||||
|
<div class="filter-control filter-control-add js-add" title="Add new rule">
|
||||||
|
<svg class="icon icon-plus"><use xlink:href="#icon-plus" /></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Schedule</h2>
|
||||||
|
<h3>Business Hours <span class="subtitle">in European Central Time <a class="btn btn--text btn--subtle" href="#">(change)</a></span></h3>
|
||||||
|
<div class="week">
|
||||||
|
<div class="day">
|
||||||
|
<label class="day-name" for="day-monday">Mo</label>
|
||||||
|
<input class="day-checkbox" type="checkbox" id="day-monday" checked>
|
||||||
|
<div class="day-times">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="monday_start_time">from</label>
|
||||||
|
<input type="time" id="monday_start_time" value="07:00">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="monday_end_time">till</label>
|
||||||
|
<input type="time" id="monday_end_time" value="18:00">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="day">
|
||||||
|
<label class="day-name" for="day-tuesday">Tu</label>
|
||||||
|
<input class="day-checkbox" type="checkbox" id="day-tuesday" checked>
|
||||||
|
<div class="day-times">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="tuesday_start_time">from</label>
|
||||||
|
<input type="time" id="tuesday_start_time" value="07:00">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="tuesday_end_time">till</label>
|
||||||
|
<input type="time" id="tuesday_end_time" value="18:00">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="day">
|
||||||
|
<label class="day-name" for="day-wednesday">We</label>
|
||||||
|
<input class="day-checkbox" type="checkbox" id="day-wednesday" checked>
|
||||||
|
<div class="day-times">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="wednesday_start_time">from</label>
|
||||||
|
<input type="time" id="wednesday_start_time" value="07:00">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="wednesday_end_time">till</label>
|
||||||
|
<input type="time" id="wednesday_end_time" value="18:00">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="day">
|
||||||
|
<label class="day-name" for="day-thursday">Th</label>
|
||||||
|
<input class="day-checkbox" type="checkbox" id="day-thursday" checked>
|
||||||
|
<div class="day-times">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="thursday_start_time">from</label>
|
||||||
|
<input type="time" id="thursday_start_time" value="07:00">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="thursday_end_time">till</label>
|
||||||
|
<input type="time" id="thursday_end_time" value="18:00">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="day">
|
||||||
|
<label class="day-name" for="day-friday">Fr</label>
|
||||||
|
<input class="day-checkbox" type="checkbox" id="day-friday" checked>
|
||||||
|
<div class="day-times">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="friday_start_time">from</label>
|
||||||
|
<input type="time" id="friday_start_time" value="07:00">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="friday_end_time">till</label>
|
||||||
|
<input type="time" id="friday_end_time" value="13:00">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="day">
|
||||||
|
<label class="day-name" for="day-saturday">Sa</label>
|
||||||
|
<input class="day-checkbox" type="checkbox" id="day-saturday">
|
||||||
|
<div class="day-times">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="saturday_start_time">from</label>
|
||||||
|
<input type="time" id="saturday_start_time" value="09:00">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="saturday_end_time">till</label>
|
||||||
|
<input type="time" id="saturday_end_time" value="16:00">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="day">
|
||||||
|
<label class="day-name" for="day-sunday">Su</label>
|
||||||
|
<input class="day-checkbox" type="checkbox" id="day-sunday">
|
||||||
|
<div class="day-times">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="sunday_start_time">from</label>
|
||||||
|
<input type="time" id="sunday_start_time">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="sunday_end_time">till</label>
|
||||||
|
<input type="time" id="sunday_end_time">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>Response Times <span class="subtitle">in Business Hours</span></h3>
|
||||||
|
<div>
|
||||||
|
<input type="checkbox" checked id="first_response_time">
|
||||||
|
<label class="inline-label" for="first_response_time">First Response Time</label>
|
||||||
|
<input type="time">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="checkbox" checked id="update_time">
|
||||||
|
<label class="inline-label" for="update_time">Update Time</label>
|
||||||
|
<input type="time">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="checkbox" id="solution_time"> <label
|
||||||
|
class="inline-label" for="solution_time">Solution Time</label>
|
||||||
|
<input type="time">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer horizontal">
|
||||||
|
<a class="subtle-link standalone js-cancel" href="#/">Cancel & Go Back</a>
|
||||||
|
<button type="submit" class="btn btn--success js-submit align-right">Create SLA</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sidebar NavBarAdmin">
|
||||||
|
<h2>Manage</h2>
|
||||||
|
|
||||||
|
<ul class="nav nav-pills nav-stacked">
|
||||||
|
<li class="">
|
||||||
|
<a href="#manage/users">Users</a>
|
||||||
|
<li>
|
||||||
|
<a href="#manage/groups">Groups</a>
|
||||||
|
<li>
|
||||||
|
<a href="#manage/organizations">Organizations</a>
|
||||||
|
<li>
|
||||||
|
<a href="#manage/overviews">Overviews</a>
|
||||||
|
<li>
|
||||||
|
<a href="#manage/text_modules">TextModules</a>
|
||||||
|
|
||||||
|
<li class="active">
|
||||||
|
<a href="#manage/slas">SLAs</a>
|
||||||
|
<li>
|
||||||
|
<a href="#manage/schedulers">Schedulers</a>
|
||||||
|
<li>
|
||||||
|
<a href="#manage/triggers">Triggers</a>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Channels</h2>
|
||||||
|
|
||||||
|
<ul class="nav nav-pills nav-stacked">
|
||||||
|
<li>
|
||||||
|
<a href="#channels/web">Web</a>
|
||||||
|
<li>
|
||||||
|
<a href="#channels/email">Email</a>
|
||||||
|
<li>
|
||||||
|
<a href="#channels/chat">Chat</a>
|
||||||
|
<li>
|
||||||
|
<a href="#channels/twitter">Twitter</a>
|
||||||
|
<li>
|
||||||
|
<a href="#channels/facebook">Facebook</a>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Settings</h2>
|
||||||
|
|
||||||
|
<ul class="nav nav-pills nav-stacked">
|
||||||
|
<li>
|
||||||
|
<a href="#settings/system">System</a>
|
||||||
|
<li>
|
||||||
|
<a href="#settings/security">Security</a>
|
||||||
|
<li>
|
||||||
|
<a href="#settings/import">Import</a>
|
||||||
|
<li>
|
||||||
|
<a href="#settings/ticket">Ticket</a>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>System</h2>
|
||||||
|
|
||||||
|
<ul class="nav nav-pills nav-stacked">
|
||||||
|
<li>
|
||||||
|
<a href="#system/package">Packages</a>
|
||||||
|
<li>
|
||||||
|
<a href="#system/object_manager">Objects</a>
|
||||||
|
<li>
|
||||||
|
<a href="#system/translation">Translations</a>
|
||||||
|
<li>
|
||||||
|
<a href="#system/maintenance">Maintenance</a>
|
||||||
|
<li>
|
||||||
|
<a href="#system/sessions">Sessions</a>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="main flex">
|
||||||
|
<div class="page-header">
|
||||||
|
<div class="page-header-title">
|
||||||
|
<h1>SLAs <small>Management</small></h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="page-header-meta">
|
||||||
|
<a class="btn btn--success" data-type="new">New SLA</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-overview">
|
||||||
|
<p>
|
||||||
|
<strong>Service-Level-Agreements</strong>, abgekürzt <b>SLAs</b>, unterstützen Sie gegenüber Kunden gewisse zeitliche Reaktionen einzuhalten. Somit können Sie z. B. sagen Kunden sollen immer nach spätestens 8 Stunden eine Reaktion von Ihnen bekommen. Falls es zu einer drohenden Unterschreitung oder einer Unterschreitung kommt, weißt Zammad Sie auf solche Ereignisse hin.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Es können <strong>Reaktionszeit</strong> (Zeit zwischen Erstellung eines Tickets und erster Reaktion eines Agenten), <strong>Aktualisierungszeit</strong> (Zeit zwischen Nachfrage eines Kunden und Reaktion eines Agenten) und <strong>Lösungszeit</strong> (Zeit zwischen Erstellung und schließen eines Tickets) definiert werden.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Drohenden Unterschreitungen oder Unterschreitungen werden in einer eigenen Ansicht in den Übersichten angezeigt. Zudem können <strong>E-Mail Benachrichtigungen</strong> konfiguriert werden.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
9
app/assets/stylesheets/bootstrap.css
vendored
9
app/assets/stylesheets/bootstrap.css
vendored
|
|
@ -233,9 +233,6 @@ th {
|
||||||
.dropup > .btn > .caret {
|
.dropup > .btn > .caret {
|
||||||
border-top-color: #000 !important;
|
border-top-color: #000 !important;
|
||||||
}
|
}
|
||||||
.label {
|
|
||||||
border: 1px solid #000;
|
|
||||||
}
|
|
||||||
.table {
|
.table {
|
||||||
border-collapse: collapse !important;
|
border-collapse: collapse !important;
|
||||||
}
|
}
|
||||||
|
|
@ -1658,12 +1655,6 @@ legend {
|
||||||
border: 0;
|
border: 0;
|
||||||
border-bottom: 1px solid #e5e5e5;
|
border-bottom: 1px solid #e5e5e5;
|
||||||
}
|
}
|
||||||
label {
|
|
||||||
display: inline-block;
|
|
||||||
max-width: 100%;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
input[type="search"] {
|
input[type="search"] {
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
|
|
|
||||||
|
|
@ -350,11 +350,12 @@ span[data-tooltip]:hover:before {
|
||||||
}
|
}
|
||||||
|
|
||||||
&.btn--text {
|
&.btn--text {
|
||||||
padding-left: 0;
|
font-size: inherit;
|
||||||
padding-right: 0;
|
padding: 0;
|
||||||
color: hsl(203,65%,55%);
|
color: hsl(203,65%,55%);
|
||||||
border: none;
|
border: none;
|
||||||
background: none;
|
background: none;
|
||||||
|
vertical-align: baseline;
|
||||||
&:active {
|
&:active {
|
||||||
color: hsl(203,65%,45%);
|
color: hsl(203,65%,45%);
|
||||||
}
|
}
|
||||||
|
|
@ -670,6 +671,13 @@ h3 {
|
||||||
font-weight: 200;
|
font-weight: 200;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.07em;
|
letter-spacing: 0.07em;
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 12px;
|
||||||
|
text-transform: none;
|
||||||
|
color: hsl(0,0%,60%);
|
||||||
|
letter-spacing: initial;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
|
|
@ -693,6 +701,18 @@ label,
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* circumventing the label:not(.inline-label) selector because it's too strong */
|
||||||
|
.inline-label {
|
||||||
|
font-size: inherit;
|
||||||
|
font-weight: inherit;
|
||||||
|
text-align: inherit;
|
||||||
|
color: inherit;
|
||||||
|
letter-spacing: 0;
|
||||||
|
margin: 0;
|
||||||
|
text-transform: none;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
fieldset {
|
fieldset {
|
||||||
margin: 0 -4px;
|
margin: 0 -4px;
|
||||||
@extend .clearfix;
|
@extend .clearfix;
|
||||||
|
|
@ -785,6 +805,7 @@ input[type="checkbox"] {
|
||||||
input[type=text],
|
input[type=text],
|
||||||
input[type=password],
|
input[type=password],
|
||||||
input[type=email],
|
input[type=email],
|
||||||
|
input[type=time],
|
||||||
textarea,
|
textarea,
|
||||||
.form-control,
|
.form-control,
|
||||||
.checkbox.form-group .checkbox {
|
.checkbox.form-group .checkbox {
|
||||||
|
|
@ -805,6 +826,12 @@ textarea,
|
||||||
appearance: none;
|
appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input[type=time] {
|
||||||
|
width: auto;
|
||||||
|
padding-left: 6px;
|
||||||
|
padding-right: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
.form-control:focus,
|
.form-control:focus,
|
||||||
.form-control.focus,
|
.form-control.focus,
|
||||||
.tokenfield.focus {
|
.tokenfield.focus {
|
||||||
|
|
@ -5171,6 +5198,157 @@ label + .wizard-buttonList {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.horizontal-filters {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.horizontal-filter {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: hsl(197,20%,93%);
|
||||||
|
padding: 14px 10px;
|
||||||
|
border: 1px solid hsl(198,19%,86%);
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
border-radius: 5px 5px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-radius: 0 0 5px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:only-child {
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
& + .horizontal-filter {
|
||||||
|
border-top: 1px solid hsl(198,19%,87%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.horizontal-filter-body {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls,
|
||||||
|
input {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
select,
|
||||||
|
input {
|
||||||
|
border-color: hsl(198,19%,86%);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=text] {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.horizontal-filter-text {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-controls {
|
||||||
|
margin-left: auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-control {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
border: 1px solid hsl(198,19%,86%);
|
||||||
|
border-radius: 100%;
|
||||||
|
background: white;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover:not(.is-disabled) {
|
||||||
|
border-color: hsl(198,19%,83%);
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
fill: black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-right: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 13px;
|
||||||
|
height: 13px;
|
||||||
|
fill: hsl(0,0%,61%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-preview {
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.week {
|
||||||
|
display: flex;
|
||||||
|
margin: 0 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.day {
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid hsl(198,19%,86%);
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
border-radius: 5px 0 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-radius: 0 5px 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.day-name {
|
||||||
|
color: hsl(0,0%,33%);
|
||||||
|
text-transform: none;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.day-checkbox:not(:checked) + .day-times * {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.day-times {
|
||||||
|
margin-top: 5px;
|
||||||
|
background: hsl(197,20%,93%);
|
||||||
|
|
||||||
|
label {
|
||||||
|
color: hsl(0,0%,60%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
padding: 7px;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
||||||
----------------
|
----------------
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue