155 lines
5.9 KiB
HTML
155 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru" data-title="Заявки на заселение" data-description="Управление заявками гостиницы">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<header></header>
|
||
<main>
|
||
<h1>Заявки на заселение</h1>
|
||
<div>
|
||
<label>Фильтр по статусу:
|
||
<select id="statusFilter">
|
||
<option value="">Все</option>
|
||
<option value="Новая">Новая</option>
|
||
<option value="В работе">В работе</option>
|
||
<option value="Подтверждена">Подтверждена</option>
|
||
<option value="Заселение">Заселение</option>
|
||
<option value="Завершена">Завершена</option>
|
||
<option value="Отменена">Отменена</option>
|
||
</select>
|
||
</label>
|
||
<input type="text" id="searchInput" placeholder="Поиск по имени, телефону или комментарию">
|
||
<button id="searchBtn">Найти</button>
|
||
</div>
|
||
<table id="bookingsTable">
|
||
<thead>
|
||
<tr>
|
||
<th>ID внеш.</th>
|
||
<th>Имя</th>
|
||
<th>Телефон</th>
|
||
<th>Даты</th>
|
||
<th>Статус</th>
|
||
<th>Действия</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
|
||
<!-- Модальное окно редактирования -->
|
||
<div id="editModal" class="modal" style="display:none;">
|
||
<div class="modal-content">
|
||
<h2>Редактировать заявку</h2>
|
||
<form id="editForm">
|
||
<input type="hidden" id="editId">
|
||
<label>Статус</label>
|
||
<select id="editStatus">
|
||
<option value="Новая">Новая</option>
|
||
<option value="В работе">В работе</option>
|
||
<option value="Подтверждена">Подтверждена</option>
|
||
<option value="Заселение">Заселение</option>
|
||
<option value="Завершена">Завершена</option>
|
||
<option value="Отменена">Отменена</option>
|
||
</select>
|
||
<label>Комментарий</label>
|
||
<textarea id="editComments" rows="3"></textarea>
|
||
<label>Переназначить на карточку клиента (по телефону)</label>
|
||
<input type="text" id="editPhone" placeholder="Телефон (любой формат)">
|
||
<button type="submit">Сохранить</button>
|
||
<button type="button" id="closeModal">Отмена</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
<script src="nav.js"></script>
|
||
<script src="seo.js"></script>
|
||
<script>
|
||
// Проверка авторизации
|
||
fetch('/api/me').then(r => r.json()).then(data => {
|
||
if (!data.isAdmin) window.location.href = '/login.html';
|
||
});
|
||
|
||
const tableBody = document.querySelector('#bookingsTable tbody');
|
||
const modal = document.getElementById('editModal');
|
||
let currentBookings = [];
|
||
|
||
async function loadBookings() {
|
||
const status = document.getElementById('statusFilter').value;
|
||
const search = document.getElementById('searchInput').value;
|
||
let url = '/api/bookings?';
|
||
if (status) url += `status=${encodeURIComponent(status)}&`;
|
||
if (search) url += `search=${encodeURIComponent(search)}&`;
|
||
const res = await fetch(url);
|
||
currentBookings = await res.json();
|
||
renderTable();
|
||
}
|
||
|
||
function renderTable() {
|
||
tableBody.innerHTML = '';
|
||
currentBookings.forEach(b => {
|
||
const row = document.createElement('tr');
|
||
row.innerHTML = `
|
||
<td>${b.external_id || '-'}</td>
|
||
<td>${b.name}</td>
|
||
<td>${b.phone_raw}</td>
|
||
<td>${b.checkin_date} – ${b.checkout_date}</td>
|
||
<td>${b.status}</td>
|
||
<td><button class="editBtn" data-id="${b.id}">Изменить</button></td>
|
||
`;
|
||
tableBody.appendChild(row);
|
||
});
|
||
}
|
||
|
||
document.getElementById('searchBtn').addEventListener('click', loadBookings);
|
||
document.getElementById('statusFilter').addEventListener('change', loadBookings);
|
||
|
||
// Редактирование
|
||
document.addEventListener('click', (e) => {
|
||
if (e.target.classList.contains('editBtn')) {
|
||
const id = e.target.dataset.id;
|
||
const booking = currentBookings.find(b => b.id == id);
|
||
if (!booking) return;
|
||
document.getElementById('editId').value = booking.id;
|
||
document.getElementById('editStatus').value = booking.status;
|
||
document.getElementById('editComments').value = booking.comments || '';
|
||
document.getElementById('editPhone').value = '';
|
||
modal.style.display = 'flex';
|
||
}
|
||
});
|
||
|
||
document.getElementById('closeModal').addEventListener('click', () => {
|
||
modal.style.display = 'none';
|
||
});
|
||
|
||
document.getElementById('editForm').addEventListener('submit', async (e) => {
|
||
e.preventDefault();
|
||
const id = document.getElementById('editId').value;
|
||
const status = document.getElementById('editStatus').value;
|
||
const comments = document.getElementById('editComments').value;
|
||
const phone = document.getElementById('editPhone').value.trim();
|
||
|
||
const body = {};
|
||
if (status) body.status = status;
|
||
body.comments = comments;
|
||
if (phone) body.phone = phone;
|
||
|
||
const res = await fetch(`/api/bookings/${id}`, {
|
||
method: 'PUT',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(body)
|
||
});
|
||
if (res.ok) {
|
||
modal.style.display = 'none';
|
||
loadBookings();
|
||
} else {
|
||
alert('Ошибка сохранения');
|
||
}
|
||
});
|
||
|
||
// Первоначальная загрузка
|
||
loadBookings();
|
||
</script>
|
||
</body>
|
||
</html> |