pepperplus/pepperplus-ui
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: added a skeleton for the monitoringpage.

Browse Source 
ref: N25B-398
This commit is contained in:
Tuurminator69
2026-01-03 21:07:32 +01:00
parent ed2e0ecb7b
commit 7a89b0aedd
2 changed files with 248 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
src/pages/MonitoringPage/MonitoringPage.module.css Normal file
View File

@@ -0,0 +1,130 @@
/* MonitoringPage UI*/
.dashboard-container {
display: grid;
grid-template-areas:
'header header header'
'main logs logs'
'footer footer footer';
grid-template-columns: 2fr 1fr 1fr;
gap: 1rem;
padding: 1rem;
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
.experiment-overview {
grid-area: header;
display: flex;
justify-content: space-between;
align-items: flex-start;
background: white;
border-radius: 8px;
padding: 1rem;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.phase-progress .phase {
display: inline-block;
width: 25px;
height: 25px;
border-radius: 5px;
margin: 0 3px;
text-align: center;
line-height: 25px;
background: #ccc;
}
.phase.active {
background-color: #5cb85c;
color: white;
}
.phase.current {
background-color: #f0ad4e;
color: white;
}
.experiment-controls button {
margin-right: 5px;
border: none;
background: none;
cursor: pointer;
font-size: 1.2rem;
}
.connection-status .connected {
color: green;
font-weight: bold;
}
.phase-overview {
grid-area: main;
background: white;
border-radius: 8px;
padding: 1rem;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.phase-overview section {
margin-bottom: 1rem;
}
.phase-overview ul {
list-style-type: none;
padding: 0;
}
.phase-overview li.checked::before {
content: '✔️ ';
}
.logs {
grid-area: logs;
background: white;
border-radius: 8px;
padding: 1rem;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.logs textarea {
width: 100%;
height: 200px;
margin-top: 0.5rem;
}
.controls-section {
grid-area: footer;
display: flex;
justify-content: space-between;
gap: 1rem;
background: white;
border-radius: 8px;
padding: 1rem;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.gestures, .speech, .direct-speech {
flex: 1;
}
.direct-speech .speech-input {
display: flex;
margin-top: 0.5rem;
}
.direct-speech input {
flex: 1;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 4px 0 0 4px;
}
.direct-speech button {
background: #007bff;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 0 4px 4px 0;
cursor: pointer;
}

118
src/pages/MonitoringPage/MonitoringPage.tsx Normal file
View File

@@ -0,0 +1,118 @@
import React from 'react';
import styles from './MonitoringPage.module.css'
export default function ExperimentDashboard() {
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>
);
}