Qwe

Asde

Инструменты пользователя

Инструменты сайта

Вы находитесь здесь: Hello » Мой чемпионат » Настройка команд
Вы посетили:
teams:teams

Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Следующая версия		Предыдущая версия
teams:teams [2025/06/26 10:10] – создано superteams:teams [2025/06/26 10:28] (текущий) – super
Строка 1: Строка 1:
 ====== Настройка команд ====== ====== Настройка команд ======
 +  * [[teams:start|Назад]]
  
 +
 +<html>
 +    <style>
 +        body {
 +            font-family: Arial, sans-serif;
 +            margin: 0;
 +            padding: 20px;
 +            background-color: #f5f5f5;
 +        }
 +        .container {
 +            max-width: 1000px;
 +            margin: 0 auto;
 +            background: white;
 +            padding: 20px;
 +            border-radius: 8px;
 +            box-shadow: 0 0 10px rgba(0,0,0,0.1);
 +        }
 +        h1 {
 +            color: #333;
 +            text-align: center;
 +        }
 +        .teams-list {
 +            margin-bottom: 30px;
 +        }
 +        .team-card {
 +            border: 1px solid #ddd;
 +            padding: 15px;
 +            margin-bottom: 15px;
 +            border-radius: 5px;
 +            background-color: #fff;
 +            transition: all 0.3s ease;
 +        }
 +        .team-card:hover {
 +            box-shadow: 0 0 5px rgba(0,0,0,0.2);
 +        }
 +        .team-header {
 +            display: flex;
 +            align-items: center;
 +            margin-bottom: 10px;
 +        }
 +        .team-icon {
 +            width: 40px;
 +            height: 40px;
 +            margin-right: 15px;
 +            object-fit: contain;
 +        }
 +        .team-name {
 +            font-size: 18px;
 +            font-weight: bold;
 +            flex-grow: 1;
 +        }
 +        .team-dates {
 +            font-size: 12px;
 +            color: #666;
 +            margin-bottom: 10px;
 +        }
 +        .form-group {
 +            margin-bottom: 15px;
 +        }
 +        label {
 +            display: block;
 +            margin-bottom: 5px;
 +            font-weight: bold;
 +        }
 +        input, textarea {
 +            width: 100%;
 +            padding: 8px;
 +            border: 1px solid #ddd;
 +            border-radius: 4px;
 +            box-sizing: border-box;
 +        }
 +        .buttons {
 +            display: flex;
 +            gap: 10px;
 +            margin-top: 10px;
 +        }
 +        button {
 +            padding: 8px 15px;
 +            border: none;
 +            border-radius: 4px;
 +            cursor: pointer;
 +            font-weight: bold;
 +        }
 +        .save-btn {
 +            background-color: #4CAF50;
 +            color: white;
 +        }
 +        .cancel-btn {
 +            background-color: #f44336;
 +            color: white;
 +        }
 +        .edit-btn {
 +            background-color: #2196F3;
 +            color: white;
 +        }
 +        .add-team-btn {
 +            background-color: #673AB7;
 +            color: white;
 +            padding: 10px 20px;
 +            margin-bottom: 20px;
 +        }
 +        .form-container {
 +            display: none;
 +            border: 1px solid #ddd;
 +            padding: 20px;
 +            margin-bottom: 20px;
 +            border-radius: 5px;
 +            background-color: #f9f9f9;
 +        }
 +        .active {
 +            display: block;
 +        }
 +    </style>
 +    <div class="container">
 +        <button class="add-team-btn" onclick="showAddForm()">Добавить новую команду</button>
 +        
 +        <!-- Форма добавления новой команды -->
 +        <div id="addForm" class="form-container">
 +            <h2>Добавить команду</h2>
 +            <div class="form-group">
 +                <label for="new-name">Название команды:</label>
 +                <input type="text" id="new-name" required>
 +            </div>
 +            <div class="form-group">
 +                <label for="new-icon">Иконка (URL):</label>
 +                <input type="text" id="new-icon" placeholder="https://example.com/icon.png">
 +            </div>
 +            <div class="form-group">
 +                <label for="new-foundationDate">Дата основания:</label>
 +                <input type="date" id="new-foundationDate">
 +            </div>
 +            <div class="buttons">
 +                <button class="save-btn" onclick="addTeam()">Сохранить</button>
 +                <button class="cancel-btn" onclick="hideAddForm()">Отмена</button>
 +            </div>
 +        </div>
 +        
 +        <!-- Список команд -->
 +        <div class="teams-list" id="teamsList">
 +            <h2>Список команд</h2>
 +            <!-- Здесь будут отображаться команды -->
 +        </div>
 +    </div>
 +
 +    <script>
 +        // Загрузка данных при открытии страницы
 +        document.addEventListener('DOMContentLoaded', loadTeams);
 +        
 +        // Загрузка списка команд
 +        async function loadTeams() {
 +            try {
 +                const response = await fetch('/teams/api.php?table=teams');
 +                const data = await response.json();
 +                
 +                if (data.success) {
 +                    renderTeams(data.data);
 +                } else {
 +                    alert('Ошибка при загрузке данных: ' + (data.error || 'Неизвестная ошибка'));
 +                }
 +            } catch (error) {
 +                console.error('Ошибка:', error);
 +                alert('Произошла ошибка при загрузке данных: ' + error);
 +            }
 +        }
 +        
 +        // Отображение списка команд
 +        function renderTeams(teams) {
 +            const teamsList = document.getElementById('teamsList');
 +            teamsList.innerHTML = '<h2>Список команд</h2>';
 +            
 +            if (teams.length === 0) {
 +                teamsList.innerHTML += '<p>Нет доступных команд</p>';
 +                return;
 +            }
 +            
 +            teams.forEach(team => {
 +                const teamCard = document.createElement('div');
 +                teamCard.className = 'team-card';
 +                teamCard.id = `team-${team.id}`;
 +                
 +                // Если команда в режиме редактирования
 +                if (team.editing) {
 +                    teamCard.innerHTML = `
 +                        <h2>Редактирование команды</h2>
 +                        <div class="form-group">
 +                            <label for="edit-name-${team.id}">Название команды:</label>
 +                            <input type="text" id="edit-name-${team.id}" value="${team.name || ''}" required>
 +                        </div>
 +                        <div class="form-group">
 +                            <label for="edit-icon-${team.id}">Иконка (URL):</label>
 +                            <input type="text" id="edit-icon-${team.id}" value="${team.icon || ''}" placeholder="https://example.com/icon.png">
 +                        </div>
 +                        <div class="form-group">
 +                            <label for="edit-foundationDate-${team.id}">Дата основания:</label>
 +                            <input type="date" id="edit-foundationDate-${team.id}" value="${team.foundationDate || ''}">
 +                        </div>
 +                        <div class="buttons">
 +                            <button class="save-btn" onclick="saveTeam(${team.id})">Сохранить</button>
 +                            <button class="cancel-btn" onclick="cancelEdit(${team.id})">Отмена</button>
 +                        </div>
 +                    `;
 +                } else {
 +                    // Отображение информации о команде
 +                    teamCard.innerHTML = `
 +                        <div class="team-header">
 +                            ${team.icon ? `<img src="${team.icon}" alt="Иконка" class="team-icon">` : ''}
 +                            <div class="team-name">${team.name || 'Без названия'}</div>
 +                            <button class="edit-btn" onclick="editTeam(${team.id})">Редактировать</button>
 +                        </div>
 +                        <div class="team-dates">
 +                            ${team.foundationDate ? `Дата основания: ${formatDate(team.foundationDate)}<br>` : ''}
 +                            Создано: ${formatDate(team.createDate)}<br>
 +                            Обновлено: ${formatDate(team.updateDate)}
 +                        </div>
 +                    `;
 +                }
 +                
 +                teamsList.appendChild(teamCard);
 +            });
 +        }
 +        
 +        // Форматирование даты для отображения
 +        function formatDate(dateString) {
 +            if (!dateString) return 'не указано';
 +            const date = new Date(dateString);
 +            return date.toLocaleDateString('ru-RU');
 +        }
 +        
 +        // Показать форму добавления
 +        function showAddForm() {
 +            document.getElementById('addForm').classList.add('active');
 +            document.getElementById('new-name').focus();
 +        }
 +        
 +        // Скрыть форму добавления
 +        function hideAddForm() {
 +            document.getElementById('addForm').classList.remove('active');
 +            // Очищаем поля формы
 +            document.getElementById('new-name').value = '';
 +            document.getElementById('new-icon').value = '';
 +            document.getElementById('new-foundationDate').value = '';
 +        }
 +        
 +        // Добавление новой команды
 +        async function addTeam() {
 +            const name = document.getElementById('new-name').value.trim();
 +            const icon = document.getElementById('new-icon').value.trim();
 +            const foundationDate = document.getElementById('new-foundationDate').value;
 +            
 +            if (!name) {
 +                alert('Пожалуйста, укажите название команды');
 +                return;
 +            }
 +            
 +            try {
 +                const response = await fetch('/teams/api.php', {
 +                    method: 'POST',
 +                    headers: {
 +                        'Content-Type': 'application/json',
 +                    },
 +                    body: JSON.stringify({
 +                        table: 'teams',
 +                        data: {
 +                            name: name,
 +                            icon: icon || null,
 +                            foundationDate: foundationDate || null
 +                        }
 +                    })
 +                });
 +                
 +                const data = await response.json();
 +                
 +                if (data.success) {
 +                    alert('Команда успешно добавлена!');
 +                    hideAddForm();
 +                    loadTeams(); // Обновляем список
 +                } else {
 +                    alert('Ошибка при добавлении: ' + (data.error || 'Неизвестная ошибка'));
 +                }
 +            } catch (error) {
 +                console.error('Ошибка:', error);
 +                alert('Произошла ошибка при добавлении команды');
 +            }
 +        }
 +        
 +        // Редактирование команды
 +        function editTeam(id) {
 +            // Находим карточку команды
 +            const teamCard = document.getElementById(`team-${id}`);
 +            if (!teamCard) return;
 +            
 +            // Получаем текущие данные
 +            const teamName = teamCard.querySelector('.team-name').textContent;
 +            const teamIcon = teamCard.querySelector('.team-icon')?.src || '';
 +            const foundationDate = teamCard.querySelector('.team-dates')?.textContent.match(/Дата основания: (.+?)\n/)?.[1];
 +            
 +            // Переводим в режим редактирования
 +            teamCard.innerHTML = `
 +                <h2>Редактирование команды</h2>
 +                <div class="form-group">
 +                    <label for="edit-name-${id}">Название команды:</label>
 +                    <input type="text" id="edit-name-${id}" value="${teamName}" required>
 +                </div>
 +                <div class="form-group">
 +                    <label for="edit-icon-${id}">Иконка (URL):</label>
 +                    <input type="text" id="edit-icon-${id}" value="${teamIcon}" placeholder="https://example.com/icon.png">
 +                </div>
 +                <div class="form-group">
 +                    <label for="edit-foundationDate-${id}">Дата основания:</label>
 +                    <input type="date" id="edit-foundationDate-${id}" value="${foundationDate ? formatDateForInput(foundationDate) : ''}">
 +                </div>
 +                <div class="buttons">
 +                    <button class="save-btn" onclick="saveTeam(${id})">Сохранить</button>
 +                    <button class="cancel-btn" onclick="cancelEdit(${id})">Отмена</button>
 +                </div>
 +            `;
 +        }
 +        
 +        // Форматирование даты для input[type="date"]
 +        function formatDateForInput(dateString) {
 +            if (!dateString) return '';
 +            const date = new Date(dateString);
 +            return date.toISOString().split('T')[0];
 +        }
 +        
 +        // Сохранение изменений команды
 +        async function saveTeam(id) {
 +            const name = document.getElementById(`edit-name-${id}`).value.trim();
 +            const icon = document.getElementById(`edit-icon-${id}`).value.trim();
 +            const foundationDate = document.getElementById(`edit-foundationDate-${id}`).value;
 +            
 +            if (!name) {
 +                alert('Пожалуйста, укажите название команды');
 +                return;
 +            }
 +            
 +            try {
 +                const response = await fetch('/teams/api.php', {
 +                    method: 'PUT',
 +                    headers: {
 +                        'Content-Type': 'application/json',
 +                    },
 +                    body: JSON.stringify({
 +                        table: 'teams',
 +                        id: id,
 +                        data: {
 +                            name: name,
 +                            icon: icon || null,
 +                            foundationDate: foundationDate || null
 +                        }
 +                    })
 +                });
 +                
 +                const data = await response.json();
 +                
 +                if (data.success) {
 +                    loadTeams(); // Обновляем список
 +                } else {
 +                    alert('Ошибка при сохранении: ' + (data.error || 'Неизвестная ошибка'));
 +                }
 +            } catch (error) {
 +                console.error('Ошибка:', error);
 +                alert('Произошла ошибка при сохранении изменений');
 +            }
 +        }
 +        
 +        // Отмена редактирования
 +        function cancelEdit(id) {
 +            loadTeams(); // Просто перезагружаем список
 +        }
 +    </script>
 +
 +</html>
teams/teams.1750921832.txt.gz · Последнее изменение: 2025/06/26 10:10 — super

Инструменты страницы

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki