admin can now control states

static/admin.html

@@ -31,6 +31,11 @@
             top: 1%;
             right: 0.5%;
         }
+        .tableFixHead          { overflow: auto; height: 40%; }
+        .tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
+        table  { border-collapse: collapse; width: 100%; }
+        th, td { padding: 8px 16px; }
+        th     { background:#eee; }
 	</style>
 
 	<script type="text/javascript" src="utils.js"></script>
@@ -39,6 +44,20 @@
 	<div id="map"></div>
 
     <div id="right">
+        <div class="tableFixHead">
+        <table>
+            <thead><tr>
+                <th>ID</th>
+                <th>Visible</th>
+                <th>Tracker</th>
+                <th>Npc</th>
+                <th>Last Update</th>
+            </tr></thead>
+            <tbody id="teamInfos">
+            </tbody>
+        </table>
+        </div>
+
 	    <input id="popup"/><button id="sendPopup">Send popup to all clients</button><br/>
         <button id="genCode">Generate invisibility code</button><div id="code"></div>
     </div>
@@ -71,6 +90,42 @@
 		//////////////////////////////////////////////////////////////////////////////
 		// INTERACTION
 
+        var equipes = {};
+        var info_table = document.getElementById("teamInfos");
+
+        function sendUpdate(id){
+            var state = {};
+            state.shown = document.getElementById(`${id}.shown`).checked;
+            state.tracker = document.getElementById(`${id}.tracker`).checked;
+            state.npc = document.getElementById(`${id}.npc`).value;
+            socket.emit('setState', { id: id, state: state });
+        }
+
+        socket.on('update', function(data){
+            var id = data.id;
+            if(!(id in equipes)){
+                var row = `<td>${id}</td>`;
+                row = row + `<td><input type="checkbox" 
+                                        id="${id}.shown"
+                                        onchange="sendUpdate('${id}')" /></td>`
+                row = row + `<td><input type="checkbox"
+                                        id="${id}.tracker"
+                                        onchange="sendUpdate('${id}')" /></td>`
+                row = row + `<td><input type="number" min=0 max=3
+                                        id="${id}.npc"
+                                        onchange="sendUpdate('${id}')" /></td>`
+                row = row + `<td id="${id}.time"></td>`
+                info_table.innerHTML = info_table.innerHTML + `<tr>${row}</tr>`
+            }
+            equipes[id] = data.state;
+            document.getElementById(`${id}.shown`).checked = data.state.shown;
+            document.getElementById(`${id}.tracker`).checked = data.state.tracker;
+            document.getElementById(`${id}.npc`).value = data.state.npc;
+            var now = new Date();
+            document.getElementById(`${id}.time`).innerHTML =
+                `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
+        });
+
 		document.querySelector('#sendPopup').addEventListener('click', function(){
 			const input = document.querySelector('#popup');
 			socket.emit("popup", {"content": input.value});

static/utils.js

@@ -56,13 +56,11 @@ function setup_socket_common(){
         console.log("moving", data);
         if(!(data.id in markers)){
             markers[data.id] = L.marker(data.position, {"icon": icons[data.color]}).addTo(map);
-            markers[data.id].color = data.color; //do we really need to store this ?
             if(data.id == id)
                  markers[data.id].setZIndexOffset(10000);
             markers[data.id].bindPopup(data.id);
         } else{
             markers[data.id].setLatLng(data.position);
-            markers[data.id].color = data.color;
             markers[data.id].setIcon(icons[data.color]);
         }
     });

traque.js

@@ -161,6 +161,7 @@ function emit_update(team_id) {
     tracking.except(team_id).emit('moving', apparent_info(equipe));
     // the team and the admins always have the real informations
     admin.to(team_id).emit('moving', {"id": team_id, "color": color(equipe), "position": equipe.pos});
+    admin.emit('update', equipe);
 }
 
 // produces a team object populated with default values
@@ -248,9 +249,15 @@ io.on('connection', function(socket){
             io.emit('newTracker', d);
         });
 
+        socket.on('setState', function(d){
+            equipes[d.id].state = d.state;
+            emit_update(d.id);//TODO update vieux
+        });
+
         for(i in equipes){
             var equipe = equipes[i];
             socket.emit('moving', {"id": equipe.id, "color": color(equipe), "position": equipe.pos});
+            socket.emit('update', equipe);
         }
     }