From 72ad294a5f4624c4a59ea48a4d572d5927ba4ecb Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Fri, 19 Jun 2015 08:54:26 +0200
Subject: [PATCH] turn sla and scheduler layout refs into modals

---
 .../app/controllers/layout_ref.js.coffee      |  20 +
 .../app/views/layout_ref/index.jst.eco        |   2 +-
 .../views/layout_ref/scheduler_modal.jst.eco  | 296 +++++++++++++
 .../app/views/layout_ref/schedulers.jst.eco   | 246 +----------
 .../app/views/layout_ref/sla.jst.eco          | 398 ------------------
 .../app/views/layout_ref/sla_modal.jst.eco    | 285 +++++++++++++
 app/assets/stylesheets/zammad.css.scss        |  18 +-
 7 files changed, 618 insertions(+), 647 deletions(-)
 create mode 100644 app/assets/javascripts/app/views/layout_ref/scheduler_modal.jst.eco
 create mode 100644 app/assets/javascripts/app/views/layout_ref/sla_modal.jst.eco

diff --git a/app/assets/javascripts/app/controllers/layout_ref.js.coffee b/app/assets/javascripts/app/controllers/layout_ref.js.coffee
index 749a86f68..618add337 100644
--- a/app/assets/javascripts/app/controllers/layout_ref.js.coffee
+++ b/app/assets/javascripts/app/controllers/layout_ref.js.coffee
@@ -1288,6 +1288,7 @@ class slaRef extends App.ControllerContent
   events:
     'click .js-activateColumn': 'activateColumn'
     'click .js-activateRow': 'activateRow'
+    'click [data-type=new]': 'createNew'
 
   constructor: ->
     super
@@ -1305,6 +1306,15 @@ class slaRef extends App.ControllerContent
     checkbox = @$(event.currentTarget)
     checkbox.closest('tr').toggleClass('is-active', checkbox.prop('checked'))
 
+  createNew: =>
+    new App.ControllerModal
+      head: 'New Service Level Agreement (SLA)'
+      content: App.view('layout_ref/sla_modal')()
+      button: 'Create SLA'
+      shown: true
+      cancel: true
+      container: @el
+
 App.Config.set( 'layout_ref/sla', slaRef, 'Routes' )
 
 
@@ -1312,6 +1322,7 @@ class schedulersRef extends App.ControllerContent
 
   events:
     'click .select-value': 'select'
+    'click [data-type=new]': 'createNew'
 
   constructor: ->
     super
@@ -1320,6 +1331,15 @@ class schedulersRef extends App.ControllerContent
   render: ->
     @html App.view('layout_ref/schedulers')()
 
+  createNew: =>
+    new App.ControllerModal
+      head: 'New Scheduler'
+      content: App.view('layout_ref/scheduler_modal')()
+      button: 'Create Schedule'
+      shown: true
+      cancel: true
+      container: @el
+
   select: (event) =>
     target = $(event.currentTarget)
 
diff --git a/app/assets/javascripts/app/views/layout_ref/index.jst.eco b/app/assets/javascripts/app/views/layout_ref/index.jst.eco
index e5231455d..fa4c1bf0e 100644
--- a/app/assets/javascripts/app/views/layout_ref/index.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/index.jst.eco
@@ -5,7 +5,7 @@
 
   <ul>
     <li><a href="#layout_ref/schedulers">Schedulers</a></li>
-    <li><a href="#layout_ref/sla">Sla Modal</a></li>
+    <li><a href="#layout_ref/sla">Service Level Agreements</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/clues">First Steps (Clues)</a></li>
diff --git a/app/assets/javascripts/app/views/layout_ref/scheduler_modal.jst.eco b/app/assets/javascripts/app/views/layout_ref/scheduler_modal.jst.eco
new file mode 100644
index 000000000..d4f513c7d
--- /dev/null
+++ b/app/assets/javascripts/app/views/layout_ref/scheduler_modal.jst.eco
@@ -0,0 +1,296 @@
+<h2>Selector</h2>
+<p>Create rules that single out the tickets for automated processing.</p>
+<h3>Filters</h3>
+<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>Customer</option>
+              <option>Owner</option>
+              <option>Number</option>
+              <option>Title</option>
+              <option>Group</option>
+              <option selected>State</option>
+              <option>Priority</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 selected>is</option>
+            <option>is not</option>
+          </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>closed</option>
+            <option selected>open</option>
+            <option>pending close</option>
+            <option>pending reminder</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="controls">
+        <div class="u-positionOrigin">
+          <select class="form-control" name="filter_attribute_1">
+            <optgroup label="Ticket">
+              <option>Customer</option>
+              <option>Owner</option>
+              <option>Number</option>
+              <option>Title</option>
+              <option selected>Group</option>
+              <option>State</option>
+              <option>Priority</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 selected>is</option>
+            <option>is not</option>
+          </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>Inbox</option>
+            <option>Drafts</option>
+            <option>Important</option>
+            <option selected>Spam</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>
+<div class="filter-preview">
+  <h3>Preview <span class="subtitle"><span class="u-highlight">2</span> matches</span></h3>
+  <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&nbsp;asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf">
+              Welcome to our little planet with flowers and forests&nbsp;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="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>Actions</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_1">
+            <optgroup label="Ticket">
+              <option>Customer</option>
+              <option>Owner</option>
+              <option>Number</option>
+              <option>Title</option>
+              <option selected>Group</option>
+              <option>State</option>
+              <option>Priority</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="horizontal-filter-text">to</div>
+      <div class="controls">
+        <div class="u-positionOrigin">
+          <select class="form-control" name="filter_operator_1">
+            <option selected>closed</option>
+            <option>open</option>
+            <option>pending close</option>
+            <option>pending reminder</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 is-disabled 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>Timer</h2>
+<p>
+  When should the job run?<br>
+  <output class="timer-output js-timerResult">
+    Run every Monday, Tuesday, Wednesday, Thursday and Friday at 7:30 am and 1:30 pm.
+  </output>
+</p>
+<div class="select-boxes">
+  <div class="select-box select-box--vertical">
+    <div class="select-box-header">Day</div>
+    <div data-type="day" class="select-value is-selected">Monday</div>
+    <div data-type="day" class="select-value is-selected">Tuesday</div>
+    <div data-type="day" class="select-value is-selected">Wednesday</div>
+    <div data-type="day" class="select-value is-selected">Thursday</div>
+    <div data-type="day" class="select-value is-selected">Friday</div>
+    <div data-type="day" class="select-value">Saturday</div>
+    <div data-type="day" class="select-value">Sunday</div>
+  </div>
+  <div class="select-box select-box--four">
+    <div data-type="hour" class="select-box-header">Hour</div>
+    <div data-type="hour" class="select-value">12 am</div><!-- 0 Uhr -->
+    <div data-type="hour" class="select-value">1 am</div>
+    <div data-type="hour" class="select-value">2 am</div>
+    <div data-type="hour" class="select-value">3 am</div>
+    <div data-type="hour" class="select-value">4 am</div>
+    <div data-type="hour" class="select-value">5 am</div>
+    <div data-type="hour" class="select-value">6 am</div>
+    <div data-type="hour" class="select-value is-selected">7 am</div>
+    <div data-type="hour" class="select-value">8 am</div>
+    <div data-type="hour" class="select-value">9 am</div>
+    <div data-type="hour" class="select-value">10 am</div>
+    <div data-type="hour" class="select-value">11 am</div>
+    <div data-type="hour" class="select-value">12 am</div><!-- 12 Uhr -->
+    <div data-type="hour" class="select-value is-selected">1 pm</div>
+    <div data-type="hour" class="select-value">2 pm</div>
+    <div data-type="hour" class="select-value">3 pm</div>
+    <div data-type="hour" class="select-value">4 pm</div>
+    <div data-type="hour" class="select-value">5 pm</div>
+    <div data-type="hour" class="select-value">6 pm</div>
+    <div data-type="hour" class="select-value">7 pm</div>
+    <div data-type="hour" class="select-value">8 pm</div>
+    <div data-type="hour" class="select-value">9 pm</div>
+    <div data-type="hour" class="select-value">10 pm</div>
+    <div data-type="hour" class="select-value">11 pm</div><!-- 23 Uhr -->
+  </div>
+  <div class="select-box select-box--vertical">
+    <div data-type="minute" class="select-box-header">Minute</div>
+    <div data-type="minute" class="select-value">00</div>
+    <div data-type="minute" class="select-value">10</div>
+    <div data-type="minute" class="select-value">20</div>
+    <div data-type="minute" class="select-value is-selected">30</div>
+    <div data-type="minute" class="select-value">40</div>
+    <div data-type="minute" class="select-value">50</div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/layout_ref/schedulers.jst.eco b/app/assets/javascripts/app/views/layout_ref/schedulers.jst.eco
index 1a909afb4..4354394a0 100644
--- a/app/assets/javascripts/app/views/layout_ref/schedulers.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/schedulers.jst.eco
@@ -1,232 +1,3 @@
-<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 Scheduler</h1>
-        </div>
-        <div class="modal-body">
-          <h2>Selector</h2>
-          <p>Create rules that single out the tickets for automated processing.</p>
-          <h3>Filters</h3>
-          <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>Customer</option>
-                        <option>Owner</option>
-                        <option>Number</option>
-                        <option>Title</option>
-                        <option>Group</option>
-                        <option>State</option>
-                        <option>Priority</option>
-                        <option selected>Spam</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 selected>is</option>
-                      <option>is not</option>
-                    </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 selected>true</option>
-                      <option>false</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 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">
-            <h3>Preview <span class="subtitle"><span class="u-highlight">2</span> matches</span></h3>
-            <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&nbsp;asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf">
-                        Welcome to our little planet with flowers and forests&nbsp;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="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>Actions</h2>
-          <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_2">
-                      <option selected>Move to trash</option>
-                      <option>Set to escalated</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 is-disabled 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>Timer</h2>
-          <p>
-            When should the job run?<br>
-            <output class="timer-output js-timerResult">
-              Run every Monday, Tuesday, Wednesday, Thursday and Friday at 7:30 am and 1:30 pm.
-            </output>
-          </p>
-          <div class="select-boxes">
-            <div class="select-box select-box--vertical">
-              <div class="select-box-header">Day</div>
-              <div data-type="day" class="select-value is-selected">Monday</div>
-              <div data-type="day" class="select-value is-selected">Tuesday</div>
-              <div data-type="day" class="select-value is-selected">Wednesday</div>
-              <div data-type="day" class="select-value is-selected">Thursday</div>
-              <div data-type="day" class="select-value is-selected">Friday</div>
-              <div data-type="day" class="select-value">Saturday</div>
-              <div data-type="day" class="select-value">Sunday</div>
-            </div>
-            <div class="select-box select-box--four">
-              <div data-type="hour" class="select-box-header">Hour</div>
-              <div data-type="hour" class="select-value">12 am</div><!-- 0 Uhr -->
-              <div data-type="hour" class="select-value">1 am</div>
-              <div data-type="hour" class="select-value">2 am</div>
-              <div data-type="hour" class="select-value">3 am</div>
-              <div data-type="hour" class="select-value">4 am</div>
-              <div data-type="hour" class="select-value">5 am</div>
-              <div data-type="hour" class="select-value">6 am</div>
-              <div data-type="hour" class="select-value is-selected">7 am</div>
-              <div data-type="hour" class="select-value">8 am</div>
-              <div data-type="hour" class="select-value">9 am</div>
-              <div data-type="hour" class="select-value">10 am</div>
-              <div data-type="hour" class="select-value">11 am</div>
-              <div data-type="hour" class="select-value">12 am</div><!-- 12 Uhr -->
-              <div data-type="hour" class="select-value is-selected">1 pm</div>
-              <div data-type="hour" class="select-value">2 pm</div>
-              <div data-type="hour" class="select-value">3 pm</div>
-              <div data-type="hour" class="select-value">4 pm</div>
-              <div data-type="hour" class="select-value">5 pm</div>
-              <div data-type="hour" class="select-value">6 pm</div>
-              <div data-type="hour" class="select-value">7 pm</div>
-              <div data-type="hour" class="select-value">8 pm</div>
-              <div data-type="hour" class="select-value">9 pm</div>
-              <div data-type="hour" class="select-value">10 pm</div>
-              <div data-type="hour" class="select-value">11 pm</div><!-- 23 Uhr -->
-            </div>
-            <div class="select-box select-box--vertical">
-              <div data-type="minute" class="select-box-header">Minute</div>
-              <div data-type="minute" class="select-value">00</div>
-              <div data-type="minute" class="select-value">10</div>
-              <div data-type="minute" class="select-value">20</div>
-              <div data-type="minute" class="select-value is-selected">30</div>
-              <div data-type="minute" class="select-value">40</div>
-              <div data-type="minute" class="select-value">50</div>
-            </div>
-          </div>
-        </div>
-        <div class="modal-footer">
-          <a class="subtle-link standalone js-cancel" href="#/">Cancel & Go Back</a>
-          <button type="submit" class="btn btn--success js-submit align-right">Create Schedule</button>
-        </div>
-      </div>
-    </form>
-  </div>
-</div>
-
 <div class="sidebar NavBarAdmin">
   <h2>Manage</h2>
 
