refactor: renamed Components.tsx
renamed it to MonitoringPageComponents.tsx ref: N25B-400
This commit is contained in:
Pim Hutting
216
src/pages/MonitoringPage/MonitoringPageComponents.tsx
Normal file
216
src/pages/MonitoringPage/MonitoringPageComponents.tsx
Normal file
@@ -0,0 +1,216 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import styles from './MonitoringPage.module.css';
|
||||
import { sendUserInterrupt } from './MonitoringPageAPI';
|
||||
|
||||
// --- GESTURE COMPONENT ---
|
||||
export const GestureControls: React.FC = () => {
|
||||
const [selectedGesture, setSelectedGesture] = useState("animations/Stand/BodyTalk/Speaking/BodyTalk_1");
|
||||
|
||||
const gestures = [
|
||||
{ label: "Body Talk 1", value: "animations/Stand/BodyTalk/Speaking/BodyTalk_1" },
|
||||
{ label: "Thinking 8", value: "animations/Stand/Gestures/Thinking_8" },
|
||||
{ label: "Thinking 1", value: "animations/Stand/Gestures/Thinking_1" },
|
||||
{ label: "Happy", value: "animations/Stand/Emotions/Positive/Happy_1" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={styles.gestures}>
|
||||
<h4>Gestures</h4>
|
||||
<div className={styles.gestureInputGroup}>
|
||||
<select
|
||||
value={selectedGesture}
|
||||
onChange={(e) => setSelectedGesture(e.target.value)}
|
||||
>
|
||||
{gestures.map(g => <option key={g.value} value={g.value}>{g.label}</option>)}
|
||||
</select>
|
||||
<button onClick={() => sendUserInterrupt("gesture", selectedGesture)}>
|
||||
Actuate
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// --- PRESET SPEECH COMPONENT ---
|
||||
export const SpeechPresets: React.FC = () => {
|
||||
const phrases = [
|
||||
{ label: "Hello, I'm Pepper", text: "Hello, I'm Pepper" },
|
||||
{ label: "Repeat please", text: "Could you repeat that please" },
|
||||
{ label: "About yourself", text: "Tell me something about yourself" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={styles.speech}>
|
||||
<h4>Speech Presets</h4>
|
||||
<ul>
|
||||
{phrases.map((phrase, i) => (
|
||||
<li key={i}>
|
||||
<button
|
||||
className={styles.speechBtn}
|
||||
onClick={() => sendUserInterrupt("speech", phrase.text)}
|
||||
>
|
||||
"{phrase.label}"
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// --- DIRECT SPEECH (INPUT) COMPONENT ---
|
||||
export const DirectSpeechInput: React.FC = () => {
|
||||
const [text, setText] = useState("");
|
||||
|
||||
const handleSend = () => {
|
||||
if (!text.trim()) return;
|
||||
sendUserInterrupt("speech", text);
|
||||
setText(""); // Clear after sending
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.directSpeech}>
|
||||
<h4>Direct Pepper Speech</h4>
|
||||
<div className={styles.speechInput}>
|
||||
<input
|
||||
type="text"
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
placeholder="Type message..."
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSend()}
|
||||
/>
|
||||
<button onClick={handleSend}>Send</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// --- interface for goals/triggers/norms/conditional norms ---
|
||||
type StatusItem = {
|
||||
id?: string | number;
|
||||
achieved?: boolean;
|
||||
description?: string;
|
||||
label?: string;
|
||||
norm?: string;
|
||||
};
|
||||
|
||||
interface StatusListProps {
|
||||
title: string;
|
||||
items: StatusItem[];
|
||||
type: 'goal' | 'trigger' | 'norm'| 'cond_norm';
|
||||
activeIds: Record<string, boolean>;
|
||||
currentGoalIndex?: number;
|
||||
}
|
||||
|
||||
// --- STATUS LIST COMPONENT ---
|
||||
export const StatusList: React.FC<StatusListProps> = ({
|
||||
title,
|
||||
items,
|
||||
type,
|
||||
activeIds,
|
||||
currentGoalIndex // Destructure this prop
|
||||
}) => {
|
||||
return (
|
||||
<section className={styles.phaseBox}>
|
||||
<h3>{title}</h3>
|
||||
<ul>
|
||||
{items.map((item, idx) => {
|
||||
if (item.id === undefined) return null;
|
||||
const isActive = !!activeIds[item.id];
|
||||
const showIndicator = type !== 'norm';
|
||||
const canOverride = showIndicator && !isActive || (type === 'cond_norm' && isActive);
|
||||
|
||||
const isCurrentGoal = type === 'goal' && idx === currentGoalIndex;
|
||||
|
||||
const handleOverrideClick = () => {
|
||||
if (!canOverride) return;
|
||||
if (type === 'cond_norm' && isActive){
|
||||
{/* Unachieve conditional norm */}
|
||||
sendUserInterrupt("override_unachieve", String(item.id));
|
||||
}
|
||||
else {
|
||||
|
||||
sendUserInterrupt("override", String(item.id));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<li key={item.id ?? idx} className={styles.statusItem}>
|
||||
{showIndicator && (
|
||||
<span
|
||||
className={`${styles.statusIndicator} ${isActive ? styles.active : styles.inactive} ${canOverride ? styles.clickable : ''}`}
|
||||
onClick={handleOverrideClick}
|
||||
>
|
||||
{isActive ? "✔️" : "❌"}
|
||||
</span>
|
||||
)}
|
||||
<span
|
||||
className={styles.itemDescription}
|
||||
style={{
|
||||
// Visual Feedback
|
||||
textDecoration: isCurrentGoal ? 'underline' : 'none',
|
||||
fontWeight: isCurrentGoal ? 'bold' : 'normal',
|
||||
color: isCurrentGoal ? '#007bff' : 'inherit',
|
||||
backgroundColor: isCurrentGoal ? '#e7f3ff' : 'transparent', // Added subtle highlight
|
||||
padding: isCurrentGoal ? '2px 4px' : '0',
|
||||
borderRadius: '4px'
|
||||
}}
|
||||
>
|
||||
{item.description || item.label || item.norm}
|
||||
{isCurrentGoal && " (Current)"}
|
||||
</span>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
// --- Robot Connected ---
|
||||
export const RobotConnected = () => {
|
||||
|
||||
/**
|
||||
* The current connection state:
|
||||
* - `true`: Robot is connected.
|
||||
* - `false`: Robot is not connected.
|
||||
* - `null`: Connection status is unknown (initial check in progress).
|
||||
*/
|
||||
const [connected, setConnected] = useState<boolean | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
// Open a Server-Sent Events (SSE) connection to receive live ping updates.
|
||||
// We're expecting a stream of data like that looks like this: `data = False` or `data = True`
|
||||
const eventSource = new EventSource("http://localhost:8000/robot/ping_stream");
|
||||
eventSource.onmessage = (event) => {
|
||||
|
||||
// Expecting messages in JSON format: `true` or `false`
|
||||
//commented out this log as it clutters console logs, but might be useful to debug
|
||||
//console.log("received message:", event.data);
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
|
||||
try {
|
||||
setConnected(data)
|
||||
}
|
||||
catch {
|
||||
console.log("couldnt extract connected from incoming ping data")
|
||||
}
|
||||
|
||||
} catch {
|
||||
console.log("Ping message not in correct format:", event.data);
|
||||
}
|
||||
};
|
||||
|
||||
// Clean up the SSE connection when the component unmounts.
|
||||
return () => eventSource.close();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h3>Connection:</h3>
|
||||
<p className={connected ? styles.connected : styles.disconnected }>{connected ? "● Robot is connected" : "● Robot is disconnected"}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user