homedocs/app/templates/dashboard/app_form.html

{% extends "layout.html" %}

{% block content %}
<div class="container-xl">
  <div class="page-header d-print-none">
    <div class="row align-items-center">
      <div class="col">
        <h2 class="page-title">
          Add New Application
        </h2>
      </div>
    </div>
  </div>

  <div class="card mt-3">
    <div class="card-body">
      {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
      {% for category, message in messages %}
      <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
      {% endfor %}
      {% endif %}
      {% endwith %}

      <form method="POST" action="{{ url_for('dashboard.app_new') }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="mb-3">
          <label class="form-label required">Application Name</label>
          <input type="text" class="form-control" name="name" required>
        </div>
        <div class="mb-3">
          <label class="form-label required">Server</label>
          <select class="form-select" name="server_id" required>
            <option value="">Select a server</option>
            {% for server in servers %}
            <option value="{{ server.id }}">{{ server.hostname }} ({{ server.ip_address }})</option>
            {% endfor %}
          </select>
        </div>
        <div class="mb-3">
          <label class="form-label">Documentation</label>
          <textarea class="form-control" name="documentation" rows="6"
            placeholder="Use Markdown for formatting"></textarea>
          <small class="form-hint">Supports Markdown formatting</small>
        </div>

        <!-- Port management section -->
        <div class="mb-3">
          <label class="form-label">Application Ports</label>
          <div id="ports-container">
            <div class="port-entry mb-2 row">
              <div class="col-4">
                <input type="number" class="form-control" name="port_numbers[]" placeholder="Port number" min="1"
                  max="65535">
              </div>
              <div class="col-3">
                <select class="form-select" name="protocols[]">
                  <option value="TCP">TCP</option>
                  <option value="UDP">UDP</option>
                  <option value="HTTP">HTTP</option>
                  <option value="HTTPS">HTTPS</option>
                </select>
              </div>
              <div class="col-4">
                <input type="text" class="form-control" name="port_descriptions[]" placeholder="Description">
              </div>
              <div class="col-1">
                <button type="button" class="btn btn-outline-danger remove-port"><i class="ti ti-trash"></i></button>
              </div>
            </div>
          </div>
          <div class="mt-2">
            <button type="button" class="btn btn-outline-primary btn-sm" id="add-port">
              <i class="ti ti-plus me-1"></i> Add Port
            </button>
            <button type="button" class="btn btn-outline-secondary btn-sm ms-2" id="suggest-port">
              <i class="ti ti-bulb me-1"></i> Suggest Free Port
            </button>
          </div>
        </div>

        <div class="form-footer">
          <button type="submit" class="btn btn-primary">Save Application</button>
          <a href="{{ url_for('dashboard.dashboard_home') }}" class="btn btn-outline-secondary ms-2">Cancel</a>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const portsContainer = document.getElementById('ports-container');
    const addPortButton = document.getElementById('add-port');
    const suggestPortButton = document.getElementById('suggest-port');

    // Add a new port field
    addPortButton.addEventListener('click', function () {
      const portEntry = document.createElement('div');
      portEntry.className = 'port-entry mb-2 row';
      portEntry.innerHTML = `
        <div class="col-4">
          <input type="number" class="form-control" name="port_numbers[]" placeholder="Port number" min="1" max="65535">
        </div>
        <div class="col-3">
          <select class="form-select" name="protocols[]">
            <option value="TCP">TCP</option>
            <option value="UDP">UDP</option>
            <option value="HTTP">HTTP</option>
            <option value="HTTPS">HTTPS</option>
          </select>
        </div>
        <div class="col-4">
          <input type="text" class="form-control" name="port_descriptions[]" placeholder="Description">
        </div>
        <div class="col-1">
          <button type="button" class="btn btn-outline-danger remove-port"><i class="ti ti-trash"></i></button>
        </div>
      `;
      portsContainer.appendChild(portEntry);

      // Add event listener to the new remove button
      const removeButton = portEntry.querySelector('.remove-port');
      removeButton.addEventListener('click', function () {
        portEntry.remove();
      });
    });

    // Add event listeners to initial remove buttons
    document.querySelectorAll('.remove-port').forEach(button => {
      button.addEventListener('click', function () {
        this.closest('.port-entry').remove();
      });
    });

    // Suggest a free port
    suggestPortButton.addEventListener('click', async function () {
      try {
        const serverId = document.querySelector('select[name="server_id"]').value;
        if (!serverId) {
          alert('Please select a server first');
          return;
        }

        const response = await fetch(`/api/servers/${serverId}/suggest_port`);
        if (!response.ok) throw new Error('Failed to get port suggestion');

        const data = await response.json();
        if (data.port) {
          // Find the first empty port input or add a new one
          let portInput = document.querySelector('input[name="port_numbers[]"]:not([value])');
          if (!portInput) {
            addPortButton.click();
            portInput = document.querySelector('input[name="port_numbers[]"]:not([value])');
          }

          portInput.value = data.port;

          // Copy to clipboard
          navigator.clipboard.writeText(data.port.toString())
            .then(() => {
              showNotification('Port copied to clipboard!', 'success');
            })
            .catch(err => {
              console.error('Failed to copy: ', err);
            });
        }
      } catch (error) {
        console.error('Error:', error);
        showNotification('Failed to suggest port', 'danger');
      }
    });
  });
</script>
{% endblock %}