Add Hide Unselected checkbox

This is all client-side JS and CSS which is pretty cool. the checkbox just adds a class to the
table, and the CSS handles the rest.

kappa123/client/static/main.css

@@ -4,34 +4,34 @@
   padding-top: 75px;
 }
 
-.the_table {
+#the_table {
     table-layout: fixed;
     width: 100%;
     border-collapse: collapse;
     border: 1px solid #dfdfdf;
 }
 
-.the_table th:nth-child(1) {
+#the_table th:nth-child(1) {
     width: 15%;
 }
 
-.the_table th:nth-child(2) {
+#the_table th:nth-child(2) {
     width: 55%;
 }
 
-.the_table th:nth-child(3) {
+#the_table th:nth-child(3) {
     width: 30%;
 }
 
-.the_table tr.selected {
+#the_table tr.selected {
     background-color: #efefef;
 }
 
-.the_table td,th {
+#the_table td,th {
     padding: 0.5em 2px;
 }
 
-.the_table td {
+#the_table td {
     vertical-align: top;
 }
 
@@ -39,3 +39,7 @@
     font-style: italic;
     color: #888888;
 }
+
+#the_table.hide-unselected tr:not(.selected) td {
+    display: none;
+}

kappa123/client/static/main.js

@@ -10,3 +10,8 @@ function toggleRow(e) {
     var row = e.currentTarget;
     row.className == "run selected" ? row.className = "run" : row.className = "run selected"
 }
+
+function updateHideUnselected() {
+    var table = document.getElementById('the_table');
+    table.className == "hide-unselected" ? table.className = "" : table.className = "hide-unselected";
+}

kappa123/client/templates/main/home.html

@@ -6,7 +6,14 @@
     <div class="row">
         <h1>Summer Games Done Quick Schedulizer</h1>
 
-        <table class="the_table">
+        <p>
+          Build and share your Summer Games Done Quick schedule!
+        </p>
+
+        <label for="showToggle">Hide unselected</label>
+        <input type="checkbox" id="showToggle" onchange="updateHideUnselected()">
+
+        <table id="the_table">
             <tr>
                 <th scope="col">Time & Estimate</th>
                 <th scope="col">Run</th>