224 lines
9.4 KiB
HTML
224 lines
9.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Расписание сотрудников - КлинСервис Админка</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { font-family: Arial, sans-serif; background: #f8f9fa; }
|
||
|
||
/* Хедер */
|
||
header {
|
||
background: #2c3e50; color: white; padding: 20px 50px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1); position: sticky; top: 0;
|
||
}
|
||
.header-content {
|
||
max-width: 1200px; margin: 0 auto;
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
}
|
||
.logo { font-size: 24px; font-weight: bold; }
|
||
.header-nav { display: flex; gap: 20px; }
|
||
.btn {
|
||
padding: 12px 25px; border: none; border-radius: 25px;
|
||
cursor: pointer; font-size: 16px; text-decoration: none;
|
||
display: inline-block; transition: all 0.3s; color: white;
|
||
}
|
||
.btn-primary { background: #667eea; }
|
||
.btn-primary:hover { background: #5a67d8; }
|
||
.btn-secondary { background: #6c757d; }
|
||
.btn-secondary:hover { background: #5a6268; }
|
||
|
||
/* Контейнер */
|
||
.container { max-width: 1200px; margin: 40px auto; padding: 0 20px; }
|
||
h1 { text-align: center; color: #333; margin-bottom: 40px; font-size: 32px; }
|
||
|
||
/* Выбор сотрудника */
|
||
.employee-select {
|
||
background: white; padding: 30px; border-radius: 20px;
|
||
box-shadow: 0 20px 40px rgba(0,0,0,0.1); margin-bottom: 30px;
|
||
display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
|
||
}
|
||
@media (max-width: 768px) { .employee-select { flex-direction: column; text-align: center; } }
|
||
|
||
label { font-weight: bold; color: #555; font-size: 18px; }
|
||
select {
|
||
padding: 15px 20px; border: 2px solid #e9ecef;
|
||
border-radius: 10px; font-size: 16px; min-width: 300px;
|
||
}
|
||
|
||
/* Календарь */
|
||
.calendar-section {
|
||
background: white; padding: 40px; border-radius: 20px;
|
||
box-shadow: 0 20px 40px rgba(0,0,0,0.1); margin-bottom: 30px;
|
||
}
|
||
.calendar-header {
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
margin-bottom: 20px; flex-wrap: wrap; gap: 10px;
|
||
}
|
||
.calendar-nav-btn {
|
||
padding: 12px 20px; background: #667eea; color: white;
|
||
border: none; border-radius: 10px; cursor: pointer; font-size: 16px;
|
||
}
|
||
.calendar-nav-btn:hover { background: #5a67d8; }
|
||
.month-year { font-size: 24px; font-weight: bold; color: #333; }
|
||
|
||
.calendar-grid {
|
||
display: grid; grid-template-columns: repeat(7, 1fr);
|
||
gap: 8px; text-align: center;
|
||
}
|
||
.calendar-day {
|
||
padding: 20px 10px; border: 2px solid #e9ecef;
|
||
border-radius: 12px; cursor: pointer; transition: all 0.3s;
|
||
font-weight: 500; min-height: 80px; display: flex; flex-direction: column;
|
||
}
|
||
.calendar-day:hover { border-color: #667eea; background: #f8f9ff; }
|
||
.calendar-day.selected { border-color: #667eea; background: #e3f2fd; }
|
||
.calendar-day.other-month { color: #ccc; }
|
||
.weekdays { font-weight: bold; color: #555; padding: 15px 0; font-size: 16px; }
|
||
|
||
/* Интервалы времени */
|
||
.time-intervals {
|
||
background: white; padding: 40px; border-radius: 20px;
|
||
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
||
}
|
||
.interval-form {
|
||
display: grid; grid-template-columns: 1fr 1fr auto;
|
||
gap: 20px; align-items: end; margin-bottom: 20px;
|
||
}
|
||
@media (max-width: 768px) { .interval-form { grid-template-columns: 1fr; } }
|
||
|
||
input[type="time"] { padding: 15px; border: 2px solid #e9ecef; border-radius: 10px; }
|
||
input[type="time"]:focus { border-color: #667eea; outline: none; }
|
||
.interval-item {
|
||
background: #f8f9fa; padding: 20px; border-radius: 15px;
|
||
border-left: 4px solid #667eea; margin-bottom: 15px;
|
||
}
|
||
.delete-interval {
|
||
background: #dc3545; color: white; border: none;
|
||
border-radius: 50%; width: 35px; height: 35px;
|
||
cursor: pointer; font-size: 18px;
|
||
}
|
||
.delete-interval:hover { background: #c82333; }
|
||
|
||
.no-intervals { text-align: center; color: #666; padding: 40px; font-style: italic; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Хедер -->
|
||
<header>
|
||
<div class="header-content">
|
||
<div class="logo">🧹 КлинСервис - Админка</div>
|
||
<div class="header-nav">
|
||
<a href="admin-services.html" class="btn btn-secondary">Услуги</a>
|
||
<a href="admin-bookings.html" class="btn btn-secondary">Брони</a>
|
||
<a href="index.html" class="btn btn-primary">На главную</a>
|
||
<button class="btn btn-secondary" onclick="logout()">Выйти</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="container">
|
||
<h1>📅 Расписание сотрудников</h1>
|
||
|
||
<!-- Выбор сотрудника -->
|
||
<div class="employee-select">
|
||
<div>
|
||
<label>Выберите сотрудника:</label>
|
||
<select id="employeeSelect" onchange="loadEmployeeSchedule()">
|
||
<option value="">— Выберите сотрудника —</option>
|
||
</select>
|
||
</div>
|
||
<div id="employeeInfo" style="display:none;">
|
||
<strong id="selectedEmployeeName"></strong>
|
||
<span style="color: #666; margin-left: 10px;">(ID: <span id="selectedEmployeeId"></span>)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Календарь -->
|
||
<div class="calendar-section" id="calendarSection" style="display:none;">
|
||
<div class="calendar-header">
|
||
<button class="calendar-nav-btn" onclick="prevMonth()">← Пред. месяц</button>
|
||
<div class="month-year" id="monthYear"></div>
|
||
<button class="calendar-nav-btn" onclick="nextMonth()">След. месяц →</button>
|
||
</div>
|
||
<div class="calendar-grid">
|
||
<div class="weekdays">Пн</div><div class="weekdays">Вт</div><div class="weekdays">Ср</div>
|
||
<div class="weekdays">Чт</div><div class="weekdays">Пт</div><div class="weekdays">Сб</div><div class="weekdays">Вс</div>
|
||
<div id="calendarDays"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Интервалы времени для выбранной даты -->
|
||
<div class="time-intervals" id="timeIntervalsSection" style="display:none;">
|
||
<h3 id="selectedDateTitle">Интервалы времени</h3>
|
||
|
||
<!-- Форма добавления интервала -->
|
||
<form onsubmit="addInterval(event)" class="interval-form">
|
||
<input type="time" id="startTime" required>
|
||
<input type="time" id="endTime" required>
|
||
<label>
|
||
<input type="checkbox" id="isUnavailable"> Недоступен
|
||
</label>
|
||
<button type="submit" class="btn btn-primary">➕ Добавить интервал</button>
|
||
</form>
|
||
|
||
<!-- Список интервалов -->
|
||
<div id="intervalsList">
|
||
<div class="no-intervals">Выберите дату в календаре</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const token = localStorage.getItem('token');
|
||
|
||
if (!token) {
|
||
window.location.href = 'register-login.html';
|
||
}
|
||
|
||
window.onload = loadSchedule;
|
||
|
||
async function loadSchedule() {
|
||
try {
|
||
const res = await fetch('/api/admin/availabilities', {
|
||
headers: { 'Authorization': `Bearer ${token}` }
|
||
});
|
||
|
||
const availabilities = await res.json();
|
||
|
||
const list = document.getElementById('schedule-list');
|
||
availabilities.forEach(a => {
|
||
list.innerHTML += `
|
||
<div>
|
||
<p>Сотрудник: ${a.employee_id} — ${a.date} ${a.start_time}–${a.end_time} — ${a.is_available ? 'Доступен' : 'Недоступен'}</p>
|
||
<button onclick="deleteSlot(${a.id})">Удалить</button>
|
||
</div>
|
||
`;
|
||
});
|
||
} catch (err) {
|
||
alert('Ошибка загрузки расписания');
|
||
}
|
||
}
|
||
|
||
async function deleteSlot(id) {
|
||
if (confirm('Удалить слот?')) {
|
||
try {
|
||
const res = await fetch(`/api/admin/availabilities/${id}`, {
|
||
method: 'DELETE',
|
||
headers: { 'Authorization': `Bearer ${token}` }
|
||
});
|
||
|
||
if (res.ok) {
|
||
alert('Слот удалён');
|
||
window.location.reload();
|
||
}
|
||
} catch (err) {
|
||
alert('Ошибка');
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|