Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

WIP sla list

Browse source
This commit is contained in:
Felix Niklas 2015-06-24 12:45:08 +02:00
parent 794075e440
commit 122952a7c6
4 changed files with 173 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/assets/javascripts/app/controllers/layout_ref.js.coffee
View file

@ -1289,6 +1289,7 @@ class slaRef extends App.ControllerContent
'click .js-activateColumn': 'activateColumn'
'click .js-activateRow': 'activateRow'
'click [data-type=new]': 'createNew'
'click .js-toggle': 'toggleSla'
constructor: ->
super
@ -1297,6 +1298,13 @@ class slaRef extends App.ControllerContent
render: ->
@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) =>
checkbox = @$(event.currentTarget)
columnName = checkbox.attr('data-target')
@ -1400,7 +1408,7 @@ class searchableSelectRef extends App.ControllerContent
name: 'project-name'
id: 'project-name-123'
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')

98
app/assets/javascripts/app/views/layout_ref/sla.jst.eco
View file

@ -76,15 +76,93 @@
</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="sla">
<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">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>

77
app/assets/stylesheets/zammad.css.scss
View file

@ -16,7 +16,7 @@ body {
font-family: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.45;
font-weight: normal;
background: hsl(210,17%,98%);
background: hsl(210,14%,97%);
height: 100%;
color: hsl(198,19%,72%);
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;
}
}
}
/*
----------------

BIN
contrib/icon-sprite.sketch
View file

Binary file not shown.