Merge remote-tracking branch 'origin/feat/monitoringpage-pim' into feat/monitoringpage-bjorn
This commit is contained in:
Björn Otgaar
149
src/pages/MonitoringPage/Components.tsx
Normal file
149
src/pages/MonitoringPage/Components.tsx
Normal file
@@ -0,0 +1,149 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import styles from './MonitoringPage.module.css';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* HELPER: Unified sender function
|
||||||
|
* In a real app, you might move this to a /services or /hooks folder
|
||||||
|
*/
|
||||||
|
const sendUserInterrupt = async (type: string, context: string) => {
|
||||||
|
try {
|
||||||
|
const response = await fetch("http://localhost:8000/button_pressed", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ type, context }),
|
||||||
|
});
|
||||||
|
if (!response.ok) throw new Error("Backend response error");
|
||||||
|
console.log(`Interrupt Sent - Type: ${type}, Context: ${context}`);
|
||||||
|
} catch (err) {
|
||||||
|
console.error(`Failed to send interrupt:`, err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- 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 ---
|
||||||
|
interface StatusListProps {
|
||||||
|
title: string;
|
||||||
|
items: any[];
|
||||||
|
type: 'goal' | 'trigger' | 'norm'| 'cond_norm';
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- STATUS LIST COMPONENT ---
|
||||||
|
export const StatusList: React.FC<StatusListProps> = ({ title, items, type }) => {
|
||||||
|
return (
|
||||||
|
<section className={styles.phaseBox}>
|
||||||
|
<h3>{title}</h3>
|
||||||
|
<ul>
|
||||||
|
{items.length > 0 ? (
|
||||||
|
items.map((item, idx) => {
|
||||||
|
const isAchieved = item.achieved;
|
||||||
|
const showIndicator = type !== 'norm';
|
||||||
|
const canOverride = showIndicator && !isAchieved;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<li key={item.id ?? idx} className={styles.statusItem}>
|
||||||
|
{showIndicator && (
|
||||||
|
<span
|
||||||
|
className={`${styles.statusIndicator} ${canOverride ? styles.clickable : ''}`}
|
||||||
|
onClick={() => canOverride && sendUserInterrupt("override", String(item.id))}
|
||||||
|
title={canOverride ? `Send override for ID: ${item.id}` : 'Achieved'}
|
||||||
|
style={{ cursor: canOverride ? 'pointer' : 'default' }}
|
||||||
|
>
|
||||||
|
{isAchieved ? "✔️" : "❌"}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<span className={styles.itemDescription}>
|
||||||
|
{item.description || item.label || item.norm}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
) : (
|
||||||
|
<p className={styles.emptyText}>No {title.toLowerCase()} defined.</p>
|
||||||
|
)}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -1,6 +1,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styles from './MonitoringPage.module.css';
|
import styles from './MonitoringPage.module.css';
|
||||||
import useProgramStore from "../../utils/programStore.ts";
|
import useProgramStore from "../../utils/programStore.ts";
|
||||||
|
import { GestureControls, SpeechPresets, DirectSpeechInput, StatusList } from './Components';
|
||||||
import { nextPhase } from ".//MonitoringPageAPI.ts"
|
import { nextPhase } from ".//MonitoringPageAPI.ts"
|
||||||
|
|
||||||
type Goal = { id?: string | number; description?: string; achieved?: boolean };
|
type Goal = { id?: string | number; description?: string; achieved?: boolean };
|
||||||
@@ -88,57 +89,14 @@ const MonitoringPage: React.FC = () => {
|
|||||||
<h3>Phase Overview</h3>
|
<h3>Phase Overview</h3>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className={styles.phaseBox}>
|
<StatusList title="Goals" items={goals} type="goal" />
|
||||||
<h3>Goals</h3>
|
<StatusList title="Triggers" items={triggers} type="trigger" />
|
||||||
<ul>
|
<StatusList title="Norms" items={norms} type="norm" />
|
||||||
{goals.length > 0 ? (
|
<StatusList
|
||||||
goals.map((goal, idx) => (
|
title="Conditional Norms"
|
||||||
<li key={goal.id ?? idx}>
|
items={[{ id: 'cn_1', norm: '“RP is sad” - Be nice', achieved: false }]}
|
||||||
<span>{goal.achieved ? "✔️" : "❌"}</span> {goal.description}
|
type="cond_norm"
|
||||||
</li>
|
/>
|
||||||
))) : (
|
|
||||||
<p>No goals defined.</p>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section className={styles.phaseBox}>
|
|
||||||
<h3>Triggers</h3>
|
|
||||||
<ul>
|
|
||||||
{triggers.length > 0 ? (
|
|
||||||
triggers.map((trigger, idx) => (
|
|
||||||
<li key={trigger.id ?? idx}>
|
|
||||||
<span>{trigger.achieved ? "✔️" : "❌"}</span> {trigger.label}
|
|
||||||
</li>
|
|
||||||
))) : (
|
|
||||||
<p>No triggers defined.</p>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section className={styles.phaseBox}>
|
|
||||||
<h3>Norms</h3>
|
|
||||||
<ul>
|
|
||||||
{norms.length > 0 ? (
|
|
||||||
norms.map((norm, idx) => (
|
|
||||||
<li key={norm.id ?? idx}>
|
|
||||||
{norm.norm}
|
|
||||||
</li>
|
|
||||||
))) : (
|
|
||||||
<p>No norms defined.</p>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section className={styles.phaseBox}>
|
|
||||||
<h3>Conditional Norms</h3>
|
|
||||||
<ul>
|
|
||||||
<li>“RP is sad” - Be nice</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
{/* LOGS */}
|
{/* LOGS */}
|
||||||
@@ -155,38 +113,9 @@ const MonitoringPage: React.FC = () => {
|
|||||||
|
|
||||||
{/* FOOTER */}
|
{/* FOOTER */}
|
||||||
<footer className={styles.controlsSection}>
|
<footer className={styles.controlsSection}>
|
||||||
<div className={styles.gestures}>
|
<GestureControls />
|
||||||
<h4>Controls</h4>
|
<SpeechPresets />
|
||||||
<ul>
|
<DirectSpeechInput />
|
||||||
<li>Gesture: Wave Left Hand</li>
|
|
||||||
<li>Gesture: Wave Right Hand</li>
|
|
||||||
<li>Gesture: Left Thumbs Up</li>
|
|
||||||
<li>Gesture: Right Thumbs Up</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.speech}>
|
|
||||||
<h4>Speech Options</h4>
|
|
||||||
<ul>
|
|
||||||
<li>\"Hello, my name is pepper.\"</li>
|
|
||||||
<li>\"How is the weather today?\"</li>
|
|
||||||
<li>\"I like your outfit, very pretty.\"</li>
|
|
||||||
<li>\"How is your day going?\"</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.directSpeech}>
|
|
||||||
<h4>Direct Pepper Speech</h4>
|
|
||||||
<ul>
|
|
||||||
<li>[time] Send: *Previous message*</li>
|
|
||||||
<li>[time] Send: *Previous message*</li>
|
|
||||||
<li>[time] Send: *Previous message*</li>
|
|
||||||
</ul>
|
|
||||||
<div className={styles.speechInput}>
|
|
||||||
<input type="text" placeholder="Type message..." />
|
|
||||||
<button>Send</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user