feat: add SessionDetail page with notes view/edit and route
Made-with: Cursor
This commit is contained in:
cottongin
@@ -12,6 +12,7 @@ import Login from './pages/Login';
|
|||||||
import Picker from './pages/Picker';
|
import Picker from './pages/Picker';
|
||||||
import Manager from './pages/Manager';
|
import Manager from './pages/Manager';
|
||||||
import History from './pages/History';
|
import History from './pages/History';
|
||||||
|
import SessionDetail from './pages/SessionDetail';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const { isAuthenticated, logout } = useAuth();
|
const { isAuthenticated, logout } = useAuth();
|
||||||
@@ -161,6 +162,7 @@ function App() {
|
|||||||
<Route path="/" element={<Home />} />
|
<Route path="/" element={<Home />} />
|
||||||
<Route path="/login" element={<Login />} />
|
<Route path="/login" element={<Login />} />
|
||||||
<Route path="/history" element={<History />} />
|
<Route path="/history" element={<History />} />
|
||||||
|
<Route path="/history/:id" element={<SessionDetail />} />
|
||||||
<Route path="/picker" element={<Picker />} />
|
<Route path="/picker" element={<Picker />} />
|
||||||
<Route path="/manager" element={<Manager />} />
|
<Route path="/manager" element={<Manager />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
|
|||||||
624
frontend/src/pages/SessionDetail.jsx
Normal file
624
frontend/src/pages/SessionDetail.jsx
Normal file
@@ -0,0 +1,624 @@
|
|||||||
|
import React, { useState, useEffect, useCallback } from 'react';
|
||||||
|
import { useParams, useNavigate, Link } from 'react-router-dom';
|
||||||
|
import Markdown from 'react-markdown';
|
||||||
|
import { useAuth } from '../context/AuthContext';
|
||||||
|
import { useToast } from '../components/Toast';
|
||||||
|
import api from '../api/axios';
|
||||||
|
import { formatLocalDateTime, formatLocalTime } from '../utils/dateUtils';
|
||||||
|
import PopularityBadge from '../components/PopularityBadge';
|
||||||
|
|
||||||
|
function SessionDetail() {
|
||||||
|
const { id } = useParams();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { isAuthenticated } = useAuth();
|
||||||
|
const { error: showError, success } = useToast();
|
||||||
|
|
||||||
|
const [session, setSession] = useState(null);
|
||||||
|
const [games, setGames] = useState([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [editing, setEditing] = useState(false);
|
||||||
|
const [editedNotes, setEditedNotes] = useState('');
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
const [showDeleteNotesConfirm, setShowDeleteNotesConfirm] = useState(false);
|
||||||
|
const [showDeleteSessionConfirm, setShowDeleteSessionConfirm] = useState(false);
|
||||||
|
const [showChatImport, setShowChatImport] = useState(false);
|
||||||
|
const [closingSession, setClosingSession] = useState(false);
|
||||||
|
|
||||||
|
const loadSession = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
const res = await api.get(`/sessions/${id}`);
|
||||||
|
setSession(res.data);
|
||||||
|
} catch (err) {
|
||||||
|
if (err.response?.status === 404) {
|
||||||
|
navigate('/history', { replace: true });
|
||||||
|
}
|
||||||
|
console.error('Failed to load session', err);
|
||||||
|
}
|
||||||
|
}, [id, navigate]);
|
||||||
|
|
||||||
|
const loadGames = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
const res = await api.get(`/sessions/${id}/games`);
|
||||||
|
setGames([...res.data].reverse());
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Failed to load session games', err);
|
||||||
|
}
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
Promise.all([loadSession(), loadGames()]).finally(() => setLoading(false));
|
||||||
|
}, [loadSession, loadGames]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!session || session.is_active !== 1) return;
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
loadSession();
|
||||||
|
loadGames();
|
||||||
|
}, 3000);
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, [session, loadSession, loadGames]);
|
||||||
|
|
||||||
|
const handleSaveNotes = async () => {
|
||||||
|
setSaving(true);
|
||||||
|
try {
|
||||||
|
await api.put(`/sessions/${id}/notes`, { notes: editedNotes });
|
||||||
|
await loadSession();
|
||||||
|
setEditing(false);
|
||||||
|
success('Notes saved');
|
||||||
|
} catch (err) {
|
||||||
|
showError('Failed to save notes');
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteNotes = async () => {
|
||||||
|
try {
|
||||||
|
await api.delete(`/sessions/${id}/notes`);
|
||||||
|
await loadSession();
|
||||||
|
setEditing(false);
|
||||||
|
setShowDeleteNotesConfirm(false);
|
||||||
|
success('Notes deleted');
|
||||||
|
} catch (err) {
|
||||||
|
showError('Failed to delete notes');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteSession = async () => {
|
||||||
|
try {
|
||||||
|
await api.delete(`/sessions/${id}`);
|
||||||
|
success('Session deleted');
|
||||||
|
navigate('/history', { replace: true });
|
||||||
|
} catch (err) {
|
||||||
|
showError('Failed to delete session: ' + (err.response?.data?.error || err.message));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCloseSession = async (sessionId, notes) => {
|
||||||
|
try {
|
||||||
|
await api.post(`/sessions/${sessionId}/close`, { notes });
|
||||||
|
await loadSession();
|
||||||
|
await loadGames();
|
||||||
|
setClosingSession(false);
|
||||||
|
success('Session ended successfully');
|
||||||
|
} catch (err) {
|
||||||
|
showError('Failed to close session');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleExport = async (format) => {
|
||||||
|
try {
|
||||||
|
const response = await api.get(`/sessions/${id}/export?format=${format}`, {
|
||||||
|
responseType: 'blob'
|
||||||
|
});
|
||||||
|
const url = window.URL.createObjectURL(new Blob([response.data]));
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = url;
|
||||||
|
link.setAttribute('download', `session-${id}.${format === 'json' ? 'json' : 'txt'}`);
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
link.parentNode.removeChild(link);
|
||||||
|
window.URL.revokeObjectURL(url);
|
||||||
|
success(`Session exported as ${format.toUpperCase()}`);
|
||||||
|
} catch (err) {
|
||||||
|
showError('Failed to export session');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const startEditing = () => {
|
||||||
|
setEditedNotes(session.notes || '');
|
||||||
|
setEditing(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center items-center h-64">
|
||||||
|
<div className="text-xl text-gray-600 dark:text-gray-400">Loading...</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!session) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center items-center h-64">
|
||||||
|
<div className="text-xl text-gray-600 dark:text-gray-400">Session not found</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
<Link
|
||||||
|
to="/history"
|
||||||
|
className="inline-flex items-center text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 mb-4 transition"
|
||||||
|
>
|
||||||
|
← Back to History
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mb-6">
|
||||||
|
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4">
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<h1 className="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100">
|
||||||
|
Session #{session.id}
|
||||||
|
</h1>
|
||||||
|
{session.is_active === 1 && (
|
||||||
|
<span className="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-sm px-3 py-1 rounded-full font-semibold animate-pulse inline-flex items-center gap-1">
|
||||||
|
🟢 Active
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400">
|
||||||
|
{formatLocalDateTime(session.created_at)}
|
||||||
|
{' • '}
|
||||||
|
{session.games_played} game{session.games_played !== 1 ? 's' : ''} played
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{isAuthenticated && session.is_active === 1 && (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
onClick={() => setClosingSession(true)}
|
||||||
|
className="bg-orange-600 dark:bg-orange-700 text-white px-4 py-2 rounded-lg hover:bg-orange-700 dark:hover:bg-orange-800 transition text-sm"
|
||||||
|
>
|
||||||
|
End Session
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowChatImport(true)}
|
||||||
|
className="bg-indigo-600 dark:bg-indigo-700 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 dark:hover:bg-indigo-800 transition text-sm"
|
||||||
|
>
|
||||||
|
Import Chat Log
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{isAuthenticated && (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
onClick={() => handleExport('txt')}
|
||||||
|
className="bg-gray-600 dark:bg-gray-700 text-white px-4 py-2 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition text-sm"
|
||||||
|
>
|
||||||
|
Export TXT
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleExport('json')}
|
||||||
|
className="bg-gray-600 dark:bg-gray-700 text-white px-4 py-2 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition text-sm"
|
||||||
|
>
|
||||||
|
Export JSON
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{isAuthenticated && session.is_active === 0 && (
|
||||||
|
<button
|
||||||
|
onClick={() => setShowDeleteSessionConfirm(true)}
|
||||||
|
className="bg-red-600 dark:bg-red-700 text-white px-4 py-2 rounded-lg hover:bg-red-700 dark:hover:bg-red-800 transition text-sm"
|
||||||
|
>
|
||||||
|
Delete Session
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mb-6">
|
||||||
|
<NotesSection
|
||||||
|
session={session}
|
||||||
|
isAuthenticated={isAuthenticated}
|
||||||
|
editing={editing}
|
||||||
|
editedNotes={editedNotes}
|
||||||
|
saving={saving}
|
||||||
|
showDeleteNotesConfirm={showDeleteNotesConfirm}
|
||||||
|
onStartEditing={startEditing}
|
||||||
|
onSetEditedNotes={setEditedNotes}
|
||||||
|
onSave={handleSaveNotes}
|
||||||
|
onCancel={() => setEditing(false)}
|
||||||
|
onDeleteNotes={handleDeleteNotes}
|
||||||
|
onShowDeleteConfirm={() => setShowDeleteNotesConfirm(true)}
|
||||||
|
onHideDeleteConfirm={() => setShowDeleteNotesConfirm(false)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showChatImport && (
|
||||||
|
<div className="mb-6">
|
||||||
|
<ChatImportPanel
|
||||||
|
sessionId={id}
|
||||||
|
onClose={() => setShowChatImport(false)}
|
||||||
|
onImportComplete={() => {
|
||||||
|
loadGames();
|
||||||
|
setShowChatImport(false);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
|
||||||
|
{games.length === 0 ? (
|
||||||
|
<p className="text-gray-500 dark:text-gray-400">No games played in this session</p>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<h2 className="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200">
|
||||||
|
Games Played ({games.length})
|
||||||
|
</h2>
|
||||||
|
<div className="space-y-3">
|
||||||
|
{games.map((game, index) => (
|
||||||
|
<div key={game.id} className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 bg-gray-50 dark:bg-gray-700/50">
|
||||||
|
<div className="flex justify-between items-start mb-2">
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-lg text-gray-800 dark:text-gray-100">
|
||||||
|
{games.length - index}. {game.title}
|
||||||
|
</div>
|
||||||
|
<div className="text-gray-600 dark:text-gray-400">{game.pack_name}</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
{formatLocalTime(game.played_at)}
|
||||||
|
</div>
|
||||||
|
{game.manually_added === 1 && (
|
||||||
|
<span className="inline-block mt-1 text-xs bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 px-2 py-1 rounded">
|
||||||
|
Manual
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
<div>
|
||||||
|
<span className="font-semibold">Players:</span> {game.min_players}-{game.max_players}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="font-semibold">Type:</span> {game.game_type || 'N/A'}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span
|
||||||
|
className="font-semibold"
|
||||||
|
title="Popularity is cumulative across all sessions where this game was played"
|
||||||
|
>
|
||||||
|
Popularity:
|
||||||
|
</span>
|
||||||
|
<PopularityBadge
|
||||||
|
upvotes={game.upvotes || 0}
|
||||||
|
downvotes={game.downvotes || 0}
|
||||||
|
popularityScore={game.popularity_score || 0}
|
||||||
|
size="sm"
|
||||||
|
showCounts={true}
|
||||||
|
showNet={true}
|
||||||
|
showRatio={true}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{closingSession && (
|
||||||
|
<EndSessionModal
|
||||||
|
sessionId={parseInt(id)}
|
||||||
|
sessionGames={games}
|
||||||
|
onClose={() => setClosingSession(false)}
|
||||||
|
onConfirm={handleCloseSession}
|
||||||
|
onShowChatImport={() => {
|
||||||
|
setShowChatImport(true);
|
||||||
|
setClosingSession(false);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{showDeleteSessionConfirm && (
|
||||||
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||||
|
<div className="bg-white dark:bg-gray-800 rounded-lg p-8 max-w-md w-full">
|
||||||
|
<h2 className="text-2xl font-bold mb-4 text-red-600 dark:text-red-400">Delete Session?</h2>
|
||||||
|
<p className="text-gray-700 dark:text-gray-300 mb-6">
|
||||||
|
Are you sure you want to delete Session #{session.id}?
|
||||||
|
This will permanently delete all games and chat logs associated with this session. This action cannot be undone.
|
||||||
|
</p>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<button
|
||||||
|
onClick={handleDeleteSession}
|
||||||
|
className="flex-1 bg-red-600 dark:bg-red-700 text-white py-3 rounded-lg hover:bg-red-700 dark:hover:bg-red-800 transition font-semibold"
|
||||||
|
>
|
||||||
|
Delete Permanently
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowDeleteSessionConfirm(false)}
|
||||||
|
className="flex-1 bg-gray-600 dark:bg-gray-700 text-white py-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function NotesSection({
|
||||||
|
session,
|
||||||
|
isAuthenticated,
|
||||||
|
editing,
|
||||||
|
editedNotes,
|
||||||
|
saving,
|
||||||
|
showDeleteNotesConfirm,
|
||||||
|
onStartEditing,
|
||||||
|
onSetEditedNotes,
|
||||||
|
onSave,
|
||||||
|
onCancel,
|
||||||
|
onDeleteNotes,
|
||||||
|
onShowDeleteConfirm,
|
||||||
|
onHideDeleteConfirm,
|
||||||
|
}) {
|
||||||
|
if (editing) {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="flex justify-between items-center mb-3">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100">Session Notes</h2>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button
|
||||||
|
onClick={onShowDeleteConfirm}
|
||||||
|
className="bg-red-600 dark:bg-red-700 text-white px-3 py-1.5 rounded text-sm hover:bg-red-700 dark:hover:bg-red-800 transition"
|
||||||
|
>
|
||||||
|
Delete Notes
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={onSave}
|
||||||
|
disabled={saving}
|
||||||
|
className="bg-green-600 dark:bg-green-700 text-white px-3 py-1.5 rounded text-sm hover:bg-green-700 dark:hover:bg-green-800 transition disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{saving ? 'Saving...' : 'Save'}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={onCancel}
|
||||||
|
className="bg-gray-500 dark:bg-gray-600 text-white px-3 py-1.5 rounded text-sm hover:bg-gray-600 dark:hover:bg-gray-700 transition"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<textarea
|
||||||
|
value={editedNotes}
|
||||||
|
onChange={(e) => onSetEditedNotes(e.target.value)}
|
||||||
|
className="w-full px-4 py-3 border border-indigo-300 dark:border-indigo-600 rounded-lg h-48 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-mono text-sm leading-relaxed resize-y focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||||
|
placeholder="Write your session notes here... Markdown is supported."
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Supports Markdown formatting</p>
|
||||||
|
|
||||||
|
{showDeleteNotesConfirm && (
|
||||||
|
<div className="mt-3 p-4 bg-red-50 dark:bg-red-900/30 border border-red-300 dark:border-red-700 rounded-lg">
|
||||||
|
<p className="text-red-700 dark:text-red-300 mb-3">Are you sure you want to delete these notes?</p>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button
|
||||||
|
onClick={onDeleteNotes}
|
||||||
|
className="bg-red-600 text-white px-4 py-2 rounded text-sm hover:bg-red-700 transition"
|
||||||
|
>
|
||||||
|
Yes, Delete
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={onHideDeleteConfirm}
|
||||||
|
className="bg-gray-500 text-white px-4 py-2 rounded text-sm hover:bg-gray-600 transition"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isAuthenticated) {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-3">Session Notes</h2>
|
||||||
|
{session.has_notes ? (
|
||||||
|
<>
|
||||||
|
<p className="text-gray-700 dark:text-gray-300">{session.notes_preview}</p>
|
||||||
|
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2 italic">Log in to view full notes</p>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<p className="text-gray-500 dark:text-gray-400 italic">No notes for this session</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="flex justify-between items-center mb-3">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100">Session Notes</h2>
|
||||||
|
<button
|
||||||
|
onClick={onStartEditing}
|
||||||
|
className="bg-indigo-600 dark:bg-indigo-700 text-white px-3 py-1.5 rounded text-sm hover:bg-indigo-700 dark:hover:bg-indigo-800 transition"
|
||||||
|
>
|
||||||
|
{session.notes ? 'Edit' : 'Add Notes'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{session.notes ? (
|
||||||
|
<div className="prose prose-sm dark:prose-invert max-w-none text-gray-700 dark:text-gray-300">
|
||||||
|
<Markdown>{session.notes}</Markdown>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-gray-500 dark:text-gray-400 italic">No notes for this session</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function EndSessionModal({ sessionId, sessionGames, onClose, onConfirm, onShowChatImport }) {
|
||||||
|
const [notes, setNotes] = useState('');
|
||||||
|
|
||||||
|
const hasPopularityData = sessionGames.some(game => game.popularity_score !== 0);
|
||||||
|
const showPopularityWarning = sessionGames.length > 0 && !hasPopularityData;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||||
|
<div className="bg-white dark:bg-gray-800 rounded-lg p-8 max-w-md w-full">
|
||||||
|
<h2 className="text-2xl font-bold mb-4 dark:text-gray-100">End Session #{sessionId}</h2>
|
||||||
|
|
||||||
|
{showPopularityWarning && (
|
||||||
|
<div className="mb-4 p-4 bg-yellow-50 dark:bg-yellow-900/30 border border-yellow-300 dark:border-yellow-700 rounded-lg">
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<span className="text-yellow-600 dark:text-yellow-400 text-xl">⚠️</span>
|
||||||
|
<div className="flex-1">
|
||||||
|
<p className="font-semibold text-yellow-800 dark:text-yellow-200 mb-1">No Popularity Data</p>
|
||||||
|
<p className="text-sm text-yellow-700 dark:text-yellow-300 mb-3">
|
||||||
|
You haven't imported chat reactions yet. Import now to track which games your players loved!
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onClick={() => { onClose(); onShowChatImport(); }}
|
||||||
|
className="text-sm bg-yellow-600 dark:bg-yellow-700 text-white px-4 py-2 rounded hover:bg-yellow-700 dark:hover:bg-yellow-800 transition"
|
||||||
|
>
|
||||||
|
Import Chat Log
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="mb-4">
|
||||||
|
<label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">
|
||||||
|
Session Notes (optional)
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={notes}
|
||||||
|
onChange={(e) => setNotes(e.target.value)}
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg h-32 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
|
||||||
|
placeholder="Add any notes about this session..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<button
|
||||||
|
onClick={() => onConfirm(sessionId, notes)}
|
||||||
|
className="flex-1 bg-orange-600 dark:bg-orange-700 text-white py-3 rounded-lg hover:bg-orange-700 dark:hover:bg-orange-800 transition"
|
||||||
|
>
|
||||||
|
End Session
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="flex-1 bg-gray-600 dark:bg-gray-700 text-white py-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ChatImportPanel({ sessionId, onClose, onImportComplete }) {
|
||||||
|
const [chatData, setChatData] = useState('');
|
||||||
|
const [importing, setImporting] = useState(false);
|
||||||
|
const [result, setResult] = useState(null);
|
||||||
|
const { error, success } = useToast();
|
||||||
|
|
||||||
|
const handleFileUpload = async (event) => {
|
||||||
|
const file = event.target.files[0];
|
||||||
|
if (!file) return;
|
||||||
|
try {
|
||||||
|
const text = await file.text();
|
||||||
|
setChatData(text);
|
||||||
|
success('File loaded successfully');
|
||||||
|
} catch (err) {
|
||||||
|
error('Failed to read file: ' + err.message);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleImport = async () => {
|
||||||
|
if (!chatData.trim()) {
|
||||||
|
error('Please enter chat data or upload a file');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setImporting(true);
|
||||||
|
setResult(null);
|
||||||
|
try {
|
||||||
|
const parsedData = JSON.parse(chatData);
|
||||||
|
const response = await api.post(`/sessions/${sessionId}/chat-import`, { chatData: parsedData });
|
||||||
|
setResult(response.data);
|
||||||
|
success('Chat log imported successfully');
|
||||||
|
setTimeout(() => onImportComplete(), 2000);
|
||||||
|
} catch (err) {
|
||||||
|
error('Import failed: ' + (err.response?.data?.error || err.message));
|
||||||
|
} finally {
|
||||||
|
setImporting(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
|
||||||
|
<h3 className="text-xl font-semibold mb-4 dark:text-gray-100">Import Chat Log</h3>
|
||||||
|
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||||
|
Upload a JSON file or paste JSON array with format: [{"username": "...", "message": "...", "timestamp": "..."}]
|
||||||
|
<br />
|
||||||
|
The system will detect "thisgame++" and "thisgame--" patterns and update game popularity.
|
||||||
|
</p>
|
||||||
|
<div className="mb-4">
|
||||||
|
<label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Upload JSON File</label>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
accept=".json"
|
||||||
|
onChange={handleFileUpload}
|
||||||
|
disabled={importing}
|
||||||
|
className="block w-full text-sm text-gray-900 dark:text-gray-100 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 dark:file:bg-indigo-900/30 dark:file:text-indigo-300 hover:file:bg-indigo-100 dark:hover:file:bg-indigo-900/50 file:cursor-pointer cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-4 text-center text-gray-500 dark:text-gray-400 text-sm">— or —</div>
|
||||||
|
<div className="mb-4">
|
||||||
|
<label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Paste Chat JSON Data</label>
|
||||||
|
<textarea
|
||||||
|
value={chatData}
|
||||||
|
onChange={(e) => setChatData(e.target.value)}
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg h-48 font-mono text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
|
||||||
|
placeholder='[{"username":"Alice","message":"thisgame++","timestamp":"2024-01-01T12:00:00Z"}]'
|
||||||
|
disabled={importing}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{result && (
|
||||||
|
<div className="mb-4 p-4 bg-green-50 dark:bg-green-900/30 border border-green-300 dark:border-green-700 rounded-lg">
|
||||||
|
<p className="font-semibold text-green-800 dark:text-green-200">Import Successful!</p>
|
||||||
|
<p className="text-sm text-green-700 dark:text-green-300">
|
||||||
|
Imported {result.messagesImported} messages, processed {result.votesProcessed} votes
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<button
|
||||||
|
onClick={handleImport}
|
||||||
|
disabled={importing}
|
||||||
|
className="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition disabled:bg-gray-400 dark:disabled:bg-gray-600"
|
||||||
|
>
|
||||||
|
{importing ? 'Importing...' : 'Import'}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="bg-gray-600 dark:bg-gray-700 text-white px-6 py-2 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition"
|
||||||
|
>
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SessionDetail;
|
||||||
Reference in New Issue
Block a user