ske087/beamer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: Info-Beamer Streaming Channel System

Browse Source 
- 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
2025-08-19 08:37:14 +03:00
commit ab36454574
13 changed files with 2168 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
.github/copilot-instructions.md vendored Normal file
View File

@@ -0,0 +1,17 @@
- [x] Clarify Project Requirements
- [x] Scaffold the Project
- [x] Customize the Project
- [ ] Install Required Extensions
- [x] Compile the Project
- [ ] Create and Run Task
- [ ] Launch the Project
- [x] Ensure Documentation is Complete
---
**Progress Summary:**
- Basic Flask server created in `server.py` for file upload and serving
- `uploads/` directory created for storing content
- `README.md` with usage instructions added
Next steps: You can now run the server and access it from your Info-Beamer devices.

22
.gitignore vendored Normal file
View File

@@ -0,0 +1,22 @@
# Python
__pycache__/
*.pyc
.venv/
venv/
# Database
*.db
# Uploads
uploads/
# IDE
.vscode/
.idea/
# OS
.DS_Store
Thumbs.db
# Logs
*.log

87
README.md Normal file
View File

@@ -0,0 +1,87 @@
# Info-Beamer Streaming Channel System
A Flask-based web application for managing digital signage content with streaming channels for Info-Beamer Pi devices.
## Features
- **Streaming Channels**: Organize content into channels for targeted display management
- **User Authentication**: Admin and user roles with secure login system
- **File Management**: Upload and manage media files (images, videos, PDFs, JSON)
- **Channel Assignment**: Assign specific channels to Info-Beamer devices
- **Activity Logging**: Track all user actions and system events
- **Bootstrap UI**: Modern responsive interface with light/dark theme switching
- **API Endpoints**: RESTful APIs for Info-Beamer device integration
## Installation
1. Clone the repository:
```bash
git clone https://gitea.moto-adv.com/ske087/beamer.git
cd beamer
```
2. Create virtual environment:
```bash
python3 -m venv .venv
source .venv/bin/activate
```
3. Install dependencies:
```bash
pip install flask flask-sqlalchemy flask-login werkzeug
```
4. Run the application:
```bash
python server.py
```
5. Access the web interface at `http://localhost:5000`
## Default Credentials
- **Username**: admin
- **Password**: admin
⚠️ **Important**: Change the default password after first login!
## API Endpoints
- `/api/content` - Get all available media files
- `/api/playlist` - Get default channel playlist (legacy)
- `/api/channel/<device_id>` - Get device-specific channel playlist
## Project Structure
```
beamer/
├── server.py # Main Flask application
├── templates/ # HTML templates
│ ├── login.html
│ ├── admin.html
│ ├── user.html
│ ├── channels.html
│ └── schedules.html
├── uploads/ # Media file storage
├── .venv/ # Virtual environment
└── beamer.db # SQLite database
```
## Usage
1. **Login** with admin credentials
2. **Upload Media Files** through the admin dashboard
3. **Create Channels** to organize content
4. **Add Content** to channels with custom durations
5. **Assign Players** to specific channels
6. **Monitor Activity** through the activity log
## Info-Beamer Integration
Configure your Info-Beamer devices to fetch playlists from:
- Default channel: `http://your-server:5000/api/playlist`
- Device-specific: `http://your-server:5000/api/channel/DEVICE_ID`
## License
This project is developed for local digital signage management.

21
infobeamer-node.json Normal file
View File

@@ -0,0 +1,21 @@
{
"comment": "Info-Beamer node.json configuration example",
"options": [
{
"title": "Content Server URL",
"ui_width": 12,
"name": "server_url",
"type": "string",
"hint": "URL of your content server",
"default": "http://localhost:5000"
},
{
"title": "Refresh Interval",
"ui_width": 6,
"name": "refresh_interval",
"type": "integer",
"hint": "How often to check for new content",
"default": 60
}
]
}

105
node.lua Normal file
View File

