Setting up results page

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

@@ -208,4 +208,18 @@
   .choose-round.button {
     padding: 0.2em 0.8em;
   }
+
+  /* results section */
+
+  #results-list {
+    text-align: center;
+    .player, .result {
+      cursor: pointer;
+      &:hover {
+        background: rgba(0,0,0,.05);
+        color: rgba(0,0,0,.95);
+      }
+    }
+  }
+
 }

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

@@ -30,7 +30,8 @@ onLoad(()=>{
       }
       let parent = e.target.closest('.multi-select');
       let children = parent.childNodes.filter('.listitem');
-      for (let j = from; j <= to; ++j) {
+      for (let j = from; j <= to; ++j) {  new Tablesort($('#players')[0]);
+
         children.item(j).addClass('selected');
         children.item(j).attr('draggable', true);
       }

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

@@ -0,0 +1,3 @@
+onLoad(()=>{
+  new Tablesort($('#results-table')[0]);
+});

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

@@ -38,7 +38,7 @@
           Unpair
         </button>
       </div>
-      <div id="paired" class="multi-select" title="games">
+      <div id="paired" class="multi-select" title="white vs. black">
 #foreach($game in $games)
   #set($white = $pmap[$game.w])
   #set($black = $pmap[$game.b])

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

@@ -1,3 +1,26 @@
 <div class="tab-content" id="results">
-  Results...
+  <div id="results-list" class="roundbox">
+    <table id="results-table" class="ui celled striped table">
+      <thead class="centered">
+        <th>table</th>
+        <th>white</th>
+        <th>black</th>
+        <th>result</th>
+      </thead>
+      <tbody>
+#foreach($game in $games)
+  #set($white = $pmap[$game.w])
+  #set($black = $pmap[$game.b])
+  #if($black && $white)
+        <tr data-id="$game.id">
+          <td>#t</td>
+          <td class="player" data-id="$white.id" data-sort="$white.name $white.firstname"><span class="white">#if($white)$white.name $white.firstname #rank($white.rank)#{else}BIP#end</span></td>
+          <td class="player" data-id="$black.id" data-sort="$black.name $black.firstname"><span class="black">#if($black)$black.name $black.firstname #rank($black.rank)#{else}BIP#end</span></td>
+          <td class="result centered">$game.r</td>
+        </tr>
+  #end
+#end
+      </tbody>
+    </table>
+  </div>
 </div>

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

@@ -168,6 +168,7 @@
 #include('/js/tour-information.inc.js')
 #include('/js/tour-registration.inc.js')
 #include('/js/tour-pairing.inc.js')
+#include('/js/tour-results.inc.js')
 </script>
 <div id="invalid_character" class="hidden">Invalid character</div>
 <script type="text/javascript" src="/lib/datepicker-1.3.4/datepicker-full.min.js"></script>