updated player deployment for digiserver
This commit is contained in:
ske087
@@ -4,232 +4,326 @@
|
||||
|
||||
{% block content %}
|
||||
<style>
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
body.dark-mode .form-group label {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
.form-group { margin-bottom: 1rem; }
|
||||
.form-group label { font-weight: bold; display: block; margin-bottom: 0.5rem; }
|
||||
body.dark-mode .form-group label { color: #e2e8f0; }
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;
|
||||
}
|
||||
|
||||
body.dark-mode .form-control {
|
||||
background: #1a202c;
|
||||
border-color: #4a5568;
|
||||
color: #e2e8f0;
|
||||
background: #1a202c; border-color: #4a5568; color: #e2e8f0;
|
||||
}
|
||||
body.dark-mode .form-control:focus { border-color: #7c3aed; outline: none; }
|
||||
|
||||
body.dark-mode .form-control:focus {
|
||||
border-color: #7c3aed;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-help {
|
||||
color: #6c757d;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
body.dark-mode .form-help {
|
||||
color: #718096;
|
||||
}
|
||||
.form-help { color: #6c757d; font-size: 0.875rem; }
|
||||
body.dark-mode .form-help { color: #718096; }
|
||||
|
||||
.section-header {
|
||||
margin-top: 2rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 2px solid;
|
||||
margin-top: 2rem; padding-bottom: 0.5rem; border-bottom: 2px solid;
|
||||
}
|
||||
.section-header.blue { border-color: #007bff; }
|
||||
body.dark-mode .section-header.blue { border-color: #667eea; }
|
||||
.section-header.green { border-color: #28a745; }
|
||||
body.dark-mode .section-header.green { border-color: #48bb78; }
|
||||
.section-header.yellow { border-color: #ffc107; }
|
||||
body.dark-mode .section-header.yellow { border-color: #ecc94b; }
|
||||
.section-header.purple { border-color: #9b59b6; }
|
||||
body.dark-mode .section-header.purple { border-color: #b794f6; }
|
||||
|
||||
.section-header.blue {
|
||||
border-color: #007bff;
|
||||
}
|
||||
|
||||
body.dark-mode .section-header.blue {
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.section-header.green {
|
||||
border-color: #28a745;
|
||||
}
|
||||
|
||||
body.dark-mode .section-header.green {
|
||||
border-color: #48bb78;
|
||||
}
|
||||
|
||||
.section-header.yellow {
|
||||
border-color: #ffc107;
|
||||
}
|
||||
|
||||
body.dark-mode .section-header.yellow {
|
||||
border-color: #ecc94b;
|
||||
}
|
||||
|
||||
body.dark-mode h1,
|
||||
body.dark-mode h3,
|
||||
body.dark-mode h4 {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
body.dark-mode p {
|
||||
color: #a0aec0;
|
||||
}
|
||||
body.dark-mode h1, body.dark-mode h3, body.dark-mode h4 { color: #e2e8f0; }
|
||||
body.dark-mode p { color: #a0aec0; }
|
||||
|
||||
.info-box {
|
||||
background-color: #e7f3ff;
|
||||
border-left: 4px solid #007bff;
|
||||
padding: 1rem;
|
||||
margin: 2rem 0;
|
||||
background-color: #e7f3ff; border-left: 4px solid #007bff; padding: 1rem; margin: 2rem 0;
|
||||
}
|
||||
|
||||
body.dark-mode .info-box {
|
||||
background-color: #1a365d;
|
||||
border-left-color: #667eea;
|
||||
background-color: #1a365d; border-left-color: #667eea;
|
||||
}
|
||||
|
||||
.info-box h4 {
|
||||
margin-top: 0;
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
body.dark-mode .info-box h4 {
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.info-box h4 { margin-top: 0; color: #007bff; }
|
||||
body.dark-mode .info-box h4 { color: #667eea; }
|
||||
.info-box code {
|
||||
background: #f4f4f4;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
background: #f4f4f4; padding: 2px 6px; border-radius: 3px;
|
||||
}
|
||||
|
||||
body.dark-mode .info-box code {
|
||||
background: #2d3748;
|
||||
color: #e2e8f0;
|
||||
background: #2d3748; color: #e2e8f0;
|
||||
}
|
||||
body.dark-mode small { color: #718096; }
|
||||
|
||||
.ssh-section {
|
||||
background-color: #f8f9fa; padding: 1.5rem; border-radius: 4px; margin-bottom: 2rem;
|
||||
}
|
||||
body.dark-mode .ssh-section { background-color: #2d3748; }
|
||||
|
||||
.connection-status {
|
||||
padding: 1rem; border-radius: 4px; margin-top: 1rem; display: none;
|
||||
}
|
||||
.connection-status.success {
|
||||
background-color: #d4edda; border: 1px solid #c3e6cb; color: #155724; display: block;
|
||||
}
|
||||
.connection-status.error {
|
||||
background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; display: block;
|
||||
}
|
||||
body.dark-mode .connection-status.success {
|
||||
background-color: #22543d; border-color: #2f855a; color: #9ae6b4;
|
||||
}
|
||||
body.dark-mode .connection-status.error {
|
||||
background-color: #742a2a; border-color: #c53030; color: #fc8181;
|
||||
}
|
||||
|
||||
body.dark-mode small {
|
||||
color: #718096;
|
||||
.player-form-section { display: none; }
|
||||
.player-form-section.active { display: block; }
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem 1rem; margin-right: 0.5rem; margin-bottom: 0.5rem;
|
||||
border: none; border-radius: 4px; cursor: pointer; font-size: 0.9rem;
|
||||
}
|
||||
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
.btn-primary { background-color: #007bff; color: white; }
|
||||
.btn-primary:hover:not(:disabled) { background-color: #0056b3; }
|
||||
.btn-success { background-color: #28a745; color: white; }
|
||||
.btn-success:hover:not(:disabled) { background-color: #218838; }
|
||||
.btn-secondary { background-color: #6c757d; color: white; }
|
||||
.btn-secondary:hover:not(:disabled) { background-color: #5a6268; }
|
||||
|
||||
.loading-spinner {
|
||||
display: inline-block; width: 1rem; height: 1rem;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%;
|
||||
border-top-color: white; animation: spin 1s linear infinite; margin-right: 0.5rem;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
|
||||
.row.full { grid-template-columns: 1fr; }
|
||||
@media (max-width: 768px) { .row { grid-template-columns: 1fr; } }
|
||||
|
||||
.hidden-field { display: none; }
|
||||
</style>
|
||||
<div class="container" style="max-width: 800px; margin-top: 2rem;">
|
||||
<h1>Add New Player</h1>
|
||||
|
||||
<div class="container" style="max-width: 900px; margin-top: 2rem;">
|
||||
<h1>Add New Player with SSH Deployment</h1>
|
||||
<p style="color: #6c757d; margin-bottom: 2rem;">
|
||||
Create a new digital signage player with authentication credentials
|
||||
Create a new digital signage player with automatic code deployment via SSH
|
||||
</p>
|
||||
|
||||
<div class="card">
|
||||
<form method="POST">
|
||||
<h3 class="section-header blue" style="margin-top: 0;">
|
||||
Basic Information
|
||||
<!-- SSH Connection Test Section -->
|
||||
<div class="ssh-section">
|
||||
<h3 class="section-header purple" style="margin-top: 0;">
|
||||
🔌 SSH Connection Setup
|
||||
</h3>
|
||||
<p class="form-help">First, test SSH connection to the target host for player deployment</p>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Display Name *</label>
|
||||
<input type="text" name="name" required class="form-control"
|
||||
placeholder="e.g., Office Reception Player">
|
||||
<small class="form-help">Friendly name for the player</small>
|
||||
<div class="row">
|
||||
<div class="form-group">
|
||||
<label>Target Hostname/IP *</label>
|
||||
<input type="text" id="ssh_hostname" class="form-control"
|
||||
placeholder="e.g., 192.168.1.100 or player.example.com">
|
||||
<small class="form-help">IP address or hostname of the target machine</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>SSH Port</label>
|
||||
<input type="number" id="ssh_port" class="form-control" value="22" min="1" max="65535">
|
||||
<small class="form-help">SSH port (default: 22)</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Hostname *</label>
|
||||
<input type="text" name="hostname" required class="form-control"
|
||||
placeholder="e.g., office-player-001">
|
||||
<small class="form-help">
|
||||
Unique identifier for this player (must match screen_name in player config)
|
||||
</small>
|
||||
|
||||
<div class="row">
|
||||
<div class="form-group">
|
||||
<label>SSH Username *</label>
|
||||
<input type="text" id="ssh_username" class="form-control" placeholder="e.g., pi or ubuntu">
|
||||
<small class="form-help">SSH login username</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>SSH Password *</label>
|
||||
<input type="password" id="ssh_password" class="form-control" placeholder="SSH password">
|
||||
<small class="form-help">SSH login password</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" id="test_ssh_btn" class="btn btn-primary" onclick="testSSHConnection()">
|
||||
✓ Test SSH Connection
|
||||
</button>
|
||||
<button type="button" id="clear_ssh_btn" class="btn btn-secondary" onclick="clearSSHForm()" style="display: none;">
|
||||
🔄 Clear
|
||||
</button>
|
||||
<div id="connection_status" class="connection-status"></div>
|
||||
</div>
|
||||
|
||||
<!-- Player Information Form -->
|
||||
<div id="player_form_section" class="player-form-section">
|
||||
<form method="POST" id="add_player_form">
|
||||
<!-- Hidden SSH fields to store credentials for deployment -->
|
||||
<input type="hidden" id="form_ssh_hostname" name="ssh_hostname" value="">
|
||||
<input type="hidden" id="form_ssh_username" name="ssh_username" value="">
|
||||
<input type="hidden" id="form_ssh_password" name="ssh_password" value="">
|
||||
<input type="hidden" id="form_ssh_port" name="ssh_port" value="">
|
||||
<input type="hidden" id="form_deploy_player" name="deploy_player" value="1">
|
||||
|
||||
<h3 class="section-header blue">Basic Information</h3>
|
||||
<div class="form-group">
|
||||
<label>Display Name *</label>
|
||||
<input type="text" name="name" required class="form-control"
|
||||
placeholder="e.g., Office Reception Player">
|
||||
<small class="form-help">Friendly name for the player</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Hostname *</label>
|
||||
<input type="text" name="hostname" required class="form-control"
|
||||
placeholder="e.g., office-player-001">
|
||||
<small class="form-help">Unique identifier for this player</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Location</label>
|
||||
<input type="text" name="location" class="form-control"
|
||||
placeholder="e.g., Main Office - Reception Area">
|
||||
<small class="form-help">Physical location of the player (optional)</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Location</label>
|
||||
<input type="text" name="location" class="form-control"
|
||||
placeholder="e.g., Main Office - Reception Area">
|
||||
<small class="form-help">Physical location of the player (optional)</small>
|
||||
</div>
|
||||
<h3 class="section-header green">Authentication</h3>
|
||||
<p class="form-help" style="margin-bottom: 1rem;">
|
||||
Quick Connect recommended for easy setup
|
||||
</p>
|
||||
<div class="form-group">
|
||||
<label>Password</label>
|
||||
<input type="password" name="password" id="password" class="form-control"
|
||||
placeholder="Leave empty to use Quick Connect only">
|
||||
<small class="form-help">Secure password (optional if using Quick Connect)</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Quick Connect Code *</label>
|
||||
<input type="text" name="quickconnect_code" required class="form-control"
|
||||
placeholder="e.g., OFFICE123">
|
||||
<small class="form-help">Easy pairing code for quick setup</small>
|
||||
</div>
|
||||
|
||||
<h3 class="section-header green">
|
||||
Authentication
|
||||
</h3>
|
||||
<p class="form-help" style="margin-bottom: 1rem;">
|
||||
Choose one authentication method (Quick Connect recommended for easy setup)
|
||||
</p>
|
||||
<h3 class="section-header yellow">Display Settings</h3>
|
||||
<div class="form-group">
|
||||
<label>Orientation</label>
|
||||
<select name="orientation" class="form-control">
|
||||
<option value="Landscape" selected>Landscape</option>
|
||||
<option value="Portrait">Portrait</option>
|
||||
</select>
|
||||
<small class="form-help">Display orientation for the player</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Assign Playlist</label>
|
||||
<select name="playlist_id" class="form-control">
|
||||
<option value="">No Playlist (Unassigned)</option>
|
||||
{% for playlist in playlists %}
|
||||
<option value="{{ playlist.id }}">{{ playlist.name }} ({{ playlist.orientation }}) - {{ playlist.content_count }} items</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<small class="form-help">Assign player to a playlist (optional)</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Password</label>
|
||||
<input type="password" name="password" id="password" class="form-control"
|
||||
placeholder="Leave empty to use Quick Connect only">
|
||||
<small class="form-help">
|
||||
Secure password for player authentication (optional if using Quick Connect)
|
||||
</small>
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<h4>📋 What Happens Next</h4>
|
||||
<ol style="margin: 0.5rem 0; padding-left: 1.5rem;">
|
||||
<li><strong>Player Creation:</strong> Player record created with Auth Code</li>
|
||||
<li><strong>Code Deployment:</strong> Player code from Kiwy-Signage repository deployed to <span id="deploy_host_info">target host</span></li>
|
||||
<li><strong>Installation:</strong> Installation scripts executed on remote host</li>
|
||||
<li><strong>Configuration:</strong> Configure <code>app_config.json</code> with Auth Code provided</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Quick Connect Code *</label>
|
||||
<input type="text" name="quickconnect_code" required class="form-control"
|
||||
placeholder="e.g., OFFICE123">
|
||||
<small class="form-help">
|
||||
Easy pairing code for quick setup (must match quickconnect_key in player config)
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<h3 class="section-header yellow">
|
||||
Display Settings
|
||||
</h3>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Orientation</label>
|
||||
<select name="orientation" class="form-control">
|
||||
<option value="Landscape" selected>Landscape</option>
|
||||
<option value="Portrait">Portrait</option>
|
||||
</select>
|
||||
<small class="form-help">Display orientation for the player</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Assign Playlist</label>
|
||||
<select name="playlist_id" class="form-control">
|
||||
<option value="">No Playlist (Unassigned)</option>
|
||||
{% for playlist in playlists %}
|
||||
<option value="{{ playlist.id }}">{{ playlist.name }} ({{ playlist.orientation }}) - {{ playlist.content_count }} items</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<small class="form-help">Assign player to a playlist (optional)</small>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<h4>📋 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 style="margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #ddd;">
|
||||
<button type="submit" id="create_deploy_btn" class="btn btn-success" style="padding: 0.75rem 2rem;">
|
||||
⚙️ Create & Deploy Player
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" onclick="cancelForm()" style="padding: 0.75rem 2rem; margin-left: 1rem;">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let sshConnectionVerified = false;
|
||||
|
||||
function testSSHConnection() {
|
||||
const hostname = document.getElementById('ssh_hostname').value.trim();
|
||||
const username = document.getElementById('ssh_username').value.trim();
|
||||
const password = document.getElementById('ssh_password').value.trim();
|
||||
const port = parseInt(document.getElementById('ssh_port').value) || 22;
|
||||
|
||||
if (!hostname || !username || !password) {
|
||||
alert('Please fill in all SSH connection fields');
|
||||
return;
|
||||
}
|
||||
|
||||
const btn = document.getElementById('test_ssh_btn');
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<span class="loading-spinner"></span>Testing connection...';
|
||||
const statusDiv = document.getElementById('connection_status');
|
||||
|
||||
fetch('{{ url_for("api.test_ssh_connection") }}', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({hostname, username, password, port})
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
sshConnectionVerified = data.success;
|
||||
statusDiv.className = 'connection-status ' + (data.success ? 'success' : 'error');
|
||||
statusDiv.innerHTML = `<strong>${data.success ? '✓ Connected!' : '✗ Connection Failed'}</strong><br>${data.message}`;
|
||||
|
||||
if (data.success) {
|
||||
// Disable SSH fields and store credentials
|
||||
document.getElementById('ssh_hostname').disabled = true;
|
||||
document.getElementById('ssh_username').disabled = true;
|
||||
document.getElementById('ssh_password').disabled = true;
|
||||
document.getElementById('ssh_port').disabled = true;
|
||||
document.getElementById('test_ssh_btn').style.display = 'none';
|
||||
document.getElementById('clear_ssh_btn').style.display = 'inline-block';
|
||||
|
||||
// Store credentials in hidden form fields
|
||||
document.getElementById('form_ssh_hostname').value = hostname;
|
||||
document.getElementById('form_ssh_username').value = username;
|
||||
document.getElementById('form_ssh_password').value = password;
|
||||
document.getElementById('form_ssh_port').value = port;
|
||||
|
||||
// Show player form
|
||||
document.getElementById('player_form_section').classList.add('active');
|
||||
document.getElementById('deploy_host_info').textContent = hostname;
|
||||
}
|
||||
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = '✓ Test SSH Connection';
|
||||
})
|
||||
.catch(err => {
|
||||
statusDiv.className = 'connection-status error';
|
||||
statusDiv.innerHTML = `<strong>✗ Error:</strong> ${err.message}`;
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = '✓ Test SSH Connection';
|
||||
});
|
||||
}
|
||||
|
||||
function clearSSHForm() {
|
||||
document.getElementById('ssh_hostname').value = '';
|
||||
document.getElementById('ssh_username').value = '';
|
||||
document.getElementById('ssh_password').value = '';
|
||||
document.getElementById('ssh_port').value = '22';
|
||||
document.getElementById('ssh_hostname').disabled = false;
|
||||
document.getElementById('ssh_username').disabled = false;
|
||||
document.getElementById('ssh_password').disabled = false;
|
||||
document.getElementById('ssh_port').disabled = false;
|
||||
document.getElementById('test_ssh_btn').style.display = 'inline-block';
|
||||
document.getElementById('clear_ssh_btn').style.display = 'none';
|
||||
document.getElementById('connection_status').className = 'connection-status';
|
||||
document.getElementById('player_form_section').classList.remove('active');
|
||||
document.getElementById('add_player_form').reset();
|
||||
sshConnectionVerified = false;
|
||||
}
|
||||
|
||||
function cancelForm() {
|
||||
if (confirm('Are you sure? All changes will be lost.')) {
|
||||
window.location.href = '{{ url_for("players.list") }}';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user