Add Edge Template (#33)

Co-authored-by: Tim Lorsbach <tim@lorsba.ch>
Reviewed-on: enviPath/enviPy#33
This commit is contained in:
2025-07-23 07:50:39 +12:00
parent 43c95e3da7
commit 2c4c9d95d9
2 changed files with 126 additions and 1 deletions

View File

@ -0,0 +1,108 @@
{% extends "framework.html" %}
{% block content %}
{% block action_modals %}
{# {% include "modals/objects/edit_edge_modal.html" %}#}
{# {% include "modals/objects/delete_edge_modal.html" %}#}
{% endblock action_modals %}
<div class="panel-group" id="edge-detail">
<div class="panel panel-default">
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
{{ edge.edge_label.name }}
<div id="actionsButton"
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false"><span
class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
style="padding-right:1em"></span></a>
<ul id="actionsList" class="dropdown-menu">
{% block actions %}
{# {% include "actions/objects/edge.html" %}#}
{% endblock %}
</ul>
</div>
</div>
<!-- Description -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="edge-desc-link" data-toggle="collapse" data-parent="#edge-detail"
href="#edge-desc">Description</a>
</h4>
</div>
<div id="edge-desc" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
{{ edge.description }}
</div>
</div>
<!-- Image -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="edge-image-link" data-toggle="collapse" data-parent="#edge-detail"
href="#edge-image">Image Representation</a>
</h4>
</div>
<div id="edge-image" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
<div id="image-div" align="center">
{{ edge.edge_label.as_svg|safe }}
</div>
</div>
</div>
<!-- Reaction Description -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="edge-description-link" data-toggle="collapse" data-parent="#edge-description-detail"
href="#edge-description-smiles">Reaction Description</a>
</h4>
</div>
<div id="edge-description-smiles" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
{% for educt in edge.start_nodes.all %}
<a class="btn btn-default" href="{{ educt.url }}">{{ educt.name }}</a>
{% endfor %}
<span class="glyphicon glyphicon-arrow-right" style="margin-left:5em;margin-right:5em;"
aria-hidden="true"></span>
{% for product in edge.end_nodes.all %}
<a class="btn btn-default" href="{{ product.url }}">{{ product.name }}</a>
{% endfor %}
</div>
</div>
<!-- SMIRKS -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="edge-smirks-link" data-toggle="collapse" data-parent="#edge-detail"
href="#edge-smirks">SMIRKS Representation</a>
</h4>
</div>
<div id="edge-smirks" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
{{ edge.edge_label.smirks }}
</div>
</div>
{% if edge.edge_label.rules.all %}
<!-- Rules -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="edge-rules-link" data-toggle="collapse" data-parent="#edge-detail"
href="#edge-rules">Rules</a>
</h4>
</div>
<div id="edge-rules" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
{% for r in edge.edge_label.rules.all %}
<a class="list-group-item" href="{{ r.url }}">{{ r.name }}</a>
{% endfor %}
</div>
</div>
{% endif %}
</div>
{% endblock content %}