WIP sla list
This commit is contained in:
Felix Niklas
parent
794075e440
commit
122952a7c6
4 changed files with 173 additions and 12 deletions
|
|
@ -1289,6 +1289,7 @@ class slaRef extends App.ControllerContent
|
||||||
'click .js-activateColumn': 'activateColumn'
|
'click .js-activateColumn': 'activateColumn'
|
||||||
'click .js-activateRow': 'activateRow'
|
'click .js-activateRow': 'activateRow'
|
||||||
'click [data-type=new]': 'createNew'
|
'click [data-type=new]': 'createNew'
|
||||||
|
'click .js-toggle': 'toggleSla'
|
||||||
|
|
||||||
constructor: ->
|
constructor: ->
|
||||||
super
|
super
|
||||||
|
|
@ -1297,6 +1298,13 @@ class slaRef extends App.ControllerContent
|
||||||
render: ->
|
render: ->
|
||||||
@html App.view('layout_ref/sla')()
|
@html App.view('layout_ref/sla')()
|
||||||
|
|
||||||
|
toggleSla: (e) =>
|
||||||
|
sla = $(e.currentTarget).closest('.sla')
|
||||||
|
isInactive = sla.hasClass('is-inactive')
|
||||||
|
sla.toggleClass('is-inactive')
|
||||||
|
isInactive = !isInactive
|
||||||
|
sla.find('.js-toggle').text(if isInactive then 'Enable' else 'Disable')
|
||||||
|
|
||||||
activateColumn: (event) =>
|
activateColumn: (event) =>
|
||||||
checkbox = @$(event.currentTarget)
|
checkbox = @$(event.currentTarget)
|
||||||
columnName = checkbox.attr('data-target')
|
columnName = checkbox.attr('data-target')
|
||||||
|
|
@ -1400,7 +1408,7 @@ class searchableSelectRef extends App.ControllerContent
|
||||||
name: 'project-name'
|
name: 'project-name'
|
||||||
id: 'project-name-123'
|
id: 'project-name-123'
|
||||||
placeholder: 'Enter Project Name'
|
placeholder: 'Enter Project Name'
|
||||||
options: [{"value":0,"name":"Appleasdfasdfasdjflkajhsdlfkjahsdlfkjahsdlkfjahsdlkfjahsldkfjahsldkjfahsldkjfh asdf lkajshdfl kajshdfl kajhsdflk ajhsdlfk jahsdlfk jahsdlfk jahsdlkfj ahsdlkfj ahsldkjfahskdjfh aslkdjfhal skdjfha lksdjfhalksdjhfal ksjdal kjsdhfakl sjdhafl jsdhf laskdjhfal ksjdhfal ksdjhfal kjsdhal kjsdhfl akjsdhf lhkj"},{"value":1,"name":"Microsoft","selected":true},{"value":2,"name":"Google"},{"value":3,"name":"Deutsche Bahn"},{"value":4,"name":"Sparkasse"},{"value":5,"name":"Deutsche Post"},{"value":6,"name":"Mitfahrzentrale"},{"value":7,"name":"Starbucks"},{"value":8,"name":"Mac Donalds"},{"value":9,"name":"Flixbus"},{"value":10,"name":"Betahaus"},{"value":11,"name":"Bruno Banani"},{"value":12,"name":"Alpina"},{"value":13,"name":"Samsung"},{"value":14,"name":"ChariTea"},{"value":15,"name":"fritz-kola"},{"value":16,"name":"Vitamin Water"},{"value":17,"name":"Znuny"}]
|
options: [{"value":0,"name":"Appleasdfasdfasdjflkajhsdlfkjahsdlfkjahsdlkfjahsdlkfjahsldkfjahsldkjfahsldkjfh asdf lkajshdfl kajshdfl kajhsdflk ajhsdlfk jahsdlfk jahsdlfk jahsdlkfj ahsdlkfj ahsldkjfahskdjfh aslkdjfhal skdjfha lksdjfhalksdjhfal ksjdal kjsdhfakl sjdhafl jsdhf laskdjhfal ksjdhfal ksdjhfal kjsdhal kjsdhfl akjsdhf lhkj"},{"value":1,"name":"Microsoft","selected":true},{"value":2,"name":"Google"},{"value":3,"name":"Deutsche Bahn"},{"value":4,"name":"Sparkasse"},{"value":5,"name":"Deutsche & Post"},{"value":6,"name":"Mitfahrzentrale"},{"value":7,"name":"Starbucks"},{"value":8,"name":"Mac Donalds"},{"value":9,"name":"Flixbus"},{"value":10,"name":"Betahaus"},{"value":11,"name":"Bruno Banani"},{"value":12,"name":"Alpina"},{"value":13,"name":"Samsung"},{"value":14,"name":"ChariTea"},{"value":15,"name":"fritz-kola"},{"value":16,"name":"Vitamin Water"},{"value":17,"name":"Znuny"}]
|
||||||
|
|
||||||
@html App.view('layout_ref/search_select')
|
@html App.view('layout_ref/search_select')
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -76,15 +76,93 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table-overview">
|
<div class="sla">
|
||||||
<p>
|
<div class="sla-filters">
|
||||||
<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.
|
<h3>Filters</h3>
|
||||||
</p>
|
Where <b>Organization</b> equals to <b>Deutsche Bank</b>.<br>
|
||||||
<p>
|
Where <b>Priority</b> is <b>high</b>.
|
||||||
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.
|
</div>
|
||||||
</p>
|
<div class="arrow">
|
||||||
<p>
|
<svg class="icon"><use xlink:href="#icon-arrow-right" /></svg>
|
||||||
Drohenden Unterschreitungen oder Unterschreitungen werden in einer eigenen Ansicht in den Übersichten angezeigt. Zudem können <strong>E-Mail Benachrichtigungen</strong> konfiguriert werden.
|
</div>
|
||||||
</p>
|
<div class="sla-times">
|
||||||
|
<h3>Repsonse Times</h3>
|
||||||
|
<div class="response-times">
|
||||||
|
<div class="response-times-entry">
|
||||||
|
<div class="response-time">00:30 Stunden</div>
|
||||||
|
<div class="response-name">
|
||||||
|
<svg class="icon icon-reply"><use xlink:href="#icon-reply" /></svg>
|
||||||
|
First Response Time
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="response-times-entry">
|
||||||
|
<div class="response-time">01:00 Stunden</div>
|
||||||
|
<div class="response-name">
|
||||||
|
<svg class="icon icon-reply-all"><use xlink:href="#icon-reply-all" /></svg>
|
||||||
|
Update Time
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="response-times-entry">
|
||||||
|
<div class="response-time">48:00 Stunden</div>
|
||||||
|
<div class="response-name">
|
||||||
|
<svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
|
||||||
|
Solution Time
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sla-businessHours">
|
||||||
|
<h3>Business Hours <span class="subtitle">in European Central Time</span></h3>
|
||||||
|
Mo-Tu 7am - 5pm, Fr 7am - 1pm
|
||||||
|
</div>
|
||||||
|
<div class="sla-controls">
|
||||||
|
<div class="sla-toggle btn js-toggle">Disable</div>
|
||||||
|
<div class="sla-edit btn js-edit">Edit</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sla is-inactive">
|
||||||
|
<div class="sla-filters">
|
||||||
|
<h3>Filters</h3>
|
||||||
|
Where <b>Organization</b> equals to <b>Deutsche Bank</b>.<br>
|
||||||
|
Where <b>Priority</b> is <b>high</b>.
|
||||||
|
</div>
|
||||||
|
<div class="arrow">
|
||||||
|
<svg class="icon"><use xlink:href="#icon-arrow-right" /></svg>
|
||||||
|
</div>
|
||||||
|
<div class="sla-times">
|
||||||
|
<h3>Repsonse Times</h3>
|
||||||
|
<div class="response-times">
|
||||||
|
<div class="response-times-entry">
|
||||||
|
<div class="response-time">00:30 Stunden</div>
|
||||||
|
<div class="response-name">
|
||||||
|
<svg class="icon icon-reply"><use xlink:href="#icon-reply" /></svg>
|
||||||
|
First Response Time
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="response-times-entry">
|
||||||
|
<div class="response-time">01:00 Stunden</div>
|
||||||
|
<div class="response-name">
|
||||||
|
<svg class="icon icon-reply-all"><use xlink:href="#icon-reply-all" /></svg>
|
||||||
|
Update Time
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="response-times-entry">
|
||||||
|
<div class="response-time">48:00 Stunden</div>
|
||||||
|
<div class="response-name">
|
||||||
|
<svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
|
||||||
|
Solution Time
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sla-businessHours">
|
||||||
|
<h3>Business Hours <span class="subtitle">in European Central Time</span></h3>
|
||||||
|
Mo-Tu 7am - 5pm, Fr 7am - 1pm
|
||||||
|
</div>
|
||||||
|
<div class="sla-controls">
|
||||||
|
<div class="sla-toggle btn js-toggle">Enable</div>
|
||||||
|
<div class="sla-edit btn js-edit">Edit</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -16,7 +16,7 @@ body {
|
||||||
font-family: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
font-family: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
line-height: 1.45;
|
line-height: 1.45;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
background: hsl(210,17%,98%);
|
background: hsl(210,14%,97%);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
color: hsl(198,19%,72%);
|
color: hsl(198,19%,72%);
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
|
|
@ -5508,6 +5508,81 @@ output {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sla {
|
||||||
|
background: white;
|
||||||
|
border: 1px solid hsl(199,44%,93%);
|
||||||
|
color: hsl(206,7%,28%);
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 2px hsl(210,7%,94%);
|
||||||
|
|
||||||
|
& + .sla {
|
||||||
|
margin-top: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-inactive {
|
||||||
|
box-shadow: none;
|
||||||
|
position: relative;
|
||||||
|
top: 2px;
|
||||||
|
|
||||||
|
& > *:not(.sla-controls) {
|
||||||
|
opacity: 0.33;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
color: hsl(0,0%,60%);
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
align-self: center;
|
||||||
|
margin: 25px 50px 0;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 15px;
|
||||||
|
height: 24px;
|
||||||
|
fill: hsl(198,17%,89%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.response-times-entry {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
display: none;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-right: 3px;
|
||||||
|
|
||||||
|
&:not(.icon-checkmark) {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.response-time {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.response-times-entry:not(:last-child) {
|
||||||
|
margin: 0 0 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sla-businessHours {
|
||||||
|
flex-basis: 100%;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sla-controls {
|
||||||
|
flex-basis: 100%;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.sla-edit {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
||||||
----------------
|
----------------
|
||||||
|
|
|
||||||
Binary file not shown.
Loading…
Reference in a new issue