tools: dashboard: add starter input

Signed-off-by: Starbeuck <solenn.daumand@gmail.com>

Author: Starbeuck

cogip/tools/dashboard/templates/dashboard.html

@@ -53,16 +53,21 @@
       </div>
 
       <footer class="mt-auto bg-zinc-900 text-grey-color mx-2">
-        <div class="container-lg pt-2">
-          <span class="text-muted float-left" id="connection">
+        <div class="container-lg pt-2 flex items-center justify-between">
+          <span class="text-muted inline" id="connection">
             <pre
-              class="text-grey-color text-sm inline"><img class="mr-5 w-[20px] inline" src="{{ url_for('static', path='img/cross_red_circle.svg') }}" /></pre>
+              class="text-grey-color text-sm"><img class="mr-5 w-[20px]" src="{{ url_for('static', path='img/cross_red_circle.svg') }}" /></pre>
           </span>
           {% if robot_id != 0 %}
-          <span class="text-muted float-right inline" id="state">
+          <span class="text-muted text-sm inline" id="state">
             <pre id="state_robot"></pre>
             <pre id="order_robot"></pre>
           </span>
+          <span class="text-muted text-sm z-10" id="starter">
+            <label>
+              <input type="checkbox" class="checked:accent-red-cogip checked:border-red-cogip" disabled> Starter
+            </label>
+          </span>
           {% endif %}
         </div>
       </footer>
@@ -147,9 +152,13 @@ <h5 class="text-lg font-medium text-grey-color">Score</h5>
       socket.on("connect", function () {
         socketModule.onConnection(this);
       })
-        .on("disconnect", function () {
+      .on("disconnect", function () {
           socketModule.onDisconnect();
         })
+        .on("virtual", function (robot_id, msg) {
+          console.log(!msg)
+          document.querySelector("#starter input").disabled = !msg;
+        })
         .on("tool_menu", function (menu) {
           socketModule.onMenu(menu, "tool", this);
           virtualKeyboard._actualize();
@@ -178,8 +187,16 @@ <h5 class="text-lg font-medium text-grey-color">Score</h5>
         })
         .on("obstacles", function (robot_id, msg) {
           drawModule.updateObstacles(robot_id, msg);
+        })
+        .on("starter_changed", function(robot_id, pushed) {
+          document.querySelector("#starter input").checked = pushed;
         });
 
+      // add event listener on click for starter input
+      document.querySelector("#starter input").addEventListener("click", function () {
+        socket.emit("starter_changed", this.checked);
+      });
+
       if (robotId !== 0) {
         import("../static/js/scoreModule.js").then((scoreModule) => {
           socket.on("score", function (score) {
@@ -218,11 +235,10 @@ <h5 class="text-lg font-medium text-grey-color">Score</h5>
           console.log(`Delete robot ${robot_id} dashboard`);
           drawModule.deleteTab(robot_id);
         })
-
       }
     });
 
   </script>
 </body>
 
-</html>
+</html>

cogip/tools/server/namespaces/dashboard.py

@@ -26,6 +26,9 @@ async def on_connected(self, sid):
         if self.context.shell_menu:
             await self.emit("shell_menu", (self.context.robot_id, self.context.shell_menu.model_dump()), to=sid)
 
+        if self.context.virtual:
+            await self.emit("virtual", (self.context.robot_id, self.context.virtual), to=sid)
+
     def on_disconnect(self, sid):
         logger.info("Dashboard disconnected.")