Initial commit: Info-Beamer Streaming Channel System
- 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
This commit is contained in:
ske087
433
templates/admin.html
Normal file
433
templates/admin.html
Normal file
@@ -0,0 +1,433 @@
|
||||
<!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>
|
||||
75
templates/base.html
Normal file
75
templates/base.html
Normal file
@@ -0,0 +1,75 @@
|
||||
<!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>Info-Beamer Management</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>
|
||||
.theme-toggle {
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--bs-navbar-color);
|
||||
}
|
||||
.card {
|
||||
border: none;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
.media-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
</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">
|
||||
<button class="theme-toggle me-3" onclick="toggleTheme()" title="Toggle theme">
|
||||
<i class="bi bi-sun-fill" id="theme-icon"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="container mt-4">
|
||||
<div id="content"></div>
|
||||
</main>
|
||||
|
||||
<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>
|
||||
287
templates/channels.html
Normal file
287
templates/channels.html
Normal file
@@ -0,0 +1,287 @@
|
||||
<!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>Channel Management - Info-Beamer Admin</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>
|
||||
.channel-card {
|
||||
border-left: 4px solid #0d6efd;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.channel-card.default-channel {
|
||||
border-left-color: #198754;
|
||||
}
|
||||
.channel-card.inactive-channel {
|
||||
border-left-color: #6c757d;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.content-item {
|
||||
border-left: 3px solid #dc3545;
|
||||
background: var(--bs-light);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.content-item:hover {
|
||||
background: var(--bs-secondary-bg);
|
||||
}
|
||||
.content-item.image-item {
|
||||
border-left-color: #fd7e14;
|
||||
}
|
||||
.content-item.video-item {
|
||||
border-left-color: #0d6efd;
|
||||
}
|
||||
[data-bs-theme="dark"] .content-item {
|
||||
background: var(--bs-dark);
|
||||
}
|
||||
.player-badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
.duration-badge {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">
|
||||
<i class="bi bi-broadcast"></i> Info-Beamer Admin
|
||||
</a>
|
||||
<div class="navbar-nav ms-auto">
|
||||
<div class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-person-circle"></i> {{ current_user.username }}
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="{{ url_for('admin') }}"><i class="bi bi-house"></i> Dashboard</a></li>
|
||||
<li><a class="dropdown-item" href="{{ url_for('view_schedules') }}"><i class="bi bi-calendar"></i> Schedules</a></li>
|
||||
<li><a class="dropdown-item" href="{{ url_for('view_channels') }}"><i class="bi bi-collection-play"></i> Channels</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#" onclick="toggleTheme()"><i class="bi bi-moon"></i> <span id="theme-text">Dark Mode</span></a></li>
|
||||
<li><a class="dropdown-item" href="{{ url_for('logout') }}"><i class="bi bi-box-arrow-right"></i> Logout</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container mt-4">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h2><i class="bi bi-collection-play"></i> Streaming Channels</h2>
|
||||
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addChannelModal">
|
||||
<i class="bi bi-plus-circle"></i> Create Channel
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{% with messages = get_flashed_messages() %}
|
||||
{% if messages %}
|
||||
{% for message in messages %}
|
||||
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
||||
{{ message }}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
{% if channels %}
|
||||
<div class="row">
|
||||
{% for channel in channels %}
|
||||
<div class="col-md-6 col-lg-4 mb-4">
|
||||
<div class="card channel-card {{ 'default-channel' if channel.is_default else ('inactive-channel' if not channel.is_active else '') }}">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h6 class="mb-0">
|
||||
{{ channel.name }}
|
||||
{% if channel.is_default %}
|
||||
<span class="badge bg-success ms-2">Default</span>
|
||||
{% endif %}
|
||||
{% if not channel.is_active %}
|
||||
<span class="badge bg-secondary ms-2">Inactive</span>
|
||||
{% endif %}
|
||||
</h6>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-three-dots-vertical"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#" onclick="editChannel({{ channel.id }})">
|
||||
<i class="bi bi-pencil"></i> Edit
|
||||
</a></li>
|
||||
<li><a class="dropdown-item" href="#" onclick="manageContent({{ channel.id }})">
|
||||
<i class="bi bi-collection"></i> Manage Content
|
||||
</a></li>
|
||||
{% if not channel.is_default %}
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item text-danger" href="#" onclick="deleteChannel({{ channel.id }})">
|
||||
<i class="bi bi-trash"></i> Delete
|
||||
</a></li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="text-muted small">{{ channel.description or 'No description' }}</p>
|
||||
|
||||
<div class="mb-3">
|
||||
<h6 class="text-muted mb-2">Content ({{ channel.content|length }} items):</h6>
|
||||
{% if channel.content %}
|
||||
{% for content in channel.content[:3] %}
|
||||
<div class="content-item p-2 mb-1 rounded-2">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-truncate me-2">{{ content.media_file.original_name }}</small>
|
||||
<span class="badge bg-secondary duration-badge">{{ content.display_duration }}s</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% if channel.content|length > 3 %}
|
||||
<div class="text-center">
|
||||
<small class="text-muted">and {{ channel.content|length - 3 }} more...</small>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="text-center text-muted py-2">
|
||||
<i class="bi bi-inbox"></i><br>
|
||||
<small>No content assigned</small>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h6 class="text-muted mb-2">Players ({{ channel.players|length }}):</h6>
|
||||
{% if channel.players %}
|
||||
<div class="d-flex flex-wrap gap-1">
|
||||
{% for player in channel.players %}
|
||||
<span class="badge bg-info player-badge">{{ player.name or player.device_id }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<small class="text-muted">No players assigned</small>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-muted">
|
||||
<small>
|
||||
<i class="bi bi-person"></i> {{ channel.creator.username }}
|
||||
<span class="float-end">{{ channel.created_date.strftime('%Y-%m-%d') }}</span>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center py-5">
|
||||
<i class="bi bi-collection-play display-1 text-muted"></i>
|
||||
<h4 class="text-muted mt-3">No Channels Created</h4>
|
||||
<p class="text-muted">Create your first streaming channel to organize content for your displays.</p>
|
||||
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addChannelModal">
|
||||
<i class="bi bi-plus-circle"></i> Create First Channel
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Channel Modal -->
|
||||
<div class="modal fade" id="addChannelModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title"><i class="bi bi-plus-circle"></i> Create New Channel</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<form action="{{ url_for('add_channel') }}" method="post">
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
<label for="channelName" class="form-label">Channel Name</label>
|
||||
<input type="text" class="form-control" id="channelName" name="name" required
|
||||
placeholder="Enter channel name">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="channelDescription" class="form-label">Description</label>
|
||||
<textarea class="form-control" id="channelDescription" name="description" rows="3"
|
||||
placeholder="Optional description for this channel"></textarea>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="setDefault" name="is_default">
|
||||
<label class="form-check-label" for="setDefault">
|
||||
Set as default channel
|
||||
</label>
|
||||
<div class="form-text">The default channel is used for players without specific channel assignments.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Create Channel</button>
|
||||
</div>
|
||||
</form>
|
||||
</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 currentTheme = html.getAttribute('data-bs-theme');
|
||||
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||||
|
||||
html.setAttribute('data-bs-theme', newTheme);
|
||||
localStorage.setItem('theme', newTheme);
|
||||
|
||||
const themeText = document.getElementById('theme-text');
|
||||
const themeIcon = themeText.previousElementSibling;
|
||||
|
||||
if (newTheme === 'dark') {
|
||||
themeText.textContent = 'Light Mode';
|
||||
themeIcon.className = 'bi bi-sun';
|
||||
} else {
|
||||
themeText.textContent = 'Dark Mode';
|
||||
themeIcon.className = 'bi bi-moon';
|
||||
}
|
||||
}
|
||||
|
||||
const savedTheme = localStorage.getItem('theme') || 'light';
|
||||
document.documentElement.setAttribute('data-bs-theme', savedTheme);
|
||||
|
||||
if (savedTheme === 'dark') {
|
||||
const themeText = document.getElementById('theme-text');
|
||||
const themeIcon = themeText.previousElementSibling;
|
||||
themeText.textContent = 'Light Mode';
|
||||
themeIcon.className = 'bi bi-sun';
|
||||
}
|
||||
|
||||
function editChannel(channelId) {
|
||||
alert('Edit channel functionality coming soon!');
|
||||
}
|
||||
|
||||
function manageContent(channelId) {
|
||||
alert('Content management functionality coming soon!');
|
||||
}
|
||||
|
||||
function deleteChannel(channelId) {
|
||||
if (confirm('Are you sure you want to delete this channel?')) {
|
||||
alert('Delete channel functionality coming soon!');
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
const alerts = document.querySelectorAll('.alert');
|
||||
alerts.forEach(alert => {
|
||||
if (alert.classList.contains('alert-success')) {
|
||||
alert.style.transition = 'opacity 0.5s';
|
||||
alert.style.opacity = '0';
|
||||
setTimeout(() => alert.remove(), 500);
|
||||
}
|
||||
});
|
||||
}, 3000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
105
templates/login.html
Normal file
105
templates/login.html
Normal file
@@ -0,0 +1,105 @@
|
||||
<!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>Login - 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 class="bg-light">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="text-center mt-5 mb-4">
|
||||
<h1 class="h3 mb-3 fw-normal">
|
||||
<i class="bi bi-display text-primary"></i>
|
||||
Info-Beamer
|
||||
</h1>
|
||||
<p class="text-muted">Sign in to your account</p>
|
||||
</div>
|
||||
|
||||
<div class="card shadow">
|
||||
<div class="card-body p-4">
|
||||
{% with messages = get_flashed_messages() %}
|
||||
{% if messages %}
|
||||
{% for message in messages %}
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<i class="bi bi-exclamation-triangle"></i> {{ message }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
<form method="post">
|
||||
<div class="mb-3">
|
||||
<label for="username" class="form-label">Username</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">
|
||||
<i class="bi bi-person"></i>
|
||||
</span>
|
||||
<input type="text" class="form-control" id="username" name="username" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">Password</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">
|
||||
<i class="bi bi-lock"></i>
|
||||
</span>
|
||||
<input type="password" class="form-control" id="password" name="password" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary w-100">
|
||||
<i class="bi bi-box-arrow-in-right"></i> Sign In
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-3">
|
||||
<small class="text-muted">
|
||||
Default login: admin / admin
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-link position-fixed top-0 end-0 m-3" onclick="toggleTheme()" title="Toggle theme">
|
||||
<i class="bi bi-sun-fill" id="theme-icon"></i>
|
||||
</button>
|
||||
|
||||
<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>
|
||||
307
templates/schedules.html
Normal file
307
templates/schedules.html
Normal file
@@ -0,0 +1,307 @@
|
||||
<!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>Schedules - 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 }}
|
||||
{% 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="/user">
|
||||
<i class="bi bi-person"></i> Dashboard
|
||||
</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
|
||||
</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">
|
||||
{% with messages = get_flashed_messages() %}
|
||||
{% if messages %}
|
||||
{% for message in messages %}
|
||||
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
||||
{{ message }}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h1 class="mb-4"><i class="bi bi-calendar-event text-primary"></i> Content Scheduling</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Schedule 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-plus-circle"></i> Create New Schedule</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form method="post" action="/schedule/add">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label for="name" class="form-label">Schedule Name</label>
|
||||
<input type="text" class="form-control" name="name" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="media_file_id" class="form-label">Media File</label>
|
||||
<select class="form-select" name="media_file_id" required>
|
||||
<option value="">Select media file...</option>
|
||||
{% for file in media_files %}
|
||||
<option value="{{ file.id }}">{{ file.original_name }} ({{ file.file_type.upper() }})</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="start_time" class="form-label">Start Time</label>
|
||||
<input type="time" class="form-control" name="start_time" required>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="end_time" class="form-label">End Time</label>
|
||||
<input type="time" class="form-control" name="end_time" required>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="duration" class="form-label">Duration (seconds)</label>
|
||||
<input type="number" class="form-control" name="duration" value="10" min="1">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="start_date" class="form-label">Start Date (optional)</label>
|
||||
<input type="date" class="form-control" name="start_date">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="end_date" class="form-label">End Date (optional)</label>
|
||||
<input type="date" class="form-control" name="end_date">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="player_id" class="form-label">Target Player</label>
|
||||
<select class="form-select" name="player_id">
|
||||
<option value="">All Players</option>
|
||||
{% for player in players %}
|
||||
<option value="{{ player.id }}">{{ player.name }} ({{ player.device_id }})</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="priority" class="form-label">Priority</label>
|
||||
<input type="number" class="form-control" name="priority" value="1" min="1" max="10">
|
||||
<small class="text-muted">Higher numbers = higher priority</small>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label class="form-label">Days of Week</label>
|
||||
<div class="btn-group w-100" role="group">
|
||||
<input type="checkbox" class="btn-check" id="mon" checked>
|
||||
<label class="btn btn-outline-primary" for="mon">Mon</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="tue" checked>
|
||||
<label class="btn btn-outline-primary" for="tue">Tue</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="wed" checked>
|
||||
<label class="btn btn-outline-primary" for="wed">Wed</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="thu" checked>
|
||||
<label class="btn btn-outline-primary" for="thu">Thu</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="fri" checked>
|
||||
<label class="btn btn-outline-primary" for="fri">Fri</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="sat" checked>
|
||||
<label class="btn btn-outline-primary" for="sat">Sat</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="sun" checked>
|
||||
<label class="btn btn-outline-primary" for="sun">Sun</label>
|
||||
</div>
|
||||
<input type="hidden" name="days_of_week" id="days_of_week" value="1111111">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button type="submit" class="btn btn-success">
|
||||
<i class="bi bi-calendar-plus"></i> Create Schedule
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Schedules List -->
|
||||
<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-list-task"></i> Active Schedules</h5>
|
||||
<span class="badge bg-light text-dark">{{ schedules|length }} schedules</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if schedules %}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Media File</th>
|
||||
<th>Time</th>
|
||||
<th>Duration</th>
|
||||
<th>Days</th>
|
||||
<th>Player</th>
|
||||
<th>Priority</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for schedule in schedules %}
|
||||
<tr>
|
||||
<td>{{ schedule.name }}</td>
|
||||
<td>
|
||||
{% set media_file = schedule.media_file %}
|
||||
<a href="/uploads/{{ media_file.filename }}" target="_blank">
|
||||
{{ media_file.original_name }}
|
||||
</a>
|
||||
<br><small class="text-muted">{{ media_file.file_type.upper() }}</small>
|
||||
</td>
|
||||
<td>
|
||||
{{ schedule.start_time.strftime('%H:%M') }} - {{ schedule.end_time.strftime('%H:%M') }}
|
||||
{% if schedule.start_date or schedule.end_date %}
|
||||
<br><small class="text-muted">
|
||||
{% if schedule.start_date %}From {{ schedule.start_date }}{% endif %}
|
||||
{% if schedule.end_date %}To {{ schedule.end_date }}{% endif %}
|
||||
</small>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>{{ schedule.duration }}s</td>
|
||||
<td>
|
||||
<small>
|
||||
{% set days = ['M', 'T', 'W', 'T', 'F', 'S', 'S'] %}
|
||||
{% for i in range(7) %}
|
||||
{% if schedule.days_of_week[i] == '1' %}
|
||||
<span class="badge bg-success">{{ days[i] }}</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary">{{ days[i] }}</span>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</small>
|
||||
</td>
|
||||
<td>
|
||||
{% if schedule.player %}
|
||||
{{ schedule.player.name }}
|
||||
{% else %}
|
||||
<span class="text-muted">All Players</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td><span class="badge bg-info">{{ schedule.priority }}</span></td>
|
||||
<td>
|
||||
<a href="/schedule/delete/{{ schedule.id }}" class="btn btn-sm btn-outline-danger"
|
||||
onclick="return confirm('Delete schedule {{ schedule.name }}?')">
|
||||
<i class="bi bi-trash"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center py-5">
|
||||
<i class="bi bi-calendar-x text-muted" style="font-size: 4rem;"></i>
|
||||
<h4 class="text-muted mt-3">No schedules created yet</h4>
|
||||
<p class="text-muted">Create your first schedule to control when content is displayed!</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- API Info -->
|
||||
<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> Scheduling API</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>New scheduling endpoints for your Info-Beamer devices:</p>
|
||||
<ul class="list-unstyled">
|
||||
<li><code>GET {{ request.host_url }}api/playlist</code> - Get current scheduled playlist</li>
|
||||
<li><code>GET {{ request.host_url }}api/schedule</code> - Get all schedule information</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';
|
||||
}
|
||||
|
||||
// Handle days of week selection
|
||||
const dayCheckboxes = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
|
||||
const hiddenInput = document.getElementById('days_of_week');
|
||||
|
||||
function updateDaysOfWeek() {
|
||||
let daysString = '';
|
||||
dayCheckboxes.forEach(day => {
|
||||
const checkbox = document.getElementById(day);
|
||||
daysString += checkbox.checked ? '1' : '0';
|
||||
});
|
||||
hiddenInput.value = daysString;
|
||||
}
|
||||
|
||||
dayCheckboxes.forEach(day => {
|
||||
document.getElementById(day).addEventListener('change', updateDaysOfWeek);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
289
templates/user.html
Normal file
289
templates/user.html
Normal file
@@ -0,0 +1,289 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user