1. Headings lined up. 2. Color scheme for results.
This commit is contained in:
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1,3 +1,4 @@
|
||||
/frontend/node_modules
|
||||
/backend/node_modules
|
||||
/.context
|
||||
.env
|
||||
@@ -143,7 +143,7 @@ export const createWebSocketServer = (server: any) => {
|
||||
if (!sessionData.clients.has(clientId)) {
|
||||
sessionData.clients.set(clientId, ws);
|
||||
console.log(`Client ${clientId} registered for session: ${sessionId}. Total clients: ${sessionData.clients.size}`);
|
||||
ws.send(JSON.stringify({ type: 'STATE_UPDATE', payload: { session: getSerializableSession(sessionData) } }));
|
||||
ws.send(JSON.stringify({ type: 'STATE_UPDATE', payload: { session: getSerializableSession(sessionData, clientId) } }));
|
||||
}
|
||||
|
||||
console.log(`Received message from ${clientId} in session ${sessionId}:`, type);
|
||||
@@ -202,6 +202,7 @@ export const handleWebSocketMessage = async (ws: WebSocket, sessionId: string, p
|
||||
|
||||
switch (type) {
|
||||
case 'REGISTER_CLIENT':
|
||||
console.log(`Client ${clientId} registered successfully for session ${sessionId}.`);
|
||||
break;
|
||||
|
||||
case 'SETUP_SESSION':
|
||||
|
||||
@@ -8,8 +8,8 @@ interface ResultsDisplayProps {
|
||||
decision: Decision;
|
||||
}
|
||||
|
||||
const CategorySection: React.FC<{ title: string; desire: string; defaultExpanded?: boolean }>
|
||||
= ({ title, desire, defaultExpanded = true }) => {
|
||||
const CategorySection: React.FC<{ title: string; desire: string; defaultExpanded?: boolean; borderColor?: string }>
|
||||
= ({ title, desire, defaultExpanded = true, borderColor = '#e0e0e0' }) => {
|
||||
const [expanded, setExpanded] = React.useState(defaultExpanded);
|
||||
|
||||
if (!desire) {
|
||||
@@ -17,7 +17,7 @@ const CategorySection: React.FC<{ title: string; desire: string; defaultExpanded
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ mt: 3, border: '1px solid #e0e0e0', borderRadius: '4px', p: 2 }}>
|
||||
<Box sx={{ mt: 3, border: `1px solid ${borderColor}`, borderRadius: '4px', p: 2 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<Typography variant="h6" component="h2" gutterBottom>
|
||||
{title}
|
||||
@@ -46,11 +46,11 @@ const ResultsDisplay: React.FC<ResultsDisplayProps> = ({ decision }) => {
|
||||
Cooperative Decision
|
||||
</Typography>
|
||||
|
||||
<CategorySection title="Go-to" desire={decision.goTo} />
|
||||
<CategorySection title="Also good" desire={decision.alsoGood} />
|
||||
<CategorySection title="Considerable" desire={decision.considerable} defaultExpanded={true} />
|
||||
<CategorySection title="No-goes" desire={decision.noGoes} />
|
||||
<CategorySection title="Needs discussion" desire={decision.needsDiscussion} />
|
||||
<CategorySection title="Go-to" desire={decision.goTo} borderColor="#a5d6a7" /> {/* Pale Green */}
|
||||
<CategorySection title="Also good" desire={decision.alsoGood} borderColor="#90caf9" /> {/* Pale Blue */}
|
||||
<CategorySection title="Considerable" desire={decision.considerable} defaultExpanded={true} /> {/* Grey (default) */}
|
||||
<CategorySection title="Needs discussion" desire={decision.needsDiscussion} borderColor="#ffe082" /> {/* Pale Yellow */}
|
||||
<CategorySection title="No-goes" desire={decision.noGoes} borderColor="#ef9a9a" /> {/* Pale Red */}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -80,6 +80,7 @@ export const useSession = (sessionId: string): [Session | null, Dispatch<SetStat
|
||||
const handleMessage = (message: any) => {
|
||||
console.log('useSession: Processing incoming message:', message);
|
||||
if (message.type === 'STATE_UPDATE') {
|
||||
console.log('useSession: Received STATE_UPDATE, session payload:', message.payload.session);
|
||||
setSession(message.payload.session);
|
||||
setError(null); // Clear error on successful state update
|
||||
} else if (message.type === 'ERROR') {
|
||||
|
||||
@@ -54,21 +54,11 @@ const SessionPage = () => {
|
||||
return (
|
||||
<Container maxWidth="md">
|
||||
<Box sx={{ mt: 4 }}>
|
||||
{wsError && <Alert severity="error" sx={{ mb: 2 }}>{wsError}</Alert>}
|
||||
|
||||
<Typography variant="h4" component="h1" gutterBottom>
|
||||
{session.topic || session.sessionId}
|
||||
</Typography>
|
||||
{session.description && (
|
||||
<Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
|
||||
{session.description}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
{session.state === SessionState.SETUP && (
|
||||
<Box sx={{ mt: 4, p: 3, border: '1px dashed grey', borderRadius: '4px', textAlign: 'center' }}>
|
||||
<Typography variant="h6" component="p" gutterBottom>
|
||||
Set Up Desires Harmonization
|
||||
<Box sx={{ mt: 4, p: 3, textAlign: 'center' }}>
|
||||
<Typography variant="h5" component="h5" gutterBottom>
|
||||
Harmonize Desires
|
||||
</Typography>
|
||||
<TextField
|
||||
margin="normal"
|
||||
@@ -130,11 +120,20 @@ const SessionPage = () => {
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Session status is hidden as per FR-008 */}
|
||||
{session.state !== SessionState.SETUP && (
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Expected Responses: {session.expectedResponses}
|
||||
</Typography>
|
||||
<Box sx={{ mt: 2, p: 2, border: '1px solid #e0e0e0', borderRadius: '4px', backgroundColor: '#f5f5f5' }}>
|
||||
<Typography variant="h4" component="h4" gutterBottom>
|
||||
{session.topic || session.sessionId}
|
||||
</Typography>
|
||||
{session.description && (
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
|
||||
Details: {session.description}
|
||||
</Typography>
|
||||
)}
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Expected Responses: {session.expectedResponses}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{session.state === SessionState.GATHERING && !hasSubmittedCurrentParticipant && (
|
||||
|
||||
Reference in New Issue
Block a user