Create players.html

templates/players.html

@@ -0,0 +1,283 @@
+{% extends "base.html" %}
+
+{% block page_title %}Players{% endblock %}
+
+{% block content %}
+<div class="players-container">
+    <!-- Online Players -->
+    <div class="card">
+        <div class="card-header">
+            <h3>Online Players ({{ online|length }}/2)</h3>
+            <button class="btn btn-sm" onclick="refreshPlayers()">Refresh</button>
+        </div>
+        <div class="card-body">
+            {% if online %}
+            <div class="players-grid" id="online-players">
+                {% for player in online %}
+                <div class="player-card online">
+                    <img src="https://mc-heads.net/avatar/{{ player.name }}/64" alt="{{ player.name }}" class="player-avatar-lg">
+                    <div class="player-info">
+                        <h4>{{ player.name }}</h4>
+                        <span class="player-status online">Online</span>
+                        <div class="player-meta">
+                            <span>Joins: {{ player.join_count }}</span>
+                            <span>Playtime: {{ player.play_time }}</span>
+                        </div>
+                    </div>
+                    <div class="player-actions">
+                        <button class="btn btn-sm btn-warning" onclick="kickPlayer('{{ player.name }}')">Kick</button>
+                        <button class="btn btn-sm btn-danger" onclick="banPlayer('{{ player.name }}')">Ban</button>
+                        {% if player.is_op %}
+                        <button class="btn btn-sm" onclick="deopPlayer('{{ player.name }}')">Remove OP</button>
+                        {% else %}
+                        <button class="btn btn-sm" onclick="opPlayer('{{ player.name }}')">Make OP</button>
+                        {% endif %}
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+            {% else %}
+            <div class="empty-state">
+                <span class="empty-icon">👥</span>
+                <p>No players online</p>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+    
+    <!-- All Known Players -->
+    <div class="card">
+        <div class="card-header">
+            <h3>All Players ({{ all_players|length }})</h3>
+            <input type="text" id="player-search" placeholder="Search players..." onkeyup="searchPlayers()">
+        </div>
+        <div class="card-body">
+            <div class="table-container">
+                <table class="data-table" id="players-table">
+                    <thead>
+                        <tr>
+                            <th>Player</th>
+                            <th>Status</th>
+                            <th>First Seen</th>
+                            <th>Last Seen</th>
+                            <th>Playtime</th>
+                            <th>Joins</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for player in all_players %}
+                        <tr class="{{ 'banned' if player.is_banned else '' }}">
+                            <td>
+                                <div class="player-cell">
+                                    <img src="https://mc-heads.net/avatar/{{ player.name }}/32" alt="{{ player.name }}">
+                                    <span>{{ player.name }}</span>
+                                    {% if player.is_op %}<span class="badge op">OP</span>{% endif %}
+                                    {% if player.is_banned %}<span class="badge banned">Banned</span>{% endif %}
+                                </div>
+                            </td>
+                            <td>
+                                <span class="status-badge {{ 'online' if player.online else 'offline' }}">
+                                    {{ 'Online' if player.online else 'Offline' }}
+                                </span>
+                            </td>
+                            <td>{{ player.first_seen[:10] if player.first_seen != 'Unknown' else '-' }}</td>
+                            <td>{{ player.last_seen[:10] if player.last_seen != 'Unknown' else '-' }}</td>
+                            <td>{{ player.play_time }}</td>
+                            <td>{{ player.join_count }}</td>
+                            <td>
+                                <div class="action-buttons">
+                                    {% if player.is_banned %}
+                                    <button class="btn btn-xs btn-success" onclick="pardonPlayer('{{ player.name }}')">Unban</button>
+                                    {% else %}
+                                    <button class="btn btn-xs btn-danger" onclick="banPlayer('{{ player.name }}')">Ban</button>
+                                    {% endif %}
+                                    <button class="btn btn-xs" onclick="showPlayerDetails('{{ player.name }}')">Details</button>
+                                </div>
+                            </td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Whitelist & Ops -->
+    <div class="two-column">
+        <div class="card">
+            <div class="card-header">
+                <h3>Operators</h3>
+            </div>
+            <div class="card-body">
+                <ul class="simple-list">
+                    {% for op in ops %}
+                    <li>
+                        <img src="https://mc-heads.net/avatar/{{ op }}/24" alt="{{ op }}">
+                        <span>{{ op }}</span>
+                        <button class="btn btn-xs" onclick="deopPlayer('{{ op }}')">Remove</button>
+                    </li>
+                    {% else %}
+                    <li class="empty">No operators</li>
+                    {% endfor %}
+                </ul>
+                <div class="add-form">
+                    <input type="text" id="new-op" placeholder="Player name">
+                    <button class="btn btn-sm btn-primary" onclick="addOp()">Add OP</button>
+                </div>
+            </div>
+        </div>
+        
+        <div class="card">
+            <div class="card-header">
+                <h3>Banned Players</h3>
+            </div>
+            <div class="card-body">
+                <ul class="simple-list">
+                    {% for ban in banned %}
+                    <li>
+                        <img src="https://mc-heads.net/avatar/{{ ban.name }}/24" alt="{{ ban.name }}">
+                        <span>{{ ban.name }}</span>
+                        <button class="btn btn-xs btn-success" onclick="pardonPlayer('{{ ban.name }}')">Unban</button>
+                    </li>
+                    {% else %}
+                    <li class="empty">No banned players</li>
+                    {% endfor %}
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Player Details Modal -->
+<div class="modal" id="player-modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h3 id="modal-player-name">Player Details</h3>
+            <button class="modal-close" onclick="closeModal()">&times;</button>
+        </div>
+        <div class="modal-body" id="modal-player-content">
+            Loading...
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    const socket = io();
+    
+    socket.on('players_update', (data) => {
+        refreshPlayers();
+    });
+    
+    async function refreshPlayers() {
+        location.reload();
+    }
+    
+    async function kickPlayer(name) {
+        const reason = prompt('Kick reason (optional):') || 'Kicked by admin';
+        const response = await fetch('/api/players/kick', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({player: name, reason: reason})
+        });
+        const data = await response.json();
+        showToast(data.message, data.success ? 'success' : 'error');
+    }
+    
+    async function banPlayer(name) {
+        const reason = prompt('Ban reason (optional):') || 'Banned by admin';
+        if (confirm(`Are you sure you want to ban ${name}?`)) {
+            const response = await fetch('/api/players/ban', {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({player: name, reason: reason})
+            });
+            const data = await response.json();
+            showToast(data.message, data.success ? 'success' : 'error');
+            if (data.success) refreshPlayers();
+        }
+    }
+    
+    async function pardonPlayer(name) {
+        const response = await fetch('/api/players/pardon', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({player: name})
+        });
+        const data = await response.json();
+        showToast(data.message, data.success ? 'success' : 'error');
+        if (data.success) refreshPlayers();
+    }
+    
+    async function opPlayer(name) {
+        const response = await fetch('/api/players/op', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({player: name})
+        });
+        const data = await response.json();
+        showToast(data.message, data.success ? 'success' : 'error');
+        if (data.success) refreshPlayers();
+    }
+    
+    async function deopPlayer(name) {
+        const response = await fetch('/api/players/deop', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({player: name})
+        });
+        const data = await response.json();
+        showToast(data.message, data.success ? 'success' : 'error');
+        if (data.success) refreshPlayers();
+    }
+    
+    async function addOp() {
+        const name = document.getElementById('new-op').value.trim();
+        if (name) {
+            await opPlayer(name);
+            document.getElementById('new-op').value = '';
+        }
+    }
+    
+    function searchPlayers() {
+        const search = document.getElementById('player-search').value.toLowerCase();
+        const rows = document.querySelectorAll('#players-table tbody tr');
+        
+        rows.forEach(row => {
+            const name = row.querySelector('.player-cell span').textContent.toLowerCase();
+            row.style.display = name.includes(search) ? '' : 'none';
+        });
+    }
+    
+    function showPlayerDetails(name) {
+        document.getElementById('modal-player-name').textContent = name;
+        document.getElementById('modal-player-content').innerHTML = `
+            <div class="player-detail-view">
+                <img src="https://mc-heads.net/body/${name}/100" alt="${name}">
+                <div class="detail-actions">
+                    <button class="btn" onclick="sendCommand('tp @s ${name}')">Teleport To</button>
+                    <button class="btn" onclick="sendCommand('effect give ${name} minecraft:regeneration 60 2')">Heal</button>
+                    <button class="btn" onclick="sendCommand('clear ${name}')">Clear Inventory</button>
+                </div>
+            </div>
+        `;
+        document.getElementById('player-modal').classList.add('active');
+    }
+    
+    function closeModal() {
+        document.getElementById('player-modal').classList.remove('active');
+    }
+    
+    async function sendCommand(cmd) {
+        const response = await fetch('/api/console/send', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({command: cmd})
+        });
+        const data = await response.json();
+        showToast(data.message, data.success ? 'success' : 'error');
+    }
+</script>
+{% endblock %}