From 6e0e9ae4a506b41dc1478b57402082d8e5125185 Mon Sep 17 00:00:00 2001
From: catvayor <catvayor@katvayor.net>
Date: Wed, 5 Jun 2024 16:50:13 +0200
Subject: [PATCH] state reception

---
 src/main.rs                 | 29 +++++++++++++++---
 static/utils.js             |  4 +++
 templates/conscrit.html.hbs | 38 +++++++++--------------
 templates/vieux.html.hbs    | 61 ++++++++++++++++---------------------
 4 files changed, 70 insertions(+), 62 deletions(-)

diff --git a/src/main.rs b/src/main.rs
index f6a4798..06ea57d 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -17,6 +17,8 @@ use std::{
     sync::{Arc, RwLock},
 };
 
+#[derive(Serialize, Clone)]
+#[serde(crate = "rocket::serde")]
 enum TrackedState {
     Conscrit {
         invisible: bool,
@@ -172,8 +174,10 @@ struct TrackedInfo {
 #[serde(crate = "rocket::serde")]
 struct AdminTrackedInfo {
     name: String,
+    id: String,
     pos: (f32, f32),
     color: u8,
+    state: TrackedState,
 }
 
 impl From<AdminTrackedInfo> for TrackedInfo {
@@ -197,8 +201,10 @@ fn base_view(team: &Tracked) -> TrackedInfo {
 fn admin_view(team: &Tracked) -> AdminTrackedInfo {
     AdminTrackedInfo {
         name: team.name.clone(),
+        id: team.id.clone(),
         pos: team.pos,
         color: team.state.admin_color(),
+        state: team.state.clone(),
     }
 }
 
@@ -237,8 +243,13 @@ fn apparent_info(watcher: &Tracked, team: &Tracked) -> Option<TrackedInfo> {
     }
 }
 
-#[get("/track/<id>?<gpslog>")]
-fn tracked_view(id: &str, gpslog: Option<bool>, tracking: &State<Tracking>) -> Option<Template> {
+#[get("/track/<id>?<gpslog>&<dbg>")]
+fn tracked_view(
+    id: &str,
+    gpslog: Option<bool>,
+    dbg: Option<bool>,
+    tracking: &State<Tracking>,
+) -> Option<Template> {
     if let Some(tracked) = tracking.read().unwrap().get(&id.to_string()) {
         Some(Template::render(
             match tracked.read().unwrap().state {
@@ -248,7 +259,8 @@ fn tracked_view(id: &str, gpslog: Option<bool>, tracking: &State<Tracking>) -> O
             context! {
                 name: &tracked.read().unwrap().name,
                 id: &id,
-                gpslog: gpslog.unwrap_or(true)
+                gpslog: gpslog.unwrap_or(true),
+                dbg: dbg.unwrap_or(false),
             },
         ))
     } else {
@@ -281,7 +293,16 @@ fn tracked_events<'a>(
     mut shutdown: Shutdown,
 ) -> Option<EventStream![Event + 'a]> {
     if evt_queue.read().unwrap().contains_key(&id.to_string()) {
-        state_update(&tracking.read().unwrap().get(&id.to_string()).unwrap().read().unwrap(), &evt_queue);
+        state_update(
+            &tracking
+                .read()
+                .unwrap()
+                .get(&id.to_string())
+                .unwrap()
+                .read()
+                .unwrap(),
+            &evt_queue,
+        );
         Some(EventStream! {
             let mut interval = time::interval(Duration::from_millis(100));
             loop {
diff --git a/static/utils.js b/static/utils.js
index fce0bab..61ee096 100644
--- a/static/utils.js
+++ b/static/utils.js
@@ -3,6 +3,7 @@ var markers = [];
 var self_marker;
 var name;
 var id;
+var dbg;
 
 var CircleIcon = L.Icon.extend({
     options: {
@@ -88,6 +89,7 @@ function setup_evtlisten_common(){
   evtSource = new EventSource("/track/"+id+"/events");
   evtSource.addEventListener("coords", (event) => {
     const data = JSON.parse(event.data);
+    if(dbg) console.log('coords: ', data);
     var i = 0;
     for (tracked of data) {
       if (i == markers.length) {
@@ -106,8 +108,10 @@ function setup_evtlisten_common(){
   });
   evtSource.addEventListener("self_info", (event) => {
     const data = JSON.parse(event.data);
+    if(dbg) console.log('self: ', data);
     self_marker.setLatLng(data.pos);
     self_marker.setIcon(self_icons[data.color]);
+    self_state_hook(data.state);
   });
 
   //socket.on("popup", function(data){
diff --git a/templates/conscrit.html.hbs b/templates/conscrit.html.hbs
index ebe0dfa..fe1e978 100644
--- a/templates/conscrit.html.hbs
+++ b/templates/conscrit.html.hbs
@@ -38,36 +38,28 @@
   <script type="text/javascript">
     id = "{{id}}";
     name = "{{name}}";
-    //////////////////////////////////////////////////////////////////////////////
-    // SETUP MAP
+    dbg = {{dbg}};
 
     setup_map();
+//  {{#if gpslog}}setup_geoLoc();{{/if}}
 
     //////////////////////////////////////////////////////////////////////////////
     // EVENT LISTENNING
 
+    function self_state_hook(state){
+        var code_buttons = "";
+        if(state.Conscrit.invisibility_codes > 0)//onclick="socket.emit('useCode', 'invisibility')"
+            code_buttons += `<button>
+                                Invisibilité
+                            </button>`;
+        if(state.Conscrit.blur_codes > 0)//onclick="socket.emit('useCode', 'blurred')"
+            code_buttons += `<button>
+                                Brouillage
+                            </button>`;
+        document.getElementById(`codes`).innerHTML = code_buttons;
+    };
+
     setup_evtlisten_common();
-
-//  //////////////////////////////////////////////////////////////////////////////
-//  // SETTINGS -- CODE
-
-//  socket.on('setCodes', function(codes){
-//      var code_buttons = "";
-//      if(codes.invisibility > 0)
-//          code_buttons += `<button onclick="socket.emit('useCode', 'invisibility')">
-//                              Invisibilité
-//                          </button>`;
-//      if(codes.blurred > 0)
-//          code_buttons += `<button onclick="socket.emit('useCode', 'blurred')">
-//                              Brouillage
-//                          </button>`;
-//      document.getElementById(`codes`).innerHTML = code_buttons;
-//  });
-
-//  //////////////////////////////////////////////////////////////////////////////
-//  // GEOLOCALISATION
-
-//  if({{gpslog}}) setup_geoLoc();
   </script>
 </body>
 </html>
diff --git a/templates/vieux.html.hbs b/templates/vieux.html.hbs
index 291e169..9f92b9e 100644
--- a/templates/vieux.html.hbs
+++ b/templates/vieux.html.hbs
@@ -34,25 +34,25 @@
             <input type="checkbox" id="invisibility" name="invisibility" checked onclick='sendState()' />
             <label for="invisibility">Invisible</label>
 
-            <input type="radio" id="npc0" name="color" value=1 onclick='sendState()' />
+            <input type="radio" id="npc1" name="color" value=1 onclick='sendState()' />
             <label for="npc0">Traqueur</label>
-            <input type="radio" id="npc1" name="color" value=3 checked onclick='sendState()' />
+            <input type="radio" id="npc3" name="color" value=3 checked onclick='sendState()' />
             <label for="npc1"><img src="/icons/3.png" height=15px></label>
-            <input type="radio" id="npc2" name="color" value=4 checked onclick='sendState()' />
+            <input type="radio" id="npc4" name="color" value=4 checked onclick='sendState()' />
             <label for="npc2"><img src="/icons/4.png" height=15px></label>
-            <input type="radio" id="npc3" name="color" value=5 checked onclick='sendState()' />
+            <input type="radio" id="npc5" name="color" value=5 checked onclick='sendState()' />
             <label for="npc3"><img src="/icons/5.png" height=15px></label>
-            <input type="radio" id="npc4" name="color" value=6 checked onclick='sendState()' />
+            <input type="radio" id="npc6" name="color" value=6 checked onclick='sendState()' />
             <label for="npc4"><img src="/icons/6.png" height=15px></label>
-            <input type="radio" id="npc5" name="color" value=7 checked onclick='sendState()' />
+            <input type="radio" id="npc7" name="color" value=7 checked onclick='sendState()' />
             <label for="npc5"><img src="/icons/7.png" height=15px></label>
-            <input type="radio" id="npc6" name="color" value=8 checked onclick='sendState()' />
+            <input type="radio" id="npc8" name="color" value=8 checked onclick='sendState()' />
             <label for="npc6"><img src="/icons/8.png" height=15px></label>
-            <input type="radio" id="npc7" name="color" value=9 checked onclick='sendState()' />
+            <input type="radio" id="npc9" name="color" value=9 checked onclick='sendState()' />
             <label for="npc7"><img src="/icons/9.png" height=15px></label>
-            <input type="radio" id="npc8" name="color" value=10 checked onclick='sendState()' />
+            <input type="radio" id="npc10" name="color" value=10 checked onclick='sendState()' />
             <label for="npc8"><img src="/icons/10.png" height=15px></label>
-            <input type="radio" id="npc9" name="color" value=11 checked onclick='sendState()' />
+            <input type="radio" id="npc11" name="color" value=11 checked onclick='sendState()' />
             <label for="npc9"><img src="/icons/11.png" height=15px></label>
         </form><br/>
         
@@ -64,19 +64,14 @@
   <script type="text/javascript">
     id = "{{id}}";
     name = "{{name}}";
-    //////////////////////////////////////////////////////////////////////////////
-    // SETUP MAP
+    dbg = {{dbg}};
 
     setup_map();
+//  {{#if gpslog}}setup_geoLoc();{{/if}}
 
     //////////////////////////////////////////////////////////////////////////////
     // EVENT LISTENNING
 
-    setup_evtlisten_common();
-
-    //////////////////////////////////////////////////////////////////////////////
-    // SETTINGS -- State
-
     var form = document.querySelector("#state");
     function sendState(){
         const data = new FormData(form);
@@ -90,25 +85,21 @@
         );
     }
 
-//  socket.on('newState', function(state){
-//      document.querySelector("#invisibility").checked = state.invisibility;
-//      document.querySelector("#blurred").checked = state.blurred;
-//      document.querySelector("#npc0").checked = state.npc == 0;
-//      document.querySelector("#npc1").checked = state.npc == 1;
-//      document.querySelector("#npc2").checked = state.npc == 2;
-//      document.querySelector("#npc3").checked = state.npc == 3;
-//      document.querySelector("#npc4").checked = state.npc == 4;
-//      document.querySelector("#npc5").checked = state.npc == 5;
-//      document.querySelector("#npc6").checked = state.npc == 6;
-//      document.querySelector("#npc7").checked = state.npc == 7;
-//      document.querySelector("#npc8").checked = state.npc == 8;
-//      document.querySelector("#npc9").checked = state.npc == 9;
-//  });
+    function self_state_hook(state){
+        document.querySelector("#invisibility").checked = state.Vieux.invisible;
+        document.querySelector("#npc1").checked = state.Vieux.color == 1;
+        document.querySelector("#npc3").checked = state.Vieux.color == 3;
+        document.querySelector("#npc4").checked = state.Vieux.color == 4;
+        document.querySelector("#npc5").checked = state.Vieux.color == 5;
+        document.querySelector("#npc6").checked = state.Vieux.color == 6;
+        document.querySelector("#npc7").checked = state.Vieux.color == 7;
+        document.querySelector("#npc8").checked = state.Vieux.color == 8;
+        document.querySelector("#npc9").checked = state.Vieux.color == 9;
+        document.querySelector("#npc10").checked = state.Vieux.color == 10;
+        document.querySelector("#npc11").checked = state.Vieux.color == 11;
+    };
 
-//  //////////////////////////////////////////////////////////////////////////////
-//  // GEOLOCALISATION
-
-//  if({{gpslog}}) setup_geoLoc();
+    setup_evtlisten_common();
   </script>
 </body>
 </html>