124 lines
No EOL
4.3 KiB
HTML
124 lines
No EOL
4.3 KiB
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 subnet %}Edit Subnet{% else %}New Subnet{% 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 subnet %}{{ url_for('ipam.subnet_edit', subnet_id=subnet.id) }}{% else %}{{ url_for('ipam.subnet_new') }}{% endif %}">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
|
|
<!-- IP Address and Prefix Selection -->
|
|
<div class="row mb-3">
|
|
<div class="col-md-8">
|
|
<label class="form-label required">IP Address</label>
|
|
<input type="text" class="form-control" id="ip-address" placeholder="192.168.1.0" required
|
|
value="{% if subnet %}{{ subnet.cidr.split('/')[0] }}{% endif %}">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label required">Prefix</label>
|
|
<select class="form-select" id="prefix" required>
|
|
{% for i in range(8, 31) %}
|
|
<option value="{{ i }}" {% if subnet and subnet.cidr.split('/')[1]|int==i %}selected{% endif %}>
|
|
{{ i }} ({{ 2**(32-i) }} hosts)
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hidden CIDR field to submit combined value -->
|
|
<input type="hidden" name="cidr" id="cidr-value" value="{% if subnet %}{{ subnet.cidr }}{% endif %}">
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label required">Location</label>
|
|
<input type="text" class="form-control" name="location" required
|
|
value="{% if subnet %}{{ subnet.location }}{% endif %}">
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="auto_scan" id="auto_scan" {% if subnet and
|
|
subnet.auto_scan %}checked{% endif %}>
|
|
<label class="form-check-label" for="auto_scan">
|
|
Auto-scan for active hosts
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-footer">
|
|
<button type="submit" class="btn btn-primary">Save</button>
|
|
<a href="{% if subnet %}{{ url_for('ipam.subnet_view', subnet_id=subnet.id) }}{% else %}{{ url_for('ipam.ipam_home') }}{% endif %}"
|
|
class="btn btn-outline-secondary ms-2">Cancel</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const ipAddressInput = document.getElementById('ip-address');
|
|
const prefixSelect = document.getElementById('prefix');
|
|
const cidrValueInput = document.getElementById('cidr-value');
|
|
|
|
// Function to update the hidden CIDR field
|
|
function updateCidrValue() {
|
|
const ip = ipAddressInput.value.trim();
|
|
const prefix = prefixSelect.value;
|
|
|
|
if (ip) {
|
|
cidrValueInput.value = `${ip}/${prefix}`;
|
|
}
|
|
}
|
|
|
|
// Add event listeners
|
|
ipAddressInput.addEventListener('input', updateCidrValue);
|
|
prefixSelect.addEventListener('change', updateCidrValue);
|
|
|
|
// Initialize CIDR value if editing
|
|
if (cidrValueInput.value) {
|
|
const parts = cidrValueInput.value.split('/');
|
|
if (parts.length === 2) {
|
|
ipAddressInput.value = parts[0];
|
|
const prefix = parseInt(parts[1]);
|
|
if (!isNaN(prefix) && prefix >= 8 && prefix <= 30) {
|
|
prefixSelect.value = prefix;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Ensure form submission updates the CIDR value
|
|
document.querySelector('form').addEventListener('submit', function (e) {
|
|
updateCidrValue();
|
|
|
|
// Basic validation
|
|
if (!cidrValueInput.value) {
|
|
e.preventDefault();
|
|
alert('Please enter a valid IP address and prefix');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |