Improved sla time selection.

app/assets/javascripts/app/controllers/_ui_element/sla_times.js.coffee

@@ -5,21 +5,40 @@ class App.UiElement.sla_times
       attribute: attribute
       first_response_time: params.first_response_time
       update_time: params.update_time
-      close_time: params.close_time
+      solution_time: params.solution_time
       first_response_time_in_text: @toText(params.first_response_time)
       update_time_in_text: @toText(params.update_time)
-      close_time_in_text: @toText(params.close_time)
+      solution_time_in_text: @toText(params.solution_time)
     ) )
 
+    item.find('.js-activateRow').bind('change', (e) =>
+      element = $(e.target)
+      if element.prop('checked')
+        element.closest('tr').addClass('is-active')
+      else
+        element.closest('tr').removeClass('is-active')
+        element.closest('tr').find('.js-timeConvertFrom').val('')
+    )
+
     item.find('.js-timeConvertFrom').bind('keyup', (e) =>
-      inText = $(e.target).val()
+      element = $(e.target)
+      inText = element.val()
       inMinutes = @toMinutes(inText)
       if !inMinutes
-        $(e.target).addClass('has-error')
+        element.addClass('has-error')
       else
-        $(e.target).removeClass('has-error')
-      dest = $(e.target).closest('td').find('.js-timeConvertTo')
+        element.removeClass('has-error')
+      dest = element.closest('td').find('.js-timeConvertTo')
       dest.val(inMinutes)
+      element.closest('tr').find('.js-activateRow').prop('checked', true)
+      element.closest('tr').addClass('is-active')
+    )
+
+    item.find('.js-timeConvertFrom').each(->
+      if $(@).val()
+        $(@).closest('tr').find('.js-activateRow').prop('checked', true)
+      else
+        $(@).closest('tr').find('.js-activateRow').prop('checked', false)
     )
 
     item

app/assets/javascripts/app/models/sla.js.coffee

@@ -1,5 +1,5 @@
 class App.Sla extends App.Model
-  @configure 'Sla', 'name', 'first_response_time', 'update_time', 'close_time', 'condition', 'calendar_id'
+  @configure 'Sla', 'name', 'first_response_time', 'update_time', 'solution_time', 'condition', 'calendar_id'
   @extend Spine.Model.Ajax
   @url: @apiPath + '/slas'
   @configure_attributes = [

app/assets/javascripts/app/views/generic/sla_times.jst.eco

@@ -0,0 +1,32 @@
+<table class="settings-list settings-list--toggleRow">
+  <thead>
+    <tr>
+      <th><%- @T('Active') %>
+      <th><%- @T('Type') %>
+      <th><%- @T('Time') %> <span class="text-muted"><%- @T('in hours') %></span>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td style="text-align: center"><input type="checkbox" class="js-activateRow" id="first_response_time">
+      <td>
+        <label class="inline-label" for="first_response_time"><%- @T('First Response Time') %></label>
+        <p class="subtle"><%- @T('Timeframe for the first response.') %></p>
+      <td><input type="hidden" name="first_response_time" value="<%= @first_response_time %>" class="js-timeConvertTo"><input type="text" value="<%= @first_response_time_in_text %>" class="timeframe js-timeConvertFrom"  placeholder="hh:mm" name="first_response_time_in_text">
+    </tr>
+    <tr>
+      <td style="text-align: center"><input type="checkbox" class="js-activateRow" id="update_time">
+      <td>
+        <label class="inline-label" for="update_time"><%- @T('Update Time') %></label>
+        <p class="subtle"><%- @T('Timeframe for every following response.') %></p>
+      <td><input type="hidden" name="update_time" value="<%= @update_time %>" class="js-timeConvertTo"><input type="text" value="<%= @update_time_in_text %>" class="timeframe js-timeConvertFrom" placeholder="hh:mm" name="update_time_in_text">
+    </tr>
+    <tr>
+      <td style="text-align: center"><input type="checkbox" id="solution_time" class="js-activateRow">
+      <td>
+        <label class="inline-label" for="solution_time"><%- @T('Solution Time') %></label>
+        <p class="subtle"><%- @T('Timeframe for solving the problem.') %></p>
+      <td><input type="hidden" name="solution_time" value="<%= @solution_time %>" class="js-timeConvertTo"><input type="text" value="<%= @solution_time_in_text %>" class="timeframe js-timeConvertFrom" placeholder="hh:mm" name="solution_time_in_text">
+    </tr>
+  </tbody>
+</table>

app/assets/javascripts/app/views/sla/index.jst.eco

@@ -0,0 +1,51 @@
+<div class="page-header">
+  <div class="page-header-title">
+    <h1><%- @T('SLA') %> <small><%- @T('Management') %></small></h1>
+  </div>
+
+  <div class="page-header-meta">
+    <% if @showDescription: %>
+      <a class="btn js-description"><%- @T('Description') %></a>
+    <% end %>
+    <a class="btn btn--success js-new"><%- @T('New SLA') %></a>
+  </div>
+</div>
+
+<% if _.isEmpty(@slas): %>
+<%- @description %>
+<% end %>
+
+<% for sla in @slas: %>
+<div class="action" data-id="<%- sla.id %>">
+  <div class="action-flow">
+    <div class="action-block">
+      <h3><%= sla.name %></h3>
+    </div>
+  </div>
+  <div class="action-flow">
+    <div class="action-block">
+      <h3><%- @T('Filter') %></h3>
+      <% for rule in sla.rules: %>
+        <%- rule %><br>
+      <% end %>
+    </div>
+    <svg class="action-flow-icon"><use xlink:href="#icon-arrow-right" /></svg>
+    <div class="action-block">
+      <h3><%- @T('Escalation Times') %></h3>
+      <% if sla.first_response_time: %>
+        <%- sla.first_response_time_in_text %> <%- @T('hours') %> - <%- @T('First Response Time') %><br>
+      <% end %>
+      <% if sla.update_time: %>
+        <%- sla.update_time_in_text %> <%- @T('hours') %> - <%- @T('Update Time') %><br>
+      <% end %>
+      <% if sla.solution_time: %>
+        <%- sla.solution_time_in_text %> <%- @T('hours') %> - <%- @T('Solution Time') %>
+      <% end %>
+    </div>
+    <div class="action-controls">
+      <div class="sla-toggle btn btn--danger btn--secondary js-delete"><%- @T('Delete') %></div>
+      <div class="sla-edit btn js-edit"><%- @T('Edit') %></div>
+    </div>
+  </div>
+</div>
+<% end %>