Add a tournament overview dialog

api-webapp/src/main/kotlin/org/jeudego/pairgoth/api/TournamentHandler.kt

@@ -30,7 +30,9 @@ object TournamentHandler: PairgothApiHandler {
                             if (accept == "application/pairgoth") {
                                 it.toFullJson()
                             } else {
-                                it.toJson()
+                                it.toJson().also { json ->
+                                    (json as Json.MutableObject)["stats"] = it.stats()
+                                }
                             }
                         } ?: badRequest("no tournament with id #${id}")
                     }

api-webapp/src/main/kotlin/org/jeudego/pairgoth/model/Tournament.kt

@@ -120,6 +120,15 @@ sealed class Tournament <P: Pairable>(
 
     fun pairedPlayers() = games.flatMap { it.values }.flatMap { listOf(it.black, it.white) }.toSet()
     fun hasPlayer(dbId: DatabaseId, pId: String) = pId.isNotBlank() && players.values.filter { player -> pId == player.externalIds[dbId] }.isNotEmpty()
+
+    fun stats() = (0..rounds - 1).map { index ->
+        Json.Object(
+            "participants" to pairables.values.count { !it.skip.contains(index + 1) },
+            "paired" to (games.getOrNull(index)?.values?.flatMap { listOf(it.black, it.white) }?.count { it != 0 } ?: 0),
+            "games" to (games.getOrNull(index)?.values?.count() ?: 0),
+            "ready" to (games.getOrNull(index)?.values?.count { it.result != Game.Result.UNKNOWN } ?: 0)
+        )
+    }.toJsonArray()
 }
 
 // standard tournament of individuals
@@ -257,7 +266,7 @@ fun Tournament.Companion.fromJson(json: Json.Object, default: Tournament<*>? = n
     return tournament
 }
 
-fun Tournament<*>.toJson() = Json.Object(
+fun Tournament<*>.toJson() = Json.MutableObject(
     "id" to id,
     "type" to type.name,
     "name" to name,

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

@@ -532,11 +532,12 @@
     }
 
     #title {
+      position: relative;
       font-size: 1rem !important;
       margin-top: 0.1em !important;
     }
 
-    #logo, #lang, .steps, #filter-box, #reglist-mode, #footer, #unpairables, #pairing-buttons, button, #standings-params, #logout, .pairing-stats, .result-sheets, .toggle {
+    #logo, #lang, .steps, #filter-box, #reglist-mode, #footer, #unpairables, #pairing-buttons, button, #standings-params, #logout, .pairing-stats, .result-sheets, .toggle, #overview {
       display: none !important;
     }
 

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

@@ -16,6 +16,29 @@
     font-weight: bold;
   }
 
+  #overview {
+    position: absolute;
+    top: 0.2em;
+    right: 0.5em;
+    z-index: 2;
+    button {
+      line-height: 0.6em;
+    }
+    transform: scale(0.65);
+  }
+
+  #tournament-overview table {
+    table-layout: fixed;
+    text-align: center;
+    border-collapse: collapse;
+    th, td {
+      border: solid 1px gray;
+    }
+    th {
+      padding: 0 0.5em;
+    }
+  }
+
   /* information section */
 
   form {

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

@@ -24,10 +24,18 @@ function setResult(id, result, previous) {
           let indicator = $('#known')[0];
           let known = parseInt(indicator.innerText);
           indicator.innerText = ++known;
+          // and again for overview
+          indicator = $('#known2')[0];
+          known = parseInt(indicator.innerText);
+          indicator.innerText = ++known;
         } else if (result === '?') {
           let indicator = $('#known')[0];
           let known = parseInt(indicator.innerText);
           indicator.innerText = --known;
+          // and again for overview
+          indicator = $('#known2')[0];
+          known = parseInt(indicator.innerText);
+          indicator.innerText = --known;
         }
       }
     })

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

@@ -32,6 +32,7 @@
 #if($tour)
   <h1 id="title">
     $esc.html($tour.name)
+    <div id="overview"><button class="ui mini green circular icon floating button"><i class="ui small info icon"></i></button></div>
   </h1>
 #end
 #translate('tour-information.inc.html')
@@ -153,6 +154,9 @@
         }
       });
     }
+    $('#overview').on('click', () => {
+      modal('tournament-overview')
+    });
   });
   // ]]#
 #include('/js/tour-information.inc.js')
@@ -174,3 +178,38 @@
         vertical-align: initial;
     }
 </style>
+#if($tour)
+<div id="tournament-overview" class="popup">
+  <div class="popup-body">
+    <div class="popup-content">
+      <table>
+        <thead>
+          <tr>
+            <th>Round</th>
+            <th>Participants</th>
+            <th>Paired</th>
+            <th>Results</th>
+          </tr>
+        </thead>
+        <tbody>
+  #foreach($r in [1..$tour.rounds])
+    #set($stats = $tour.stats[$r - 1])
+          <tr>
+            <td>$r</td>
+            <td>$stats.participants</td>
+            <td>$stats.paired</td>
+            <td>#if($round == $r)<span id="known2">#end$stats.ready#if($round == $r)</span>#end/$stats.games</td>
+          </tr>
+  #end
+        </tbody>
+      </table>
+    </div>
+    <div class="popup-footer">
+      <button type="button" class="ui gray right labeled icon floating close button">
+        <i class="times icon"></i>
+        Close
+      </button>
+    </div>
+  </div>
+</div>
+#end