jocadbz
/
wireplanner
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Show device model images + Back to Rack link 

Device view now displays front/back model images above the port list.
Added a 'Back to Rack' breadcrumb link when the device is rack-mounted.
master
Joca 2026-06-09 19:11:10 -03:00
parent 6a14af2227
commit 7bcfa73c19
Signed by: jocadbz
GPG Key ID: B1836DCE2F50BDF7
2 changed files with 28 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
static/style.css
View File

@ -175,6 +175,10 @@ th { background: var(--surface); font-weight: 600; }
/* DEVICE TOOLBAR */
.device-toolbar { display: flex; gap: 0.5em; align-items: center; margin-bottom: 0.5em; }
/* DEVICE IMAGES */
.device-images { display: flex; gap: 1.5em; margin: 0.8em 0; }
.device-images img.device-img { max-width: 300px; max-height: 250px; border: 1px solid var(--border); border-radius: 4px; display: block; margin-top: 0.3em; }
/* BADGES */
.badge { display: inline-block; padding: 0.1em 0.4em; font-size: 0.75em; border-radius: 3px; background: var(--surface2); }
.badge-network { background: #224444; color: var(--green); }

24
templates/device.html
View File

@ -2,6 +2,10 @@
<h1>{{.Device.Name}}</h1>
{{if .Error}}<div class="alert alert-error">{{.Error}}</div>{{end}}
{{if .Device.Rack}}
<p class="rack-backlink"><a href="/racks/{{.Device.Rack.ID}}">&larr; Back to {{.Device.Rack.Name}}</a></p>
{{end}}
<div class="device-meta">
{{if .Device.Model}}<p><strong>Model:</strong> {{.Device.Model.Manufacturer}} {{.Device.Model.Name}}</p>{{end}}
{{if .Device.UsageDescription}}<p><strong>Usage:</strong> {{.Device.UsageDescription}}</p>{{end}}
@ -35,5 +39,25 @@
</div>
<h3>Ports</h3>
{{if .Device.Model}}{{if or .Device.Model.FrontImage .Device.Model.BackImage}}
<div class="device-images">
{{if .Device.Model.FrontImage}}<div><strong>Front</strong><br><img src="/{{.Device.Model.FrontImage}}" alt="Front" class="device-img"></div>{{end}}
{{if .Device.Model.BackImage}}<div><strong>Back</strong><br><img src="/{{.Device.Model.BackImage}}" alt="Back" class="device-img"></div>{{end}}
</div>
{{end}}{{end}}
{{template "port_list" .}}
<details style="margin-top:1em">
<summary>Rename Ports</summary>
<form method="POST" action="/devices/{{.Device.ID}}/ports/rename">
{{range .Device.Ports}}
<div class="port-entry">
<input name="port_id" type="hidden" value="{{.ID}}">
<input name="port_name" value="{{.Name}}" style="width:16em">
<span class="muted" style="font-size:0.8em">{{.Side}}</span>
</div>
{{end}}
<button type="submit">Update Ports</button>
</form>
</details>
{{end}}