541 lines
25 KiB
HTML
Executable File
541 lines
25 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="robots" content="noindex, nofollow, noarchive">
|
|
<title>Team Management - MSPE Admin</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha384-t1nt8BQoYMLFN5p42tRAtuAAFQaCQODekUVeKKZrEnEyp4H2R0RHFz0KWpmj7i8g" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="/admin/css/admin.css">
|
|
</head>
|
|
<body>
|
|
<div class="admin-wrapper">
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar" id="sidebar">
|
|
<div class="sidebar-header">
|
|
<a href="/admin/dashboard.html" class="sidebar-logo">
|
|
<i class="fas fa-cube"></i>
|
|
<span>MSPE</span>
|
|
</a>
|
|
<button class="sidebar-toggle" id="sidebar-toggle">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<nav class="sidebar-nav">
|
|
<div class="nav-section">
|
|
<span class="nav-section-title">Main</span>
|
|
<ul class="nav-menu">
|
|
<li class="nav-item">
|
|
<a href="/admin/dashboard.html" class="nav-link">
|
|
<i class="fas fa-th-large"></i>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<span class="nav-section-title">Content</span>
|
|
<ul class="nav-menu">
|
|
<li class="nav-item">
|
|
<a href="/admin/pages.html" class="nav-link">
|
|
<i class="fas fa-file-alt"></i>
|
|
<span>Pages</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/admin/services.html" class="nav-link">
|
|
<i class="fas fa-concierge-bell"></i>
|
|
<span>Services</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/admin/portfolio.html" class="nav-link">
|
|
<i class="fas fa-briefcase"></i>
|
|
<span>Portfolio</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/admin/news.html" class="nav-link">
|
|
<i class="fas fa-newspaper"></i>
|
|
<span>News & Events</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/admin/testimonials.html" class="nav-link">
|
|
<i class="fas fa-quote-right"></i>
|
|
<span>Testimonials</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item active">
|
|
<a href="/admin/team.html" class="nav-link">
|
|
<i class="fas fa-users"></i>
|
|
<span>Team</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<span class="nav-section-title">Media</span>
|
|
<ul class="nav-menu">
|
|
<li class="nav-item">
|
|
<a href="/admin/media.html" class="nav-link">
|
|
<i class="fas fa-images"></i>
|
|
<span>Media Library</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<span class="nav-section-title">Inquiries</span>
|
|
<ul class="nav-menu">
|
|
<li class="nav-item">
|
|
<a href="/admin/messages.html" class="nav-link">
|
|
<i class="fas fa-envelope"></i>
|
|
<span>Messages</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/admin/subscribers.html" class="nav-link">
|
|
<i class="fas fa-bell"></i>
|
|
<span>Subscribers</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/admin/bookings.html" class="nav-link">
|
|
<i class="fas fa-calendar-check"></i>
|
|
<span>Bookings</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/admin/availability.html" class="nav-link">
|
|
<i class="fas fa-clock"></i>
|
|
<span>Availability</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<span class="nav-section-title">Settings</span>
|
|
<ul class="nav-menu">
|
|
<li class="nav-item">
|
|
<a href="/admin/settings.html" class="nav-link">
|
|
<i class="fas fa-cog"></i>
|
|
<span>Site Settings</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/admin/users.html" class="nav-link">
|
|
<i class="fas fa-user-shield"></i>
|
|
<span>Admin Users</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="sidebar-footer">
|
|
<a href="/index.html" class="view-site-btn" target="_blank">
|
|
<i class="fas fa-external-link-alt"></i>
|
|
<span>View Website</span>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<!-- Header -->
|
|
<header class="admin-header">
|
|
<div class="header-left">
|
|
<button class="mobile-toggle" id="mobile-toggle">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
<h1 class="page-title">Team Management</h1>
|
|
</div>
|
|
|
|
<div class="header-right">
|
|
<button class="btn btn-primary" id="add-member-btn">
|
|
<i class="fas fa-plus"></i> Add Team Member
|
|
</button>
|
|
|
|
<div class="header-user">
|
|
<div class="user-avatar">
|
|
<img src="https://ui-avatars.com/api/?name=Admin&background=0ea5e9&color=fff" alt="Admin">
|
|
</div>
|
|
<div class="user-info">
|
|
<span class="user-name">Admin</span>
|
|
<span class="user-role">Administrator</span>
|
|
</div>
|
|
<div class="user-dropdown">
|
|
<button class="dropdown-toggle">
|
|
<i class="fas fa-chevron-down"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="/admin/settings.html"><i class="fas fa-cog"></i> Settings</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#" id="logout-btn"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Content -->
|
|
<div class="content-wrapper">
|
|
<div class="content-header">
|
|
<p class="content-description">Manage your team members displayed on the website</p>
|
|
<div class="filter-bar">
|
|
<select class="form-select" id="department-filter">
|
|
<option value="">All Departments</option>
|
|
<option value="management">Management</option>
|
|
<option value="engineering">Engineering</option>
|
|
<option value="support">Support</option>
|
|
<option value="sales">Sales</option>
|
|
</select>
|
|
<div class="view-toggle">
|
|
<button class="view-btn active" data-view="grid"><i class="fas fa-th"></i></button>
|
|
<button class="view-btn" data-view="list"><i class="fas fa-list"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Grid -->
|
|
<div class="team-admin-grid" id="team-grid">
|
|
<div style="grid-column:1/-1;text-align:center;padding:3rem;color:var(--gray-400);">
|
|
<i class="fas fa-spinner fa-spin fa-2x"></i>
|
|
<p style="margin-top:1rem;">Loading team members...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Add/Edit Team Member Modal -->
|
|
<div class="modal" id="member-modal">
|
|
<div class="modal-backdrop"></div>
|
|
<div class="modal-container">
|
|
<div class="modal-header">
|
|
<h2 id="modal-title">Add Team Member</h2>
|
|
<button class="modal-close" id="member-modal-close">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="member-form">
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>Full Name *</label>
|
|
<input type="text" class="form-control" name="name" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Job Title *</label>
|
|
<input type="text" class="form-control" name="role" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>Department *</label>
|
|
<select class="form-select" name="department" required>
|
|
<option value="">Select Department</option>
|
|
<option value="management">Management</option>
|
|
<option value="engineering">Engineering</option>
|
|
<option value="support">Support</option>
|
|
<option value="sales">Sales</option>
|
|
<option value="marketing">Marketing</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Email</label>
|
|
<input type="email" class="form-control" name="email">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Bio</label>
|
|
<textarea class="form-control" name="bio" rows="3" placeholder="Brief description..."></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Profile Photo</label>
|
|
<div class="file-upload-area">
|
|
<i class="fas fa-cloud-upload-alt"></i>
|
|
<p>Drag & drop or click to upload</p>
|
|
<span>Recommended: 400x400px, JPG or PNG</span>
|
|
<input type="file" name="photo" accept="image/*">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Social Links</label>
|
|
<div class="social-inputs">
|
|
<div class="input-icon-group">
|
|
<i class="fab fa-linkedin"></i>
|
|
<input type="url" class="form-control" name="linkedin" placeholder="LinkedIn URL">
|
|
</div>
|
|
<div class="input-icon-group">
|
|
<i class="fab fa-twitter"></i>
|
|
<input type="url" class="form-control" name="twitter" placeholder="Twitter URL">
|
|
</div>
|
|
<div class="input-icon-group">
|
|
<i class="fab fa-github"></i>
|
|
<input type="url" class="form-control" name="github" placeholder="GitHub URL">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>Display Order</label>
|
|
<input type="number" class="form-control" name="order" value="1" min="1">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Status</label>
|
|
<select class="form-select" name="status">
|
|
<option value="active">Active (Visible)</option>
|
|
<option value="hidden">Hidden</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-outline" id="member-cancel-btn">Cancel</button>
|
|
<button class="btn btn-primary" id="member-save-btn">
|
|
<i class="fas fa-save"></i> Save Member
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/admin/js/admin.js"></script>
|
|
<script>
|
|
let teamMembers = [];
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
setupEventListeners();
|
|
loadTeam();
|
|
document.getElementById('department-filter').addEventListener('change', filterTeam);
|
|
|
|
// View toggle (grid / list)
|
|
document.querySelectorAll('.view-btn').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
|
|
this.classList.add('active');
|
|
const grid = document.getElementById('team-grid');
|
|
if (this.dataset.view === 'list') {
|
|
grid.style.gridTemplateColumns = '1fr';
|
|
} else {
|
|
grid.style.gridTemplateColumns = '';
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
function setupEventListeners() {
|
|
document.getElementById('add-member-btn')?.addEventListener('click', openAddMemberModal);
|
|
document.getElementById('member-modal-close')?.addEventListener('click', closeModal);
|
|
document.getElementById('member-cancel-btn')?.addEventListener('click', closeModal);
|
|
document.getElementById('member-save-btn')?.addEventListener('click', saveMember);
|
|
|
|
const modalBackdrop = document.querySelector('#member-modal .modal-backdrop');
|
|
modalBackdrop?.addEventListener('click', closeModal);
|
|
|
|
const grid = document.getElementById('team-grid');
|
|
grid?.addEventListener('click', function(event) {
|
|
const actionBtn = event.target.closest('[data-action]');
|
|
if (!actionBtn) return;
|
|
|
|
const { action, id } = actionBtn.dataset;
|
|
if (action === 'edit' && id) {
|
|
editMember(id);
|
|
} else if (action === 'delete' && id) {
|
|
deleteMember(id);
|
|
} else if (action === 'change-photo' && id) {
|
|
changePhoto(id);
|
|
}
|
|
});
|
|
}
|
|
|
|
async function loadTeam() {
|
|
try {
|
|
const response = await MSPE.API.get('team.php');
|
|
if (response && response.success) {
|
|
teamMembers = response.data;
|
|
renderTeam(teamMembers);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading team:', error);
|
|
document.getElementById('team-grid').innerHTML = `
|
|
<div class="empty-state">
|
|
<i class="fas fa-exclamation-circle"></i>
|
|
<p>Failed to load team members</p>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
function renderTeam(members) {
|
|
const container = document.getElementById('team-grid');
|
|
if (members.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="empty-state">
|
|
<i class="fas fa-users"></i>
|
|
<p>No team members found</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = members.map(member => `
|
|
<div class="team-admin-card ${member.status === 'hidden' ? 'opacity-50' : ''}">
|
|
<div class="team-member-photo">
|
|
<img src="${member.photo || 'https://ui-avatars.com/api/?name=' + encodeURIComponent(member.name) + '&background=random'}" alt="${member.name}">
|
|
<div class="photo-overlay">
|
|
<button class="btn btn-sm btn-outline" data-action="change-photo" data-id="${member.id}">
|
|
<i class="fas fa-camera"></i> Change
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="team-member-info">
|
|
<h3>${member.name}</h3>
|
|
<span class="team-role">${member.role}</span>
|
|
<span class="team-dept">${member.department}</span>
|
|
</div>
|
|
<div class="team-socials">
|
|
${member.linkedin ? `<a href="${member.linkedin}" class="social-icon linkedin"><i class="fab fa-linkedin"></i></a>` : ''}
|
|
${member.twitter ? `<a href="${member.twitter}" class="social-icon twitter"><i class="fab fa-twitter"></i></a>` : ''}
|
|
${member.email ? `<a href="mailto:${member.email}" class="social-icon email"><i class="fas fa-envelope"></i></a>` : ''}
|
|
</div>
|
|
<div class="team-admin-actions">
|
|
<button class="btn btn-sm btn-outline" data-action="edit" data-id="${member.id}">
|
|
<i class="fas fa-edit"></i> Edit
|
|
</button>
|
|
<button class="btn btn-sm btn-danger" data-action="delete" data-id="${member.id}">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
<div class="team-order">
|
|
<span>Order: ${member.order || 0}</span>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
function filterTeam() {
|
|
const dept = document.getElementById('department-filter').value;
|
|
const filtered = dept ? teamMembers.filter(m => m.department.toLowerCase() === dept) : teamMembers;
|
|
renderTeam(filtered);
|
|
}
|
|
|
|
function resetMemberPhotoArea(form) {
|
|
const area = form.querySelector('.file-upload-area');
|
|
if (!area) return;
|
|
area.style.position = '';
|
|
area.innerHTML = `
|
|
<i class="fas fa-cloud-upload-alt"></i>
|
|
<p>Drag & drop or click to upload</p>
|
|
<span>Recommended: 400x400px, JPG or PNG</span>
|
|
<input type="file" name="photo" accept="image/*">`;
|
|
}
|
|
|
|
function openAddMemberModal() {
|
|
document.getElementById('modal-title').textContent = 'Add Team Member';
|
|
const form = document.getElementById('member-form');
|
|
form.reset();
|
|
form.dataset.id = '';
|
|
resetMemberPhotoArea(form);
|
|
document.getElementById('member-modal').classList.add('active');
|
|
}
|
|
|
|
function closeModal() {
|
|
document.getElementById('member-modal').classList.remove('active');
|
|
}
|
|
|
|
function editMember(id) {
|
|
const member = teamMembers.find(m => m.id === id);
|
|
if (!member) return;
|
|
|
|
document.getElementById('modal-title').textContent = 'Edit Team Member';
|
|
const form = document.getElementById('member-form');
|
|
form.dataset.id = id;
|
|
|
|
form.querySelector('[name="name"]').value = member.name;
|
|
form.querySelector('[name="role"]').value = member.role;
|
|
form.querySelector('[name="department"]').value = member.department.toLowerCase(); // Ensure lowercase match
|
|
form.querySelector('[name="email"]').value = member.email || '';
|
|
form.querySelector('[name="bio"]').value = member.bio || '';
|
|
form.querySelector('[name="linkedin"]').value = member.linkedin || '';
|
|
form.querySelector('[name="twitter"]').value = member.twitter || '';
|
|
form.querySelector('[name="github"]').value = member.github || '';
|
|
form.querySelector('[name="order"]').value = member.order || 1;
|
|
form.querySelector('[name="status"]').value = member.status || 'active';
|
|
|
|
// Restore photo preview
|
|
const photoArea = form.querySelector('.file-upload-area');
|
|
if (member.photo) {
|
|
photoArea.style.position = 'relative';
|
|
photoArea.innerHTML = `
|
|
<img src="/${member.photo}" alt="${member.name}" style="max-height:80px;border-radius:50%;margin-bottom:0.5rem;">
|
|
<p style="font-size:0.85rem;color:var(--gray-500);">Click to replace photo</p>
|
|
<input type="file" name="photo" accept="image/*" style="position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;">`;
|
|
} else {
|
|
resetMemberPhotoArea(form);
|
|
}
|
|
|
|
document.getElementById('member-modal').classList.add('active');
|
|
}
|
|
|
|
async function saveMember() {
|
|
const form = document.getElementById('member-form');
|
|
const formData = new FormData(form);
|
|
const id = form.dataset.id;
|
|
|
|
if (id) formData.append('id', id);
|
|
|
|
try {
|
|
const result = await MSPE.API.upload('team.php', formData);
|
|
|
|
if (result && result.success) {
|
|
MSPE.showNotification(id ? 'Updated successfully' : 'Created successfully', 'success');
|
|
closeModal();
|
|
loadTeam();
|
|
} else {
|
|
MSPE.showNotification(result?.message || 'Error saving member', 'error');
|
|
}
|
|
} catch (error) {
|
|
MSPE.showNotification('Error saving member', 'error');
|
|
}
|
|
}
|
|
|
|
async function deleteMember(id) {
|
|
if (!await MSPE.confirmDialog('Remove this team member?')) return;
|
|
|
|
try {
|
|
const response = await MSPE.API.delete(`team.php?id=${id}`);
|
|
if (response.success) {
|
|
MSPE.showNotification('Removed successfully', 'success');
|
|
loadTeam();
|
|
}
|
|
} catch (error) {
|
|
MSPE.showNotification('Error removing member', 'error');
|
|
}
|
|
}
|
|
|
|
function changePhoto(id) {
|
|
// In a real app, this would trigger a dedicated file input or focus the modal's file input
|
|
editMember(id);
|
|
}
|
|
|
|
function moveMember(id, direction) {
|
|
// For now, manual order editing in modal is sufficient
|
|
MSPE.showNotification('Please edit the "Order" field in the edit modal', 'info');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|