mirror of
https://github.com/ceratic/project_vollidioten_website.git
synced 2026-05-14 00:16:47 +02:00
feat: Add DatabaseManager and LinkPlayer components, implement authentication and linking logic
- Created DatabaseManager component for managing database access via phpMyAdmin. - Developed LinkPlayer component to link Discord accounts with game characters, including user authentication and error handling. - Added mock data files for players, organizations, and projects to handle backend unavailability. - Implemented AuthService for managing user authentication and session checks. - Created DatabaseService to fetch and manage player, organization, and project data with fallback to mock data. - Added HTML page for handling authentication unavailability. - Developed a test script for validating Docker setup and required files.
This commit is contained in:
Lars Behrends
203
components/EmployeeManagementModal.tsx
Normal file
203
components/EmployeeManagementModal.tsx
Normal file
@@ -0,0 +1,203 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Icons } from './IconSet';
|
||||
|
||||
interface EmployeeManagementModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
projectId: string;
|
||||
onUpdate: () => void;
|
||||
}
|
||||
|
||||
const EmployeeManagementModal: React.FC<EmployeeManagementModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
projectId,
|
||||
onUpdate
|
||||
}) => {
|
||||
const [employees, setEmployees] = useState<string[]>([]);
|
||||
const [availablePlayers, setAvailablePlayers] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [selectedPlayer, setSelectedPlayer] = useState('');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen && projectId) {
|
||||
loadEmployees();
|
||||
loadAvailablePlayers();
|
||||
}
|
||||
}, [isOpen, projectId]);
|
||||
|
||||
const loadEmployees = async () => {
|
||||
try {
|
||||
const response = await fetch(`https://vollidioten.ceraticsoft.de/api/projects/${projectId}/employees`);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setEmployees(data);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error loading employees:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const loadAvailablePlayers = async () => {
|
||||
try {
|
||||
const response = await fetch('https://vollidioten.ceraticsoft.de/api/players');
|
||||
if (response.ok) {
|
||||
const players = await response.json();
|
||||
// Filter out players who are already employees
|
||||
const available = players.filter((player: any) =>
|
||||
!employees.includes(player.username)
|
||||
);
|
||||
setAvailablePlayers(available);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error loading available players:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const addEmployee = async () => {
|
||||
if (!selectedPlayer) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const response = await fetch(`https://vollidioten.ceraticsoft.de/api/projects/${projectId}/employees`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({ employeeName: selectedPlayer })
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
await loadEmployees();
|
||||
setSelectedPlayer('');
|
||||
onUpdate();
|
||||
} else {
|
||||
const errorData = await response.json();
|
||||
setError(errorData.error || 'Fehler beim Hinzufügen');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error adding employee:', err);
|
||||
setError('Netzwerkfehler');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const removeEmployee = async (employeeName: string) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch(`https://vollidioten.ceraticsoft.de/api/projects/${projectId}/employees/${employeeName}`, {
|
||||
method: 'DELETE',
|
||||
credentials: 'include'
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
await loadEmployees();
|
||||
onUpdate();
|
||||
} else {
|
||||
setError('Fehler beim Entfernen');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error removing employee:', err);
|
||||
setError('Netzwerkfehler');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-in fade-in duration-200">
|
||||
<div className="bg-surface border border-border rounded-xl w-full max-w-2xl shadow-2xl flex flex-col max-h-[90vh]">
|
||||
<div className="p-4 border-b border-border flex justify-between items-center bg-surfaceHighlight/20">
|
||||
<h3 className="font-bold text-textMain flex items-center gap-2">
|
||||
<Icons.Users className="w-5 h-5" />
|
||||
Mitarbeiter verwalten
|
||||
</h3>
|
||||
<button onClick={onClose} className="text-textMuted hover:text-white transition-colors text-xl leading-none">×</button>
|
||||
</div>
|
||||
|
||||
<div className="p-6 flex-1 overflow-y-auto">
|
||||
{error && (
|
||||
<div className="bg-red-500/10 border border-red-500/20 rounded-lg p-4 mb-6">
|
||||
<p className="text-red-400">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Add Employee */}
|
||||
<div className="bg-surfaceHighlight/30 border border-border rounded-lg p-4 mb-6">
|
||||
<h4 className="font-semibold text-textMain mb-4">Mitarbeiter hinzufügen</h4>
|
||||
<div className="flex gap-2">
|
||||
<select
|
||||
value={selectedPlayer}
|
||||
onChange={(e) => setSelectedPlayer(e.target.value)}
|
||||
className="flex-1 bg-[#0b0b0d] border border-border rounded p-2 text-sm"
|
||||
>
|
||||
<option value="">Spieler auswählen...</option>
|
||||
{availablePlayers.map((player) => (
|
||||
<option key={player.uuid} value={player.username}>
|
||||
{player.username}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
onClick={addEmployee}
|
||||
disabled={!selectedPlayer || loading}
|
||||
className="bg-accentInfo hover:bg-accentInfo/90 disabled:opacity-50 text-white px-4 py-2 rounded text-sm font-medium"
|
||||
>
|
||||
Hinzufügen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Current Employees */}
|
||||
<div className="mb-4">
|
||||
<h4 className="font-semibold text-textMain mb-4">
|
||||
Aktuelle Mitarbeiter ({employees.length})
|
||||
</h4>
|
||||
|
||||
{employees.length === 0 ? (
|
||||
<div className="text-center py-8 text-textMuted">
|
||||
<p>Noch keine Mitarbeiter hinzugefügt.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{employees.map((employee) => (
|
||||
<div key={employee} className="flex items-center justify-between bg-surfaceHighlight/30 border border-border rounded-lg p-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 bg-gradient-to-br from-gray-700 to-gray-900 rounded flex items-center justify-center text-xs font-bold">
|
||||
{employee.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<span className="font-medium text-textMain">{employee}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => removeEmployee(employee)}
|
||||
disabled={loading}
|
||||
className="text-red-400 hover:text-red-300 text-sm px-2 py-1 rounded hover:bg-red-500/10 transition-colors"
|
||||
>
|
||||
Entfernen
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 border-t border-border flex justify-end">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 text-sm font-medium text-textMuted hover:text-white transition-colors"
|
||||
>
|
||||
Schließen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EmployeeManagementModal;
|
||||
Reference in New Issue
Block a user