@@ -0,0 +1,105 @@
-- Info-Beamer script with scheduling support
gl.setup(NATIVE_WIDTH, NATIVE_HEIGHT)
local json = require "json"
local font = resource.load_font "roboto.ttf"
local server_url = CONFIG.server_url or "http://localhost:5000"
local refresh_interval = CONFIG.refresh_interval or 60
local default_duration = CONFIG.default_duration or 10
local playlist = {}
local current_item = 1
local item_start_time = 0
local last_update = 0
local schedule_info = {}
function update_playlist()
-- Fetch scheduled playlist from server
local url = server_url .. "/api/playlist"
util.post_and_wait(url, "", function(response)
if response.success then
local data = json.decode(response.content)
if data and data.items then
playlist = data.items
print("Updated playlist: " .. #playlist .. " items")
-- Load assets
for i, item in ipairs(playlist) do
if item.type == "image" then
item.resource = resource.load_image(server_url .. "/uploads/" .. item.asset)
elseif item.type == "video" then
item.resource = resource.load_video(server_url .. "/uploads/" .. item.asset)
end
end
end
end
end)
-- Also fetch schedule information
local schedule_url = server_url .. "/api/schedule"
util.post_and_wait(schedule_url, "", function(response)
if response.success then
schedule_info = json.decode(response.content) or {}
end
end)
last_update = sys.now()
end
function node.render()
-- Update playlist periodically
if sys.now() - last_update > refresh_interval then
update_playlist()
end
-- If no playlist items, show waiting message
if #playlist == 0 then
font:write(100, 100, "Waiting for scheduled content...", 50, 1, 1, 1, 1)
font:write(100, 200, "Server: " .. server_url, 30, 0.7, 0.7, 0.7, 1)
return
end
local item = playlist[current_item]
if not item then
current_item = 1
item = playlist[current_item]
if not item then return end
end
local duration = item.duration or default_duration
-- Check if it's time to move to next item
if sys.now() - item_start_time > duration then
current_item = current_item + 1
if current_item > #playlist then
current_item = 1
end
item_start_time = sys.now()
item = playlist[current_item]
end
-- Display current item
if item and item.resource then
if item.type == "image" then
item.resource:draw(0, 0, WIDTH, HEIGHT)
elseif item.type == "video" then
item.resource:draw(0, 0, WIDTH, HEIGHT)
end
-- Show schedule info overlay (optional)
if item.schedule_name then
font:write(10, HEIGHT - 60, "Schedule: " .. item.schedule_name, 20, 1, 1, 1, 0.8)
if item.priority then
font:write(10, HEIGHT - 30, "Priority: " .. item.priority, 20, 1, 1, 1, 0.8)
end
end
end
-- Show current time
local current_time = schedule_info.current_time or "00:00"
font:write(WIDTH - 100, 20, current_time, 24, 1, 1, 1, 0.9)
end
-- Initial load
update_playlist()

4
requirements.txt Normal file
View File

@@ -0,0 +1,4 @@
Flask==2.3.3
Flask-SQLAlchemy==3.0.5
Flask-Login==0.6.3
Werkzeug==2.3.7

416
server.py Normal file
View File

@@ -0,0 +1,416 @@
from flask import Flask, send_from_directory, request, render_template, redirect, url_for, flash, jsonify
from flask_sqlalchemy import SQLAlchemy
from flask_login import LoginManager, UserMixin, login_user, logout_user, login_required, current_user
from werkzeug.security import generate_password_hash, check_password_hash
from werkzeug.utils import secure_filename
from datetime import datetime, date, time
import os
import uuid
app = Flask(__name__)
app.config['SECRET_KEY'] = 'your-secret-key-here'
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///beamer.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
app.config['UPLOAD_FOLDER'] = 'uploads'
app.config['MAX_CONTENT_LENGTH'] = 500 * 1024 * 1024 # 500MB max file size
# Ensure upload directory exists
os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
db = SQLAlchemy(app)
login_manager = LoginManager()
login_manager.init_app(app)
login_manager.login_view = 'login'
# Database Models
class User(UserMixin, db.Model):
id = db.Column(db.Integer, primary_key=True)
username = db.Column(db.String(80), unique=True, nullable=False)
email = db.Column(db.String(120), unique=True, nullable=False)
password_hash = db.Column(db.String(255), nullable=False)
role = db.Column(db.String(20), default='user') # 'admin' or 'user'
def set_password(self, password):
self.password_hash = generate_password_hash(password)
def check_password(self, password):
return check_password_hash(self.password_hash, password)
class StreamingChannel(db.Model):
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(100), nullable=False)
description = db.Column(db.String(500))
is_default = db.Column(db.Boolean, default=False)
is_active = db.Column(db.Boolean, default=True)
created_by = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
created_date = db.Column(db.DateTime, default=datetime.utcnow)
# Relationships
creator = db.relationship('User', backref='created_channels')
content = db.relationship('ChannelContent', back_populates='channel', cascade='all, delete-orphan')
players = db.relationship('Player', back_populates='channel')
class ChannelContent(db.Model):
id = db.Column(db.Integer, primary_key=True)
channel_id = db.Column(db.Integer, db.ForeignKey('streaming_channel.id'), nullable=False)
media_file_id = db.Column(db.Integer, db.ForeignKey('media_file.id'), nullable=False)
order_index = db.Column(db.Integer, default=0)
display_duration = db.Column(db.Integer, default=10)
is_active = db.Column(db.Boolean, default=True)
added_date = db.Column(db.DateTime, default=datetime.utcnow)
# Relationships
channel = db.relationship('StreamingChannel', back_populates='content')
media_file = db.relationship('MediaFile', backref='channel_assignments')
class Player(db.Model):
id = db.Column(db.Integer, primary_key=True)
device_id = db.Column(db.String(100), unique=True, nullable=False)
name = db.Column(db.String(100))
last_seen = db.Column(db.DateTime)
is_active = db.Column(db.Boolean, default=True)
channel_id = db.Column(db.Integer, db.ForeignKey('streaming_channel.id'))
# Relationships
channel = db.relationship('StreamingChannel', back_populates='players')
class MediaFile(db.Model):
id = db.Column(db.Integer, primary_key=True)
filename = db.Column(db.String(255), nullable=False)
original_name = db.Column(db.String(255), nullable=False)
file_type = db.Column(db.String(10), nullable=False)
file_size = db.Column(db.Integer)
upload_date = db.Column(db.DateTime, default=datetime.utcnow)
uploaded_by = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
is_active = db.Column(db.Boolean, default=True)
# Relationships
uploader = db.relationship('User', backref='uploaded_files')
class ActivityLog(db.Model):
id = db.Column(db.Integer, primary_key=True)
user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
action = db.Column(db.String(100), nullable=False)
details = db.Column(db.String(500))
timestamp = db.Column(db.DateTime, default=datetime.utcnow)
ip_address = db.Column(db.String(45))
# Relationships
user = db.relationship('User', backref='activity_logs')
@login_manager.user_loader
def load_user(user_id):
return User.query.get(int(user_id))
def log_activity(action, details=None):
"""Helper function to log user activity"""
if current_user.is_authenticated:
activity = ActivityLog(
user_id=current_user.id,
action=action,
details=details,
ip_address=request.remote_addr
)
db.session.add(activity)
db.session.commit()
def allowed_file(filename):
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif', 'mp4', 'avi', 'mov', 'pdf', 'json'}
return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
# Authentication Routes
@app.route('/login', methods=['GET', 'POST'])
def login():
if request.method == 'POST':
username = request.form['username']
password = request.form['password']
user = User.query.filter_by(username=username).first()
if user and user.check_password(password):
login_user(user)
log_activity('User logged in')
flash('Logged in successfully!', 'success')
return redirect(url_for('admin' if user.role == 'admin' else 'user_dashboard'))
else:
flash('Invalid username or password.', 'error')
return render_template('login.html')
@app.route('/logout')
@login_required
def logout():
log_activity('User logged out')
logout_user()
flash('You have been logged out.', 'info')
return redirect(url_for('login'))
# Dashboard Routes
@app.route('/')
@login_required
def index():
if current_user.role == 'admin':
return redirect(url_for('admin'))
else:
return redirect(url_for('user_dashboard'))
@app.route('/admin')
@login_required
def admin():
if current_user.role != 'admin':
flash('Access denied. Admin privileges required.', 'error')
return redirect(url_for('user_dashboard'))
# Get statistics
total_files = MediaFile.query.filter_by(is_active=True).count()
total_users = User.query.count()
total_players = Player.query.count()
total_channels = StreamingChannel.query.filter_by(is_active=True).count()
# Get recent activity
recent_activity = ActivityLog.query.order_by(ActivityLog.timestamp.desc()).limit(10).all()
# Get recent files
recent_files = MediaFile.query.filter_by(is_active=True).order_by(MediaFile.upload_date.desc()).limit(5).all()
# Get all files for management
all_files = MediaFile.query.filter_by(is_active=True).order_by(MediaFile.upload_date.desc()).all()
return render_template('admin.html',
total_files=total_files,
total_users=total_users,
total_players=total_players,
total_channels=total_channels,
recent_activity=recent_activity,
recent_files=recent_files,
all_files=all_files)
@app.route('/user')
@login_required
def user_dashboard():
# Get user's files
user_files = MediaFile.query.filter_by(uploaded_by=current_user.id, is_active=True).order_by(MediaFile.upload_date.desc()).all()
# Get user's activity
user_activity = ActivityLog.query.filter_by(user_id=current_user.id).order_by(ActivityLog.timestamp.desc()).limit(10).all()
return render_template('user.html', user_files=user_files, user_activity=user_activity)
# File Management Routes
@app.route('/upload', methods=['POST'])
@login_required
def upload_file():
if 'file' not in request.files:
flash('No file selected.', 'error')
return redirect(request.referrer)
file = request.files['file']
if file.filename == '':
flash('No file selected.', 'error')
return redirect(request.referrer)
if file and allowed_file(file.filename):
# Generate unique filename
file_ext = file.filename.rsplit('.', 1)[1].lower()
unique_filename = f"{uuid.uuid4().hex}.{file_ext}"
# Save file
file_path = os.path.join(app.config['UPLOAD_FOLDER'], unique_filename)
file.save(file_path)
# Get file size
file_size = os.path.getsize(file_path)
# Save to database
media_file = MediaFile(
filename=unique_filename,
original_name=file.filename,
file_type=file_ext,
file_size=file_size,
uploaded_by=current_user.id
)
db.session.add(media_file)
db.session.commit()
log_activity('File uploaded', f'Uploaded: {file.filename}')
flash(f'File "{file.filename}" uploaded successfully!', 'success')
else:
flash('Invalid file type. Please upload images, videos, PDFs, or JSON files.', 'error')
return redirect(request.referrer)
@app.route('/uploads/<filename>')
def uploaded_file(filename):
return send_from_directory(app.config['UPLOAD_FOLDER'], filename)
@app.route('/delete/<int:file_id>')
@login_required
def delete_file(file_id):
media_file = MediaFile.query.get_or_404(file_id)
# Check permissions
if current_user.role != 'admin' and media_file.uploaded_by != current_user.id:
flash('You can only delete your own files.', 'error')
return redirect(request.referrer)
# Mark as inactive instead of deleting
media_file.is_active = False
db.session.commit()
log_activity('File deleted', f'Deleted: {media_file.original_name}')
flash(f'File "{media_file.original_name}" deleted successfully!', 'success')
return redirect(request.referrer)
# Schedule Management Routes
@app.route('/schedules')
@login_required
def view_schedules():
# Since we're moving to channels, redirect to channels page
return redirect(url_for('view_channels'))
# Channel Management Routes
@app.route('/channels')
@login_required
def view_channels():
if current_user.role == 'admin':
channels = StreamingChannel.query.filter_by(is_active=True).order_by(StreamingChannel.created_date.desc()).all()
else:
channels = StreamingChannel.query.filter_by(created_by=current_user.id, is_active=True).order_by(StreamingChannel.created_date.desc()).all()
return render_template('channels.html', channels=channels)
@app.route('/add_channel', methods=['POST'])
@login_required
def add_channel():
try:
# If setting as default, unset other defaults
is_default = 'is_default' in request.form
if is_default:
StreamingChannel.query.filter_by(is_default=True).update({'is_default': False})
channel = StreamingChannel(
name=request.form['name'],
description=request.form.get('description', ''),
is_default=is_default,
created_by=current_user.id
)
db.session.add(channel)
db.session.commit()
log_activity('Channel created', f'Created channel: {channel.name}')
flash(f'Channel "{channel.name}" created successfully!', 'success')
except Exception as e:
flash(f'Error creating channel: {str(e)}', 'error')
return redirect(url_for('view_channels'))
# API Routes
@app.route('/api/content')
def api_content():
"""API endpoint for Info-Beamer devices to get content list"""
active_files = MediaFile.query.filter_by(is_active=True).all()
content = []
for file in active_files:
content.append({
'filename': file.filename,
'original_name': file.original_name,
'type': file.file_type,
'url': f"{request.host_url}uploads/{file.filename}",
'upload_date': file.upload_date.isoformat()
})
return jsonify({
'content': content,
'updated': datetime.utcnow().isoformat()
})
@app.route('/api/playlist')
def api_playlist():
"""Legacy API endpoint for Info-Beamer devices"""
# Return default channel content or all files
default_channel = StreamingChannel.query.filter_by(is_default=True).first()
if default_channel:
content_items = ChannelContent.query.filter_by(
channel_id=default_channel.id,
is_active=True
).join(MediaFile).order_by(ChannelContent.order_index).all()
playlist = {
'duration': 10,
'items': []
}
for content in content_items:
media_file = content.media_file
if media_file and media_file.is_active:
if media_file.file_type in ['jpg', 'jpeg', 'png', 'gif']:
playlist['items'].append({
'type': 'image',
'asset': media_file.filename,
'duration': content.display_duration
})
elif media_file.file_type in ['mp4', 'avi', 'mov']:
playlist['items'].append({
'type': 'video',
'asset': media_file.filename
})
return jsonify(playlist)
# If no channels exist, return all media files
active_files = MediaFile.query.filter_by(is_active=True).all()
playlist = {
'duration': 10,
'items': []
}
for file in active_files:
if file.file_type in ['jpg', 'jpeg', 'png', 'gif']:
playlist['items'].append({
'type': 'image',
'asset': file.filename,
'duration': 10
})
elif file.file_type in ['mp4', 'avi', 'mov']:
playlist['items'].append({
'type': 'video',
'asset': file.filename
})
return jsonify(playlist)
def init_db():
"""Initialize database and create default data"""
with app.app_context():
db.create_all()
# Create default admin user if no users exist
if User.query.count() == 0:
admin = User(
username='admin',
email='admin@localhost',
role='admin'
)
admin.set_password('admin') # Change this!
db.session.add(admin)
db.session.commit()
print("Created default admin user: admin/admin (CHANGE PASSWORD!)")
# Create default streaming channel if none exists
if not StreamingChannel.query.first():
default_channel = StreamingChannel(
name='Default Channel',
description='Main content channel',
is_default=True,
is_active=True,
created_by=1 # Admin user
)
db.session.add(default_channel)
db.session.commit()
print("Created default streaming channel")
if __name__ == '__main__':
init_db()
app.run(host='0.0.0.0', port=5000, debug=True)

433
templates/admin.html Normal file
View 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
View 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
View 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
View 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
View 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
View 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/&lt;device_id&gt;/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>