@@ -297,23 +68,16 @@
 <div class="main flex">
   <div class="page-header">
     <div class="page-header-title">
-      <h1>SLAs <small>Management</small></h1>
+      <h1>Schedulers <small>Management</small></h1>
     </div>
 
     <div class="page-header-meta">
-      <a class="btn btn--success" data-type="new">New SLA</a>
+      <a class="btn btn--success" data-type="new">New Scheduler</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 class="scheduler-list">
+    <div class="scheduler">
+    </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/layout_ref/sla.jst.eco b/app/assets/javascripts/app/views/layout_ref/sla.jst.eco
index f9426f428..119dae8f6 100644
--- a/app/assets/javascripts/app/views/layout_ref/sla.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/sla.jst.eco
@@ -1,401 +1,3 @@
-<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>Selector</h2>
-          <p>Create rules that single out the tickets for the Service Level Agreement.</p>
-          <h3>Filters</h3>
-          <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>Customer</option>
-                        <option>Owner</option>
-                        <option>Number</option>
-                        <option>Title</option>
-                        <option>Group</option>
-                        <option>State</option>
-                        <option>Priority</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">
-            <h3>Preview <span class="subtitle"><span class="u-highlight">5</span> matches</span></h3>
-            <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&nbsp;asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf">
-                        Welcome to our little planet with flowers and forests&nbsp;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>
-          <table class="settings-list settings-list--toggleColumn">
-            <thead>
-              <tr>
-                <th style="text-align: center">
-                  <label class="day-name"><input class="js-activateColumn" data-target="monday" type="checkbox" checked> Mo</label>
-                <th style="text-align: center">
-                  <label class="day-name"><input class="js-activateColumn" data-target="tuesday" type="checkbox" checked> Tu</label>
-                <th style="text-align: center">
-                  <label class="day-name"><input class="js-activateColumn" data-target="wednesday" type="checkbox" checked> We</label>
-                <th style="text-align: center">
-                  <label class="day-name"><input class="js-activateColumn" data-target="thursday" type="checkbox" checked> Th</label>
-                <th style="text-align: center">
-                  <label class="day-name"><input class="js-activateColumn" data-target="friday" type="checkbox" checked> Fr</label>
-                <th style="text-align: center">
-                  <label class="day-name"><input class="js-activateColumn" data-target="saturday" type="checkbox"> Sa</label>
-                <th style="text-align: center">
-                  <label class="day-name"><input class="js-activateColumn" data-target="sunday" type="checkbox"> Su</label>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td data-column="monday" class="form-group day-time is-active">
-                  <label for="monday_start_time">from</label>
-                  <input type="time" id="monday_start_time" value="07:00" step="600">
-                <td data-column="tuesday" class="form-group day-time is-active">
-                  <label for="tuesday_start_time">from</label>
-                  <input type="time" id="tuesday_start_time" value="07:00" step="600">
-                <td data-column="wednesday" class="form-group day-time is-active">
-                  <label for="wednesday_start_time">from</label>
-                  <input type="time" id="wednesday_start_time" value="07:00" step="600">
-                <td data-column="thursday" class="form-group day-time is-active">
-                  <label for="thursday_start_time">from</label>
-                  <input type="time" id="thursday_start_time" value="07:00" step="600">
-                <td data-column="friday" class="form-group day-time is-active">
-                  <label for="friday_start_time">from</label>
-                  <input type="time" id="friday_start_time" value="07:00" step="600">
-                <td data-column="saturday" class="form-group day-time">
-                  <label for="saturday_start_time">from</label>
-                  <input type="time" id="saturday_start_time" value="09:00" step="600">
-                <td data-column="sunday" class="form-group day-time">
-                  <label for="sunday_start_time">from</label>
-                  <input type="time" id="sunday_start_time" step="600">
-              </tr>
-              <tr>
-                <td data-column="monday" class="form-group day-time is-active">
-                  <label for="monday_end_time">till</label>
-                  <input type="time" id="monday_end_time" value="18:00" step="600">
-                <td data-column="tuesday" class="form-group day-time is-active">
-                  <label for="tuesday_end_time">till</label>
-                  <input type="time" id="tuesday_end_time" value="18:00" step="600">
-                <td data-column="wednesday" class="form-group day-time is-active">
-                  <label for="wednesday_end_time">till</label>
-                  <input type="time" id="wednesday_end_time" value="18:00" step="600">
-                <td data-column="thursday" class="form-group day-time is-active">
-                  <label for="thursday_end_time">till</label>
-                  <input type="time" id="thursday_end_time" value="18:00" step="600">
-                <td data-column="friday" class="form-group day-time is-active">
-                  <label for="friday_end_time">till</label>
-                  <input type="time" id="friday_end_time" value="13:00" step="600">
-                <td data-column="saturday" class="form-group day-time">
-                  <label for="saturday_end_time">till</label>
-                  <input type="time" id="saturday_end_time" value="16:00" step="600">
-                <td data-column="sunday" class="form-group day-time">
-                  <label for="sunday_end_time">till</label>
-                  <input type="time" id="sunday_end_time" step="600">
-              </tr>
-            </tbody>
-          </table>
-
-          <h3>Response Times <span class="subtitle">in Business Hours</span></h3>
-          <table class="settings-list settings-list--toggleRow">
-            <thead>
-              <tr>
-                <th>Active
-                <th>Type
-                <th>Time <span class="text-muted">in hours</span>
-              </tr>
-            </thead>
-            <tbody>
-              <tr class="is-active">
-                <td style="text-align: center"><input type="checkbox" checked class="js-activateRow" id="first_response_time"> 
-                <td>
-                  <label class="inline-label" for="first_response_time">First Response Time</label>
-                  <p class="subtle">Timeframe for the first response.</p>
-                <td><input type="time" step="600" max="259200">
-              </tr>
-              <tr class="is-active">
-                <td style="text-align: center"><input type="checkbox" checked class="js-activateRow" id="update_time">
-                <td>
-                  <label class="inline-label" for="update_time">Update Time</label>
-                  <p class="subtle">Timeframe for every following response.</p>
-                <td><input type="time" step="600" max="259200">
-              </tr>
-              <tr>
-                <td style="text-align: center"><input type="checkbox" id="solution_time" class="js-activateRow">
-                <td>
-                  <label class="inline-label" for="solution_time">Solution Time</label>
-                  <p class="subtle">Timeframe for solving the problem.</p>
-                <td><input type="time" step="600" max="259200">
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div class="modal-footer">
-          <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>
 
