websites/homedocs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
pika 2025-04-03 16:58:01 +02:00
parent 2b36992be1
commit 25087d055c
16 changed files with 1394 additions and 816 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/templates/dashboard/app_form.html
View file

@ -435,4 +435,4 @@
}
});
</script>
{% endblock %}
{% endblock %}

97
app/templates/dashboard/app_list.html Normal file
View file

@ -0,0 +1,97 @@
{% 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">
Applications
</h2>
</div>
<div class="col-auto ms-auto d-print-none">
<div class="btn-list">
<a href="{{ url_for('dashboard.app_new') }}" class="btn btn-primary d-none d-sm-inline-block">
<span class="ti ti-plus me-2"></span>
New Application
</a>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">All Applications</h3>
</div>
<div class="table-responsive">
<table class="table table-vcenter card-table">
<thead>
<tr>
<th>Name</th>
<th>Server</th>
<th>Ports</th>
<th>Created</th>
<th class="w-1"></th>
</tr>
</thead>
<tbody>
{% for app in apps %}
<tr>
<td>
<a href="{{ url_for('dashboard.app_view', app_id=app.id) }}">{{ app.name }}</a>
</td>
<td>
<a href="{{ url_for('dashboard.server_view', server_id=app.server.id) }}">
{{ app.server.hostname }}
</a>
</td>
<td>
{% if app.ports %}
{% for port in app.ports %}
<span class="badge bg-azure me-1">{{ port.port_number }}/{{ port.protocol }}</span>
{% endfor %}
{% else %}
<span class="text-muted">No ports defined</span>
{% endif %}
</td>
<td class="text-muted">{{ app.created_at.strftime('%Y-%m-%d') }}</td>
<td>
<div class="btn-list flex-nowrap">
<a href="{{ url_for('dashboard.app_edit', app_id=app.id) }}" class="btn btn-sm btn-outline-primary">
Edit
</a>
</div>
</td>
</tr>
{% else %}
<tr>
<td colspan="5" class="text-center py-4">
<div class="empty">
<div class="empty-img">
<span class="ti ti-apps" style="font-size: 3rem;"></span>
</div>
<p class="empty-title">No applications found</p>
<p class="empty-subtitle text-muted">
Start by creating a new application.
</p>
<div class="empty-action">
<a href="{{ url_for('dashboard.app_new') }}" class="btn btn-primary">
<span class="ti ti-plus me-2"></span>
New Application
</a>
</div>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

228
app/templates/dashboard/overview.html
View file

@ -6,7 +6,7 @@
<div class="row align-items-center">
<div class="col">
<h2 class="page-title">
Infrastructure Overview
{{ title }}
</h2>
</div>
<div class="col-auto ms-auto d-print-none">
@ -19,16 +19,11 @@
<span class="ti ti-plus me-2"></span>
New Server
</a>
<a href="{{ url_for('dashboard.app_new') }}" class="btn btn-primary d-none d-sm-inline-block">
<span class="ti ti-plus me-2"></span>
New Application
</a>
</div>
</div>
</div>
</div>
<!-- Hierarchical View -->
<div class="row mt-3">
<div class="col-12">
<div class="card">
@ -36,47 +31,115 @@
<h3 class="card-title">Network Infrastructure</h3>
</div>
<div class="card-body">
<!-- Subnets -->
{% if hierarchy.subnets %}
{% for subnet in hierarchy.subnets %}
<div class="subnet-container mb-4">
<div class="subnet-header d-flex align-items-center p-2 bg-azure-lt rounded">
<span class="ti ti-network me-2"></span>
<h4 class="m-0">
<a href="{{ url_for('ipam.subnet_view', subnet_id=subnet.id) }}" class="text-reset">
{{ subnet.cidr }}
</a>
{% if subnet.location %}
<small class="text-muted ms-2">({{ subnet.location }})</small>
{% endif %}
{% if subnet.description is defined and subnet.description %}
<small class="text-muted ms-2">{{ subnet.description }}</small>
{% endif %}
</h4>
<div class="ms-auto">
<a href="{{ url_for('dashboard.server_new') }}?subnet_id={{ subnet.id }}"
class="btn btn-sm btn-outline-primary">
<span class="ti ti-plus me-1"></span> Add Server
</a>
</div>
{% if hierarchy.locations %}
{% for location_name, location_data in hierarchy.locations.items() %}
<div class="location-container mb-5">
<div class="location-header d-flex align-items-center p-2 bg-primary-lt rounded">
<span class="ti ti-building me-2"></span>
<h3 class="m-0">{{ location_name }}</h3>
</div>
<!-- Servers in this subnet -->
{% if subnet.servers %}
<div class="ps-4 mt-2">
{% for server in subnet.servers %}
<div class="server-container mb-3 border-start ps-3">
<div class="server-header d-flex align-items-center p-2 bg-light rounded">
<!-- Subnets in this location -->
{% if location_data.subnets %}
<div class="ms-4 mt-3">
<h4 class="mb-3">Subnets</h4>
{% for subnet in location_data.subnets %}
<div class="subnet-container mb-4">
<div class="subnet-header d-flex align-items-center p-2 bg-azure-lt rounded">
<span class="ti ti-network me-2"></span>
<h4 class="m-0">
<a href="{{ url_for('ipam.subnet_view', subnet_id=subnet.id) }}" class="text-reset">
{{ subnet.cidr }}
</a>
{% if subnet.description is defined and subnet.description %}
<small class="text-muted ms-2">{{ subnet.description }}</small>
{% endif %}
</h4>
<div class="ms-auto">
<a href="{{ url_for('dashboard.server_new') }}?subnet_id={{ subnet.id }}"
class="btn btn-sm btn-outline-primary">
<span class="ti ti-plus me-1"></span> Add Server
</a>
</div>
</div>
<!-- Servers in this subnet -->
{% if subnet.servers %}
<div class="ms-4 mt-2">
{% for server in subnet.servers %}
<div class="server-container mb-3">
<div class="server-header d-flex align-items-center p-2 bg-light rounded border-start border-3">
<span class="ti ti-server me-2"></span>
<h5 class="m-0">
<a href="{{ url_for('dashboard.server_view', server_id=server.id) }}" class="text-reset">
{{ server.hostname }}
</a>
<small class="text-muted ms-2">{{ server.ip_address }}</small>
</h5>
<div class="ms-auto">
<a href="{{ url_for('dashboard.app_new') }}?server_id={{ server.id }}"
class="btn btn-sm btn-outline-secondary">
<span class="ti ti-plus me-1"></span> Add App
</a>
</div>
</div>
<!-- Apps on this server -->
{% if server.apps %}
<div class="ms-4 mt-1">
{% for app in server.apps %}
<div class="app-container mb-2">
<div class="app-header d-flex align-items-center p-2 bg-white rounded border-start border-3">
<span class="ti ti-app-window me-2"></span>
<h6 class="m-0">
<a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="text-reset">
{{ app.name }}
</a>
{% if app.ports %}
<small class="text-muted ms-2">
Ports:
{% for port in app.ports %}
<span class="badge bg-blue-lt">{{ port.port }}/{{ port.protocol }}</span>
{% endfor %}
</small>
{% endif %}
</h6>
</div>
</div>
{% endfor %}
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% else %}
<div class="ms-4 mt-2 text-muted">
<em>No servers in this subnet</em>
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
<!-- Standalone servers in this location -->
{% if location_data.standalone_servers %}
<div class="ms-4 mt-3">
<h4 class="mb-3">Standalone Servers</h4>
{% for server in location_data.standalone_servers %}
<div class="server-container mb-3">
<div class="server-header d-flex align-items-center p-2 bg-light rounded border-start border-3">
<span class="ti ti-server me-2"></span>
<h5 class="m-0">
<a href="{{ url_for('dashboard.server_view', server_id=server.id) }}" class="text-reset">
{{ server.hostname }}
</a>
<small class="text-muted ms-2">{{ server.ip_address }}</small>
<span class="badge bg-purple-lt ms-2">Public IP</span>
</h5>
<div class="ms-auto">
<a href="{{ url_for('dashboard.app_new') }}?server_id={{ server.id }}"
class="btn btn-sm btn-outline-primary">
class="btn btn-sm btn-outline-secondary">
<span class="ti ti-plus me-1"></span> Add App
</a>
</div>
@ -84,102 +147,36 @@
<!-- Apps on this server -->
{% if server.apps %}
<div class="ps-4 mt-2">
<div class="ms-4 mt-1">
{% for app in server.apps %}
<div class="app-container mb-2 border-start ps-3">
<div class="app-header d-flex align-items-center p-2 bg-light-lt rounded">
<div class="app-container mb-2">
<div class="app-header d-flex align-items-center p-2 bg-white rounded border-start border-3">
<span class="ti ti-app-window me-2"></span>
<h6 class="m-0">
<a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="text-reset">
{{ app.name }}
</a>
{% if app.ports %}
<small class="text-muted ms-2">
Ports:
{% for port in app.ports %}
<span class="badge bg-blue-lt">{{ port.port }}/{{ port.protocol }}</span>
{% endfor %}
</small>
{% endif %}
</h6>
<div class="ms-2">
{% for port in app.ports %}
<span class="badge bg-blue-lt">{{ port.port_number }}/{{ port.protocol }}</span>
{% endfor %}
</div>
</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="ps-4 mt-2">
<div class="text-muted fst-italic">No applications</div>
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% else %}
<div class="ps-4 mt-2">
<div class="text-muted fst-italic">No servers in this subnet</div>
</div>
{% endif %}
</div>
{% endfor %}
{% endif %}
<!-- Standalone Servers -->
{% if hierarchy.standalone_servers %}
<div class="standalone-servers-container mb-4">
<div class="subnet-header d-flex align-items-center p-2 bg-yellow-lt rounded">
<span class="ti ti-server me-2"></span>
<h4 class="m-0">Standalone Servers</h4>
</div>
<div class="ps-4 mt-2">
{% for server in hierarchy.standalone_servers %}
<div class="server-container mb-3 border-start ps-3">
<div class="server-header d-flex align-items-center p-2 bg-light rounded">
<span class="ti ti-server me-2"></span>
<h5 class="m-0">
<a href="{{ url_for('dashboard.server_view', server_id=server.id) }}" class="text-reset">
{{ server.hostname }}
</a>
<small class="text-muted ms-2">{{ server.ip_address }}</small>
</h5>
<div class="ms-auto">
<a href="{{ url_for('dashboard.app_new') }}?server_id={{ server.id }}"
class="btn btn-sm btn-outline-primary">
<span class="ti ti-plus me-1"></span> Add App
</a>
</div>
</div>
<!-- Apps on this server -->
{% if server.apps %}
<div class="ps-4 mt-2">
{% for app in server.apps %}
<div class="app-container mb-2 border-start ps-3">
<div class="app-header d-flex align-items-center p-2 bg-light-lt rounded">
<span class="ti ti-app-window me-2"></span>
<h6 class="m-0">
<a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="text-reset">
{{ app.name }}
</a>
</h6>
<div class="ms-2">
{% for port in app.ports %}
<span class="badge bg-blue-lt">{{ port.port_number }}/{{ port.protocol }}</span>
{% endfor %}
</div>
</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="ps-4 mt-2">
<div class="text-muted fst-italic">No applications</div>
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% if not hierarchy.subnets and not hierarchy.standalone_servers %}
{% else %}
<div class="text-center py-4">
<div class="empty">
<div class="empty-img">
@ -209,6 +206,7 @@
</div>
<style>
.location-container,
.subnet-container,
.server-container,
.app-container {
@ -224,12 +222,14 @@
border-left-color: var(--tblr-primary) !important;
}
.location-header,
.subnet-header,
.server-header,
.app-header {
transition: all 0.2s ease;
}
.location-header:hover,
.subnet-header:hover,
.server-header:hover,
.app-header:hover {

362
app/templates/dashboard/server_form.html
View file

@ -6,163 +6,285 @@
<div class="row align-items-center">
<div class="col">
<h2 class="page-title">
{% if server %}Edit Server{% else %}Add New Server{% endif %}
{{ title }}
</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 %}
<div class="row mt-3">
<div class="col-12">
<div class="card">
<div class="card-body">
<form method="POST">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div class="mb-3">
<label for="hostname" class="form-label">Hostname</label>
<input type="text" class="form-control" id="hostname" name="hostname" required
value="{{ server.hostname if server else '' }}">
</div>
<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 class="mb-3">
<label for="ip_address" class="form-label">IP Address</label>
<input type="text" class="form-control" id="ip_address" name="ip_address" required
value="{{ server.ip_address if server else '' }}">
</div>
<div class="mb-3">
<div class="d-flex align-items-center">
<div class="flex-grow-1">
<label for="subnet_id" class="form-label">Subnet (optional for public IPs)</label>
<select class="form-select" id="subnet_id" name="subnet_id">
<option value="">No subnet (standalone server)</option>
{% for subnet in subnets %}
<option value="{{ subnet.id }}" {% if server and server.subnet_id==subnet.id %}selected{% endif %}>
{{ subnet.cidr }} ({{ subnet.location_ref.name }})
</option>
{% endfor %}
</select>
</div>
<div class="ms-2 pt-4">
<button type="button" class="btn btn-outline-primary btn-icon" data-bs-toggle="modal"
data-bs-target="#add-subnet-modal">
<span class="ti ti-plus"></span>
</button>
</div>
</div>
</div>
<div class="mb-3">
<div class="d-flex align-items-center">
<div class="flex-grow-1">
<label for="location_id" class="form-label">Location (required for standalone servers)</label>
<select class="form-select" id="location_id" name="location_id">
<option value="">Select a location</option>
{% for location in locations %}
<option value="{{ location.id }}" {% if server and server.location_id==location.id %}selected{%
endif %}>
{{ location.name }}
</option>
{% endfor %}
</select>
</div>
<div class="ms-2 pt-4">
<button type="button" class="btn btn-outline-primary btn-icon" data-bs-toggle="modal"
data-bs-target="#add-location-modal">
<span class="ti ti-plus"></span>
</button>
</div>
</div>
</div>
<div class="mb-3">
<label for="description" class="form-label">Description (optional)</label>
<textarea class="form-control" id="description" name="description"
rows="3">{{ server.description if server else '' }}</textarea>
</div>
<div class="form-footer">
<button type="submit" class="btn btn-primary">Save</button>
<a href="{{ url_for('dashboard.server_list') }}" class="btn btn-link">Cancel</a>
</div>
</form>
</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>
</div>
<!-- Quick Subnet Creation Modal -->
<div class="modal fade" id="quickSubnetModal" tabindex="-1" aria-labelledby="quickSubnetModalLabel" aria-hidden="true">
<div class="modal-dialog">
<!-- Add Subnet Modal -->
<div class="modal modal-blur fade" id="add-subnet-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="quickSubnetModalLabel">Quick Subnet Creation</h5>
<h5 class="modal-title">Add New Subnet</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>
<form id="add-subnet-form">
<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="new-subnet-ip" placeholder="192.168.1.0" required>
</div>
<div class="col-md-4">
<label class="form-label required">Prefix</label>
<select class="form-select" id="new-subnet-prefix" required>
{% for i in range(8, 31) %}
<option value="{{ i }}">{{ i }} ({{ 2**(32-i) }} hosts)</option>
{% endfor %}
</select>
</div>
</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>
<label class="form-label required">Location</label>
<select class="form-select" id="new-subnet-location" required>
<option value="">Select a location</option>
{% for location in locations %}
<option value="{{ location.id }}">{{ location.name }}</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 class="form-check">
<input class="form-check-input" type="checkbox" id="new-subnet-auto-scan">
<label class="form-check-label" for="new-subnet-auto-scan">
Auto-scan for active hosts
</label>
</div>
</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>
<button type="button" class="btn btn-link link-secondary" data-bs-dismiss="modal">
Cancel
</button>
<button type="button" class="btn btn-primary ms-auto" id="save-subnet-btn">
<span class="ti ti-plus me-2"></span>
Add Subnet
</button>
</div>
</div>
</div>
</div>
<!-- Add Location Modal -->
<div class="modal modal-blur fade" id="add-location-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add New Location</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="add-location-form">
<div class="mb-3">
<label class="form-label required">Name</label>
<input type="text" class="form-control" id="new-location-name" required>
</div>
<div class="mb-3">
<label class="form-label">Description (optional)</label>
<textarea class="form-control" id="new-location-description" rows="3"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link link-secondary" data-bs-dismiss="modal">
Cancel
</button>
<button type="button" class="btn btn-primary ms-auto" id="save-location-btn">
<span class="ti ti-plus me-2"></span>
Add Location
</button>
</div>
</div>
</div>
</div>
<!-- Add this JavaScript at the end -->
<script>
document.addEventListener('DOMContentLoaded', function () {
const createSubnetBtn = document.getElementById('createSubnetBtn');
const subnetSelect = document.getElementById('subnet_id');
const locationField = document.querySelector('.mb-3:has(#location_id)');
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;
function updateLocationVisibility() {
if (subnetSelect.value === '') {
locationField.style.display = 'block';
document.getElementById('location_id').setAttribute('required', 'required');
} else {
locationField.style.display = 'none';
document.getElementById('location_id').removeAttribute('required');
}
}
// 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);
// Initial state
if (locationField) {
updateLocationVisibility();
// Update on change
subnetSelect.addEventListener('change', updateLocationVisibility);
}
// 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.');
});
});
// Add subnet functionality
const saveSubnetBtn = document.getElementById('save-subnet-btn');
const addSubnetModal = document.getElementById('add-subnet-modal');
if (saveSubnetBtn && addSubnetModal) {
const bsSubnetModal = new bootstrap.Modal(addSubnetModal);
saveSubnetBtn.addEventListener('click', function () {
const ip = document.getElementById('new-subnet-ip').value.trim();
const prefix = document.getElementById('new-subnet-prefix').value;
const locationId = document.getElementById('new-subnet-location').value;
const autoScan = document.getElementById('new-subnet-auto-scan').checked;
const csrfToken = document.querySelector('input[name="csrf_token"]').value;
if (!ip || !prefix || !locationId) {
alert('All fields are required');
return;
}
apiFunctions.createSubnet(`${ip}/${prefix}`, locationId, autoScan, csrfToken)
.then(data => {
// Add new option to select dropdown
const locationName = document.querySelector(`#new-subnet-location option[value="${locationId}"]`).textContent;
const newOption = new Option(`${data.cidr} (${locationName})`, data.id, true, true);
subnetSelect.add(newOption);
// Reset form and close modal
document.getElementById('new-subnet-ip').value = '';
document.getElementById('new-subnet-prefix').value = '24';
document.getElementById('new-subnet-location').value = '';
document.getElementById('new-subnet-auto-scan').checked = false;
bsSubnetModal.hide();
// Trigger the subnet change event to hide location if needed
const event = new Event('change');
subnetSelect.dispatchEvent(event);
})
.catch(error => {
console.error('Error:', error);
alert('Failed to create subnet: ' + error.message);
});
});
}
// Add location functionality
const saveLocationBtn = document.getElementById('save-location-btn');
const locationSelect = document.getElementById('location_id');
const addLocationModal = document.getElementById('add-location-modal');
if (saveLocationBtn && locationSelect && addLocationModal) {
const bsLocationModal = new bootstrap.Modal(addLocationModal);
saveLocationBtn.addEventListener('click', function () {
const name = document.getElementById('new-location-name').value.trim();
const description = document.getElementById('new-location-description').value.trim();
const csrfToken = document.querySelector('input[name="csrf_token"]').value;
if (!name) {
alert('Location name is required');
return;
}
apiFunctions.createLocation(name, description, csrfToken)
.then(data => {
// Add new option to select dropdown
const newOption = new Option(data.name, data.id, true, true);
locationSelect.add(newOption);
// Reset form and close modal
document.getElementById('new-location-name').value = '';
document.getElementById('new-location-description').value = '';
bsLocationModal.hide();
})
.catch(error => {
console.error('Error:', error);
alert('Failed to create location: ' + error.message);
});
});
}
});
</script>
{% endblock %}

