Merge branch 'feat/gesture-ui-cb' of git.science.uu.nl:ics/sp/2025/n25b/pepperplus-ui into feat/gesture-ui-cb

ref: N25B-345

src/App.tsx

@@ -7,6 +7,7 @@ import ConnectedRobots from './pages/ConnectedRobots/ConnectedRobots.tsx'
 import VisProg from "./pages/VisProgPage/VisProg.tsx";
 import {useState} from "react";
 import Logging from "./components/Logging/Logging.tsx";
+import GesturePage from './pages/GesturePage/GesturePage.tsx';
 
 function App(){
   const [showLogs, setShowLogs] = useState(false);
@@ -25,6 +26,7 @@ function App(){
             <Route path="/editor" element={<VisProg />} />
             <Route path="/robot" element={<Robot />} />
             <Route path="/ConnectedRobots" element={<ConnectedRobots />} />
+            <Route path="/GesturePage" element={<GesturePage />} />
         </Routes>
         </main>
         {showLogs && <Logging />}

src/pages/GesturePage/GesturePage.tsx

@@ -0,0 +1,68 @@
+import { useState } from 'react'
+
+/**
+ * 
+ * @returns A JSX element representing the app’s gesture page.
+ */
+export default function GesturePage() {
+
+  const [tags, setTags] = useState(["hello","happy","meditate","winner","crazy", "affirmative", "once upon a time"])
+  const [selectedTag, setSelectedTag] = useState("");
+
+  async function getTags() {
+    try {
+      // You can optionally use a query parameter: `commands/gesture/tags/?count=<number>`.
+      // This will yield a list of tags with that count.
+      const res = await fetch("http://localhost:8000/robot/commands/gesture/tags/"); 
+      if (!res.ok) throw new Error("Failed communicating with the backend.");
+      const jsonRes = await res.json();
+      setTags(jsonRes["available_gesture_tags"]);
+    } catch (err) {
+      console.error("Failed to fetch tags:", err);
+    }
+  }
+
+  async function doGesture() {
+    if (!selectedTag) {
+      alert("Please select a gesture first.");
+      return;
+    }
+
+    const gesture = { endpoint: "actuate/gesture/tag", data: selectedTag };
+
+    try {
+      const res = await fetch("http://localhost:8000/robot/command/gesture", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(gesture),
+      });
+      if (!res.ok) throw new Error("Failed communicating with the backend.");
+      console.log(`Successfully sent gesture '${selectedTag}' to the backend.`);
+    } catch (err) {
+      console.error("Failed to send gesture command:", err);
+    }
+  }
+
+  return (
+    <div className="card p-4 space-y-4">
+      <button onClick={getTags}>Get Tags</button>
+
+      <select
+        value={selectedTag}
+        onChange={(e) => setSelectedTag(e.target.value)}
+        disabled={tags.length === 0}
+      >
+        <option value="">
+          {tags.length === 0 ? "No tags loaded yet" : "-- Select a gesture --"}
+        </option>
+        {tags.map((tag) => (
+          <option key={tag} value={tag}>
+            {tag}
+          </option>
+        ))}
+      </select>
+
+      <button onClick={doGesture}>Do Gesture</button>
+    </div>
+  );
+}

src/pages/Home/Home.tsx

@@ -23,6 +23,7 @@ function Home() {
         <Link to={"/editor"}>Editor →</Link>
         <Link to={"/template"}>Template →</Link>
         <Link to={"/ConnectedRobots"}>Connected Robots →</Link>
+        <Link to={"/GesturePage"}>Gesture Robot →</Link>
       </div>
     </div>
   )

test/pages/GesturePage/GesturePage.test.tsx

@@ -0,0 +1 @@
+// maybe later idk