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
308 lines
17 KiB
HTML
308 lines
17 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>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>
|