Filter results

view-webapp/src/main/sass/main.scss

@@ -425,6 +425,45 @@
     color: darkgray;
   }
 
+  .toggle {
+    display: inline-block;
+    cursor: pointer;
+    text-align: center;
+    input {
+      display: none !important;
+    }
+    label {
+      display: inline-block;
+      text-align: center;
+      cursor: pointer;
+    }
+    .checkbox {
+      width: 50px;
+      height: 26px;
+      border-radius: 18px;
+      background-color: #F7D6A3;
+      display: inline-flex;
+      align-items: center;
+      padding-left: 5px;
+      padding-right: 5px;
+      cursor: pointer;
+      .circle {
+        background-color: #6B5E8A;
+        transform: translateX(0px);
+        border-radius: 50%;
+        width: 20px;
+        height: 20px;
+        transition: 300ms;
+      }
+    }
+    input:checked + .checkbox {
+      background-color: rgb(218, 114, 80);
+      .circle {
+        transform: translateX(20px);
+      }
+    }
+  }
+
   @media print {
 
     body {

view-webapp/src/main/sass/tour.scss

@@ -91,43 +91,6 @@
   }
   #search-form {
     position: relative;
-    .toggle {
-      cursor: pointer;
-      text-align: center;
-      input {
-        display: none;
-      }
-      label {
-        display: block;
-        text-align: center;
-        cursor: pointer;
-      }
-      .checkbox {
-        width: 50px;
-        height: 26px;
-        border-radius: 18px;
-        background-color: #F7D6A3;
-        display: inline-flex;
-        align-items: center;
-        padding-left: 5px;
-        padding-right: 5px;
-        cursor: pointer;
-        .circle {
-          background-color: #6B5E8A;
-          transform: translateX(0px);
-          border-radius: 50%;
-          width: 20px;
-          height: 20px;
-          transition: 300ms;
-        }
-      }
-      input:checked + .checkbox {
-        background-color: rgb(218, 114, 80);
-        .circle {
-          transform: translateX(20px);
-        }
-      }
-    }
   }
   #search-result {
     position: absolute;
@@ -310,7 +273,7 @@
   #results-list {
     text-align: center;
     .player, .result {
-      background-color: white;
+      background-color: unset;
       color: black;
       cursor: pointer;
       &:hover {
@@ -326,6 +289,11 @@
         font-style: italic;
       }
     }
+    #results-table {
+      tr.filtered {
+        display: none;
+      }
+    }
   }
 
   /* standings section */

view-webapp/src/main/webapp/js/tour-results.inc.js

@@ -53,4 +53,12 @@ onLoad(()=>{
     let newResult = results[(index + 1)%results.length];
     setResult(gameId, newResult, oldResult);
   });
+  $('#filter').on('click', e=>{
+    let filter = $('#filter-results')[0].checked;
+    if (filter) {
+      $('#results-table tr').filter(':not(:has(td.result[data-result="?"]))').addClass('filtered');
+    } else {
+      $('#results-table tr').removeClass('filtered');
+    }
+  });
 });

view-webapp/src/main/webapp/tour-results.inc.html

@@ -6,6 +6,13 @@
     <button class="ui floating choose-round next-round button">&raquo;</button>
 #set($stats = $utils.getResultsStats($games))
     <span class="norbeak">( <span id="known">$stats.known</span> / $stats.total )</span>
+    <div id="filter" class="toggle">
+      <input id="filter-results" type="checkbox" value="true"/>
+      <div class="filter-results checkbox">
+        <div class="circle"></div>
+      </div>
+      <label>Filter</label>
+    </div>
   </div>
   <div id="results-list" class="roundbox">
     <table id="results-table" class="ui celled striped table">