homedocs/app/templates/dashboard/server_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">
          {% if server %}Edit Server{% else %}Add New Server{% endif %}
        </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="{% if server %}{{ url_for('dashboard.server_edit', server_id=server.id) }}{% else %}{{ url_for('dashboard.server_new') }}{% endif %}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="mb-3">
          <label class="form-label required">Hostname</label>
          <input type="text" class="form-control" name="hostname" required
            value="{% if server %}{{ server.hostname }}{% endif %}">
        </div>
        <div class="mb-3">
          <label class="form-label required">IP Address</label>
          <input type="text" class="form-control" name="ip_address" placeholder="192.168.1.10" required
            value="{% if server %}{{ server.ip_address }}{% endif %}">
        </div>
        <div class="mb-3">
          <label class="form-label required">Subnet</label>
          <div class="input-group">
            <select class="form-select" name="subnet_id" required id="subnet-select">
              <option value="">Select a subnet</option>
              {% for subnet in subnets %}
              <option value="{{ subnet.id }}" {% if server and server.subnet_id==subnet.id %}selected{% endif %}>
                {{ subnet.cidr }} ({{ subnet.location }})
              </option>
              {% endfor %}
            </select>
            <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal"
              data-bs-target="#quickSubnetModal">
              <span class="ti ti-plus"></span>
            </button>
          </div>
        </div>
        <div class="mb-3">
          <label class="form-label">Documentation</label>
          <textarea class="form-control" name="documentation"
            rows="10">{% if server %}{{ server.documentation }}{% endif %}</textarea>
          <div class="form-text">Markdown is supported</div>
        </div>
        <div class="form-footer">
          <button type="submit" class="btn btn-primary">Save</button>
          {% if server %}
          <a href="{{ url_for('dashboard.server_view', server_id=server.id) }}"
            class="btn btn-outline-secondary ms-2">Cancel</a>
          {% else %}
          <a href="{{ url_for('dashboard.dashboard_home') }}" class="btn btn-outline-secondary ms-2">Cancel</a>
          {% endif %}
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Quick Subnet Creation Modal -->
<div class="modal fade" id="quickSubnetModal" tabindex="-1" aria-labelledby="quickSubnetModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="quickSubnetModalLabel">Quick Subnet Creation</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="quickSubnetForm">
          <div class="mb-3">
            <label class="form-label required">IP Address</label>
            <input type="text" class="form-control" id="subnet-ip" placeholder="192.168.1.0" required>
          </div>
          <div class="mb-3">
            <label class="form-label required">Prefix</label>
            <select class="form-select" id="subnet-prefix" required>
              {% for i in range(8, 31) %}
              <option value="{{ i }}" {% if i==24 %}selected{% endif %}>{{ i }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label required">Location</label>
            <input type="text" class="form-control" id="subnet-location" required>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="createSubnetBtn">Create</button>
      </div>
    </div>
  </div>
</div>

<!-- Add this JavaScript at the end -->
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const createSubnetBtn = document.getElementById('createSubnetBtn');

    createSubnetBtn.addEventListener('click', function () {
      const ip = document.getElementById('subnet-ip').value;
      const prefix = document.getElementById('subnet-prefix').value;
      const location = document.getElementById('subnet-location').value;

      // Validate inputs
      if (!ip || !prefix || !location) {
        alert('All fields are required');
        return;
      }

      // Create the subnet via AJAX
      fetch('/ipam/subnet/create-ajax', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': document.querySelector('input[name="csrf_token"]').value
        },
        body: JSON.stringify({
          cidr: `${ip}/${prefix}`,
          location: location,
          auto_scan: false
        })
      })
        .then(response => response.json())
        .then(data => {
          if (data.success) {
            // Add the new subnet to the dropdown
            const selectElement = document.getElementById('subnet-select');
            const option = document.createElement('option');
            option.value = data.subnet_id;
            option.text = `${data.cidr} (${data.location})`;
            option.selected = true;
            selectElement.appendChild(option);

            // Close the modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('quickSubnetModal'));
            modal.hide();
          } else {
            alert(data.error || 'Failed to create subnet');
          }
        })
        .catch(error => {
          console.error('Error:', error);
          alert('An error occurred. Please try again.');
        });
    });
  });
</script>
{% endblock %}