181 lines
4.6 KiB
HTML
181 lines
4.6 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Subnetzvergabe</title>
|
|
<link rel="stylesheet" href="/css/classless.css">
|
|
<link rel="stylesheet" href="/css/sub.css">
|
|
<script src="/js/htmx.min.js"></script>
|
|
<script src="/js/idiomorph-ext.min.js"></script>
|
|
</head>
|
|
<body hx-ext="morph">
|
|
<h1>Subnetzvergabe</h1>
|
|
|
|
<details id="hints">
|
|
<summary>Hinweise zur Subnetzgröße</summary>
|
|
<figure>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th rowspan="2">Prefixlänge</th>
|
|
<th colspan="2">IPs</th>
|
|
<th rowspan="2">Bemerkung</th>
|
|
</tr>
|
|
<tr>
|
|
<th>Anzahl</th>
|
|
<th>Nutzbar</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>/32</td>
|
|
<td>1</td>
|
|
<td>1</td>
|
|
<td>
|
|
<ul>
|
|
<li>Einzelne IP</li>
|
|
<li>Gedacht für den Einsatz als Router IP</li>
|
|
<li>Für SNAT nötig</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>/31</td>
|
|
<td>2</td>
|
|
<td>2</td>
|
|
<td>
|
|
<ul>
|
|
<li>"Peering Netz"</li>
|
|
<li>Zwei unabhängige /32 bevorzugen</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>/30</td>
|
|
<td>4</td>
|
|
<td>2</td>
|
|
<td>
|
|
<ul>
|
|
<li>Sehr kleines Netz</li>
|
|
<li>Nicht wirklich sinnvoll</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>/29</td>
|
|
<td>8</td>
|
|
<td>6</td>
|
|
<td>
|
|
<ul>
|
|
<li>Sehr kleines Netz</li>
|
|
<li>Als Antennennetz an einem reinem Richtfunkstandort ausreichend</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>/28</td>
|
|
<td>16</td>
|
|
<td>14</td>
|
|
<td>
|
|
<ul>
|
|
<li>Sehr kleines Netz</li>
|
|
<li>Als Antennennetz an einem reinem Richtfunkstandort ausreichend</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>/27</td>
|
|
<td>32</td>
|
|
<td>30</td>
|
|
<td>
|
|
<ul>
|
|
<li>Kleines Netz</li>
|
|
<li>Für eine Wohnung, oder Gästezimmer ausreichend</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>/26</td>
|
|
<td>64</td>
|
|
<td>62</td>
|
|
<td>
|
|
<ul>
|
|
<li>Kleines Netz</li>
|
|
<li>Für eine Wohnung, Gästezimmer, kleinere Gasthäuser ausreichend</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</figure>
|
|
</details>
|
|
|
|
<div id="control">
|
|
<button hx-get="/api/alloc/32" hx-swap="none">/32</button>
|
|
<button hx-get="/api/alloc/31" hx-swap="none">/31</button>
|
|
<button hx-get="/api/alloc/30" hx-swap="none">/30</button>
|
|
<button hx-get="/api/alloc/29" hx-swap="none">/29</button>
|
|
<button hx-get="/api/alloc/28" hx-swap="none">/28</button>
|
|
<button hx-get="/api/alloc/27" hx-swap="none">/27</button>
|
|
<button hx-get="/api/alloc/26" hx-swap="none">/26</button>
|
|
<button hx-get="/api/alloc/25" hx-swap="none">/25</button>
|
|
<button hx-get="/api/alloc/24" hx-swap="none">/24</button>
|
|
</div>
|
|
|
|
{{ block "update" .Update }}<div id="updatemsg" class="card {{ .Type }}" hx-swap-oob="morph">{{ with .Content }}{{ . }}{{ end }}</div>{{ end }}
|
|
{{ block "treemap" .Treemap }}
|
|
<div id="treemap" hx-swap-oob="morph">
|
|
{{- with .ViewBox }}
|
|
<svg viewBox="{{.X}} {{.Y}} {{.W}} {{.H}}">
|
|
{{- end }}
|
|
<defs>
|
|
<filter id="shadow">
|
|
<feGaussianBlur stdDeviation="0.1" />
|
|
</filter>
|
|
</defs>
|
|
|
|
<g style="fill:gray; filter:url(#shadow);" transform="translate(0.1 0.1)">
|
|
{{- range .Regions }}{{ with .Rect }}
|
|
<rect x="{{.X}}" y="{{.Y}}" width="{{.W}}" height="{{.H}}" rx="0.2" />
|
|
{{- end }}{{ end }}
|
|
</g>
|
|
{{- range .Regions }}
|
|
<g style="fill:var(--cfg); stroke:white; stroke-width:0.1;">
|
|
<title>{{.Prefix}}</title>\n", p
|
|
<rect hx-get="/api/dealloc/{{.Prefix}}" hx-swap="none" {{ with .Rect }}x="{{.X}}" y="{{.Y}}" width="{{.W}}" height="{{.H}}"{{end}} rx="0.2"/>
|
|
</g>
|
|
{{- end }}
|
|
</svg>
|
|
</div>
|
|
{{- end }}
|
|
{{ block "used" .Api }}
|
|
<div id="state" hx-swap-oob="morph">
|
|
<h2>grouped</h2>
|
|
<div id="used-grouped" hx-swap-oob="morph">
|
|
{{- range .UsedGrouped }}
|
|
{{- $first := index . 0 }}
|
|
{{- $bits := $first.Bits }}
|
|
<div>
|
|
<h3>/{{ $bits }}</h3>
|
|
<table id="group-{{ $bits }}">
|
|
{{- range . }}
|
|
<tr hx-get="/api/dealloc/{{.}}" hx-swap="none"><td>{{.Addr}}</td><td>{{.Bits}}</td></tr>
|
|
{{- end }}
|
|
</table>
|
|
</div>
|
|
{{ end -}}
|
|
</div>
|
|
|
|
<h2>all</h2>
|
|
<div id="used" hx-swap-oob="morph">
|
|
<table>
|
|
{{- range .Used }}
|
|
<tr hx-get="/api/dealloc/{{.}}" hx-swap="none"><td>{{.Addr}}</td><td>{{.Bits}}</td></tr>{{ end }}
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{{- end }}
|
|
</body>
|
|
</html>
|