From 37da297365323eed8aa22d77752e6814e0abed3a Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Sat, 19 Jul 2014 18:20:34 +0200 Subject: [PATCH] add Waiting Time Widget --- app/assets/images/sprite.svg | 4 +- .../app/controllers/dashboard.js.coffee | 43 +++++++++++++++++++ .../javascripts/app/views/dashboard.jst.eco | 5 ++- app/assets/stylesheets/zzz.css.erb | 19 ++++++++ 4 files changed, 68 insertions(+), 3 deletions(-) diff --git a/app/assets/images/sprite.svg b/app/assets/images/sprite.svg index 8ab228012..2256beecd 100644 --- a/app/assets/images/sprite.svg +++ b/app/assets/images/sprite.svg @@ -32,8 +32,8 @@ - - + + diff --git a/app/assets/javascripts/app/controllers/dashboard.js.coffee b/app/assets/javascripts/app/controllers/dashboard.js.coffee index 0550d6ed4..1f5427dd6 100644 --- a/app/assets/javascripts/app/controllers/dashboard.js.coffee +++ b/app/assets/javascripts/app/controllers/dashboard.js.coffee @@ -84,9 +84,52 @@ class Index extends App.ControllerContent opacity: 0.6 forcePlaceholderSize: true + @renderWidgetClockFace 25 + @el.find( '#sortable' ).sortable( dndOptions ) @el.find( '#sortable-sidebar' ).sortable( dndOptions ) + renderWidgetClockFace: (time) => + canvas = @el.find 'canvas' + ctx = canvas.get(0).getContext '2d' + radius = 26 + + @el.find('.time.stat-widget .stat-amount').text time + + canvas.attr 'width', 2 * radius + canvas.attr 'height', 2 * radius + + handlingTimeColors = + 5: '#38AE6A' # supergood + 10: '#A9AC41' # good + 15: '#FAAB00' # ok + 20: '#F6820B' # bad + 25: '#F35910' # superbad + + for handlingTime, timeColor of handlingTimeColors + if time <= handlingTime + backgroundColor = timeColor + break + + # 30% background + ctx.globalAlpha = 0.3 + ctx.fillStyle = backgroundColor + ctx.beginPath() + ctx.arc radius, radius, radius, 0, Math.PI * 2, true + ctx.closePath() + ctx.fill() + + # 100% pie piece + ctx.globalAlpha = 1 + + ctx.beginPath() + ctx.moveTo radius, radius + arcsector = Math.PI * 2 * time/60 + ctx.arc radius, radius, radius, -Math.PI/2, arcsector - Math.PI/2, false + ctx.lineTo radius, radius + ctx.closePath() + ctx.fill() + App.Config.set( 'dashboard', Index, 'Routes' ) App.Config.set( 'Dashboard', { prio: 100, parent: '', name: 'Dashboard', target: '#dashboard', role: ['Agent'], class: 'dashboard' }, 'NavBar' ) diff --git a/app/assets/javascripts/app/views/dashboard.jst.eco b/app/assets/javascripts/app/views/dashboard.jst.eco index 7f06c8818..809ee98b4 100644 --- a/app/assets/javascripts/app/views/dashboard.jst.eco +++ b/app/assets/javascripts/app/views/dashboard.jst.eco @@ -14,7 +14,10 @@

∅ Waiting time today

-
+
+ +
+
My handling time: 25 minutes
Average: 13%
diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb index a2376e2cc..83ff02124 100644 --- a/app/assets/stylesheets/zzz.css.erb +++ b/app/assets/stylesheets/zzz.css.erb @@ -1949,6 +1949,25 @@ footer { color: #a1a4a7; } + .time.stat-widget .stat-graphic .icon { + position: relative; + } + + .time.stat-widget .stat-amount { + margin-top: 16px; + text-align: center; + font-size: 30px; + color: white; + text-shadow: 0 2px rgba(0,8,14,.2); + position: relative; + } + + .time.stat-widget .stat-dial { + position: absolute; + top: 21px; + left: 14px; + } + .stats-channel { padding: 8px 0 7px; margin-bottom: -7px;