Floke
0281387f87
- Replaced the basic session list with a dedicated, card-based Session Browser page. - Each session card now displays product name, category, description, and a thumbnail placeholder for better usability. - Updated the backend DB manager to extract this rich information from the existing JSON data store. - Refactored the frontend (App.tsx, types.ts) to support the new UI and data structure. - Added new component SessionBrowser.tsx and its corresponding CSS. - Updated documentation to reflect the v2.6 changes.
59 lines
2.0 KiB
TypeScript
59 lines
2.0 KiB
TypeScript
import React from 'react';
|
||
import { ProjectHistoryItem } from './types';
|
||
import './SessionBrowser.css';
|
||
|
||
interface SessionBrowserProps {
|
||
sessions: ProjectHistoryItem[];
|
||
onLoadSession: (projectId: string) => void;
|
||
onDeleteSession: (projectId: string) => void;
|
||
}
|
||
|
||
const SessionBrowser: React.FC<SessionBrowserProps> = ({ sessions, onLoadSession, onDeleteSession }) => {
|
||
|
||
const getCategoryIcon = (category: string) => {
|
||
switch (category.toLowerCase()) {
|
||
case 'reinigungsroboter':
|
||
return '🧹'; // Sweeping broom emoji
|
||
case 'serviceroboter':
|
||
return '🛎️'; // Bellhop bell emoji
|
||
case 'transportroboter':
|
||
return '📦'; // Package emoji
|
||
case 'security roboter':
|
||
return '🛡️'; // Shield emoji
|
||
default:
|
||
return '🤖'; // Default robot emoji
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="session-browser">
|
||
<h2>Gespeicherte Sitzungen</h2>
|
||
<div className="session-grid">
|
||
{sessions.map((session) => (
|
||
<div key={session.id} className="session-card">
|
||
<div className="card-header">
|
||
<span className="category-icon">{getCategoryIcon(session.productCategory)}</span>
|
||
<h3 title={session.productName}>{session.productName}</h3>
|
||
</div>
|
||
{/* Thumbnail placeholder */}
|
||
<div className="thumbnail-placeholder">
|
||
<span>🖼️</span>
|
||
<p>Thumbnail</p>
|
||
</div>
|
||
<div className="card-content">
|
||
<p className="product-description">{session.productDescription}</p>
|
||
<p className="last-updated">Zuletzt bearbeitet: {new Date(session.updated_at).toLocaleString()}</p>
|
||
</div>
|
||
<div className="card-actions">
|
||
<button onClick={() => onLoadSession(session.id)} className="load-btn">Laden</button>
|
||
<button onClick={() => onDeleteSession(session.id)} className="delete-btn">Löschen</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default SessionBrowser;
|