338 lines
15 KiB
HTML
338 lines
15 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Player Management - SKE Digital Signage{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid py-4">
|
|
<!-- Page Header -->
|
|
<div class="row mb-4">
|
|
<div class="col">
|
|
<h1><i class="bi bi-display"></i> Player Management</h1>
|
|
<p class="text-muted">Manage digital signage players and their configurations</p>
|
|
</div>
|
|
<div class="col-auto">
|
|
<a href="{{ url_for('player.add') }}" class="btn btn-primary">
|
|
<i class="bi bi-plus"></i> Add Player
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Stats -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-3">
|
|
<div class="card text-white bg-primary">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between">
|
|
<div>
|
|
<h5 class="card-title">Total Players</h5>
|
|
<h2>{{ players|length }}</h2>
|
|
</div>
|
|
<div class="align-self-center">
|
|
<i class="bi bi-display" style="font-size: 2rem;"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card text-white bg-success">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between">
|
|
<div>
|
|
<h5 class="card-title">Active Players</h5>
|
|
<h2>{{ players|selectattr('is_active')|list|length }}</h2>
|
|
</div>
|
|
<div class="align-self-center">
|
|
<i class="bi bi-play-circle" style="font-size: 2rem;"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card text-white bg-warning">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between">
|
|
<div>
|
|
<h5 class="card-title">Online Players</h5>
|
|
<h2>{{ players|selectattr('last_seen')|list|length }}</h2>
|
|
</div>
|
|
<div class="align-self-center">
|
|
<i class="bi bi-wifi" style="font-size: 2rem;"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card text-white bg-info">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between">
|
|
<div>
|
|
<h5 class="card-title">Locked Players</h5>
|
|
<h2>{{ players|selectattr('locked_to_group_id')|list|length }}</h2>
|
|
</div>
|
|
<div class="align-self-center">
|
|
<i class="bi bi-lock" style="font-size: 2rem;"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Players Table -->
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5><i class="bi bi-list"></i> Players</h5>
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="refreshPlayers()">
|
|
<i class="bi bi-arrow-clockwise"></i> Refresh
|
|
</button>
|
|
<button type="button" class="btn btn-outline-danger btn-sm" onclick="bulkDelete()" disabled id="bulkDeleteBtn">
|
|
<i class="bi bi-trash"></i> Delete Selected
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
{% if players %}
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
<input type="checkbox" id="selectAll" onchange="toggleSelectAll()">
|
|
</th>
|
|
<th>Player Name</th>
|
|
<th>Hostname</th>
|
|
<th>Status</th>
|
|
<th>Group</th>
|
|
<th>Last Seen</th>
|
|
<th>Version</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for player in players %}
|
|
<tr>
|
|
<td>
|
|
<input type="checkbox" class="player-checkbox" value="{{ player.id }}" onchange="updateBulkActions()">
|
|
</td>
|
|
<td>
|
|
<strong>{{ player.username }}</strong>
|
|
{% if player.locked_to_group_id %}
|
|
<span class="badge bg-warning" title="Locked to group">
|
|
<i class="bi bi-lock"></i>
|
|
</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<code>{{ player.hostname or 'Not set' }}</code>
|
|
</td>
|
|
<td>
|
|
{% if player.is_active %}
|
|
{% if player.last_seen and (now() - player.last_seen).total_seconds() < 300 %}
|
|
<span class="badge bg-success">Online</span>
|
|
{% else %}
|
|
<span class="badge bg-warning">Active</span>
|
|
{% endif %}
|
|
{% else %}
|
|
<span class="badge bg-secondary">Inactive</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if player.locked_to_group_id %}
|
|
<span class="badge bg-primary">Group {{ player.locked_to_group_id }}</span>
|
|
{% else %}
|
|
<span class="text-muted">No group</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if player.last_seen %}
|
|
<span title="{{ player.last_seen }}">
|
|
{{ player.last_seen.strftime('%Y-%m-%d %H:%M') }}
|
|
</span>
|
|
{% else %}
|
|
<span class="text-muted">Never</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-info">v{{ player.playlist_version or 0 }}</span>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group btn-group-sm">
|
|
<a href="{{ url_for('player.view', id=player.id) }}" class="btn btn-outline-primary" title="View Player">
|
|
<i class="bi bi-eye"></i>
|
|
</a>
|
|
<a href="{{ url_for('player.edit', id=player.id) }}" class="btn btn-outline-warning" title="Edit Player">
|
|
<i class="bi bi-pencil"></i>
|
|
</a>
|
|
<button type="button" class="btn btn-outline-success" onclick="openPlayerWindow('{{ player.id }}')" title="Open Player View">
|
|
<i class="bi bi-window"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-outline-danger" onclick="deletePlayer('{{ player.id }}', '{{ player.username }}')" title="Delete Player">
|
|
<i class="bi bi-trash"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-5">
|
|
<i class="bi bi-display text-muted" style="font-size: 4rem;"></i>
|
|
<h4 class="text-muted mt-3">No Players Found</h4>
|
|
<p class="text-muted">Get started by adding your first digital signage player.</p>
|
|
<a href="{{ url_for('player.add') }}" class="btn btn-primary">
|
|
<i class="bi bi-plus"></i> Add First Player
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delete Player Modal -->
|
|
<div class="modal fade" id="deletePlayerModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Delete Player</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Are you sure you want to delete player <strong id="deletePlayerName"></strong>?</p>
|
|
<p class="text-danger small">This action cannot be undone and will remove all player data.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<form method="POST" action="{{ url_for('player.delete') }}" style="display:inline;">
|
|
<input type="hidden" id="deletePlayerId" name="player_id">
|
|
<button type="submit" class="btn btn-danger">Delete Player</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bulk Delete Modal -->
|
|
<div class="modal fade" id="bulkDeleteModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Delete Selected Players</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Are you sure you want to delete <span id="selectedCount">0</span> selected players?</p>
|
|
<p class="text-danger small">This action cannot be undone and will remove all player data.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-danger" onclick="confirmBulkDelete()">Delete Players</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function deletePlayer(playerId, playerName) {
|
|
document.getElementById('deletePlayerId').value = playerId;
|
|
document.getElementById('deletePlayerName').textContent = playerName;
|
|
|
|
const modal = new bootstrap.Modal(document.getElementById('deletePlayerModal'));
|
|
modal.show();
|
|
}
|
|
|
|
function toggleSelectAll() {
|
|
const selectAll = document.getElementById('selectAll');
|
|
const checkboxes = document.querySelectorAll('.player-checkbox');
|
|
|
|
checkboxes.forEach(checkbox => {
|
|
checkbox.checked = selectAll.checked;
|
|
});
|
|
|
|
updateBulkActions();
|
|
}
|
|
|
|
function updateBulkActions() {
|
|
const selectedCheckboxes = document.querySelectorAll('.player-checkbox:checked');
|
|
const bulkDeleteBtn = document.getElementById('bulkDeleteBtn');
|
|
|
|
if (selectedCheckboxes.length > 0) {
|
|
bulkDeleteBtn.disabled = false;
|
|
bulkDeleteBtn.textContent = `Delete ${selectedCheckboxes.length} Selected`;
|
|
} else {
|
|
bulkDeleteBtn.disabled = true;
|
|
bulkDeleteBtn.innerHTML = '<i class="bi bi-trash"></i> Delete Selected';
|
|
}
|
|
}
|
|
|
|
function bulkDelete() {
|
|
const selectedCheckboxes = document.querySelectorAll('.player-checkbox:checked');
|
|
|
|
if (selectedCheckboxes.length === 0) {
|
|
return;
|
|
}
|
|
|
|
document.getElementById('selectedCount').textContent = selectedCheckboxes.length;
|
|
const modal = new bootstrap.Modal(document.getElementById('bulkDeleteModal'));
|
|
modal.show();
|
|
}
|
|
|
|
function confirmBulkDelete() {
|
|
const selectedCheckboxes = document.querySelectorAll('.player-checkbox:checked');
|
|
const playerIds = Array.from(selectedCheckboxes).map(cb => cb.value);
|
|
|
|
// Create a form and submit it
|
|
const form = document.createElement('form');
|
|
form.method = 'POST';
|
|
form.action = '{{ url_for("player.bulk_delete") }}';
|
|
|
|
playerIds.forEach(id => {
|
|
const input = document.createElement('input');
|
|
input.type = 'hidden';
|
|
input.name = 'player_ids';
|
|
input.value = id;
|
|
form.appendChild(input);
|
|
});
|
|
|
|
document.body.appendChild(form);
|
|
form.submit();
|
|
}
|
|
|
|
function refreshPlayers() {
|
|
window.location.reload();
|
|
}
|
|
|
|
function openPlayerWindow(playerId) {
|
|
const url = `{{ url_for('player.fullscreen', id='PLAYER_ID') }}`.replace('PLAYER_ID', playerId);
|
|
window.open(url, '_blank', 'width=1920,height=1080,fullscreen=yes');
|
|
}
|
|
|
|
// Auto-refresh every 30 seconds
|
|
setInterval(function() {
|
|
const visibilitySupported = typeof document.hidden !== 'undefined';
|
|
if (!visibilitySupported || !document.hidden) {
|
|
// Only refresh if page is visible
|
|
fetch(window.location.href)
|
|
.then(response => response.text())
|
|
.then(html => {
|
|
// Update only the stats if different
|
|
const parser = new DOMParser();
|
|
const newDoc = parser.parseFromString(html, 'text/html');
|
|
const currentStats = document.querySelector('.row.mb-4').innerHTML;
|
|
const newStats = newDoc.querySelector('.row.mb-4').innerHTML;
|
|
|
|
if (currentStats !== newStats) {
|
|
document.querySelector('.row.mb-4').innerHTML = newStats;
|
|
}
|
|
})
|
|
.catch(error => console.log('Auto-refresh failed:', error));
|
|
}
|
|
}, 30000);
|
|
</script>
|
|
{% endblock %}
|