149 lines
No EOL
4.1 KiB
HTML
149 lines
No EOL
4.1 KiB
HTML
{% extends "layout.html" %}
|
|
|
|
{% block content %}
|
|
<div class="container">
|
|
<div class="d-flex mb-3">
|
|
<div>
|
|
<h1>Subnetz: {{ subnet.cidr }}</h1>
|
|
<p>Standort: {{ subnet.location }}</p>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<button class="btn btn-outline-primary" hx-get="/ipam/subnet/{{ subnet.id }}/export" hx-swap="none">
|
|
CSV-Export
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h3 class="card-title">Subnetz-Details</h3>
|
|
<div class="mb-3">
|
|
<label class="form-label">Netzwerk-Adresse</label>
|
|
<div>{{ subnet.cidr.split('/')[0] }}</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Präfixlänge</label>
|
|
<div>{{ subnet.cidr.split('/')[1] }}</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Erste nutzbare IP</label>
|
|
<div>{{ first_ip }}</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Letzte nutzbare IP</label>
|
|
<div>{{ last_ip }}</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Gesamte IPs</label>
|
|
<div>{{ total_ips }}</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Belegte IPs</label>
|
|
<div>{{ used_ips }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">IP-Belegung</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="subnet-visualization" class="subnet-map">
|
|
<!-- Wird via JavaScript befüllt -->
|
|
<div class="text-center p-3">
|
|
<div class="spinner-border text-blue" role="status"></div>
|
|
<div>Lade Daten...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// Load the subnet visualization
|
|
fetch('/ipam/subnet/{{ subnet.id }}/visualization')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const container = document.getElementById('subnet-visualization');
|
|
container.innerHTML = '';
|
|
|
|
// Create a grid of IP boxes
|
|
const grid = document.createElement('div');
|
|
grid.className = 'ip-grid';
|
|
|
|
data.forEach(ip => {
|
|
const box = document.createElement('div');
|
|
box.className = `ip-box ${ip.status}`;
|
|
box.title = ip.hostname ? `${ip.ip} - ${ip.hostname}` : ip.ip;
|
|
|
|
const addressSpan = document.createElement('span');
|
|
addressSpan.className = 'ip-address';
|
|
addressSpan.textContent = ip.ip.split('.')[3]; // Only show last octet
|
|
|
|
box.appendChild(addressSpan);
|
|
|
|
if (ip.hostname) {
|
|
const hostnameSpan = document.createElement('span');
|
|
hostnameSpan.className = 'ip-hostname';
|
|
hostnameSpan.textContent = ip.hostname;
|
|
box.appendChild(hostnameSpan);
|
|
}
|
|
|
|
grid.appendChild(box);
|
|
});
|
|
|
|
container.appendChild(grid);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading subnet visualization:', error);
|
|
document.getElementById('subnet-visualization').innerHTML =
|
|
'<div class="alert alert-danger">Fehler beim Laden der Visualisierung</div>';
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.ip-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
|
|
gap: 5px;
|
|
}
|
|
|
|
.ip-box {
|
|
border: 1px solid #ccc;
|
|
padding: 5px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.ip-box.used {
|
|
background-color: #e6f2ff;
|
|
border-color: #99c2ff;
|
|
}
|
|
|
|
.ip-box.available {
|
|
background-color: #f2f2f2;
|
|
}
|
|
|
|
.ip-address {
|
|
display: block;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ip-hostname {
|
|
display: block;
|
|
font-size: 10px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|
|
{% endblock %} |