Add button to (persistently) toggle visibility of total match scores during counting

coffee/scores.coffee

-if table = document.querySelector '.match-editable'
+table = document.getElementById 'match'
+
+if table.classList.contains 'match-editable'
     inputs = table.querySelectorAll 'input[type=number]'
     rows = table.children[1].children
     match_total = table.querySelector '.match-total'
@@ -23,6 +25,9 @@ if table = document.querySelector '.match-editable'
             false
 
     render = (dirty_row) ->
+        if table.classList.contains 'hide-total-scores'
+            return
+
         subtotal = 0
         subtotal += scores[dirty_row * w + col] for col in [0...w]
         sub(dirty_row).innerHTML = subtotal
@@ -60,6 +65,26 @@ if table = document.querySelector '.match-editable'
             e.target.parentNode.previousElementSibling.value = v
             e.target.parentNode.parentNode.children[0].focus()
 
+    # total scores toggling + persistence in local storage
+    toggle_totals = document.getElementById 'toggle-total-scores'
+    console.log toggle_totals
+
+    if 'localStorage' of window and localStorage.getItem 'hide-total-scores'
+        table.classList.add 'hide-total-scores'
+        toggle_totals.classList.remove 'active'
+
+    toggle_totals.addEventListener 'click', ->
+        console.log 'x'
+        @.classList.toggle 'active'
+        @.blur()
+        hide = table.classList.toggle 'hide-total-scores'
+
+        if 'localStorage' of window
+            if hide
+                localStorage.setItem 'hide-total-scores', true
+            else
+                localStorage.removeItem 'hide-total-scores'
+
 # notes area grows automatically with each added line
 if notes = document.getElementById('notes')
     cb = ->
@@ -69,20 +94,21 @@ if notes = document.getElementById('notes')
     cb.call notes
 
 # color toggling + persistence in local storage
-match = document.getElementById 'match'
-toggle_color = document.getElementById('toggle-colored')
+toggle_color = document.getElementById 'toggle-colored'
 
 if 'localStorage' of window and localStorage.getItem 'colored-scores'
-    match.classList.add 'colored'
+    table.classList.add 'colored'
     toggle_color.classList.add 'active'
 
 toggle_color.addEventListener 'click', ->
     @.classList.toggle 'active'
     @.blur()
-    match.classList.toggle 'colored'
+    colored = table.classList.toggle 'colored'
 
     if 'localStorage' of window
-        if match.classList.contains 'colored'
+        if colored
             localStorage.setItem 'colored-scores', true
         else
             localStorage.removeItem 'colored-scores'
+
+

sass/main.sass

@@ -83,6 +83,10 @@ $lg-width: 1200px
     .val-2, .val-1
       background-color: $white
 
+  &.hide-total-scores
+    .row-total, .total, .match-avg, .match-total
+      color: #fff
+
   .popup-container
     position: relative
     width: 100%

templates/match/scores.latte

@@ -74,6 +74,10 @@
 </div>
 
 <div class="btn-group actions">
+    <a href="javascript:void(0)" id="toggle-total-scores" class="btn btn-default active"
+        title="{_'Show/hide total score counts'}">
+        <span class="glyphicon glyphicon-eye-open"></span>
+    </a>
     <a href="javascript:void(0)" id="toggle-colored" class="btn btn-default"
         title="{_'Show/hide colors'}">
         <span class="glyphicon glyphicon-tint"></span>