From 37da297365323eed8aa22d77752e6814e0abed3a Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
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 @@
             <path d="M300.003335,5.14680851 C300.003335,4.33085106 299.940835,3.57765957 299.815835,2.76170213 C299.565835,1.19255319 298.753335,0.376595745 297.128335,0.188297872 C296.565835,0.125531915 295.940835,0.0627659574 295.378335,0.0627659574 L244.503335,0.0627659574 C243.690835,0.0627659574 242.940835,0.188297872 242.128335,0.313829787 C240.940835,0.50212766 240.253335,1.31808511 240.003335,2.5106383 C239.878335,3.26382979 239.815835,3.95425532 239.815835,4.70744681 L239.815835,38.4755319 L239.815835,39.4170213 C239.940835,41.9276596 240.878335,42.8691489 243.378335,42.8691489 C246.690835,42.9319149 250.128335,42.9319149 253.440835,42.9319149 C254.128335,42.9319149 255.190835,42.9946809 255.190835,42.9946809 L255.190835,44.0617021 C255.190835,48.2042553 255.315835,52.3468085 255.378335,56.4893617 C255.378335,57.3053191 255.440835,58.2468085 256.378335,58.6861702 C257.315835,59.062766 257.878335,58.3095745 258.440835,57.7446809 C263.628335,52.9744681 268.753335,48.2670213 273.940835,43.5595745 C274.440835,43.1202128 274.878335,42.9946809 275.503335,42.9946809 L294.503335,42.9946809 C295.315835,42.9946809 296.065835,42.9319149 296.878335,42.8691489 C298.753335,42.6808511 299.565835,41.9904255 299.815835,40.1074468 C299.878335,39.5425532 299.940835,38.9148936 299.940835,38.35 C300.003335,27.3031915 300.003335,16.256383 300.003335,5.14680851 L300.003335,5.14680851 Z M259.315835,20.712766 L280.565835,20.712766 C280.565835,25.7340426 275.815835,30.943617 269.940835,30.943617 C264.065835,30.943617 259.315835,25.7340426 259.315835,20.712766 L259.315835,20.712766 Z M263.440835,15.6914894 L253.440835,15.6914894 C252.753335,15.6914894 252.190835,15.1265957 252.190835,14.4361702 C252.190835,13.7457447 252.753335,13.1808511 253.440835,13.1808511 L254.065835,13.1808511 C254.440835,10.2308511 256.253335,8.78723404 258.378335,8.78723404 C260.503335,8.78723404 262.315835,10.293617 262.690835,13.1808511 L263.440835,13.1808511 C264.128335,13.1808511 264.690835,13.7457447 264.690835,14.4361702 C264.690835,15.1265957 264.128335,15.6914894 263.440835,15.6914894 L263.440835,15.6914894 Z M287.815835,14.4361702 C287.815835,15.1265957 287.253335,15.6914894 286.565835,15.6914894 L276.565835,15.6914894 C275.878335,15.6914894 275.315835,15.1265957 275.315835,14.4361702 C275.315835,13.7457447 275.878335,13.1808511 276.565835,13.1808511 L277.190835,13.1808511 C277.565835,10.2308511 279.378335,8.78723404 281.503335,8.78723404 C283.628335,8.78723404 285.440835,10.293617 285.815835,13.1808511 L286.565835,13.1808511 C287.253335,13.1808511 287.815835,13.7457447 287.815835,14.4361702 L287.815835,14.4361702 Z" id="super-happy" fill="#38AE6A" sketch:type="MSShapeGroup"></path>
         </g>
         <g id="stopwatch" sketch:type="MSLayerGroup" transform="translate(0.000000, 216.000000)">
