From 472c54c5297010421f2d4e88e42ceef66556721a Mon Sep 17 00:00:00 2001
From: Don Cross <cosinekitty@gmail.com>
Date: Wed, 8 Jun 2016 12:38:42 -0400
Subject: [PATCH] Fixed #23 - Clicking on icon column header toggles display of
 blocked callers.

---
 public/jcclient.js | 34 +++++++++++++++++++++++++++++++++-
 public/style.css   |  6 ++++++
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/public/jcclient.js b/public/jcclient.js
index cbfd53f..e775c56 100644
--- a/public/jcclient.js
+++ b/public/jcclient.js
@@ -39,6 +39,21 @@
     var ModalDivList = ['RecentCallsDiv', 'TargetCallDiv', 'LostContactDiv'];
     var LostContactCount = 0;
 
+    // For toggling display of various types of call history rows.
+    var DisplayRowsOfType = {
+        neutral: true,
+        blocked: true,
+        safe: true
+    };
+
+    function UpdateRowDisplay(callHistoryRows) {   // call to reflect current DisplayRowsOfType settings
+        for (var i=0; i < callHistoryRows.length; ++i) {
+            var row = callHistoryRows[i];
+            var status = row.getAttribute('data-caller-status');
+            row.style.display = DisplayRowsOfType[status] ? '' : 'none';
+        }
+    }
+
     var PollTimer = null;
     var PrevPoll = {
         callerid:  {
@@ -249,6 +264,7 @@
     }
 
     function PopulateCallHistory() {
+        var rowlist = [];
         var recent = PrevPoll.callerid.data.calls;
         var table = document.createElement('table');
         table.setAttribute('class', 'RecentCallTable');
@@ -258,6 +274,18 @@
 
         var hcell_icon = document.createElement('th');
         hcell_icon.className = 'IconColumn';
+        var toggleIconImage = document.createElement('img');
+        toggleIconImage.setAttribute('src', 'safe.png');
+        toggleIconImage.setAttribute('width', '24');
+        toggleIconImage.setAttribute('height', '24');
+        toggleIconImage.style.display = DisplayRowsOfType.blocked ? 'none' : '';
+        hcell_icon.appendChild(toggleIconImage);
+        hcell_icon.onclick = function() {
+            // Toggle display of blocked callers.
+            DisplayRowsOfType.blocked = !DisplayRowsOfType.blocked;
+            toggleIconImage.style.display = DisplayRowsOfType.blocked ? 'none' : '';
+            UpdateRowDisplay(rowlist);
+        }
         hrow.appendChild(hcell_icon);
 
         var hcell_when = document.createElement('th');
@@ -274,11 +302,13 @@
         var now = new Date();
 
         var tbody = document.createElement('tbody');
-        for (var call of recent) {
+        for (var i=0; i < recent.length; ++i) {
+            var call = recent[i];
             call.count = PrevPoll.callerid.data.count[call.number] || '?';
             var callStatusClassName = BlockStatusClassName(call.status);
 
             var row = document.createElement('tr');
+            row.setAttribute('data-caller-status', CallerStatus(call));
 
             var iconCell = document.createElement('td');
             if (call.status === 'blocked' || call.status === 'safe') {
@@ -299,6 +329,7 @@
             row.appendChild(CreateCallerCell(call));
 
             tbody.appendChild(row);
+            rowlist.push(row);
         }
 
         table.appendChild(thead);
@@ -312,6 +343,7 @@
 
         // Fill in newly-generted content for the RecentCallsDiv...
         rcdiv.appendChild(table);
+        UpdateRowDisplay(rowlist);
     }
 
     function UpdateUserInterface() {
diff --git a/public/style.css b/public/style.css
index 655a510..bf9248e 100644
--- a/public/style.css
+++ b/public/style.css
@@ -57,6 +57,12 @@ td, th {
 
 .IconColumn {
     width: 24px;
+    height: 38px;
+    background: black;
+    border: 0;
+    padding: 0;
+    text-align: center;
+    vertical-align: middle;
 }
 
 .WhenCell {