wireplanner/templates/connection_modal.html

<div class="modal-inner">
    <button class="modal-close" onclick="closeModal()">&times;</button>
    {{if .Error}}<div class="alert alert-error">{{.Error}}</div>{{end}}
    {{if not .Trace.HasConnection}}
    <h3>No connection on port {{.Trace.ClickedPortName}} ({{.Trace.ClickedDeviceName}})</h3>
    <form method="POST" action="/connections/create" hx-post="/connections/create" hx-target="#modal-content" hx-swap="innerHTML">
            <input type="hidden" name="return_port_id" value="{{.Trace.ClickedPortID}}">
            <label>Connection type
                <select name="connection_type_id">
                    {{range .ConnectionTypes}}<option value="{{.ID}}">{{.Name}}</option>{{end}}
                </select>
            </label>
            <input type="hidden" name="port_id_1" value="{{.Trace.ClickedPortID}}">
            <label>Other port
                <select name="port_id_2">
                    <option value="">-- select --</option>
                    {{range .PortGroups}}
                    <optgroup label="{{.DeviceName}}">
                        {{range .Ports}}<option value="{{.ID}}">{{.Name}} ({{.Side}})</option>{{end}}
                    </optgroup>
                    {{end}}
                </select>
            </label>
            <label>Label this end <input name="label_1"></label>
            <label>Label other end <input name="label_2"></label>
            <label>Color <input type="color" name="color" value="#808080"></label>
            <button type="submit">Create</button>
        </form>
    {{else}}
    <h3>Connection &mdash; {{.Trace.ConnectionType}}</h3>

    <div class="connection-trace">
        {{if .Trace.FarSegments}}
        <div class="trace-chain">
            {{range .Trace.FarSegments}}
            <div class="trace-segment">
                <a href="/devices/{{.DeviceID}}">{{.DeviceName}}</a>
                <span class="port-ref">[{{.PortName}}]</span>
                {{if .ModelName}}<small>{{.ModelName}}</small>{{end}}
            </div>
            <div class="trace-arrow">&mdash;</div>
            {{end}}
        </div>
        <div class="trace-arrow">&mdash;</div>
        {{end}}

        <div class="trace-clicked">
            <span class="clicked-badge">YOU ARE HERE</span>
            <a href="/devices/{{.Trace.ClickedDeviceID}}">{{.Trace.ClickedDeviceName}}</a>
            <span class="port-ref">[{{.Trace.ClickedPortName}}]</span>
        </div>

        {{if .Trace.NearSegments}}
        <div class="trace-arrow">&mdash;</div>
        <div class="trace-chain">
            {{range .Trace.NearSegments}}
            <div class="trace-arrow">&mdash;</div>
            <div class="trace-segment">
                <a href="/devices/{{.DeviceID}}">{{.DeviceName}}</a>
                <span class="port-ref">[{{.PortName}}]</span>
                {{if .ModelName}}<small>{{.ModelName}}</small>{{end}}
            </div>
            {{end}}
        </div>
        {{end}}
    </div>

    <div class="connection-details">
        <p><strong>Type:</strong> {{.Trace.ConnectionType}}</p>
        <p><strong>Color:</strong> <span style="display:inline-block;width:1em;height:1em;background:{{.Trace.Color}};border:1px solid #999;vertical-align:middle;"></span> {{.Trace.Color}}</p>
        {{if .Trace.Label1}}<p><strong>Label end 1:</strong> {{.Trace.Label1}}</p>{{end}}
        {{if .Trace.Label2}}<p><strong>Label end 2:</strong> {{.Trace.Label2}}</p>{{end}}
    </div>

    <div class="connection-actions">
        <details>
            <summary>Edit</summary>
            <form method="POST" action="/connections/{{.Trace.ConnectionID}}/edit" hx-post="/connections/{{.Trace.ConnectionID}}/edit" hx-target="#modal-content" hx-swap="innerHTML">
                <input type="hidden" name="return_port_id" value="{{.Trace.ClickedPortID}}">
                <label>Type
                    <select name="connection_type_id">
                        {{range .ConnectionTypes}}<option value="{{.ID}}" {{if eq .Name $.Trace.ConnectionType}}selected{{end}}>{{.Name}}</option>{{end}}
                    </select>
                </label>
                <label>Color <input type="color" name="color" value="{{.Trace.Color}}"></label>
                <label>Label 1 <input name="label_1" value="{{.Trace.Label1}}"></label>
                <label>Label 2 <input name="label_2" value="{{.Trace.Label2}}"></label>
                <button type="submit">Update</button>
            </form>
        </details>
        <form method="POST" action="/connections/{{.Trace.ConnectionID}}/delete" hx-post="/connections/{{.Trace.ConnectionID}}/delete?return_port_id={{.Trace.ClickedPortID}}" hx-target="#modal-content" hx-swap="innerHTML" style="display:inline">
            <button class="btn-danger" onclick="return confirm('Delete this connection?')">Delete</button>
        </form>
    </div>
    {{end}}
</div>