feat: v1.1.0 - Production-Ready Docker Deployment
🚀 Major Release: DigiServer v1.1.0 Production Deployment ## 📁 Project Restructure - Moved all application code to app/ directory for Docker containerization - Centralized persistent data in data/ directory with volume mounting - Removed development artifacts and cleaned up project structure ## 🐳 Docker Integration - Added production-ready Dockerfile with LibreOffice and poppler-utils - Updated docker-compose.yml for production deployment - Added .dockerignore for optimized build context - Created automated deployment script (deploy-docker.sh) - Added cleanup script (cleanup-docker.sh) ## 📄 Document Processing Enhancements - Integrated LibreOffice for professional PPTX to PDF conversion - Implemented PPTX → PDF → 4K JPG workflow for optimal quality - Added poppler-utils for enhanced PDF processing - Simplified PDF conversion to 300 DPI for reliability ## 🔧 File Management Improvements - Fixed absolute path resolution for containerized deployment - Updated all file deletion functions with proper path handling - Enhanced bulk delete functions for players and groups - Improved file upload workflow with consistent path management ## 🛠️ Code Quality & Stability - Cleaned up pptx_converter.py from 442 to 86 lines - Removed all Python cache files (__pycache__/, *.pyc) - Updated file operations for production reliability - Enhanced error handling and logging ## 📚 Documentation Updates - Updated README.md with Docker deployment instructions - Added comprehensive DEPLOYMENT.md guide - Included production deployment best practices - Added automated deployment workflow documentation ## 🔐 Security & Production Features - Environment-based configuration - Health checks and container monitoring - Automated admin user creation - Volume-mounted persistent data - Production logging and error handling ## ✅ Ready for Production - Clean project structure optimized for Docker - Automated deployment with ./deploy-docker.sh - Professional document processing pipeline - Reliable file management system - Complete documentation and deployment guides Access: http://localhost:8880 | Admin: admin/Initial01!
This commit is contained in:
82
app/templates/add_player.html
Normal file
82
app/templates/add_player.html
Normal file
@@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Add Player</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body.dark-mode {
|
||||
background-color: #121212;
|
||||
color: #ffffff;
|
||||
}
|
||||
.card.dark-mode {
|
||||
background-color: #1e1e1e;
|
||||
color: #ffffff;
|
||||
}
|
||||
.dark-mode label, .dark-mode th, .dark-mode td {
|
||||
color: #ffffff;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.btn {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="{{ 'dark-mode' if theme == 'dark' else '' }}">
|
||||
<div class="container py-5">
|
||||
<h1 class="text-center mb-4">Add Player</h1>
|
||||
<form method="POST" action="{{ url_for('add_player') }}">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-12">
|
||||
<div class="mb-3">
|
||||
<label for="username" class="form-label">Player Name</label>
|
||||
<input type="text" class="form-control {{ 'dark-mode' if theme == 'dark' else '' }}" id="username" name="username" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-12">
|
||||
<div class="mb-3">
|
||||
<label for="hostname" class="form-label">Hostname</label>
|
||||
<input type="text" class="form-control {{ 'dark-mode' if theme == 'dark' else '' }}" id="hostname" name="hostname" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-12">
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">Password</label>
|
||||
<input type="password" class="form-control {{ 'dark-mode' if theme == 'dark' else '' }}" id="password" name="password" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-12">
|
||||
<div class="mb-3">
|
||||
<label for="quickconnect_password" class="form-label">Quick Connect Password</label>
|
||||
<input type="password" class="form-control {{ 'dark-mode' if theme == 'dark' else '' }}" id="quickconnect_password" name="quickconnect_password" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-12">
|
||||
<div class="mb-3">
|
||||
<label for="orientation" class="form-label">Orientation</label>
|
||||
<select class="form-control {{ 'dark-mode' if theme == 'dark' else '' }}" id="orientation" name="orientation" required>
|
||||
<option value="Landscape" selected>Landscape</option>
|
||||
<option value="Portret">Portret</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<button type="submit" class="btn btn-primary">Add Player</button>
|
||||
<a href="{{ url_for('dashboard') }}" class="btn btn-secondary mt-3">Back to Dashboard</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
391
app/templates/admin.html
Normal file
391
app/templates/admin.html
Normal file
@@ -0,0 +1,391 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Admin Panel</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body.dark-mode {
|
||||
background-color: #121212;
|
||||
color: #ffffff;
|
||||
}
|
||||
.card.dark-mode {
|
||||
background-color: #1e1e1e;
|
||||
color: #ffffff;
|
||||
}
|
||||
.dark-mode label, .dark-mode th, .dark-mode td {
|
||||
color: #ffffff;
|
||||
}
|
||||
.img-preview {
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
}
|
||||
.popup-message {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
display: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
.logo {
|
||||
max-height: 100px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.logo {
|
||||
max-height: 50px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.btn {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
.card {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="{{ 'dark-mode' if theme == 'dark' else '' }}">
|
||||
<div class="container py-5">
|
||||
<div class="d-flex justify-content-start align-items-center mb-4">
|
||||
{% if logo_exists %}
|
||||
<img src="{{ url_for('static', filename='resurse/logo.png') }}" alt="Logo" class="logo">
|
||||
{% endif %}
|
||||
<h1 class="mb-0">Admin Panel</h1>
|
||||
</div>
|
||||
|
||||
<!-- Manage Users Card -->
|
||||
<div class="card mb-4 {{ 'dark-mode' if theme == 'dark' else '' }}">
|
||||
<div class="card-header">
|
||||
<h2>Manage Users</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<h3>Manage User Roles</h3>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Role</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for user in users %}
|
||||
<tr>
|
||||
<td>{{ user.username }}</td>
|
||||
<td>{{ user.role }}</td>
|
||||
<td>
|
||||
<form action="{{ url_for('change_role', user_id=user.id) }}" method="post" class="d-inline">
|
||||
<select name="role" class="form-select d-inline-block" style="width: auto;">
|
||||
<option value="user" {% if user.role == 'user' %}selected{% endif %}>User</option>
|
||||
<option value="admin" {% if user.role == 'admin' %}selected{% endif %}>Admin</option>
|
||||
</select>
|
||||
<button type="submit" class="btn btn-sm btn-primary">Change Role</button>
|
||||
</form>
|
||||
<form action="{{ url_for('delete_user', user_id=user.id) }}" method="post" class="d-inline">
|
||||
<button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this user?');">Delete</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col-md-1 d-flex justify-content-center">
|
||||
<div class="vr"></div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h3>Add User</h3>
|
||||
<form action="{{ url_for('create_user') }}" method="post">
|
||||
<div class="mb-3">
|
||||
<label for="username" class="form-label">Username</label>
|
||||
<input type="text" class="form-control {{ 'dark-mode' if theme == 'dark' else '' }}" id="username" name="username" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">Password</label>
|
||||
<input type="password" class="form-control {{ 'dark-mode' if theme == 'dark' else '' }}" id="password" name="password" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="role" class="form-label">Role</label>
|
||||
<select class="form-select {{ 'dark-mode' if theme == 'dark' else '' }}" id="role" name="role" required>
|
||||
<option value="admin">Admin</option>
|
||||
<option value="user">User</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Add User</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upload Personalization Photos Card -->
|
||||
<div class="card mb-4 {{ 'dark-mode' if theme == 'dark' else '' }}">
|
||||
<div class="card-header">
|
||||
<h2>Upload Personalization Photos</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="{{ url_for('upload_personalization_pictures') }}" method="post" enctype="multipart/form-data">
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label for="logo" class="form-label">Current Logo</label>
|
||||
{% if logo_exists %}
|
||||
<img src="{{ url_for('static', filename='resurse/logo.png') }}" alt="Current Logo" class="img-thumbnail img-preview mb-3">
|
||||
{% endif %}
|
||||
<input type="file" class="form-control {{ 'dark-mode' if theme == 'dark' else '' }}" id="logo" name="logo">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="login_picture" class="form-label">Current Login Page Picture</label>
|
||||
{% if login_picture_exists %}
|
||||
<img src="{{ url_for('static', filename='resurse/login_picture.png') }}" alt="Current Login Picture" class="img-thumbnail img-preview mb-3">
|
||||
{% endif %}
|
||||
<input type="file" class="form-control {{ 'dark-mode' if theme == 'dark' else '' }}" id="login_picture" name="login_picture">
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Upload Pictures</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-12">
|
||||
<!-- Change Theme Card -->
|
||||
<div class="card mb-4 {{ 'dark-mode' if theme == 'dark' else '' }}">
|
||||
<div class="card-header">
|
||||
<h2>Change Theme</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="{{ url_for('change_theme') }}" method="post" onsubmit="showPopupMessage('Theme changed successfully!')">
|
||||
<div class="mb-3">
|
||||
<label for="theme" class="form-label">Select Theme</label>
|
||||
<select class="form-select" id="theme" name="theme" required>
|
||||
<option value="light" {% if theme == 'light' %}selected{% endif %}>Light</option>
|
||||
<option value="dark" {% if theme == 'dark' %}selected{% endif %}>Dark</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Change Theme</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<!-- Clean Unused Files Card -->
|
||||
<div class="card mb-4 {{ 'dark-mode' if theme == 'dark' else '' }}">
|
||||
<div class="card-header">
|
||||
<h2>Clean Unused Files</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="{{ url_for('clean_unused_files') }}" method="post" onsubmit="showPopupMessage('Clean script executed successfully!')">
|
||||
<button type="submit" class="btn btn-danger">Run Clean Script</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-12">
|
||||
<!-- Server Info Card -->
|
||||
<div class="card mb-4 {{ 'dark-mode' if theme == 'dark' else '' }}">
|
||||
<div class="card-header">
|
||||
<h2>Server Info</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p><strong>Server Version:</strong> {{ server_version }}</p>
|
||||
<p><strong>Date of Build:</strong> {{ build_date }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- System Monitoring Card -->
|
||||
{% if system_info %}
|
||||
<div class="card mb-4 {{ 'dark-mode' if theme == 'dark' else '' }}">
|
||||
<div class="card-header">
|
||||
<h2>📊 System Monitoring</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<!-- CPU Information -->
|
||||
<div class="col-md-3 col-6 text-center mb-3">
|
||||
<div class="h6">CPU Usage</div>
|
||||
<div class="progress mb-2" style="height: 25px;">
|
||||
<div class="progress-bar
|
||||
{% if system_info.cpu_percent < 50 %}bg-success
|
||||
{% elif system_info.cpu_percent < 80 %}bg-warning
|
||||
{% else %}bg-danger{% endif %}"
|
||||
role="progressbar"
|
||||
style="width: {{ system_info.cpu_percent }}%;">
|
||||
{{ system_info.cpu_percent }}%
|
||||
</div>
|
||||
</div>
|
||||
<small class="text-muted">{{ system_info.cpu_count }} cores available</small>
|
||||
</div>
|
||||
|
||||
<!-- Memory Information -->
|
||||
<div class="col-md-3 col-6 text-center mb-3">
|
||||
<div class="h6">Memory Usage</div>
|
||||
<div class="progress mb-2" style="height: 25px;">
|
||||
<div class="progress-bar
|
||||
{% if system_info.memory_percent < 60 %}bg-success
|
||||
{% elif system_info.memory_percent < 85 %}bg-warning
|
||||
{% else %}bg-danger{% endif %}"
|
||||
role="progressbar"
|
||||
style="width: {{ system_info.memory_percent }}%;">
|
||||
{{ system_info.memory_percent }}%
|
||||
</div>
|
||||
</div>
|
||||
<small class="text-muted">{{ system_info.memory_used }}GB / {{ system_info.memory_total }}GB</small>
|
||||
</div>
|
||||
|
||||
<!-- Disk Information -->
|
||||
<div class="col-md-3 col-6 text-center mb-3">
|
||||
<div class="h6">Disk Usage</div>
|
||||
<div class="progress mb-2" style="height: 25px;">
|
||||
<div class="progress-bar
|
||||
{% if system_info.disk_percent < 70 %}bg-success
|
||||
{% elif system_info.disk_percent < 90 %}bg-warning
|
||||
{% else %}bg-danger{% endif %}"
|
||||
role="progressbar"
|
||||
style="width: {{ system_info.disk_percent }}%;">
|
||||
{{ system_info.disk_percent }}%
|
||||
</div>
|
||||
</div>
|
||||
<small class="text-muted">{{ system_info.disk_used }}GB / {{ system_info.disk_total }}GB</small>
|
||||
</div>
|
||||
|
||||
<!-- Upload Folder Size -->
|
||||
<div class="col-md-3 col-6 text-center mb-3">
|
||||
<div class="h6">Media Storage</div>
|
||||
<div class="text-primary display-6">{{ system_info.upload_folder_size }}GB</div>
|
||||
<small class="text-muted">Total media files</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- System Details -->
|
||||
<div class="row mt-3">
|
||||
<div class="col-12">
|
||||
<hr>
|
||||
<div class="row text-center">
|
||||
<div class="col-md-4 col-12 mb-2">
|
||||
<strong>Available Disk Space:</strong><br>
|
||||
<span class="text-success">{{ system_info.disk_free }}GB free</span>
|
||||
</div>
|
||||
<div class="col-md-4 col-12 mb-2">
|
||||
<strong>Total Disk Space:</strong><br>
|
||||
<span class="text-info">{{ system_info.disk_total }}GB total</span>
|
||||
</div>
|
||||
<div class="col-md-4 col-12 mb-2">
|
||||
<strong>Last Updated:</strong><br>
|
||||
<span class="text-muted" id="last-update-admin">Just now</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<a href="{{ url_for('dashboard') }}" class="btn btn-secondary">Back to Dashboard</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="popup-message" class="popup-message"></div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
function showPopupMessage(message) {
|
||||
const popup = document.getElementById('popup-message');
|
||||
popup.textContent = message;
|
||||
popup.style.display = 'block';
|
||||
setTimeout(() => {
|
||||
popup.style.display = 'none';
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// Auto-refresh system monitoring every 15 seconds
|
||||
{% if system_info %}
|
||||
function updateAdminSystemInfo() {
|
||||
fetch('/api/system_info')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.error) {
|
||||
console.warn('Could not fetch system info:', data.error);
|
||||
return;
|
||||
}
|
||||
|
||||
// Update progress bars and their colors
|
||||
const progressBars = document.querySelectorAll('.progress-bar');
|
||||
|
||||
if (progressBars.length >= 3) {
|
||||
// CPU Bar
|
||||
progressBars[0].style.width = data.cpu_percent + '%';
|
||||
progressBars[0].textContent = data.cpu_percent + '%';
|
||||
progressBars[0].className = 'progress-bar ' +
|
||||
(data.cpu_percent < 50 ? 'bg-success' :
|
||||
data.cpu_percent < 80 ? 'bg-warning' : 'bg-danger');
|
||||
|
||||
// Memory Bar
|
||||
progressBars[1].style.width = data.memory_percent + '%';
|
||||
progressBars[1].textContent = data.memory_percent + '%';
|
||||
progressBars[1].className = 'progress-bar ' +
|
||||
(data.memory_percent < 60 ? 'bg-success' :
|
||||
data.memory_percent < 85 ? 'bg-warning' : 'bg-danger');
|
||||
|
||||
// Disk Bar
|
||||
progressBars[2].style.width = data.disk_percent + '%';
|
||||
progressBars[2].textContent = data.disk_percent + '%';
|
||||
progressBars[2].className = 'progress-bar ' +
|
||||
(data.disk_percent < 70 ? 'bg-success' :
|
||||
data.disk_percent < 90 ? 'bg-warning' : 'bg-danger');
|
||||
}
|
||||
|
||||
// Update text values
|
||||
const smallTexts = document.querySelectorAll('.text-muted');
|
||||
smallTexts.forEach((text, index) => {
|
||||
if (index === 1) text.textContent = data.memory_used + 'GB / ' + data.memory_total + 'GB';
|
||||
if (index === 2) text.textContent = data.disk_used + 'GB / ' + data.disk_total + 'GB';
|
||||
});
|
||||
|
||||
// Update storage size
|
||||
const storageDisplay = document.querySelector('.display-6');
|
||||
if (storageDisplay) {
|
||||
storageDisplay.textContent = data.upload_folder_size + 'GB';
|
||||
}
|
||||
|
||||
// Update disk space info
|
||||
const diskFree = document.querySelector('.text-success');
|
||||
const diskTotal = document.querySelector('.text-info');
|
||||
if (diskFree) diskFree.textContent = data.disk_free + 'GB free';
|
||||
if (diskTotal) diskTotal.textContent = data.disk_total + 'GB total';
|
||||
|
||||
// Update timestamp
|
||||
const lastUpdate = document.getElementById('last-update-admin');
|
||||
if (lastUpdate) {
|
||||
lastUpdate.textContent = new Date().toLocaleTimeString();
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.warn('Admin system monitoring update failed:', error);
|
||||
});
|
||||
}
|
||||
|
||||
// Update every 15 seconds
|
||||
setInterval(updateAdminSystemInfo, 15000);
|
||||
{% endif %}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
110
app/templates/create_group.html
Normal file
110
app/templates/create_group.html
Normal file
@@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Create Group</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body.dark-mode {
|
||||
background-color: #121212;
|
||||
color: #ffffff;
|
||||
}
|
||||
.card.dark-mode {
|
||||
background-color: #1e1e1e;
|
||||
color: #ffffff;
|
||||
}
|
||||
.dark-mode label, .dark-mode th, .dark-mode td {
|
||||
color: #ffffff;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.btn {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="{{ 'dark-mode' if theme == 'dark' else '' }}">
|
||||
<div class="container py-5">
|
||||
<h1 class="text-center mb-4">Create Group</h1>
|
||||
<form method="POST" action="{{ url_for('create_group') }}">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-12">
|
||||
<div class="mb-3">
|
||||
<label for="name" class="form-label">Group Name</label>
|
||||
<input type="text" class="form-control {{ 'dark-mode' if theme == 'dark' else '' }}" id="name" name="name" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-12">
|
||||
<div class="mb-3">
|
||||
<label for="players" class="form-label">Select Players</label>
|
||||
<select multiple class="form-control {{ 'dark-mode' if theme == 'dark' else '' }}" id="players" name="players">
|
||||
{% for player in players %}
|
||||
<option value="{{ player.id }}">{{ player.username }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-12">
|
||||
<div class="mb-3">
|
||||
<label for="orientation" class="form-label">Group Orientation</label>
|
||||
<select class="form-control {{ 'dark-mode' if theme == 'dark' else '' }}" id="orientation" name="orientation" required>
|
||||
<option value="Landscape" selected>Landscape</option>
|
||||
<option value="Portret">Portret</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-warning" role="alert">
|
||||
<strong>Warning:</strong> Adding players to a group will delete their individual playlists.
|
||||
All players in a group will share the same content.
|
||||
</div>
|
||||
<div id="orientation-warning" class="alert alert-danger d-none" role="alert">
|
||||
No players with the selected orientation are available.
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<button type="submit" class="btn btn-primary">Create Group</button>
|
||||
<a href="{{ url_for('dashboard') }}" class="btn btn-secondary mt-3">Back to Dashboard</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
// Get all players and their orientations from the backend
|
||||
const players = [
|
||||
{% for player in players %}
|
||||
{id: {{ player.id }}, username: "{{ player.username }}", orientation: "{{ player.orientation }}"},
|
||||
{% endfor %}
|
||||
];
|
||||
|
||||
const orientationSelect = document.getElementById('orientation');
|
||||
const playersSelect = document.getElementById('players');
|
||||
const orientationWarning = document.getElementById('orientation-warning');
|
||||
|
||||
function filterPlayers() {
|
||||
const selectedOrientation = orientationSelect.value;
|
||||
playersSelect.innerHTML = '';
|
||||
let compatibleCount = 0;
|
||||
players.forEach(player => {
|
||||
if (player.orientation === selectedOrientation) {
|
||||
const option = document.createElement('option');
|
||||
option.value = player.id;
|
||||
option.textContent = player.username;
|
||||
playersSelect.appendChild(option);
|
||||
compatibleCount++;
|
||||
}
|
||||
});
|
||||
document.getElementById('orientation-warning').classList.toggle('d-none', compatibleCount > 0);
|
||||
}
|
||||
|
||||
orientationSelect.addEventListener('change', filterPlayers);
|
||||
|
||||
// Initial filter on page load
|
||||
filterPlayers();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
173
app/templates/dashboard.html
Normal file
173
app/templates/dashboard.html
Normal file
@@ -0,0 +1,173 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dashboard</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body.dark-mode {
|
||||
background-color: #121212;
|
||||
color: #ffffff;
|
||||
}
|
||||
.card.dark-mode {
|
||||
background-color: #1e1e1e;
|
||||
color: #ffffff;
|
||||
}
|
||||
.logo {
|
||||
max-height: 100px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.logo {
|
||||
max-height: 50px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.btn {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
.card {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="{{ 'dark-mode' if theme == 'dark' else '' }}">
|
||||
<div class="container py-5">
|
||||
<div class="d-flex justify-content-start align-items-center mb-4">
|
||||
{% if logo_exists %}
|
||||
<img src="{{ url_for('static', filename='resurse/logo.png') }}" alt="Logo" class="logo">
|
||||
{% endif %}
|
||||
<h1 class="mb-0">Dashboard</h1>
|
||||
</div>
|
||||
|
||||
<!-- Sign Out Button -->
|
||||
<div class="text-end mb-4">
|
||||
<a href="{{ url_for('logout') }}" class="btn btn-danger">Sign Out</a>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<!-- Main Content: Players, Groups, Upload -->
|
||||
<div class="col-lg-9 col-12">
|
||||
<!-- Players Section -->
|
||||
<div class="card mb-4 {{ 'dark-mode' if theme == 'dark' else '' }}">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<h2>Players</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="list-group">
|
||||
{% for player in players %}
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<strong>{{ player.username }}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<a href="{{ url_for('player_page', player_id=player.id) }}" class="btn btn-sm btn-secondary">Manage Player</a>
|
||||
<a href="{{ url_for('edit_player', player_id=player.id, return_url=url_for('dashboard')) }}" class="btn btn-sm btn-secondary">Edit Player</a>
|
||||
<a href="{{ url_for('player_fullscreen', player_id=player.id) }}" class="btn btn-sm btn-primary">Full Screen</a>
|
||||
{% if current_user.role == 'admin' %}
|
||||
<form action="{{ url_for('delete_player', player_id=player.id) }}" method="post" style="display:inline;">
|
||||
<button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this player?');">Delete</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% if current_user.role == 'admin' %}
|
||||
<div class="mt-3">
|
||||
<a href="{{ url_for('add_player') }}" class="btn btn-success">Add Player</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Group of Players Section -->
|
||||
<div class="card mb-4 {{ 'dark-mode' if theme == 'dark' else '' }}">
|
||||
<div class="card-header bg-secondary text-white">
|
||||
<h2>Group of Players</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="list-group">
|
||||
{% for group in groups %}
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<strong>{{ group.name }}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<a href="{{ url_for('manage_group', group_id=group.id) }}" class="btn btn-sm btn-secondary">Manage Group</a>
|
||||
<a href="{{ url_for('edit_group', group_id=group.id) }}" class="btn btn-sm btn-secondary">Edit Group</a>
|
||||
<a href="{{ url_for('group_fullscreen', group_id=group.id) }}" class="btn btn-sm btn-primary">Full Screen</a>
|
||||
<form action="{{ url_for('delete_group', group_id=group.id) }}" method="post" style="display:inline;">
|
||||
<button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this group?');">Delete</button>
|
||||
</form>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class="mt-3">
|
||||
<a href="{{ url_for('create_group') }}" class="btn btn-success">Create Group</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content Upload Section -->
|
||||
<div class="card mb-4 {{ 'dark-mode' if theme == 'dark' else '' }}">
|
||||
<div class="card-header bg-warning text-dark">
|
||||
<h2>Content Upload</h2>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<a href="{{ url_for('upload_content') }}" class="btn btn-warning btn-lg">Upload Content</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- App Settings Section: Top right on desktop -->
|
||||
{% if current_user.role == 'admin' %}
|
||||
<div class="col-lg-3 col-12">
|
||||
<div class="card mb-4 {{ 'dark-mode' if theme == 'dark' else '' }}">
|
||||
<div class="card-header bg-info text-white">
|
||||
<h2>App Settings</h2>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<a href="{{ url_for('admin') }}" class="btn btn-info btn-lg">Go to Settings</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Server Activity Log Section -->
|
||||
{% if current_user.role == 'admin' %}
|
||||
<div class="card mb-4 {{ 'dark-mode' if theme == 'dark' else '' }}">
|
||||
<div class="card-header bg-secondary text-white">
|
||||
<h2>Server Activity Log</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped {{ 'table-dark' if theme == 'dark' else '' }}">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Time</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for log in server_logs %}
|
||||
<tr>
|
||||
<td>{{ log.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</td>
|
||||
<td>{{ log.action }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
118
app/templates/edit_group.html
Normal file
118
app/templates/edit_group.html
Normal file
@@ -0,0 +1,118 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Edit Group</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body.dark-mode {
|
||||
background-color: #121212;
|
||||
color: #ffffff;
|
||||
}
|
||||
.card.dark-mode {
|
||||
background-color: #1e1e1e;
|
||||
color: #ffffff;
|
||||
}
|
||||
.dark-mode label, .dark-mode th, .dark-mode td {
|
||||
color: #ffffff;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.btn {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="{{ 'dark-mode' if theme == 'dark' else '' }}">
|
||||
<div class="container py-5">
|
||||
<h1 class="text-center mb-4">Edit Group</h1>
|
||||
<form method="POST">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-12">
|
||||
<div class="mb-3">
|
||||
<label for="name" class="form-label">Group Name</label>
|
||||
<input type="text" class="form-control {{ 'dark-mode' if theme == 'dark' else '' }}" id="name" name="name" value="{{ group.name }}" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-12">
|
||||
<div class="mb-3">
|
||||
<label for="players" class="form-label">Select Players</label>
|
||||
<select multiple class="form-control {{ 'dark-mode' if theme == 'dark' else '' }}" id="players" name="players">
|
||||
{% for player in players %}
|
||||
<option value="{{ player.id }}" {% if player in group.players %}selected{% endif %}>{{ player.username }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-12">
|
||||
<div class="mb-3">
|
||||
<label for="orientation" class="form-label">Group Orientation</label>
|
||||
<select class="form-control {{ 'dark-mode' if theme == 'dark' else '' }}" id="orientation" name="orientation" required>
|
||||
<option value="Landscape" {% if group.orientation == 'Landscape' %}selected{% endif %}>Landscape</option>
|
||||
<option value="Portret" {% if group.orientation == 'Portret' %}selected{% endif %}>Portret</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Add this above the player selection -->
|
||||
<div class="alert alert-warning" role="alert">
|
||||
<strong>Warning:</strong> Adding new players to this group will delete their individual playlists.
|
||||
Removing players from the group will allow them to have their own playlists again.
|
||||
</div>
|
||||
<div id="orientation-warning" class="alert alert-danger d-none" role="alert">
|
||||
No players with the selected orientation are available.
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<button type="submit" class="btn btn-primary">Save Changes</button>
|
||||
<a href="{{ url_for('dashboard') }}" class="btn btn-secondary mt-3">Back to Dashboard</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
// Get all players and their orientations from the backend
|
||||
const players = [
|
||||
{% for player in players %}
|
||||
{id: {{ player.id }}, username: "{{ player.username }}", orientation: "{{ player.orientation }}", inGroup: {% if player in group.players %}true{% else %}false{% endif %}},
|
||||
{% endfor %}
|
||||
];
|
||||
|
||||
const orientationSelect = document.getElementById('orientation');
|
||||
const playersSelect = document.getElementById('players');
|
||||
const orientationWarning = document.getElementById('orientation-warning');
|
||||
|
||||
function filterPlayers() {
|
||||
const selectedOrientation = orientationSelect.value;
|
||||
const currentSelection = Array.from(playersSelect.selectedOptions).map(option => option.value);
|
||||
playersSelect.innerHTML = '';
|
||||
let compatibleCount = 0;
|
||||
|
||||
players.forEach(player => {
|
||||
if (player.orientation === selectedOrientation) {
|
||||
const option = document.createElement('option');
|
||||
option.value = player.id;
|
||||
option.textContent = player.username;
|
||||
// Re-select if it was previously selected
|
||||
if (currentSelection.includes(player.id.toString()) || player.inGroup) {
|
||||
option.selected = true;
|
||||
}
|
||||
playersSelect.appendChild(option);
|
||||
compatibleCount++;
|
||||
}
|
||||
});
|
||||
|
||||
orientationWarning.classList.toggle('d-none', compatibleCount > 0);
|
||||
}
|
||||
|
||||
orientationSelect.addEventListener('change', filterPlayers);
|
||||
|
||||
// Initial filter on page load
|
||||
filterPlayers();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
79
app/templates/edit_player.html
Normal file
79
app/templates/edit_player.html
Normal file
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Edit Player</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body.dark-mode {
|
||||
background-color: #121212;
|
||||
color: #ffffff;
|
||||
}
|
||||
.card.dark-mode {
|
||||
background-color: #1e1e1e;
|
||||
color: #ffffff;
|
||||
}
|
||||
.dark-mode label, .dark-mode th, .dark-mode td {
|
||||
color: #ffffff;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.btn {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="{% if theme == 'dark' %}dark-mode{% endif %}">
|
||||
<div class="container py-5">
|
||||
<h1 class="text-center mb-4">Edit Player</h1>
|
||||
<form action="{{ url_for('edit_player', player_id=player.id) }}" method="post">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-12">
|
||||
<div class="mb-3">
|
||||
<label for="username" class="form-label">Player Name</label>
|
||||
<input type="text" class="form-control {% if theme == 'dark' %}dark-mode{% endif %}" id="username" name="username" value="{{ player.username }}" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-12">
|
||||
<div class="mb-3">
|
||||
<label for="hostname" class="form-label">Hostname</label>
|
||||
<input type="text" class="form-control {% if theme == 'dark' %}dark-mode{% endif %}" id="hostname" name="hostname" value="{{ player.hostname }}" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-12">
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">Password (leave blank to keep current password)</label>
|
||||
<input type="password" class="form-control {% if theme == 'dark' %}dark-mode{% endif %}" id="password" name="password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-12">
|
||||
<div class="mb-3">
|
||||
<label for="quickconnect_password" class="form-label">Quick Connect Password (leave blank to keep current password)</label>
|
||||
<input type="password" class="form-control {% if theme == 'dark' %}dark-mode{% endif %}" id="quickconnect_password" name="quickconnect_password">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="orientation" class="form-label">Orientation</label>
|
||||
<select class="form-control {{ 'dark-mode' if theme == 'dark' else '' }}" id="orientation" name="orientation" required>
|
||||
<option value="Landscape" {% if player.orientation == 'Landscape' %}selected{% endif %}>Landscape</option>
|
||||
<option value="Portret" {% if player.orientation == 'Portret' %}selected{% endif %}>Portret</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<button type="submit" class="btn btn-primary">Update Player</button>
|
||||
<a href="{{ return_url }}" class="btn btn-secondary mt-3">Back to Player Page</a>
|
||||
<a href="{{ url_for('dashboard') }}" class="btn btn-secondary mt-3">Back to Dashboard</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
69
app/templates/group_fullscreen.html
Normal file
69
app/templates/group_fullscreen.html
Normal file
@@ -0,0 +1,69 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Group Fullscreen</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content-item {
|
||||
display: none;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
object-fit: cover;
|
||||
}
|
||||
.content-item.active {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
{% for item in content %}
|
||||
{% if item.file_name.endswith('.mp4') %}
|
||||
<video class="content-item" data-duration="{{ item.duration }}" controls>
|
||||
<source src="{{ url_for('static', filename='uploads/' ~ item.file_name) }}" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
{% elif item.file_name.endswith('.pdf') %}
|
||||
<object data="{{ url_for('static', filename='uploads/' ~ item.file_name) }}" type="application/pdf" class="content-item" data-duration="{{ item.duration }}"></object>
|
||||
{% else %}
|
||||
<img src="{{ url_for('static', filename='uploads/' ~ item.file_name) }}" class="content-item" data-duration="{{ item.duration }}" alt="{{ item.file_name }}">
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const items = document.querySelectorAll('.content-item');
|
||||
let currentIndex = 0;
|
||||
|
||||
function showNextItem() {
|
||||
items.forEach(item => item.classList.remove('active'));
|
||||
const currentItem = items[currentIndex];
|
||||
currentItem.classList.add('active');
|
||||
|
||||
const duration = parseInt(currentItem.getAttribute('data-duration'), 10) * 1000;
|
||||
if (currentItem.tagName === 'VIDEO') {
|
||||
currentItem.play();
|
||||
currentItem.onended = () => {
|
||||
currentIndex = (currentIndex + 1) % items.length;
|
||||
showNextItem();
|
||||
};
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
currentIndex = (currentIndex + 1) % items.length;
|
||||
showNextItem();
|
||||
}, duration);
|
||||
}
|
||||
}
|
||||
|
||||
showNextItem();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
59
app/templates/login.html
Normal file
59
app/templates/login.html
Normal file
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Login</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body.dark-mode {
|
||||
background-color: #121212;
|
||||
color: #ffffff;
|
||||
}
|
||||
.card.dark-mode {
|
||||
background-color: #1e1e1e;
|
||||
color: #ffffff;
|
||||
}
|
||||
.login-picture {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.btn {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="{{ 'dark-mode' if theme == 'dark' else '' }}">
|
||||
<div class="container py-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 col-12 text-center">
|
||||
{% if login_picture_exists %}
|
||||
<img src="{{ url_for('static', filename='resurse/login_picture.png') }}" alt="Login Picture" class="login-picture">
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-md-6 col-12">
|
||||
<h1 class="text-center mb-4">Login</h1>
|
||||
<form action="{{ url_for('login') }}" method="post">
|
||||
<div class="mb-3">
|
||||
<label for="username" class="form-label">Username</label>
|
||||
<input type="text" class="form-control {{ 'dark-mode' if theme == 'dark' else '' }}" id="username" name="username" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">Password</label>
|
||||
<input type="password" class="form-control {{ 'dark-mode' if theme == 'dark' else '' }}" id="password" name="password" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary w-100">Login</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
318
app/templates/manage_group.html
Normal file
318
app/templates/manage_group.html
Normal file
@@ -0,0 +1,318 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Manage Group</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body.dark-mode {
|
||||
background-color: #121212;
|
||||
color: #ffffff;
|
||||
}
|
||||
.card.dark-mode {
|
||||
background-color: #1e1e1e;
|
||||
color: #ffffff;
|
||||
}
|
||||
.dark-mode label, .dark-mode th, .dark-mode td {
|
||||
color: #ffffff;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.btn {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
.card {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.sortable-list li {
|
||||
cursor: move;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.sortable-list li.dragging {
|
||||
opacity: 0.5;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
cursor: grab;
|
||||
color: #aaa;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.drag-over {
|
||||
border-top: 2px solid #0d6efd;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="{{ 'dark-mode' if theme == 'dark' else '' }}">
|
||||
<div class="container py-5">
|
||||
<h1 class="text-center mb-4">Manage Group: {{ group.name }}</h1>
|
||||
|
||||
<!-- Group Information Card -->
|
||||
<div class="card mb-4 {{ 'dark-mode' if theme == 'dark' else '' }}">
|
||||
<div class="card-header bg-info text-white">
|
||||
<h2>Group Info</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p><strong>Group Name:</strong> {{ group.name }}</p>
|
||||
<p><strong>Number of Players:</strong> {{ group.players|length }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- List of Players in the Group -->
|
||||
<div class="card mb-4 {{ 'dark-mode' if theme == 'dark' else '' }}">
|
||||
<div class="card-header bg-secondary text-white">
|
||||
<h2>Players in Group</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="list-group">
|
||||
{% for player in group.players %}
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<strong>{{ player.username }}</strong> ({{ player.hostname }})
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Manage Media Section -->
|
||||
<div class="card mb-4 {{ 'dark-mode' if theme == 'dark' else '' }}">
|
||||
<div class="card-header bg-info text-white">
|
||||
<h2>Manage Media</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if content %}
|
||||
<!-- Bulk Actions Controls -->
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="selectAll">
|
||||
<label class="form-check-label" for="selectAll">
|
||||
Select All
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 text-end">
|
||||
<button type="button" class="btn btn-danger" id="bulkDeleteBtn" style="display:none;" onclick="confirmBulkDelete()">
|
||||
<i class="bi bi-trash"></i> Delete Selected
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="list-group sortable-list" id="groupMediaList">
|
||||
{% for media in content %}
|
||||
<li class="list-group-item d-flex align-items-center {{ 'dark-mode' if theme == 'dark' else '' }}"
|
||||
draggable="true"
|
||||
data-id="{{ media.id }}"
|
||||
data-position="{{ loop.index0 }}">
|
||||
<!-- Checkbox for bulk selection -->
|
||||
<div class="me-2">
|
||||
<input class="form-check-input media-checkbox"
|
||||
type="checkbox"
|
||||
name="selected_content"
|
||||
value="{{ media.id }}">
|
||||
</div>
|
||||
|
||||
<!-- Drag handle -->
|
||||
<div class="drag-handle me-2" title="Drag to reorder">
|
||||
<i class="bi bi-grip-vertical"></i>
|
||||
☰
|
||||
</div>
|
||||
|
||||
<div class="flex-grow-1">
|
||||
<p class="mb-0"><strong>Media Name:</strong> {{ media.file_name }}</p>
|
||||
</div>
|
||||
<form action="{{ url_for('edit_group_media', group_id=group.id, content_id=media.id) }}" method="post" class="d-flex align-items-center">
|
||||
<div class="input-group me-2">
|
||||
<span class="input-group-text">seconds</span>
|
||||
<input type="number" class="form-control {{ 'dark-mode' if theme == 'dark' else '' }}" name="duration" value="{{ media.duration }}" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-warning me-2">Edit</button>
|
||||
</form>
|
||||
<form action="{{ url_for('delete_group_media', group_id=group.id, content_id=media.id) }}" method="post" style="display:inline;">
|
||||
<button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this media?');">Delete</button>
|
||||
</form>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<!-- Add a save button for the reordering -->
|
||||
<button id="saveGroupOrder" class="btn btn-success mt-3">Save Playlist Order</button>
|
||||
{% else %}
|
||||
<p class="text-center">No media uploaded for this group.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upload Media Button -->
|
||||
<div class="text-center mb-4">
|
||||
<a href="{{ url_for('upload_content', target_type='group', target_id=group.id, return_url=url_for('manage_group', group_id=group.id)) }}" class="btn btn-primary btn-lg">Go to Upload Media</a>
|
||||
</div>
|
||||
|
||||
<!-- Back to Dashboard Button -->
|
||||
<a href="{{ url_for('dashboard') }}" class="btn btn-secondary">Back to Dashboard</a>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const groupMediaList = document.getElementById('groupMediaList');
|
||||
let draggedItem = null;
|
||||
|
||||
// Initialize drag events for all items
|
||||
const items = groupMediaList.querySelectorAll('li');
|
||||
items.forEach(item => {
|
||||
// Drag start
|
||||
item.addEventListener('dragstart', function(e) {
|
||||
draggedItem = item;
|
||||
setTimeout(() => {
|
||||
item.classList.add('dragging');
|
||||
}, 0);
|
||||
});
|
||||
|
||||
// Drag end
|
||||
item.addEventListener('dragend', function() {
|
||||
item.classList.remove('dragging');
|
||||
draggedItem = null;
|
||||
updatePositions();
|
||||
});
|
||||
|
||||
// Drag over
|
||||
item.addEventListener('dragover', function(e) {
|
||||
e.preventDefault();
|
||||
if (item !== draggedItem) {
|
||||
const rect = item.getBoundingClientRect();
|
||||
const y = e.clientY - rect.top;
|
||||
const height = rect.height;
|
||||
|
||||
if (y < height / 2) {
|
||||
groupMediaList.insertBefore(draggedItem, item);
|
||||
} else {
|
||||
groupMediaList.insertBefore(draggedItem, item.nextSibling);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Save button click handler
|
||||
document.getElementById('saveGroupOrder').addEventListener('click', function() {
|
||||
// Collect new order
|
||||
const newOrder = [];
|
||||
groupMediaList.querySelectorAll('li').forEach((item, index) => {
|
||||
newOrder.push({
|
||||
id: item.dataset.id,
|
||||
position: index
|
||||
});
|
||||
});
|
||||
|
||||
// Send to server
|
||||
fetch('{{ url_for("update_group_content_order_route", group_id=group.id) }}', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': '{{ csrf_token() if csrf_token else "" }}'
|
||||
},
|
||||
body: JSON.stringify({items: newOrder})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
alert('Playlist order updated successfully!');
|
||||
console.log('Group playlist update successful:', data);
|
||||
} else {
|
||||
alert('Error updating playlist order: ' + (data.error || 'Unknown error'));
|
||||
console.error('Failed to update group playlist:', data);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
alert('An error occurred while updating the playlist order.');
|
||||
});
|
||||
});
|
||||
|
||||
// Update positions in the UI
|
||||
function updatePositions() {
|
||||
groupMediaList.querySelectorAll('li').forEach((item, index) => {
|
||||
item.dataset.position = index;
|
||||
});
|
||||
}
|
||||
|
||||
// Bulk selection functionality
|
||||
const selectAllCheckbox = document.getElementById('selectAll');
|
||||
const mediaCheckboxes = document.querySelectorAll('.media-checkbox');
|
||||
const bulkDeleteBtn = document.getElementById('bulkDeleteBtn');
|
||||
|
||||
// Select all functionality
|
||||
if (selectAllCheckbox) {
|
||||
selectAllCheckbox.addEventListener('change', function() {
|
||||
mediaCheckboxes.forEach(checkbox => {
|
||||
checkbox.checked = this.checked;
|
||||
});
|
||||
updateBulkDeleteButton();
|
||||
});
|
||||
}
|
||||
|
||||
// Individual checkbox change
|
||||
mediaCheckboxes.forEach(checkbox => {
|
||||
checkbox.addEventListener('change', function() {
|
||||
updateSelectAllState();
|
||||
updateBulkDeleteButton();
|
||||
});
|
||||
});
|
||||
|
||||
function updateSelectAllState() {
|
||||
const checkedBoxes = Array.from(mediaCheckboxes).filter(cb => cb.checked);
|
||||
|
||||
if (selectAllCheckbox) {
|
||||
selectAllCheckbox.checked = checkedBoxes.length === mediaCheckboxes.length && mediaCheckboxes.length > 0;
|
||||
selectAllCheckbox.indeterminate = checkedBoxes.length > 0 && checkedBoxes.length < mediaCheckboxes.length;
|
||||
}
|
||||
}
|
||||
|
||||
function updateBulkDeleteButton() {
|
||||
const checkedBoxes = Array.from(mediaCheckboxes).filter(cb => cb.checked);
|
||||
if (bulkDeleteBtn) {
|
||||
bulkDeleteBtn.style.display = checkedBoxes.length > 0 ? 'inline-block' : 'none';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function confirmBulkDelete() {
|
||||
const checkedBoxes = Array.from(document.querySelectorAll('.media-checkbox:checked'));
|
||||
if (checkedBoxes.length === 0) {
|
||||
alert('No media files selected.');
|
||||
return;
|
||||
}
|
||||
|
||||
const count = checkedBoxes.length;
|
||||
const message = `Are you sure you want to delete ${count} selected media file${count > 1 ? 's' : ''}? This action cannot be undone.`;
|
||||
|
||||
if (confirm(message)) {
|
||||
// Create a form with selected IDs
|
||||
const form = document.createElement('form');
|
||||
form.method = 'POST';
|
||||
form.action = '{{ url_for("bulk_delete_group_content", group_id=group.id) }}';
|
||||
|
||||
checkedBoxes.forEach(checkbox => {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'hidden';
|
||||
input.name = 'selected_content';
|
||||
input.value = checkbox.value;
|
||||
form.appendChild(input);
|
||||
});
|
||||
|
||||
document.body.appendChild(form);
|
||||
form.submit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
41
app/templates/player_auth.html
Normal file
41
app/templates/player_auth.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Player Authentication</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body.dark-mode {
|
||||
background-color: #121212;
|
||||
color: #ffffff;
|
||||
}
|
||||
.card.dark-mode {
|
||||
background-color: #1e1e1e;
|
||||
color: #ffffff;
|
||||
}
|
||||
.dark-mode label, .dark-mode th, .dark-mode td {
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="{{ 'dark-mode' if theme == 'dark' else '' }}">
|
||||
<div class="container py-5">
|
||||
<h1 class="text-center mb-4">Player Authentication</h1>
|
||||
<form action="{{ url_for('player_fullscreen', player_id=player_id) }}" method="post">
|
||||
<div class="mb-3">
|
||||
<label for="hostname" class="form-label">Hostname</label>
|
||||
<input type="text" class="form-control" id="hostname" name="hostname" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">Password</label>
|
||||
<input type="password" class="form-control" id="password" name="password" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="quickconnect_password" class="form-label">Quick Connect Password</label>
|
||||
<input type="password" class="form-control" id="quickconnect_password" name="quickconnect_password">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Authenticate</button>
|
||||
</form>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
68
app/templates/player_fullscreen.html
Normal file
68
app/templates/player_fullscreen.html
Normal file
@@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Player Fullscreen</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content-item {
|
||||
display: none;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
object-fit: cover;
|
||||
}
|
||||
.content-item.active {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
{% for item in content %}
|
||||
{% if item.file_name.endswith('.mp4') %}
|
||||
<video class="content-item" data-duration="{{ item.duration }}" controls>
|
||||
<source src="{{ url_for('static', filename='uploads/' ~ item.file_name) }}" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
{% elif item.file_name.endswith('.pdf') %}
|
||||
<object data="{{ url_for('static', filename='uploads/' ~ item.file_name) }}" type="application/pdf" class="content-item" data-duration="{{ item.duration }}"></object>
|
||||
{% else %}
|
||||
<img src="{{ url_for('static', filename='uploads/' ~ item.file_name) }}" class="content-item" data-duration="{{ item.duration }}" alt="{{ item.file_name }}">
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const items = document.querySelectorAll('.content-item');
|
||||
let currentIndex = 0;
|
||||
|
||||
function showNextItem() {
|
||||
items.forEach(item => item.classList.remove('active'));
|
||||
const currentItem = items[currentIndex];
|
||||
currentItem.classList.add('active');
|
||||
|
||||
const duration = parseInt(currentItem.getAttribute('data-duration'), 10) * 1000;
|
||||
if (currentItem.tagName === 'VIDEO') {
|
||||
currentItem.play();
|
||||
currentItem.onended = () => {
|
||||
currentIndex = (currentIndex + 1) % items.length;
|
||||
showNextItem();
|
||||
};
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
currentIndex = (currentIndex + 1) % items.length;
|
||||
showNextItem();
|
||||
}, duration);
|
||||
}
|
||||
}
|
||||
|
||||
showNextItem();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
343
app/templates/player_page.html
Normal file
343
app/templates/player_page.html
Normal file
@@ -0,0 +1,343 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Player Schedule</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body.dark-mode {
|
||||
background-color: #121212;
|
||||
color: #ffffff;
|
||||
}
|
||||
.card.dark-mode {
|
||||
background-color: #1e1e1e;
|
||||
color: #ffffff;
|
||||
}
|
||||
.dark-mode label, .dark-mode th, .dark-mode td {
|
||||
color: #ffffff;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.btn {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
.card {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
.sortable-list li {
|
||||
cursor: move;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.sortable-list li.dragging {
|
||||
opacity: 0.5;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
cursor: grab;
|
||||
color: #aaa;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.drag-over {
|
||||
border-top: 2px solid #0d6efd;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="{% if theme == 'dark' %}dark-mode{% endif %}">
|
||||
<div class="container py-5">
|
||||
<h1 class="text-center mb-4">Player Schedule for {{ player.username }}</h1>
|
||||
|
||||
<!-- Player Info Section -->
|
||||
<div class="card mb-4 {% if theme == 'dark' %}dark-mode{% endif %}">
|
||||
<div class="card-header bg-info text-white">
|
||||
<h2>Player Info</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p><strong>Player Name:</strong> {{ player.username }}</p>
|
||||
<p><strong>Hostname:</strong> {{ player.hostname }}</p>
|
||||
{% if current_user.role == 'admin' %}
|
||||
<a href="{{ url_for('edit_player', player_id=player.id, return_url=url_for('player_page', player_id=player.id)) }}" class="btn btn-warning">Update</a>
|
||||
<form action="{{ url_for('delete_player', player_id=player.id) }}" method="post" style="display:inline;">
|
||||
<button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this player?');">Delete</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Group Membership Section -->
|
||||
<div class="mb-4">
|
||||
{% if player.groups %}
|
||||
<h4 class="text-center">Member of Group(s):</h4>
|
||||
<ul class="list-group">
|
||||
{% for group in player.groups %}
|
||||
<li class="list-group-item {% if theme == 'dark' %}dark-mode{% endif %}">{{ group.name }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<p class="text-center">This player is not a member of any groups.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Media Management Section -->
|
||||
{% if current_user.role == 'admin' %}
|
||||
<div class="card mb-4 {% if theme == 'dark' %}dark-mode{% endif %}">
|
||||
<div class="card-header bg-info text-white">
|
||||
<h2>Manage Media</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if content %}
|
||||
<!-- Bulk Actions Controls -->
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="selectAll" {% if player.groups %}disabled{% endif %}>
|
||||
<label class="form-check-label" for="selectAll">
|
||||
Select All
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 text-end">
|
||||
<button type="button" class="btn btn-danger" id="bulkDeleteBtn" {% if player.groups %}disabled{% endif %} style="display:none;" onclick="confirmBulkDelete()">
|
||||
<i class="bi bi-trash"></i> Delete Selected
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bulk Delete Form -->
|
||||
<form id="bulkDeleteForm" action="{{ url_for('bulk_delete_player_content', player_id=player.id) }}" method="post" style="display:none;">
|
||||
<input type="hidden" name="selected_content_ids" id="selectedContentIds">
|
||||
</form>
|
||||
|
||||
<ul class="list-group sortable-list" id="mediaList">
|
||||
{% for media in content %}
|
||||
<li class="list-group-item {% if theme == 'dark' %}dark-mode{% endif %}"
|
||||
draggable="true"
|
||||
data-id="{{ media.id }}"
|
||||
data-position="{{ loop.index0 }}">
|
||||
<div class="d-flex flex-column flex-md-row align-items-md-center">
|
||||
<!-- Checkbox for bulk selection -->
|
||||
<div class="me-2">
|
||||
<input class="form-check-input media-checkbox"
|
||||
type="checkbox"
|
||||
name="selected_content"
|
||||
value="{{ media.id }}"
|
||||
{% if player.groups %}disabled{% endif %}>
|
||||
</div>
|
||||
|
||||
<!-- Drag handle -->
|
||||
<div class="drag-handle me-2" title="Drag to reorder">
|
||||
<i class="bi bi-grip-vertical"></i>
|
||||
☰
|
||||
</div>
|
||||
|
||||
<!-- Media Thumbnail and Name -->
|
||||
<div class="flex-grow-1 mb-2 mb-md-0 d-flex align-items-center">
|
||||
<img src="{{ url_for('static', filename='uploads/' ~ media.file_name) }}"
|
||||
alt="thumbnail"
|
||||
style="width: 48px; height: 48px; object-fit: cover; margin-right: 10px; border-radius: 4px;"
|
||||
onerror="this.style.display='none';">
|
||||
<p class="mb-0"><strong>Media Name:</strong> {{ media.file_name }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="d-flex flex-wrap justify-content-start">
|
||||
<form action="{{ url_for('edit_content', content_id=media.id) }}" method="post" class="d-flex align-items-center me-2 mb-2">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">seconds</span>
|
||||
<input type="number" class="form-control {% if theme == 'dark' %}dark-mode{% endif %}" name="duration" value="{{ media.duration }}" {% if player.groups %}disabled{% endif %} required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-warning ms-2" {% if player.groups %}disabled{% endif %}>Edit</button>
|
||||
</form>
|
||||
<form action="{{ url_for('delete_content', content_id=media.id) }}" method="post" class="mb-2">
|
||||
<button type="submit" class="btn btn-danger" {% if player.groups %}disabled{% endif %} onclick="return confirm('Are you sure you want to delete this media?');">Delete</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<!-- Add a save button for the reordering -->
|
||||
<button id="saveOrder" class="btn btn-success mt-3" {% if player.groups %}disabled{% endif %}>Save Playlist Order</button>
|
||||
{% else %}
|
||||
<p class="text-center">No media uploaded for this player.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<a href="{{ url_for('dashboard') }}" class="btn btn-secondary">Back to Dashboard</a>
|
||||
<a href="{{ url_for('player_fullscreen', player_id=player.id) }}" class="btn btn-primary">Full Screen</a>
|
||||
<a href="{{ url_for('upload_content', target_type='player', target_id=player.id, return_url=url_for('player_page', player_id=player.id)) }}"
|
||||
class="btn btn-success"
|
||||
{% if player.groups %}disabled onclick="return false;"{% endif %}>
|
||||
{% if player.groups %}Manage Media by Group{% else %}Upload Media{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Only enable if the player is not in a group (if the buttons are not disabled)
|
||||
if (!document.querySelector('#saveOrder').hasAttribute('disabled')) {
|
||||
const mediaList = document.getElementById('mediaList');
|
||||
let draggedItem = null;
|
||||
|
||||
// Initialize drag events for all items
|
||||
const items = mediaList.querySelectorAll('li');
|
||||
items.forEach(item => {
|
||||
// Drag start
|
||||
item.addEventListener('dragstart', function(e) {
|
||||
draggedItem = item;
|
||||
setTimeout(() => {
|
||||
item.classList.add('dragging');
|
||||
}, 0);
|
||||
});
|
||||
|
||||
// Drag end
|
||||
item.addEventListener('dragend', function() {
|
||||
item.classList.remove('dragging');
|
||||
draggedItem = null;
|
||||
updatePositions();
|
||||
});
|
||||
|
||||
// Drag over
|
||||
item.addEventListener('dragover', function(e) {
|
||||
e.preventDefault();
|
||||
if (item !== draggedItem) {
|
||||
const rect = item.getBoundingClientRect();
|
||||
const y = e.clientY - rect.top;
|
||||
const height = rect.height;
|
||||
|
||||
if (y < height / 2) {
|
||||
mediaList.insertBefore(draggedItem, item);
|
||||
} else {
|
||||
mediaList.insertBefore(draggedItem, item.nextSibling);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Save button click handler
|
||||
document.getElementById('saveOrder').addEventListener('click', function() {
|
||||
// Collect new order
|
||||
const newOrder = [];
|
||||
mediaList.querySelectorAll('li').forEach((item, index) => {
|
||||
newOrder.push({
|
||||
id: item.dataset.id,
|
||||
position: index
|
||||
});
|
||||
});
|
||||
|
||||
// Send to server
|
||||
fetch('{{ url_for("update_content_order", player_id=player.id) }}', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': '{{ csrf_token() if csrf_token else "" }}'
|
||||
},
|
||||
body: JSON.stringify({items: newOrder})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
alert('Playlist order updated successfully!');
|
||||
console.log('Playlist version updated to:', data.new_version);
|
||||
} else {
|
||||
alert('Error updating playlist order: ' + (data.error || 'Unknown error'));
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
alert('An error occurred while updating the playlist order.');
|
||||
});
|
||||
});
|
||||
|
||||
// Update positions in the UI
|
||||
function updatePositions() {
|
||||
mediaList.querySelectorAll('li').forEach((item, index) => {
|
||||
item.dataset.position = index;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Bulk selection functionality
|
||||
const selectAllCheckbox = document.getElementById('selectAll');
|
||||
const mediaCheckboxes = document.querySelectorAll('.media-checkbox');
|
||||
const bulkDeleteBtn = document.getElementById('bulkDeleteBtn');
|
||||
|
||||
// Select all functionality
|
||||
if (selectAllCheckbox) {
|
||||
selectAllCheckbox.addEventListener('change', function() {
|
||||
mediaCheckboxes.forEach(checkbox => {
|
||||
if (!checkbox.disabled) {
|
||||
checkbox.checked = this.checked;
|
||||
}
|
||||
});
|
||||
updateBulkDeleteButton();
|
||||
});
|
||||
}
|
||||
|
||||
// Individual checkbox change
|
||||
mediaCheckboxes.forEach(checkbox => {
|
||||
checkbox.addEventListener('change', function() {
|
||||
updateSelectAllState();
|
||||
updateBulkDeleteButton();
|
||||
});
|
||||
});
|
||||
|
||||
function updateSelectAllState() {
|
||||
const enabledCheckboxes = Array.from(mediaCheckboxes).filter(cb => !cb.disabled);
|
||||
const checkedBoxes = enabledCheckboxes.filter(cb => cb.checked);
|
||||
|
||||
if (selectAllCheckbox) {
|
||||
selectAllCheckbox.checked = checkedBoxes.length === enabledCheckboxes.length && enabledCheckboxes.length > 0;
|
||||
selectAllCheckbox.indeterminate = checkedBoxes.length > 0 && checkedBoxes.length < enabledCheckboxes.length;
|
||||
}
|
||||
}
|
||||
|
||||
function updateBulkDeleteButton() {
|
||||
const checkedBoxes = Array.from(mediaCheckboxes).filter(cb => cb.checked);
|
||||
if (bulkDeleteBtn) {
|
||||
bulkDeleteBtn.style.display = checkedBoxes.length > 0 ? 'inline-block' : 'none';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function confirmBulkDelete() {
|
||||
const checkedBoxes = Array.from(document.querySelectorAll('.media-checkbox:checked'));
|
||||
if (checkedBoxes.length === 0) {
|
||||
alert('No media files selected.');
|
||||
return;
|
||||
}
|
||||
|
||||
const count = checkedBoxes.length;
|
||||
const message = `Are you sure you want to delete ${count} selected media file${count > 1 ? 's' : ''}? This action cannot be undone.`;
|
||||
|
||||
if (confirm(message)) {
|
||||
// Create a form with selected IDs
|
||||
const form = document.createElement('form');
|
||||
form.method = 'POST';
|
||||
form.action = '{{ url_for("bulk_delete_player_content", player_id=player.id) }}';
|
||||
|
||||
checkedBoxes.forEach(checkbox => {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'hidden';
|
||||
input.name = 'selected_content';
|
||||
input.value = checkbox.value;
|
||||
form.appendChild(input);
|
||||
});
|
||||
|
||||
document.body.appendChild(form);
|
||||
form.submit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
57
app/templates/register.html
Normal file
57
app/templates/register.html
Normal file
@@ -0,0 +1,57 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Register</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body.dark-mode {
|
||||
background-color: #121212;
|
||||
color: #ffffff;
|
||||
}
|
||||
.card.dark-mode {
|
||||
background-color: #1e1e1e;
|
||||
color: #ffffff;
|
||||
}
|
||||
.dark-mode label, .dark-mode th, .dark-mode td {
|
||||
color: #ffffff;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.btn {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="{{ 'dark-mode' if theme == 'dark' else '' }}">
|
||||
<div class="container py-5">
|
||||
<h1 class="text-center mb-4">Register</h1>
|
||||
<form action="{{ url_for('register') }}" method="post">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-12">
|
||||
<div class="mb-3">
|
||||
<label for="username" class="form-label">Username</label>
|
||||
<input type="text" class="form-control {{ 'dark-mode' if theme == 'dark' else '' }}" id="username" name="username" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-12">
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">Password</label>
|
||||
<input type="password" class="form-control {{ 'dark-mode' if theme == 'dark' else '' }}" id="password" name="password" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<button type="submit" class="btn btn-primary">Register</button>
|
||||
<a href="{{ url_for('login') }}" class="btn btn-secondary mt-3">Back to Login</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
463
app/templates/upload_content.html
Normal file
463
app/templates/upload_content.html
Normal file
@@ -0,0 +1,463 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Upload Content</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body.dark-mode {
|
||||
background-color: #121212;
|
||||
color: #ffffff;
|
||||
}
|
||||
.card.dark-mode {
|
||||
background-color: #1e1e1e;
|
||||
color: #ffffff;
|
||||
}
|
||||
.dark-mode label, .dark-mode th, .dark-mode td {
|
||||
color: #ffffff;
|
||||
}
|
||||
.logo {
|
||||
max-height: 100px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
/* Modal styling for dark mode */
|
||||
.modal-content.dark-mode {
|
||||
background-color: #1e1e1e;
|
||||
color: #ffffff;
|
||||
}
|
||||
.modal-header.dark-mode {
|
||||
border-bottom: 1px solid #444;
|
||||
}
|
||||
.modal-footer.dark-mode {
|
||||
border-top: 1px solid #444;
|
||||
}
|
||||
.progress-bar {
|
||||
background-color: #007bff;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.btn {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
.card {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="{{ 'dark-mode' if theme == 'dark' else '' }}">
|
||||
<div class="container py-5">
|
||||
<div class="d-flex justify-content-start align-items-center mb-4">
|
||||
{% if logo_exists %}
|
||||
<img src="{{ url_for('static', filename='uploads/logo.png') }}" alt="Logo" class="logo">
|
||||
{% endif %}
|
||||
<h1 class="mb-0">Upload Content</h1>
|
||||
</div>
|
||||
<form id="upload-form" action="{{ url_for('upload_content') }}" method="post" enctype="multipart/form-data" onsubmit="showStatusModal()">
|
||||
<input type="hidden" name="return_url" value="{{ return_url }}">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-12">
|
||||
<div class="mb-3">
|
||||
<label for="target_type" class="form-label">Target Type:</label>
|
||||
<select name="target_type" id="target_type" class="form-select" required onchange="updateTargetIdOptions()">
|
||||
<option value="" disabled selected>Select Target Type</option>
|
||||
<option value="player" {% if target_type == 'player' %}selected{% endif %}>Player</option>
|
||||
<option value="group" {% if target_type == 'group' %}selected{% endif %}>Group</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-12">
|
||||
<div class="mb-3">
|
||||
<label for="target_id" class="form-label">Target ID:</label>
|
||||
<select name="target_id" id="target_id" class="form-select" required>
|
||||
{% if target_type == 'player' %}
|
||||
<optgroup label="Players">
|
||||
{% for player in players %}
|
||||
<option value="{{ player.id }}" {% if target_id == player.id %}selected{% endif %}>{{ player.username }}</option>
|
||||
{% endfor %}
|
||||
</optgroup>
|
||||
{% elif target_type == 'group' %}
|
||||
<optgroup label="Groups">
|
||||
{% for group in groups %}
|
||||
<option value="{{ group.id }}" {% if target_id == group.id %}selected{% endif %}>{{ group.name }}</option>
|
||||
{% endfor %}
|
||||
</optgroup>
|
||||
{% else %}
|
||||
<option value="" disabled selected>Select a Target ID</option>
|
||||
{% endif %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-12">
|
||||
<div class="mb-3">
|
||||
<label for="media_type" class="form-label">Media Type:</label>
|
||||
<select name="media_type" id="media_type" class="form-select" required>
|
||||
<option value="image">Image</option>
|
||||
<option value="video">Video</option>
|
||||
<option value="pdf">PDF</option>
|
||||
<option value="ppt">PPT/PPTX</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-12">
|
||||
<div class="mb-3">
|
||||
<label for="files" class="form-label">Files:</label>
|
||||
<input type="file" name="files" id="files" class="form-control" multiple required onchange="handleFileChange()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-12">
|
||||
<div class="mb-3">
|
||||
<label for="duration" class="form-label">Duration (seconds):</label>
|
||||
<input type="number" name="duration" id="duration" class="form-control" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<button type="submit" id="submit-button" class="btn btn-primary">Upload</button>
|
||||
<a href="{{ return_url }}" class="btn btn-secondary mt-3">Back</a>
|
||||
<a href="{{ url_for('dashboard') }}" class="btn btn-secondary mt-3">Back to Dashboard</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Modal for Status Updates -->
|
||||
<div class="modal fade" id="statusModal" tabindex="-1" aria-labelledby="statusModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content {{ 'dark-mode' if theme == 'dark' else '' }}">
|
||||
<div class="modal-header {{ 'dark-mode' if theme == 'dark' else '' }}">
|
||||
<h5 class="modal-title" id="statusModalLabel">Processing Files</h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p id="status-message">Uploading and processing your files. Please wait...</p>
|
||||
|
||||
<!-- File Processing Progress -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-bold">File Processing Progress</label>
|
||||
<div class="progress" style="height: 25px;">
|
||||
<div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- System Monitoring in Modal -->
|
||||
{% if system_info %}
|
||||
<div class="mt-4">
|
||||
<h6 class="mb-3">📊 Server Performance During Upload</h6>
|
||||
<div class="row">
|
||||
<!-- CPU Usage -->
|
||||
<div class="col-md-4 col-12 mb-3">
|
||||
<label class="form-label">CPU Usage</label>
|
||||
<div class="progress" style="height: 20px;">
|
||||
<div id="cpu-progress" class="progress-bar
|
||||
{% if system_info.cpu_percent < 50 %}bg-success
|
||||
{% elif system_info.cpu_percent < 80 %}bg-warning
|
||||
{% else %}bg-danger{% endif %}"
|
||||
role="progressbar"
|
||||
style="width: {{ system_info.cpu_percent }}%;">
|
||||
{{ system_info.cpu_percent }}%
|
||||
</div>
|
||||
</div>
|
||||
<small class="text-muted">{{ system_info.cpu_count }} cores available</small>
|
||||
</div>
|
||||
|
||||
<!-- Memory Usage -->
|
||||
<div class="col-md-4 col-12 mb-3">
|
||||
<label class="form-label">Memory Usage</label>
|
||||
<div class="progress" style="height: 20px;">
|
||||
<div id="memory-progress" class="progress-bar
|
||||
{% if system_info.memory_percent < 60 %}bg-success
|
||||
{% elif system_info.memory_percent < 85 %}bg-warning
|
||||
{% else %}bg-danger{% endif %}"
|
||||
role="progressbar"
|
||||
style="width: {{ system_info.memory_percent }}%;">
|
||||
{{ system_info.memory_percent }}%
|
||||
</div>
|
||||
</div>
|
||||
<small class="text-muted" id="memory-text">{{ system_info.memory_used }}GB / {{ system_info.memory_total }}GB</small>
|
||||
</div>
|
||||
|
||||
<!-- Disk Usage -->
|
||||
<div class="col-md-4 col-12 mb-3">
|
||||
<label class="form-label">Disk Space</label>
|
||||
<div class="progress" style="height: 20px;">
|
||||
<div id="disk-progress" class="progress-bar
|
||||
{% if system_info.disk_percent < 70 %}bg-success
|
||||
{% elif system_info.disk_percent < 90 %}bg-warning
|
||||
{% else %}bg-danger{% endif %}"
|
||||
role="progressbar"
|
||||
style="width: {{ system_info.disk_percent }}%;">
|
||||
{{ system_info.disk_percent }}%
|
||||
</div>
|
||||
</div>
|
||||
<small class="text-muted" id="disk-text">{{ system_info.disk_free }}GB free</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Storage Summary -->
|
||||
<div class="row mt-2">
|
||||
<div class="col-md-6 col-12 text-center">
|
||||
<strong>Current Media Storage:</strong>
|
||||
<span class="text-primary" id="storage-size">{{ system_info.upload_folder_size }}GB</span>
|
||||
</div>
|
||||
<div class="col-md-6 col-12 text-center">
|
||||
<strong>Last Updated:</strong>
|
||||
<span class="text-muted" id="modal-last-update">Just now</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="modal-footer {{ 'dark-mode' if theme == 'dark' else '' }}">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" disabled>Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
function showStatusModal() {
|
||||
console.log("Processing popup triggered");
|
||||
const statusModal = new bootstrap.Modal(document.getElementById('statusModal'));
|
||||
statusModal.show();
|
||||
|
||||
// Update status message based on media type
|
||||
const mediaType = document.getElementById('media_type').value;
|
||||
const statusMessage = document.getElementById('status-message');
|
||||
|
||||
switch(mediaType) {
|
||||
case 'image':
|
||||
statusMessage.textContent = 'Uploading images...';
|
||||
break;
|
||||
case 'video':
|
||||
statusMessage.textContent = 'Uploading and processing video. This may take a while...';
|
||||
break;
|
||||
case 'pdf':
|
||||
statusMessage.textContent = 'Converting PDF to 4K images. This may take a while...';
|
||||
break;
|
||||
case 'ppt':
|
||||
statusMessage.textContent = 'Converting PowerPoint to 4K images. This may take a while...';
|
||||
break;
|
||||
default:
|
||||
statusMessage.textContent = 'Uploading and processing your files. Please wait...';
|
||||
}
|
||||
|
||||
// Start system monitoring updates in modal
|
||||
{% if system_info %}
|
||||
startModalSystemMonitoring();
|
||||
{% endif %}
|
||||
|
||||
// Simulate progress updates
|
||||
const progressBar = document.getElementById('progress-bar');
|
||||
let progress = 0;
|
||||
const interval = setInterval(() => {
|
||||
// For slow processes, increment more slowly
|
||||
const increment = (mediaType === 'image') ? 20 : 5;
|
||||
progress += increment;
|
||||
|
||||
if (progress >= 100) {
|
||||
clearInterval(interval);
|
||||
statusMessage.textContent = 'Files uploaded and processed successfully!';
|
||||
|
||||
// Stop system monitoring updates
|
||||
{% if system_info %}
|
||||
stopModalSystemMonitoring();
|
||||
{% endif %}
|
||||
|
||||
// Enable the close button
|
||||
document.querySelector('[data-bs-dismiss="modal"]').disabled = false;
|
||||
} else {
|
||||
progressBar.style.width = `${progress}%`;
|
||||
progressBar.setAttribute('aria-valuenow', progress);
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
|
||||
{% if system_info %}
|
||||
let modalSystemInterval;
|
||||
|
||||
function updateModalSystemInfo() {
|
||||
fetch('/api/system_info')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.error) {
|
||||
console.warn('Could not fetch system info:', data.error);
|
||||
return;
|
||||
}
|
||||
|
||||
// Update CPU
|
||||
const cpuProgress = document.getElementById('cpu-progress');
|
||||
if (cpuProgress) {
|
||||
cpuProgress.style.width = data.cpu_percent + '%';
|
||||
cpuProgress.textContent = data.cpu_percent + '%';
|
||||
cpuProgress.className = 'progress-bar ' +
|
||||
(data.cpu_percent < 50 ? 'bg-success' :
|
||||
data.cpu_percent < 80 ? 'bg-warning' : 'bg-danger');
|
||||
}
|
||||
|
||||
// Update Memory
|
||||
const memoryProgress = document.getElementById('memory-progress');
|
||||
const memoryText = document.getElementById('memory-text');
|
||||
if (memoryProgress) {
|
||||
memoryProgress.style.width = data.memory_percent + '%';
|
||||
memoryProgress.textContent = data.memory_percent + '%';
|
||||
memoryProgress.className = 'progress-bar ' +
|
||||
(data.memory_percent < 60 ? 'bg-success' :
|
||||
data.memory_percent < 85 ? 'bg-warning' : 'bg-danger');
|
||||
}
|
||||
if (memoryText) {
|
||||
memoryText.textContent = data.memory_used + 'GB / ' + data.memory_total + 'GB';
|
||||
}
|
||||
|
||||
// Update Disk
|
||||
const diskProgress = document.getElementById('disk-progress');
|
||||
const diskText = document.getElementById('disk-text');
|
||||
if (diskProgress) {
|
||||
diskProgress.style.width = data.disk_percent + '%';
|
||||
diskProgress.textContent = data.disk_percent + '%';
|
||||
diskProgress.className = 'progress-bar ' +
|
||||
(data.disk_percent < 70 ? 'bg-success' :
|
||||
data.disk_percent < 90 ? 'bg-warning' : 'bg-danger');
|
||||
}
|
||||
if (diskText) {
|
||||
diskText.textContent = data.disk_free + 'GB free';
|
||||
}
|
||||
|
||||
// Update storage size
|
||||
const storageSize = document.getElementById('storage-size');
|
||||
if (storageSize) {
|
||||
storageSize.textContent = data.upload_folder_size + 'GB';
|
||||
}
|
||||
|
||||
// Update timestamp
|
||||
const lastUpdate = document.getElementById('modal-last-update');
|
||||
if (lastUpdate) {
|
||||
lastUpdate.textContent = new Date().toLocaleTimeString();
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.warn('Modal system monitoring update failed:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function startModalSystemMonitoring() {
|
||||
// Update immediately
|
||||
updateModalSystemInfo();
|
||||
// Then update every 3 seconds for real-time monitoring during upload
|
||||
modalSystemInterval = setInterval(updateModalSystemInfo, 3000);
|
||||
}
|
||||
|
||||
function stopModalSystemMonitoring() {
|
||||
if (modalSystemInterval) {
|
||||
clearInterval(modalSystemInterval);
|
||||
modalSystemInterval = null;
|
||||
}
|
||||
}
|
||||
{% endif %}
|
||||
|
||||
function updateTargetIdOptions() {
|
||||
const targetType = document.getElementById('target_type').value;
|
||||
const targetIdSelect = document.getElementById('target_id');
|
||||
targetIdSelect.innerHTML = ''; // Clear existing options
|
||||
|
||||
if (targetType === 'player') {
|
||||
const players = {{ players|tojson }};
|
||||
const optgroup = document.createElement('optgroup');
|
||||
optgroup.label = 'Players';
|
||||
players.forEach(player => {
|
||||
const option = document.createElement('option');
|
||||
option.value = player.id;
|
||||
option.textContent = player.username;
|
||||
optgroup.appendChild(option);
|
||||
});
|
||||
targetIdSelect.appendChild(optgroup);
|
||||
} else if (targetType === 'group') {
|
||||
const groups = {{ groups|tojson }};
|
||||
const optgroup = document.createElement('optgroup');
|
||||
optgroup.label = 'Groups';
|
||||
groups.forEach(group => {
|
||||
const option = document.createElement('option');
|
||||
option.value = group.id;
|
||||
option.textContent = group.name;
|
||||
optgroup.appendChild(option);
|
||||
});
|
||||
targetIdSelect.appendChild(optgroup);
|
||||
}
|
||||
}
|
||||
|
||||
function handleFileChange() {
|
||||
const mediaType = document.getElementById('media_type').value;
|
||||
const filesInput = document.getElementById('files');
|
||||
const durationInput = document.getElementById('duration');
|
||||
|
||||
if (mediaType === 'video' && filesInput.files.length > 0) {
|
||||
const file = filesInput.files[0];
|
||||
const video = document.createElement('video');
|
||||
|
||||
video.preload = 'metadata';
|
||||
video.onloadedmetadata = function () {
|
||||
window.URL.revokeObjectURL(video.src);
|
||||
const duration = Math.round(video.duration);
|
||||
durationInput.value = duration; // Set the duration in the input field
|
||||
};
|
||||
|
||||
video.src = URL.createObjectURL(file);
|
||||
}
|
||||
}
|
||||
|
||||
function showStatusModal() {
|
||||
console.log("Processing popup triggered");
|
||||
const statusModal = new bootstrap.Modal(document.getElementById('statusModal'));
|
||||
statusModal.show();
|
||||
|
||||
// Update status message based on media type
|
||||
const mediaType = document.getElementById('media_type').value;
|
||||
const statusMessage = document.getElementById('status-message');
|
||||
|
||||
switch(mediaType) {
|
||||
case 'image':
|
||||
statusMessage.textContent = 'Uploading images...';
|
||||
break;
|
||||
case 'video':
|
||||
statusMessage.textContent = 'Uploading and processing video. This may take a while...';
|
||||
break;
|
||||
case 'pdf':
|
||||
statusMessage.textContent = 'Converting PDF to images. This may take a while...';
|
||||
break;
|
||||
case 'ppt':
|
||||
statusMessage.textContent = 'Converting PowerPoint to images. This may take a while...';
|
||||
break;
|
||||
default:
|
||||
statusMessage.textContent = 'Uploading and processing your files. Please wait...';
|
||||
}
|
||||
|
||||
// Simulate progress updates
|
||||
const progressBar = document.getElementById('progress-bar');
|
||||
let progress = 0;
|
||||
const interval = setInterval(() => {
|
||||
// For slow processes, increment more slowly
|
||||
const increment = (mediaType === 'image') ? 20 : 5;
|
||||
progress += increment;
|
||||
|
||||
if (progress >= 100) {
|
||||
clearInterval(interval);
|
||||
statusMessage.textContent = 'Files uploaded and processed successfully!';
|
||||
|
||||
// Enable the close button
|
||||
document.querySelector('[data-bs-dismiss="modal"]').disabled = false;
|
||||
} else {
|
||||
progressBar.style.width = `${progress}%`;
|
||||
progressBar.setAttribute('aria-valuenow', progress);
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user