static/admin.html - master - ring0/RestaurantApp

static/admin.html
204 строки8 KB
ring0
feat: admin.html
28 май 2026, 20:54
28 май 2026, 20:54d4a1005
<!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: #f5f5f5; padding: 20px; }
        .container { max-width: 1200px; margin: 0 auto; }
        h1 { color: #333; margin-bottom: 20px; }
        .section { background: white; padding: 20px; border-radius: 5px; margin-bottom: 20px; }
        table { width: 100%; border-collapse: collapse; }
        th, td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; }
        th { background: #4CAF50; color: white; }
        tr:hover { background: #f5f5f5; }
        select { padding: 5px; border: 1px solid #ddd; border-radius: 3px; }
        .status-update { padding: 5px 10px; border: none; border-radius: 3px; cursor: pointer; }
        .status-update:hover { opacity: 0.8; }
        .filters { margin-bottom: 20px; }
        .filters input { padding: 10px; margin-right: 10px; border: 1px solid #ddd; border-radius: 3px; }
        .filters button { padding: 10px 15px; background: #2196F3; color: white; border: none; border-radius: 3px; cursor: pointer; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Админ-панель управления рестораном</h1>
        
        <div class="section">
            <h2>Управление бронированиями</h2>
            <div class="filters">
                <input type="date" id="reservationDateFilter" />
                <button onclick="loadReservations()">Фильтровать</button>
                <button onclick="resetReservationFilter()">Сбросить</button>
            </div>
            <table id="reservationsTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Столик</th>
                        <th>Клиент</th>
                        <th>Дата</th>
                        <th>Время</th>
                        <th>Гости</th>
                        <th>Статус</th>
                        <th>Действия</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        
        <div class="section">
            <h2>Управление столиками</h2>
            <table id="tablesTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Номер</th>
                        <th>Вместимость</th>
                        <th>Статус</th>
                        <th>Действия</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <script>
        async function loadReservations() {
            const date = document.getElementById('reservationDateFilter').value;
            let url = '/api/reservations';
            if (date) url += `?date=${date}`;
            
            try {
                const response = await fetch(url);
                const reservations = await response.json();
                displayReservations(reservations);
            } catch (error) {
                console.error('Ошибка загрузки бронирований:', error);
            }
        }

        function displayReservations(reservations) {
            const tbody = document.querySelector('#reservationsTable tbody');
            tbody.innerHTML = '';
            
            reservations.forEach(res => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${res.id}</td>
                    <td>№${res.table_number}</td>
                    <td>${res.customer_name}</td>
                    <td>${res.reservation_date}</td>
                    <td>${res.start_time} - ${res.end_time}</td>
                    <td>${res.guests_count}</td>
                    <td>${res.status}</td>
                    <td>
                        <select onchange="updateReservationStatus(${res.id}, this.value)" id="res-status-${res.id}">
                            <option value="">Изменить статус</option>
                            <option value="confirmed">Подтверждено</option>
                            <option value="cancelled">Отменено</option>
                            <option value="completed">Завершено</option>
                        </select>
                    </td>
                `;
                tbody.appendChild(row);
            });
        }

        async function updateReservationStatus(id, status) {
            if (!status) return;
            
            try {
                const response = await fetch(`/api/reservations/${id}`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ status: status })
                });
                
                if (response.ok) {
                    alert('Статус бронирования обновлен');
                    loadReservations();
                } else {
                    const error = await response.json();
                    alert(error.error || 'Ошибка обновления статуса');
                }
            } catch (error) {
                alert('Ошибка обновления статуса');
            }
            
            document.getElementById(`res-status-${id}`).value = '';
        }

        async function loadTables() {
            try {
                const response = await fetch('/api/tables');
                const tables = await response.json();
                displayTables(tables);
            } catch (error) {
                console.error('Ошибка загрузки столиков:', error);
            }
        }

        function displayTables(tables) {
            const tbody = document.querySelector('#tablesTable tbody');
            tbody.innerHTML = '';
            
            tables.forEach(table => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${table.id}</td>
                    <td>№${table.number}</td>
                    <td>${table.capacity}</td>
                    <td>${table.status}</td>
                    <td>
                        <select onchange="updateTableStatus(${table.id}, this.value)" id="table-status-${table.id}">
                            <option value="">Изменить статус</option>
                            <option value="available">Доступен</option>
                            <option value="occupied">Занят</option>
                            <option value="reserved">Зарезервирован</option>
                        </select>
                    </td>
                `;
                tbody.appendChild(row);
            });
        }

        async function updateTableStatus(id, status) {
            if (!status) return;
            
            try {
                const response = await fetch(`/api/tables/${id}`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ status: status })
                });
                
                if (response.ok) {
                    alert('Статус столика обновлен');
                    loadTables();
                } else {
                    const error = await response.json();
                    alert(error.error || 'Ошибка обновления статуса');
                }
            } catch (error) {
                alert('Ошибка обновления статуса');
            }
            
            document.getElementById(`table-status-${id}`).value = '';
        }

        function resetReservationFilter() {
            document.getElementById('reservationDateFilter').value = '';
            loadReservations();
        }

        // Загрузка данных при открытии страницы
        loadReservations();
        loadTables();
    </script>
</body>
</html>