119 lines
3.5 KiB
TypeScript
119 lines
3.5 KiB
TypeScript
import React from 'react';
|
||
import styles from './MonitoringPage.module.css'
|
||
|
||
export default function MonitoringPage() {
|
||
return (
|
||
<div className="dashboard-container">
|
||
<header className="experiment-overview">
|
||
<div className="phase-name">
|
||
<h2>Experiment Overview</h2>
|
||
<p><strong>Phase name:</strong> Rhyming fish</p>
|
||
<div className="phase-progress">
|
||
<span className="phase active">1</span>
|
||
<span className="phase active">2</span>
|
||
<span className="phase current">3</span>
|
||
<span className="phase">4</span>
|
||
<span className="phase">5</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="experiment-controls">
|
||
<h3>Experiment Controls</h3>
|
||
<div className="controls-buttons">
|
||
<button className="play">▶️</button>
|
||
<button className="pause">⏸️</button>
|
||
<button className="restart">🔁</button>
|
||
<button className="stop">⏹️</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="connection-status">
|
||
<h3>Connection:</h3>
|
||
<p className="connected">● Robot is connected</p>
|
||
</div>
|
||
</header>
|
||
|
||
<main className="phase-overview">
|
||
<section>
|
||
<h3>Goals</h3>
|
||
<ul>
|
||
<li className="checked">Convince the RP that you are a fish</li>
|
||
<li>Reference Shakespeare</li>
|
||
<li>Give a compliment</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section>
|
||
<h3>Triggers</h3>
|
||
<ul>
|
||
<li className="checked">Convince the RP that you are a fish</li>
|
||
<li>Reference Shakespeare</li>
|
||
<li>Give a compliment</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section>
|
||
<h3>Norms</h3>
|
||
<ul>
|
||
<li>Rhyme when talking</li>
|
||
<li>Talk like a fish</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section>
|
||
<h3>Conditional Norms</h3>
|
||
<ul>
|
||
<li>“RP is sad” - Be nice</li>
|
||
</ul>
|
||
</section>
|
||
</main>
|
||
|
||
<aside className="logs">
|
||
<h3>Logs</h3>
|
||
<div className="log-header">
|
||
<span>Global:</span>
|
||
<button>ALL</button>
|
||
<button>Add</button>
|
||
<button className="live">Live</button>
|
||
</div>
|
||
<textarea defaultValue="Example Log: much log"></textarea>
|
||
</aside>
|
||
|
||
<footer className="controls-section">
|
||
<div className="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="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="direct-speech">
|
||
<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="speech-input">
|
||
<input type="text" placeholder="Type message..." />
|
||
<button>Send</button>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
);
|
||
}
|