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">
          {{ title }}
        </h2>
        <div class="text-muted mt-1">
          {% if edit_mode %}Edit{% else %}Create{% endif %} application details and configure ports
        </div>
      </div>
      <div class="col-auto ms-auto">
        <div class="btn-list">
          <a href="{{ dashboard_link }}" class="btn btn-outline-primary">
            <span class="ti ti-dashboard"></span>
            Dashboard
          </a>
          {% if edit_mode %}
          <a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="btn btn-outline-secondary">
            <span class="ti ti-eye"></span>
            View Application
          </a>
          {% endif %}
        </div>
      </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_edit', app_id=app.id) if edit_mode else 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" value="{{ app.name if app else '' }}" required
            placeholder="Enter application name">
          <small class="form-hint">Choose a unique name for this application</small>
        </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 }}" {% if app and server.id==app.server_id %}selected{% endif %}>
              {{ server.hostname }} ({{ server.ip_address }})
            </option>
            {% endfor %}
          </select>
          <small class="form-hint">Select the server where this application runs</small>
        </div>

        <div class="mb-3">
          <label class="form-label">Documentation</label>
          <ul class="nav nav-tabs mb-2" role="tablist">
            <li class="nav-item" role="presentation">
              <a href="#markdown-edit" class="nav-link active" data-bs-toggle="tab" role="tab">Edit</a>
            </li>
            <li class="nav-item" role="presentation">
              <a href="#markdown-preview" class="nav-link" data-bs-toggle="tab" role="tab" id="preview-tab">Preview</a>
            </li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane active" id="markdown-edit" role="tabpanel">
              <textarea class="form-control" name="documentation" id="documentation" rows="6"
                placeholder="Document your application using Markdown...">{{ app.documentation if app else '' }}</textarea>
              <small class="form-hint">
                Markdown formatting is supported. Include details about what this application does, contact info, etc.
              </small>
            </div>
            <div class="tab-pane" id="markdown-preview" role="tabpanel">
              <div class="markdown-content border rounded p-3" style="min-height: 12rem;">
                <div id="preview-content">Preview will be shown here...</div>
              </div>
            </div>
          </div>
        </div>

        <div class="hr-text">Port Configuration</div>

        <div class="mb-3">
          <div class="d-flex justify-content-between align-items-center mb-2">
            <label class="form-label mb-0">Application Ports</label>
            <div class="btn-group">
              <button type="button" class="btn btn-sm btn-outline-primary" id="add-port-btn">
                <span class="ti ti-plus"></span> Add Port
              </button>
              <button type="button" class="btn btn-sm btn-outline-secondary" id="random-port-btn"
                title="Generate random available port">
                <span class="ti ti-dice"></span> Random Port
              </button>
            </div>
          </div>

          <div class="table-responsive">
            <table class="table table-vcenter card-table" id="ports-table">
              <thead>
                <tr>
                  <th style="width: 20%">Port Number</th>
                  <th style="width: 20%">Protocol</th>
                  <th style="width: 50%">Description</th>
                  <th style="width: 10%">Actions</th>
                </tr>
              </thead>
              <tbody>
                {% if app and app.ports %}
                {% for port in app.ports %}
                <tr data-port-id="{{ port.id }}">
                  <td>
                    <input type="number" name="port_numbers[]" class="form-control" min="1" max="65535"
                      value="{{ port.port_number }}" required>
                  </td>
                  <td>
                    <select name="protocols[]" class="form-select">
                      <option value="TCP" {% if port.protocol=='TCP' %}selected{% endif %}>TCP</option>
                      <option value="UDP" {% if port.protocol=='UDP' %}selected{% endif %}>UDP</option>
                      <option value="SCTP" {% if port.protocol=='SCTP' %}selected{% endif %}>SCTP</option>
                      <option value="OTHER" {% if port.protocol=='OTHER' %}selected{% endif %}>OTHER</option>
                    </select>
                  </td>
                  <td>
                    <input type="text" name="port_descriptions[]" class="form-control" value="{{ port.description }}"
                      placeholder="Description">
                  </td>
                  <td>
                    <button type="button" class="btn btn-sm btn-ghost-danger" onclick="removePortRow(this)">
                      <span class="ti ti-trash"></span>
                    </button>
                  </td>
                </tr>
                {% endfor %}
                {% endif %}
                <!-- New rows will be added here dynamically -->
              </tbody>
            </table>
          </div>
          <small class="form-hint">Configure the network ports used by this application</small>
        </div>

        <div class="form-footer">
          <button type="submit" class="btn btn-primary">Save Application</button>
          {% if edit_mode %}
          <a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="btn btn-outline-secondary ms-2">Cancel</a>
          {% else %}
          <a href="{{ dashboard_link }}" class="btn btn-outline-secondary ms-2">Cancel</a>
          {% endif %}
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
  {% if app and app.id %}
  const appId = {{ app.id | tojson }};
  {% else %}
  const appId = null;
  {% endif %}

  // Setup markdown preview
  setupMarkdownPreview();

  // Setup port management
  setupPortHandlers();
</script>

<script>
  document.body.addEventListener('htmx:configRequest', (event) => {
    event.detail.headers['X-CSRFToken'] = "{{ csrf_token() }}";
  });
</script>

<script>
  // Port management functions
  function addPortRow(portNumber = '', protocol = 'TCP', description = '') {
    const tbody = document.querySelector('#ports-table tbody');
    const newRow = document.createElement('tr');
    newRow.innerHTML = `
      <td>
        <input type="number" name="port_numbers[]" class="form-control" 
               min="1" max="65535" value="${portNumber}" required>
      </td>
      <td>
        <select name="protocols[]" class="form-select">
          <option value="TCP" ${protocol === 'TCP' ? 'selected' : ''}>TCP</option>
          <option value="UDP" ${protocol === 'UDP' ? 'selected' : ''}>UDP</option>
          <option value="SCTP" ${protocol === 'SCTP' ? 'selected' : ''}>SCTP</option>
          <option value="OTHER" ${protocol === 'OTHER' ? 'selected' : ''}>OTHER</option>
        </select>
      </td>
      <td>
        <input type="text" name="port_descriptions[]" class="form-control" 
               value="${description}" placeholder="Description">
      </td>
      <td>
        <button type="button" class="btn btn-sm btn-ghost-danger" onclick="removePortRow(this)">
          <span class="ti ti-trash"></span>
        </button>
      </td>
    `;
    tbody.appendChild(newRow);
  }

  function removePortRow(button) {
    button.closest('tr').remove();
  }

  async function generateRandomPort() {
    try {
      const serverId = document.querySelector('select[name="server_id"]').value;
      if (!serverId) {
        showNotification('Please select a server first', 'warning');
        return;
      }

      const response = await fetch(`/api/servers/${serverId}/suggest_port`);
      const data = await response.json();

      if (data.port) {
        addPortRow(data.port);
      } else {
        showNotification('No available ports found', 'warning');
      }
    } catch (error) {
      console.error('Error generating random port:', error);
      showNotification('Failed to generate random port', 'danger');
    }
  }

  function setupPortHandlers() {
    // Add port button
    document.getElementById('add-port-btn')?.addEventListener('click', () => addPortRow());

    // Random port button
    document.getElementById('random-port-btn')?.addEventListener('click', generateRandomPort);
  }
</script>
{% endblock %}