189 lines
4.5 KiB
HTML
189 lines
4.5 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>
|
|
|
|
<h2><code>{{ .Api.Root }}</code></h2>
|
|
|
|
<div id="control" hx-swap="none">
|
|
{{- range .Api.AllowedLengths }}
|
|
<button hx-get="/api/alloc/{{ . }}">/{{ . }}</button>
|
|
{{- end }}
|
|
</div>
|
|
|
|
{{ block "update" .Update }}<div id="updatemsg" class="card {{ .Type }}" hx-swap-oob="morph">{{ with .Content }}{{ . }}{{ end }}</div>{{ end }}
|
|
|
|
<h3>Treemap</h3>
|
|
{{ block "treemap" .Treemap }}
|
|
<div id="treemap" hx-swap="none" hx-swap-oob="morph">
|
|
{{- with .ViewBox }}
|
|
<svg viewBox="{{.X}} {{.Y}} {{.W}} {{.H}}">
|
|
{{- end }}
|
|
<defs>
|
|
<filter id="shadow">
|
|
<feGaussianBlur stdDeviation="0.1" />
|
|
</filter>
|
|
</defs>
|
|
|
|
<g id="frame" style="stroke-width:0.2; stroke:var(--cmed); fill:none;">
|
|
{{- with .ViewBox }}
|
|
<rect x="{{ .X }}" y="{{ .Y }}" width="{{ .W }}" height="{{ .H }}"/>
|
|
{{- end }}
|
|
</g>
|
|
|
|
<g id="shadows" 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>
|
|
|
|
<g id="regions" style="fill:var(--cfg); stroke:white; stroke-width:0.1;">
|
|
{{- range .Regions }}
|
|
<g id="svg-region-{{.Prefix}}" hx-get="/api/dealloc/{{.Prefix}}">
|
|
<title>{{.Prefix}}</title>\n", p
|
|
<rect {{ with .Rect }}x="{{.X}}" y="{{.Y}}" width="{{.W}}" height="{{.H}}"{{end}} rx="0.2"/>
|
|
</g>
|
|
{{- end }}
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
{{- end }}
|
|
{{ block "used" .Api }}
|
|
<div id="state" hx-swap-oob="morph" hx-swap="none">
|
|
<h3>grouped</h3>
|
|
<div id="used-grouped">
|
|
{{- range .UsedGrouped }}
|
|
{{- $first := index . 0 }}
|
|
{{- $bits := $first.Bits }}
|
|
<div>
|
|
<h3>/{{ $bits }}</h3>
|
|
<table id="group-{{ $bits }}">
|
|
{{- range . }}
|
|
<tr hx-get="/api/dealloc/{{.}}"><td>{{.Addr}}</td><td>{{.Bits}}</td></tr>
|
|
{{- end }}
|
|
</table>
|
|
</div>
|
|
{{ end -}}
|
|
</div>
|
|
|
|
<h3>all</h3>
|
|
<div id="used">
|
|
<table>
|
|
{{- range .Used }}
|
|
<tr hx-get="/api/dealloc/{{.}}"><td>{{.Addr}}</td><td>{{.Bits}}</td></tr>
|
|
{{- end }}
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{{- end }}
|
|
</body>
|
|
</html>
|