feat(gtm): Implement Rich Session Browser UI
- 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.
This commit is contained in:
58
gtm-architect/components/SessionBrowser.tsx
Normal file
58
gtm-architect/components/SessionBrowser.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
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;
|
||||
Reference in New Issue
Block a user