Ranking: add user id column

Author: niklaci

cmsranking/static/Ranking.css

@@ -385,6 +385,10 @@ abbr {
     width: 48px;
 }
 
+#Scoreboard_cols col.user_id {
+    width: 48px;
+}
+
 #Scoreboard_cols col.team {
     /* This is the minimum width needed to contain a flag */
     width: 42px;
@@ -430,6 +434,7 @@ abbr {
     text-align: center;
 }
 
+#Scoreboard_body tr td.user_id,
 #Scoreboard_body tr td.f_name,
 #Scoreboard_body tr td.l_name {
     text-align: left;
@@ -447,13 +452,15 @@ abbr {
     cursor: pointer;
 }
 
+#Scoreboard_body tr:hover td.user_id,
 #Scoreboard_body tr:hover td.f_name,
 #Scoreboard_body tr:hover td.l_name,
 #Scoreboard_body tr:hover td.team {
     background-color: rgba(200,200,200,0.35);
     border-radius: 5px;
 }
 
+#Scoreboard_body tr.selected td.user_id,
 #Scoreboard_body tr.selected td.f_name,
 #Scoreboard_body tr.selected td.l_name {
     font-weight: bold;

cmsranking/static/Scoreboard.js

@@ -94,7 +94,7 @@ var Scoreboard = new function () {
         });
 
         // Create callbacks for UserPanel
-        self.tbody_el.on("click", "td.f_name, td.l_name", function () {
+        self.tbody_el.on("click", "td.f_name, td.l_name, td.user_id", function () {
             UserDetail.show($(this).parent().data("user"));
         });
 
@@ -155,6 +155,7 @@ var Scoreboard = new function () {
 <col class=\"rank\"/> \
 <col class=\"f_name\"/> <col/><col/><col/><col/><col/><col/><col/><col/><col/> \
 <col class=\"l_name\"/> <col/><col/><col/><col/><col/><col/><col/><col/><col/> \
+<col class=\"user_id\"/> \
 <col class=\"team\"/>";
 
         var contests = DataStore.contest_list;
@@ -190,6 +191,7 @@ var Scoreboard = new function () {
     <th class=\"rank\">Rank</th> \
     <th colspan=\"10\" class=\"f_name\">First Name</th> \
     <th colspan=\"10\" class=\"l_name\">Last Name</th> \
+    <th class=\"user_id\">ID</th> \
     <th class=\"team\">Team</th>";
 
         var contests = DataStore.contest_list;
@@ -236,7 +238,8 @@ var Scoreboard = new function () {
     <td class=\"sel\"></td> \
     <td class=\"rank\">" + user["rank"] + "</td> \
     <td colspan=\"10\" class=\"f_name\">" + escapeHTML(user["f_name"]) + "</td> \
-    <td colspan=\"10\" class=\"l_name\">" + escapeHTML(user["l_name"]) + "</td>";
+    <td colspan=\"10\" class=\"l_name\">" + escapeHTML(user["l_name"]) + "</td> \
+    <td class=\"user_id\">" + user["key"] + "</td>";
 
         if (user['team']) {
             result += " \