updated digiserver 2
This commit is contained in:
122
app/templates/players/add_player.html
Normal file
122
app/templates/players/add_player.html
Normal file
@@ -0,0 +1,122 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Add Player - DigiServer v2{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container" style="max-width: 800px; margin-top: 2rem;">
|
||||
<h1>Add New Player</h1>
|
||||
<p style="color: #6c757d; margin-bottom: 2rem;">
|
||||
Create a new digital signage player with authentication credentials
|
||||
</p>
|
||||
|
||||
<div class="card">
|
||||
<form method="POST">
|
||||
<h3 style="margin-top: 0; border-bottom: 2px solid #007bff; padding-bottom: 0.5rem;">
|
||||
Basic Information
|
||||
</h3>
|
||||
|
||||
<div style="margin-bottom: 1rem;">
|
||||
<label style="font-weight: bold;">Display Name *</label>
|
||||
<input type="text" name="name" required
|
||||
style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;"
|
||||
placeholder="e.g., Office Reception Player">
|
||||
<small style="color: #6c757d;">Friendly name for the player</small>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 1rem;">
|
||||
<label style="font-weight: bold;">Hostname *</label>
|
||||
<input type="text" name="hostname" required
|
||||
style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;"
|
||||
placeholder="e.g., office-player-001">
|
||||
<small style="color: #6c757d;">
|
||||
Unique identifier for this player (must match screen_name in player config)
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 1rem;">
|
||||
<label style="font-weight: bold;">Location</label>
|
||||
<input type="text" name="location"
|
||||
style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;"
|
||||
placeholder="e.g., Main Office - Reception Area">
|
||||
<small style="color: #6c757d;">Physical location of the player (optional)</small>
|
||||
</div>
|
||||
|
||||
<h3 style="margin-top: 2rem; border-bottom: 2px solid #28a745; padding-bottom: 0.5rem;">
|
||||
Authentication
|
||||
</h3>
|
||||
<p style="color: #6c757d; font-size: 0.9rem; margin-bottom: 1rem;">
|
||||
Choose one authentication method (Quick Connect recommended for easy setup)
|
||||
</p>
|
||||
|
||||
<div style="margin-bottom: 1rem;">
|
||||
<label style="font-weight: bold;">Password</label>
|
||||
<input type="password" name="password" id="password"
|
||||
style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;"
|
||||
placeholder="Leave empty to use Quick Connect only">
|
||||
<small style="color: #6c757d;">
|
||||
Secure password for player authentication (optional if using Quick Connect)
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 1rem;">
|
||||
<label style="font-weight: bold;">Quick Connect Code *</label>
|
||||
<input type="text" name="quickconnect_code" required
|
||||
style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;"
|
||||
placeholder="e.g., OFFICE123">
|
||||
<small style="color: #6c757d;">
|
||||
Easy pairing code for quick setup (must match quickconnect_key in player config)
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<h3 style="margin-top: 2rem; border-bottom: 2px solid #ffc107; padding-bottom: 0.5rem;">
|
||||
Display Settings
|
||||
</h3>
|
||||
|
||||
<div style="margin-bottom: 1rem;">
|
||||
<label style="font-weight: bold;">Orientation</label>
|
||||
<select name="orientation" style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
|
||||
<option value="Landscape" selected>Landscape</option>
|
||||
<option value="Portrait">Portrait</option>
|
||||
</select>
|
||||
<small style="color: #6c757d;">Display orientation for the player</small>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 1rem;">
|
||||
<label style="font-weight: bold;">Assign to Group</label>
|
||||
<select name="group_id" style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
|
||||
<option value="">No Group (Unassigned)</option>
|
||||
{% for group in groups %}
|
||||
<option value="{{ group.id }}">{{ group.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<small style="color: #6c757d;">Assign player to a content group (optional)</small>
|
||||
</div>
|
||||
|
||||
<div style="background-color: #e7f3ff; border-left: 4px solid #007bff; padding: 1rem; margin: 2rem 0;">
|
||||
<h4 style="margin-top: 0; color: #007bff;">📋 Setup Instructions</h4>
|
||||
<ol style="margin: 0.5rem 0; padding-left: 1.5rem;">
|
||||
<li>Create the player with the form above</li>
|
||||
<li>Note the generated <strong>Auth Code</strong> (shown after creation)</li>
|
||||
<li>Configure the player's <code>app_config.json</code> with:
|
||||
<ul style="margin-top: 0.5rem;">
|
||||
<li><code>server_ip</code>: Your server address</li>
|
||||
<li><code>screen_name</code>: Same as <strong>Hostname</strong> above</li>
|
||||
<li><code>quickconnect_key</code>: Same as <strong>Quick Connect Code</strong> above</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Start the player - it will authenticate automatically</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #ddd;">
|
||||
<button type="submit" class="btn btn-success" style="padding: 0.75rem 2rem;">
|
||||
✓ Create Player
|
||||
</button>
|
||||
<a href="{{ url_for('players.list') }}" class="btn" style="padding: 0.75rem 2rem; margin-left: 1rem;">
|
||||
Cancel
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user