enterprise_digital-platform/digiserver-v2/app/templates/players/add_player.html

{% extends "base.html" %}

{% block title %}Add Player - DigiServer v2{% endblock %}

{% 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-control {
        width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;
    }
    body.dark-mode .form-control {
        background: #1a202c; border-color: #4a5568; color: #e2e8f0;
    }
    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; }
    
    .section-header {
        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; }
    
    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;
    }
    body.dark-mode .info-box {
        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 code {
        background: #f4f4f4; padding: 2px 6px; border-radius: 3px;
    }
    body.dark-mode .info-box code {
        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;
    }
    
    .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: 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 automatic code deployment via SSH
    </p>

    <div class="card">
        <!-- 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="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="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>

                <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 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>📋 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 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 %}