Merge remote-tracking branch 'origin/feat/monitoringpage-pim' into feat/monitoringpage-bjorn

This commit is contained in:
Björn Otgaar
2026-01-07 11:55:20 +01:00
2 changed files with 161 additions and 83 deletions

View File

@@ -1,6 +1,7 @@
import React from 'react';
import styles from './MonitoringPage.module.css';
import useProgramStore from "../../utils/programStore.ts";
import { GestureControls, SpeechPresets, DirectSpeechInput, StatusList } from './Components';
import { nextPhase } from ".//MonitoringPageAPI.ts"
type Goal = { id?: string | number; description?: string; achieved?: boolean };
@@ -88,57 +89,14 @@ const MonitoringPage: React.FC = () => {
<h3>Phase Overview</h3>
</section>
<section className={styles.phaseBox}>
<h3>Goals</h3>
<ul>
{goals.length > 0 ? (
goals.map((goal, idx) => (
<li key={goal.id ?? idx}>
<span>{goal.achieved ? "✔️" : "❌"}</span> {goal.description}
</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>
<StatusList title="Goals" items={goals} type="goal" />
<StatusList title="Triggers" items={triggers} type="trigger" />
<StatusList title="Norms" items={norms} type="norm" />
<StatusList
title="Conditional Norms"
items={[{ id: 'cn_1', norm: '“RP is sad” - Be nice', achieved: false }]}
type="cond_norm"
/>
</main>
{/* LOGS */}
@@ -155,38 +113,9 @@ const MonitoringPage: React.FC = () => {
{/* FOOTER */}
<footer className={styles.controlsSection}>
<div className={styles.gestures}>
<h4>Controls</h4>
<ul>
<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>
<GestureControls />
<SpeechPresets />
<DirectSpeechInput />
</footer>
</div>
);