179
app/templates/ipam/subnet_form.html
View file

@ -52,9 +52,26 @@
<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 class="d-flex align-items-center">
<div class="flex-grow-1">
<label for="location_id" class="form-label required">Location</label>
<select class="form-select" id="location_id" name="location_id" required>
<option value="">Select a location</option>
{% for location in locations %}
<option value="{{ location.id }}" {% if subnet and subnet.location_id==location.id %}selected{% endif
%}>
{{ location.name }}
</option>
{% endfor %}
</select>
</div>
<div class="ms-2 pt-4">
<button type="button" class="btn btn-outline-primary btn-icon" data-bs-toggle="modal"
data-bs-target="#add-location-modal">
<span class="ti ti-plus"></span>
</button>
</div>
</div>
</div>
<div class="mb-3">
@ -77,48 +94,154 @@
</div>
</div>
<!-- Add Location Modal -->
<div class="modal modal-blur fade" id="add-location-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add New Location</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="add-location-form">
<div class="mb-3">
<label class="form-label required">Location Name</label>
<input type="text" class="form-control" id="new-location-name" required>
</div>
<div class="mb-3">
<label class="form-label">Description</label>
<textarea class="form-control" id="new-location-description" rows="3"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link link-secondary" data-bs-dismiss="modal">
Cancel
</button>
<button type="button" class="btn btn-primary ms-auto" id="save-location-btn">
<span class="ti ti-plus me-2"></span>
Add Location
</button>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Handle CIDR combination
const ipAddressInput = document.getElementById('ip-address');
const prefixSelect = document.getElementById('prefix');
const cidrValueInput = document.getElementById('cidr-value');
const cidrValue = document.getElementById('cidr-value');
// Function to update the hidden CIDR field
function updateCidrValue() {
function updateCIDR() {
const ip = ipAddressInput.value.trim();
const prefix = prefixSelect.value;
if (ip) {
cidrValueInput.value = `${ip}/${prefix}`;
cidrValue.value = `${ip}/${prefix}`;
}
}
// Add event listeners
ipAddressInput.addEventListener('input', updateCidrValue);
prefixSelect.addEventListener('change', updateCidrValue);
if (ipAddressInput && prefixSelect && cidrValue) {
ipAddressInput.addEventListener('input', updateCIDR);
prefixSelect.addEventListener('change', updateCIDR);
}
// 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;
// Add location functionality
const saveLocationBtn = document.getElementById('save-location-btn');
const locationSelect = document.getElementById('location_id');
const addLocationModal = document.getElementById('add-location-modal');
if (saveLocationBtn && locationSelect && addLocationModal) {
const bsModal = new bootstrap.Modal(addLocationModal);
saveLocationBtn.addEventListener('click', function () {
const name = document.getElementById('new-location-name').value.trim();
const description = document.getElementById('new-location-description').value.trim();
const csrfToken = document.querySelector('input[name="csrf_token"]').value;
if (!name) {
alert('Location name is required');
return;
}
apiFunctions.createLocation(name, description, csrfToken)
.then(data => {
// Add new option to select dropdown
const newOption = new Option(data.name, data.id, true, true);
locationSelect.add(newOption);
// Reset form and close modal
document.getElementById('new-location-name').value = '';
document.getElementById('new-location-description').value = '';
bsModal.hide();
})
.catch(error => {
console.error('Error:', error);
alert('Failed to create location: ' + error.message);
});
});
}
});
</script>
{% endblock %}
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function () {
// Handle CIDR combination
const ipAddressInput = document.getElementById('ip-address');
const prefixSelect = document.getElementById('prefix');
const cidrValue = document.getElementById('cidr-value');
function updateCIDR() {
const ip = ipAddressInput.value.trim();
const prefix = prefixSelect.value;
if (ip) {
cidrValue.value = `${ip}/${prefix}`;
}
}
// Ensure form submission updates the CIDR value
document.querySelector('form').addEventListener('submit', function (e) {
updateCidrValue();
if (ipAddressInput && prefixSelect && cidrValue) {
ipAddressInput.addEventListener('input', updateCIDR);
prefixSelect.addEventListener('change', updateCIDR);
}
// Basic validation
if (!cidrValueInput.value) {
e.preventDefault();
alert('Please enter a valid IP address and prefix');
}
});
// Add location functionality
const saveLocationBtn = document.getElementById('save-location-btn');
const locationSelect = document.getElementById('location_id');
const addLocationModal = document.getElementById('add-location-modal');
if (saveLocationBtn && locationSelect && addLocationModal) {
const bsModal = new bootstrap.Modal(addLocationModal);
saveLocationBtn.addEventListener('click', function () {
const name = document.getElementById('new-location-name').value.trim();
const description = document.getElementById('new-location-description').value.trim();
const csrfToken = document.querySelector('input[name="csrf_token"]').value;
if (!name) {
alert('Location name is required');
return;
}
apiFunctions.createLocation(name, description, csrfToken)
.then(data => {
// Add new option to select dropdown
const newOption = new Option(data.name, data.id, true, true);
locationSelect.add(newOption);
// Reset form and close modal
document.getElementById('new-location-name').value = '';
document.getElementById('new-location-description').value = '';
bsModal.hide();
})
.catch(error => {
console.error('Error:', error);
alert('Failed to create location: ' + error.message);
});
});
}
});
</script>
{% endblock %}