-            <path d="M10.5,24.8 C9.5,23.9 8.4,22.9 7.5,22 L13.7,15.8 C14.5,16.7 15.4,17.7 16.3,18.7 C17.1,18.1 17.7,17.6 18.3,17.2 C22.2,14.3 26.5,12.3 31.2,11.2 C31.9,11 32.1,10.8 32.1,10.1 C32,8.4 32.1,6.7 32.1,4.9 L47.5,4.9 L47.5,10.9 C60.3,14.2 69.4,21.8 74,34.1 C77.6,43.7 77,53.3 72.6,62.5 C63.7,81.1 41.2,88.4 22.7,78.7 C3.7,68.8 -3.2,43.3 10.5,24.8 L10.5,24.8 Z M39.9,74.3 C54.9,74.3 67.3,62.3 67.6,47.1 C67.9,31.1 55,19.1 40.4,18.8 C25.3,18.5 12.3,30.6 12.1,46.1 C12,61.9 24.3,74.3 39.9,74.3 Z M14.9,12.4 C14.6,12.9 14.5,13.5 14.1,13.9 C11.2,16.8 8.3,19.7 5.5,22.6 C4.8,23.3 4,23.4 3.1,23.1 C1.8,22.7 1,21.8 0.6,20.6 C0.3,19.7 0.4,18.9 1.1,18.1 L9.7,9.5 C10.3,8.9 11.1,8.7 11.9,8.9 C13.4,9.2 14.7,10.8 14.9,12.4 Z M33.7,3.9 C33.5,2.5 34,1.3 35.3,0.8 C38.2,-0.3 41.2,-0.3 44.2,0.8 C45.4,1.2 46,2.4 45.9,3.9 L33.7,3.9 Z" id="Shape" fill="#A9BCC4" sketch:type="MSShapeGroup"></path>
-            <circle id="inlay" opacity="0.3" fill="#DDE5E8" sketch:type="MSShapeGroup" cx="39.4" cy="46.4" r="25.4"></circle>
+            <path d="M10.5,24.8 C9.5,23.9 8.4,22.9 7.5,22 L13.7,15.8 C14.5,16.7 15.4,17.7 16.3,18.7 C17.1,18.1 17.7,17.6 18.3,17.2 C22.2,14.3 26.5,12.3 31.2,11.2 C31.9,11 32.1,10.8 32.1,10.1 C32,8.4 32.1,6.7 32.1,4.9 L47.5,4.9 L47.5,10.9 C60.3,14.2 69.4,21.8 74,34.1 C77.6,43.7 77,53.3 72.6,62.5 C63.7,81.1 41.2,88.4 22.7,78.7 C3.7,68.8 -3.2,43.3 10.5,24.8 L10.5,24.8 Z M40.0481625,75 C55.1817335,75 67.6921523,62.8930829 67.9948237,47.5576545 C68.2974951,31.4150983 55.282624,19.3081812 40.5526149,19.0055082 C25.3181533,18.7028353 12.2023918,30.9106434 12.0006108,46.5487447 C11.8997204,62.489519 24.3092486,75 40.0481625,75 Z M14.9,12.4 C14.6,12.9 14.5,13.5 14.1,13.9 C11.2,16.8 8.3,19.7 5.5,22.6 C4.8,23.3 4,23.4 3.1,23.1 C1.8,22.7 1,21.8 0.6,20.6 C0.3,19.7 0.4,18.9 1.1,18.1 L9.7,9.5 C10.3,8.9 11.1,8.7 11.9,8.9 C13.4,9.2 14.7,10.8 14.9,12.4 Z M33.7,3.9 C33.5,2.5 34,1.3 35.3,0.8 C38.2,-0.3 41.2,-0.3 44.2,0.8 C45.4,1.2 46,2.4 45.9,3.9 L33.7,3.9 Z" id="Shape" fill="#A9BCC4" sketch:type="MSShapeGroup"></path>
+            <circle id="inlay" opacity="0.3" sketch:type="MSShapeGroup" cx="39.9019608" cy="46.9019608" r="24.9019608"></circle>
         </g>
         <g id="Tickets-in-Process" sketch:type="MSLayerGroup" transform="translate(77.000000, 216.000000)">
             <path d="M0,0 L0,64 L64,64 L64,0 L0,0 Z M8,44 C8.0372093,40.1315939 8.0372093,36.3380601 8,32 C5.75503876,32.0453772 3.86976744,31.1469087 2,29 C0.79379845,27.8525241 0,25.9557572 0,24 L0,8 C0,3.79353375 3.77054264,0 8,0 L39,0 C44.1550388,0 47.9255814,3.59387408 48,8 C48.0248062,13.4770278 48.0248062,18.5683494 48,24 C47.8263566,28.4515031 44.055814,32.0453772 39,32 C33.1410853,32.0453772 27.0883721,32.0453772 21,32 C20.4403101,32.0453772 19.6465116,32.3448667 19,33 C15.4790698,36.43789 12.0062016,40.2314237 8,44 C8.33488372,44.0249575 8.23565891,44.0249575 8,44 Z" id="Background" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
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 @@
         <div class="time stat-widget vertical">
           <h3>∅ Waiting time today</h3>
           <div class="stat-graphic flex horizontal centered">
-            <div class="stopwatch icon"></div>
+            <div class="stopwatch icon centered">
+              <canvas class="stat-dial"></canvas>
+              <div class="stat-amount"></div>
+            </div>
           </div>
           <div class="stat-label contain-text">My handling time: 25 minutes</div>
           <div class="stat-detail contain-text">Average: 13%</div>
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;