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
434 lines
24 KiB
HTML
434 lines
24 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>Admin 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">
|
|
</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 }}
|
|
<span class="badge bg-warning ms-1">Admin</span>
|
|
</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="{{ url_for('view_schedules') }}">
|
|
<i class="bi bi-calendar-event"></i> Schedules
|
|
</a>
|
|
<a class="btn btn-outline-light btn-sm me-2" href="{{ url_for('view_channels') }}">
|
|
<i class="bi bi-collection-play"></i> Channels
|
|
</a>
|
|
<a class="btn btn-outline-light btn-sm me-2" href="/user">
|
|
<i class="bi bi-person"></i> User View
|
|
</a>
|
|
<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-shield-check text-warning"></i> Admin Dashboard</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics Cards -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-3">
|
|
<div class="card text-white bg-primary">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between">
|
|
<div>
|
|
<h5 class="card-title">Players</h5>
|
|
<h2 class="mb-0">{{ players|length }}</h2>
|
|
</div>
|
|
<div class="align-self-center">
|
|
<i class="bi bi-display" style="font-size: 2rem;"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card text-white bg-info">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between">
|
|
<div>
|
|
<h5 class="card-title">Users</h5>
|
|
<h2 class="mb-0">{{ users|length }}</h2>
|
|
</div>
|
|
<div class="align-self-center">
|
|
<i class="bi bi-people" style="font-size: 2rem;"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card text-white bg-success">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between">
|
|
<div>
|
|
<h5 class="card-title">Media Files</h5>
|
|
<h2 class="mb-0">{{ media_files|length }}</h2>
|
|
</div>
|
|
<div class="align-self-center">
|
|
<i class="bi bi-file-earmark-image" style="font-size: 2rem;"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card text-white bg-warning">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between">
|
|
<div>
|
|
<h5 class="card-title">Active Schedules</h5>
|
|
<h2 class="mb-0">{{ schedules|length if schedules else 0 }}</h2>
|
|
</div>
|
|
<div class="align-self-center">
|
|
<i class="bi bi-calendar-event" style="font-size: 2rem;"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Activity Log Section -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0"><i class="bi bi-activity"></i> System Activity Monitor</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: 350px; 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-dark"></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 align-items-start">
|
|
<div>
|
|
<h6 class="mb-1">
|
|
<span class="badge {% if activity.user.is_admin %}bg-warning text-dark{% else %}bg-primary{% endif %}">
|
|
<i class="bi bi-person-circle"></i> {{ activity.user.username }}
|
|
</span>
|
|
{% if activity.action_type == 'upload' %}
|
|
<span class="badge bg-success ms-1">Upload</span>
|
|
{% elif activity.action_type == 'delete' %}
|
|
<span class="badge bg-danger ms-1">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 Mgmt</span>
|
|
{% elif activity.action_type == 'user_add' %}
|
|
<span class="badge bg-warning text-dark ms-1">User Mgmt</span>
|
|
{% endif %}
|
|
</h6>
|
|
<p class="mb-1 text-break">{{ activity.description }}</p>
|
|
</div>
|
|
<small class="text-muted text-nowrap ms-2">
|
|
{{ activity.timestamp.strftime('%m/%d %H:%M') }}
|
|
</small>
|
|
</div>
|
|
<small class="text-muted">
|
|
<i class="bi bi-clock"></i> {{ activity.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}
|
|
</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 system activity yet</h5>
|
|
<p class="text-muted">User and system activities will appear here</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Players Section -->
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card">
|
|
<div class="card-header bg-primary text-white">
|
|
<h5 class="mb-0"><i class="bi bi-display"></i> Players Management</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="post" action="/admin/add_player" class="mb-3">
|
|
<div class="row g-2">
|
|
<div class="col-md-4">
|
|
<input type="text" class="form-control" name="name" placeholder="Player Name" required>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<input type="text" class="form-control" name="device_id" placeholder="Device ID" required>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<input type="text" class="form-control" name="location" placeholder="Location">
|
|
</div>
|
|
<div class="col-12">
|
|
<button type="submit" class="btn btn-success btn-sm">
|
|
<i class="bi bi-plus-circle"></i> Add Player
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-sm">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Device ID</th>
|
|
<th>Location</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for player in players %}
|
|
<tr>
|
|
<td>{{ player.name }}</td>
|
|
<td><code>{{ player.device_id }}</code></td>
|
|
<td>{{ player.location or '-' }}</td>
|
|
<td>
|
|
{% if player.is_active %}
|
|
<span class="badge bg-success">Active</span>
|
|
{% else %}
|
|
<span class="badge bg-secondary">Inactive</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Users Section -->
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card">
|
|
<div class="card-header bg-info text-white">
|
|
<h5 class="mb-0"><i class="bi bi-people"></i> Users Management</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="post" action="/admin/add_user" class="mb-3">
|
|
<div class="row g-2">
|
|
<div class="col-md-5">
|
|
<input type="text" class="form-control" name="username" placeholder="Username" required>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<input type="password" class="form-control" name="password" placeholder="Password" required>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="is_admin" id="is_admin">
|
|
<label class="form-check-label" for="is_admin">Admin</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<button type="submit" class="btn btn-success btn-sm">
|
|
<i class="bi bi-person-plus"></i> Add User
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-sm">
|
|
<thead>
|
|
<tr>
|
|
<th>Username</th>
|
|
<th>Role</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for user in users %}
|
|
<tr>
|
|
<td>{{ user.username }}</td>
|
|
<td>
|
|
{% if user.is_admin %}
|
|
<span class="badge bg-warning">Admin</span>
|
|
{% else %}
|
|
<span class="badge bg-primary">User</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media Files Section -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header bg-success 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">{{ media_files|length }} files</span>
|
|
</div>
|
|
<div class="card-body">
|
|
{% if media_files %}
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Preview</th>
|
|
<th>File Name</th>
|
|
<th>Type</th>
|
|
<th>Uploaded By</th>
|
|
<th>Upload Date</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for file in media_files %}
|
|
<tr>
|
|
<td style="width: 80px;">
|
|
{% if file.file_type in ['jpg', 'jpeg', 'png', 'gif'] %}
|
|
<img src="/uploads/{{ file.filename }}" alt="{{ file.original_name }}"
|
|
class="img-thumbnail" style="max-width: 60px; max-height: 60px;">
|
|
{% elif file.file_type in ['mp4', 'avi', 'mov'] %}
|
|
<div class="text-center bg-light rounded p-2">
|
|
<i class="bi bi-play-circle text-primary" style="font-size: 2rem;"></i>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center bg-light rounded p-2">
|
|
<i class="bi bi-file-earmark text-secondary" style="font-size: 2rem;"></i>
|
|
</div>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<a href="/uploads/{{ file.filename }}" target="_blank" class="text-decoration-none">
|
|
{{ file.original_name }}
|
|
</a>
|
|
<br><small class="text-muted">{{ file.filename }}</small>
|
|
</td>
|
|
<td><span class="badge bg-secondary">{{ file.file_type.upper() }}</span></td>
|
|
<td>
|
|
{% set user = users|selectattr("id", "equalto", file.uploaded_by)|first %}
|
|
{% if user %}
|
|
<span class="badge {% if user.is_admin %}bg-warning{% else %}bg-primary{% endif %}">
|
|
<i class="bi bi-person"></i> {{ user.username }}
|
|
{% if user.is_admin %} (Admin){% endif %}
|
|
</span>
|
|
{% else %}
|
|
<span class="badge bg-secondary">Unknown User</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{{ file.upload_date.strftime('%Y-%m-%d') }}<br>
|
|
<small class="text-muted">{{ file.upload_date.strftime('%H:%M') }}</small>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group" role="group">
|
|
<a href="/uploads/{{ file.filename }}" class="btn btn-sm btn-outline-primary" target="_blank" title="View">
|
|
<i class="bi bi-eye"></i>
|
|
</a>
|
|
<a href="/delete/{{ file.id }}" class="btn btn-sm btn-outline-danger"
|
|
onclick="return confirm('Delete {{ file.original_name }}?')" title="Delete">
|
|
<i class="bi bi-trash"></i>
|
|
</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-5">
|
|
<i class="bi bi-file-earmark-image text-muted" style="font-size: 4rem;"></i>
|
|
<h4 class="text-muted mt-3">No media files uploaded yet</h4>
|
|
<p class="text-muted">Upload the first file using the form above!</p>
|
|
</div>
|
|
{% endif %}
|
|
</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>
|