batman (working version kinda)

app/templates/ipam/subnet_detail.html

@@ -0,0 +1,149 @@
+{% 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 %}