ab36454574
- Complete Flask web application for digital signage management - Streaming channels for organized content delivery - User authentication with admin/user roles - Bootstrap UI with light/dark theme support - File upload and management system - Activity logging and monitoring - API endpoints for Info-Beamer device integration - Database models for channels, content, users, and activity logs
290 lines
15 KiB
HTML
290 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-bs-theme="light">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>User Dashboard - Info-Beamer</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
|
|
<style>
|
|
.media-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
.media-card {
|
|
transition: transform 0.2s;
|
|
}
|
|
.media-card:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
.file-preview {
|
|
height: 150px;
|
|
background: #f8f9fa;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 0.375rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
|
<div class="container">
|
|
<a class="navbar-brand fw-bold" href="/">
|
|
<i class="bi bi-display"></i> Info-Beamer
|
|
</a>
|
|
|
|
<div class="navbar-nav ms-auto">
|
|
<span class="navbar-text me-3">
|
|
<i class="bi bi-person-circle"></i> {{ current_user.username }}
|
|
{% if current_user.is_admin %}<span class="badge bg-warning ms-1">Admin</span>{% endif %}
|
|
</span>
|
|
<button class="btn btn-link text-light me-3" onclick="toggleTheme()" title="Toggle theme">
|
|
<i class="bi bi-sun-fill" id="theme-icon"></i>
|
|
</button>
|
|
<a class="btn btn-outline-light btn-sm me-2" href="/schedules">
|
|
<i class="bi bi-calendar-event"></i> Schedules
|
|
</a>
|
|
{% if current_user.is_admin %}
|
|
<a class="btn btn-outline-light btn-sm me-2" href="/admin">
|
|
<i class="bi bi-shield-check"></i> Admin View
|
|
</a>
|
|
{% endif %}
|
|
<a class="btn btn-outline-light btn-sm" href="/logout">
|
|
<i class="bi bi-box-arrow-right"></i> Logout
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container mt-4">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<h1 class="mb-4"><i class="bi bi-person text-primary"></i> Media Management Dashboard</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Upload Section -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header bg-success text-white">
|
|
<h5 class="mb-0"><i class="bi bi-cloud-upload"></i> Upload Media</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="post" enctype="multipart/form-data" action="/upload" class="row g-3">
|
|
<div class="col-md-8">
|
|
<div class="input-group">
|
|
<input type="file" class="form-control" name="file" accept=".png,.jpg,.jpeg,.gif,.mp4,.avi,.mov,.pdf" required>
|
|
<button type="submit" class="btn btn-success">
|
|
<i class="bi bi-upload"></i> Upload
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<small class="text-muted">
|
|
Supported: Images, Videos, PDFs
|
|
</small>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media Files Section -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0"><i class="bi bi-file-earmark-image"></i> All Media Files</h5>
|
|
<span class="badge bg-light text-dark">{{ files|length }} files</span>
|
|
</div>
|
|
<div class="card-body">
|
|
{% if files %}
|
|
<div class="media-grid">
|
|
{% for file in files %}
|
|
<div class="card media-card">
|
|
<div class="file-preview">
|
|
{% if file.file_type in ['jpg', 'jpeg', 'png', 'gif'] %}
|
|
<img src="/uploads/{{ file.filename }}" alt="{{ file.original_name }}"
|
|
class="img-fluid rounded" style="max-height: 150px; max-width: 100%;">
|
|
{% elif file.file_type in ['mp4', 'avi', 'mov'] %}
|
|
<i class="bi bi-play-circle text-primary" style="font-size: 3rem;"></i>
|
|
{% else %}
|
|
<i class="bi bi-file-earmark text-secondary" style="font-size: 3rem;"></i>
|
|
{% endif %}
|
|
</div>
|
|
<div class="card-body">
|
|
<h6 class="card-title text-truncate" title="{{ file.original_name }}">
|
|
{{ file.original_name }}
|
|
</h6>
|
|
<p class="card-text">
|
|
<small class="text-muted">
|
|
<i class="bi bi-calendar"></i> {{ file.upload_date.strftime('%Y-%m-%d %H:%M') }}<br>
|
|
<span class="badge bg-secondary">{{ file.file_type.upper() }}</span>
|
|
{% for user in users if user.id == file.uploaded_by %}
|
|
<span class="badge {% if user.is_admin %}bg-warning{% else %}bg-info{% endif %} ms-1">
|
|
by {{ user.username }}
|
|
</span>
|
|
{% endfor %}
|
|
</small>
|
|
</p>
|
|
<div class="btn-group w-100" role="group">
|
|
<a href="/uploads/{{ file.filename }}" class="btn btn-outline-primary btn-sm" target="_blank">
|
|
<i class="bi bi-eye"></i> View
|
|
</a>
|
|
<a href="/delete/{{ file.id }}" class="btn btn-outline-danger btn-sm"
|
|
onclick="return confirm('Delete {{ file.original_name }}?')">
|
|
<i class="bi bi-trash"></i> Delete
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-5">
|
|
<i class="bi bi-cloud-upload text-muted" style="font-size: 4rem;"></i>
|
|
<h4 class="text-muted mt-3">No media files yet</h4>
|
|
<p class="text-muted">Upload your first image or video to get started!</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Activity Log Section -->
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0"><i class="bi bi-activity"></i> Recent Activity</h5>
|
|
<span class="badge bg-light text-dark">Live Feed</span>
|
|
</div>
|
|
<div class="card-body">
|
|
{% if activities %}
|
|
<div class="activity-feed" style="max-height: 400px; overflow-y: auto;">
|
|
{% for activity in activities %}
|
|
<div class="d-flex mb-3 pb-3 {% if not loop.last %}border-bottom{% endif %}">
|
|
<div class="flex-shrink-0 me-3">
|
|
{% if activity.action_type == 'upload' %}
|
|
<div class="bg-success rounded-circle p-2">
|
|
<i class="bi bi-cloud-upload text-white"></i>
|
|
</div>
|
|
{% elif activity.action_type == 'delete' %}
|
|
<div class="bg-danger rounded-circle p-2">
|
|
<i class="bi bi-trash text-white"></i>
|
|
</div>
|
|
{% elif activity.action_type == 'schedule' %}
|
|
<div class="bg-primary rounded-circle p-2">
|
|
<i class="bi bi-calendar-event text-white"></i>
|
|
</div>
|
|
{% elif activity.action_type == 'player_add' %}
|
|
<div class="bg-info rounded-circle p-2">
|
|
<i class="bi bi-display text-white"></i>
|
|
</div>
|
|
{% elif activity.action_type == 'user_add' %}
|
|
<div class="bg-warning rounded-circle p-2">
|
|
<i class="bi bi-person-plus text-white"></i>
|
|
</div>
|
|
{% else %}
|
|
<div class="bg-secondary rounded-circle p-2">
|
|
<i class="bi bi-gear text-white"></i>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<div class="d-flex justify-content-between">
|
|
<h6 class="mb-1">
|
|
<span class="badge {% if activity.user.is_admin %}bg-warning{% else %}bg-primary{% endif %}">
|
|
{{ activity.user.username }}
|
|
</span>
|
|
</h6>
|
|
<small class="text-muted">{{ activity.timestamp.strftime('%H:%M') }}</small>
|
|
</div>
|
|
<p class="mb-1">{{ activity.description }}</p>
|
|
<small class="text-muted">
|
|
{{ activity.timestamp.strftime('%Y-%m-%d') }}
|
|
{% if activity.action_type == 'upload' %}
|
|
<span class="badge bg-success ms-1">Media Upload</span>
|
|
{% elif activity.action_type == 'delete' %}
|
|
<span class="badge bg-danger ms-1">Media Delete</span>
|
|
{% elif activity.action_type == 'schedule' %}
|
|
<span class="badge bg-primary ms-1">Schedule</span>
|
|
{% elif activity.action_type == 'player_add' %}
|
|
<span class="badge bg-info ms-1">Player Management</span>
|
|
{% elif activity.action_type == 'user_add' %}
|
|
<span class="badge bg-warning ms-1">User Management</span>
|
|
{% endif %}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-4">
|
|
<i class="bi bi-activity text-muted" style="font-size: 3rem;"></i>
|
|
<h5 class="text-muted mt-3">No recent activity</h5>
|
|
<p class="text-muted">System activities will appear here</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- API Info Section -->
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header bg-info text-white">
|
|
<h5 class="mb-0"><i class="bi bi-code-slash"></i> API Information</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>Use these endpoints for your Info-Beamer devices:</p>
|
|
<ul class="list-unstyled">
|
|
<li><code>GET {{ request.host_url }}api/content</code> - Get all media files</li>
|
|
<li><code>GET {{ request.host_url }}api/playlist</code> - Get playlist configuration</li>
|
|
<li><code>POST {{ request.host_url }}api/player/<device_id>/heartbeat</code> - Player status</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
function toggleTheme() {
|
|
const html = document.documentElement;
|
|
const icon = document.getElementById('theme-icon');
|
|
const currentTheme = html.getAttribute('data-bs-theme');
|
|
|
|
if (currentTheme === 'light') {
|
|
html.setAttribute('data-bs-theme', 'dark');
|
|
icon.className = 'bi bi-moon-fill';
|
|
localStorage.setItem('theme', 'dark');
|
|
} else {
|
|
html.setAttribute('data-bs-theme', 'light');
|
|
icon.className = 'bi bi-sun-fill';
|
|
localStorage.setItem('theme', 'light');
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const savedTheme = localStorage.getItem('theme') || 'light';
|
|
const html = document.documentElement;
|
|
const icon = document.getElementById('theme-icon');
|
|
|
|
html.setAttribute('data-bs-theme', savedTheme);
|
|
if (savedTheme === 'dark') {
|
|
icon.className = 'bi bi-moon-fill';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|