Replace CSS-based cable trace diagrams with SVG images

This commit is contained in:
jeremystretch
2021-07-14 15:29:04 -04:00
parent ce7fa95546
commit 9f615cde79
4 changed files with 47 additions and 126 deletions

View File

@@ -1,89 +1,50 @@
{% extends 'base/layout.html' %}
{% load helpers %}
{% block header %}
<h1>{% block title %}Cable Trace for {{ object|meta:"verbose_name"|bettertitle }} {{ object }}{% endblock %}</h1>
{% endblock %}
{% block title %}Cable Trace for {{ object|meta:"verbose_name"|bettertitle }} {{ object }}{% endblock %}
{% block content %}
<div class="row">
<div class="col col-md-5">
<object data="{{ svg_url }}" class="rack_elevation"></object>
<div class="text-center mt-3">
<a class="btn btn-outline-primary btn-sm" href="{{ svg_url }}">
<i class="mdi mdi-file-download"></i> Download SVG
</a>
</div>
<div class="cable-trace">
{% with traced_path=path.origin.trace %}
{% for near_end, cable, far_end in traced_path %}
{# Near end #}
{% if near_end.device %}
{% include 'dcim/trace/device.html' with device=near_end.device %}
{% include 'dcim/trace/termination.html' with termination=near_end %}
{% elif near_end.power_panel %}
{% include 'dcim/trace/powerpanel.html' with powerpanel=near_end.power_panel %}
{% include 'dcim/trace/termination.html' with termination=far_end%}
{% elif near_end.circuit %}
{% include 'dcim/trace/circuit.html' with circuit=near_end.circuit %}
{% include 'dcim/trace/termination.html' with termination=near_end %}
{% endif %}
{# Cable #}
{% if cable %}
{% include 'dcim/trace/cable.html' %}
{% elif far_end %}
{% include 'dcim/trace/attachment.html' %}
{% endif %}
{# Far end #}
{% if far_end.device %}
{% include 'dcim/trace/termination.html' with termination=far_end %}
{% if forloop.last %}
{% include 'dcim/trace/device.html' with device=far_end.device %}
{% endif %}
{% elif far_end.power_panel %}
{% include 'dcim/trace/termination.html' with termination=far_end %}
{% include 'dcim/trace/powerpanel.html' with powerpanel=far_end.power_panel %}
{% elif far_end.circuit %}
{% include 'dcim/trace/termination.html' with termination=far_end %}
{% if forloop.last %}
{% include 'dcim/trace/circuit.html' with circuit=far_end.circuit %}
{% endif %}
{% elif far_end %}
{% include 'dcim/trace/object.html' with object=far_end %}
{% endif %}
{% if forloop.last %}
{% if path.is_split %}
<div class="trace-end">
<h3 class="text-danger">Path split!</h3>
<p>Select a node below to continue:</p>
<ul class="text-start">
{% for next_node in path.get_split_nodes %}
{% if next_node.cable %}
<li>
<a href="{% url 'dcim:frontport_trace' pk=next_node.pk %}">{{ next_node }}</a>
(Cable <a href="{{ next_node.cable.get_absolute_url }}">{{ next_node.cable }}</a>)
</li>
{% else %}
<li class="text-muted">{{ next_node }}</li>
{% endif %}
{% endfor %}
</ul>
</div>
{% else %}
<div class="trace-end">
<h3{% if far_end %} class="text-success"{% endif %}>Trace Completed</h3>
<h5>Total Segments: {{ traced_path|length }}</h5>
<h5>Total Length:
{% if total_length %}
{{ total_length|floatformat:"-2" }}{% if not is_definitive %}+{% endif %} Meters /
{{ total_length|meters_to_feet|floatformat:"-2" }} Feet
{% else %}
<span class="text-muted">N/A</span>
{% endif %}
</h5>
</div>
{% endif %}
{% endif %}
{% endfor %}
{% if path.is_split %}
<div class="trace-end">
<h3 class="text-danger">Path split!</h3>
<p>Select a node below to continue:</p>
<ul class="text-start">
{% for next_node in path.get_split_nodes %}
{% if next_node.cable %}
<li>
<a href="{% url 'dcim:frontport_trace' pk=next_node.pk %}">{{ next_node }}</a>
(Cable <a href="{{ next_node.cable.get_absolute_url }}">{{ next_node.cable }}</a>)
</li>
{% else %}
<li class="text-muted">{{ next_node }}</li>
{% endif %}
{% endfor %}
</ul>
</div>
{% else %}
<div class="trace-end">
<h3 class="text-success">Trace Completed</h3>
<h5>Total Segments: {{ traced_path|length }}</h5>
<h5>Total Length:
{% if total_length %}
{{ total_length|floatformat:"-2" }}{% if not is_definitive %}+{% endif %} Meters /
{{ total_length|meters_to_feet|floatformat:"-2" }} Feet
{% else %}
<span class="text-muted">N/A</span>
{% endif %}
</h5>
</div>
{% endif %}
{% endwith %}
</div>
</div>