diff --git a/app/assets/javascripts/app/views/layout_ref/sla_modal.jst.eco b/app/assets/javascripts/app/views/layout_ref/sla_modal.jst.eco
new file mode 100644
index 000000000..5dd2b5af4
--- /dev/null
+++ b/app/assets/javascripts/app/views/layout_ref/sla_modal.jst.eco
@@ -0,0 +1,285 @@
+<h2>Selector</h2>
+<p>Create rules that single out the tickets for the Service Level Agreement.</p>
+<h3>Filters</h3>
+<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>Customer</option>
+              <option>Owner</option>
+              <option>Number</option>
+              <option>Title</option>
+              <option>Group</option>
+              <option>State</option>
+              <option>Priority</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">
+  <h3>Preview <span class="subtitle"><span class="u-highlight">5</span> matches</span></h3>
+  <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&nbsp;asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf">
+              Welcome to our little planet with flowers and forests&nbsp;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>Schedule</h2>
+<h3>Business Hours <span class="subtitle">in European Central Time <a class="btn btn--text btn--subtle" href="#">(change)</a></span></h3>
+<table class="settings-list settings-list--toggleColumn">
+  <thead>
+    <tr>
+      <th style="text-align: center">
+        <label class="day-name"><input class="js-activateColumn" data-target="monday" type="checkbox" checked> Mo</label>
+      <th style="text-align: center">
+        <label class="day-name"><input class="js-activateColumn" data-target="tuesday" type="checkbox" checked> Tu</label>
+      <th style="text-align: center">
+        <label class="day-name"><input class="js-activateColumn" data-target="wednesday" type="checkbox" checked> We</label>
+      <th style="text-align: center">
+        <label class="day-name"><input class="js-activateColumn" data-target="thursday" type="checkbox" checked> Th</label>
+      <th style="text-align: center">
+        <label class="day-name"><input class="js-activateColumn" data-target="friday" type="checkbox" checked> Fr</label>
+      <th style="text-align: center">
+        <label class="day-name"><input class="js-activateColumn" data-target="saturday" type="checkbox"> Sa</label>
+      <th style="text-align: center">
+        <label class="day-name"><input class="js-activateColumn" data-target="sunday" type="checkbox"> Su</label>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td data-column="monday" class="form-group day-time is-active">
+        <label for="monday_start_time">from</label>
+        <input type="time" id="monday_start_time" value="07:00" step="600">
+      <td data-column="tuesday" class="form-group day-time is-active">
+        <label for="tuesday_start_time">from</label>
+        <input type="time" id="tuesday_start_time" value="07:00" step="600">
+      <td data-column="wednesday" class="form-group day-time is-active">
+        <label for="wednesday_start_time">from</label>
+        <input type="time" id="wednesday_start_time" value="07:00" step="600">
+      <td data-column="thursday" class="form-group day-time is-active">
+        <label for="thursday_start_time">from</label>
+        <input type="time" id="thursday_start_time" value="07:00" step="600">
+      <td data-column="friday" class="form-group day-time is-active">
+        <label for="friday_start_time">from</label>
+        <input type="time" id="friday_start_time" value="07:00" step="600">
+      <td data-column="saturday" class="form-group day-time">
+        <label for="saturday_start_time">from</label>
+        <input type="time" id="saturday_start_time" value="09:00" step="600">
+      <td data-column="sunday" class="form-group day-time">
+        <label for="sunday_start_time">from</label>
+        <input type="time" id="sunday_start_time" step="600">
+    </tr>
+    <tr>
+      <td data-column="monday" class="form-group day-time is-active">
+        <label for="monday_end_time">till</label>
+        <input type="time" id="monday_end_time" value="18:00" step="600">
+      <td data-column="tuesday" class="form-group day-time is-active">
+        <label for="tuesday_end_time">till</label>
+        <input type="time" id="tuesday_end_time" value="18:00" step="600">
+      <td data-column="wednesday" class="form-group day-time is-active">
+        <label for="wednesday_end_time">till</label>
+        <input type="time" id="wednesday_end_time" value="18:00" step="600">
+      <td data-column="thursday" class="form-group day-time is-active">
+        <label for="thursday_end_time">till</label>
+        <input type="time" id="thursday_end_time" value="18:00" step="600">
+      <td data-column="friday" class="form-group day-time is-active">
+        <label for="friday_end_time">till</label>
+        <input type="time" id="friday_end_time" value="13:00" step="600">
+      <td data-column="saturday" class="form-group day-time">
+        <label for="saturday_end_time">till</label>
+        <input type="time" id="saturday_end_time" value="16:00" step="600">
+      <td data-column="sunday" class="form-group day-time">
+        <label for="sunday_end_time">till</label>
+        <input type="time" id="sunday_end_time" step="600">
+    </tr>
+  </tbody>
+</table>
+
+<h3>Response Times <span class="subtitle">in Business Hours</span></h3>
+<table class="settings-list settings-list--toggleRow">
+  <thead>
+    <tr>
+      <th>Active
+      <th>Type
+      <th>Time <span class="text-muted">in hours</span>
+    </tr>
+  </thead>
+  <tbody>
+    <tr class="is-active">
+      <td style="text-align: center"><input type="checkbox" checked class="js-activateRow" id="first_response_time"> 
+      <td>
+        <label class="inline-label" for="first_response_time">First Response Time</label>
+        <p class="subtle">Timeframe for the first response.</p>
+      <td><input type="time" step="600" max="259200">
+    </tr>
+    <tr class="is-active">
+      <td style="text-align: center"><input type="checkbox" checked class="js-activateRow" id="update_time">
+      <td>
+        <label class="inline-label" for="update_time">Update Time</label>
+        <p class="subtle">Timeframe for every following response.</p>
+      <td><input type="time" step="600" max="259200">
+    </tr>
+    <tr>
+      <td style="text-align: center"><input type="checkbox" id="solution_time" class="js-activateRow">
+      <td>
+        <label class="inline-label" for="solution_time">Solution Time</label>
+        <p class="subtle">Timeframe for solving the problem.</p>
+      <td><input type="time" step="600" max="259200">
+    </tr>
+  </tbody>
+</table>
\ No newline at end of file
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index c89711a55..8619eec7e 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -4230,6 +4230,10 @@ footer {
     h2:first-child {
       margin-top: 0;
     }
+    
+    .table > thead > tr > th {
+      background: hsl(197,20%,93%);
+    }
   }
 
   .modal-footer {
@@ -5219,15 +5223,15 @@ label + .wizard-buttonList {
   border: 1px solid hsl(198,19%,86%);
   
   &:first-child {
-    border-radius: 3px 3px 0 0;
+    border-radius: 4px 4px 0 0;
   }
   
   &:last-child {
-    border-radius: 0 0 3px 3px;
+    border-radius: 0 0 4px 4px;
   }
 
   &:only-child {
-    border-radius: 3px;
+    border-radius: 4px;
   }
   
   & + .horizontal-filter {
@@ -5382,19 +5386,19 @@ output {
   }
 
   thead th:first-child {
-    border-top-left-radius: 3px;
+    border-top-left-radius: 4px;
   }
 
   thead th:last-child {
-    border-top-right-radius: 3px;
+    border-top-right-radius: 4px;
   }
 
   tbody tr:last-child td:first-child {
-    border-bottom-left-radius: 3px;
+    border-bottom-left-radius: 4px;
   }
 
   tbody tr:last-child td:last-child {
-    border-bottom-right-radius: 3px;
+    border-bottom-right-radius: 4px;
   }
 
   p {