Implement flowchart renderer for versions

This commit is contained in:
Tim
2025-05-14 00:22:25 +02:00
parent 6d20661305
commit 0e5d92258d
7 changed files with 142 additions and 32 deletions

View File

@ -12,17 +12,35 @@
<a href="{{ path('content_compare', {to: snip.activeVersion.id}) }}" class="btn btn-info">
<i class="fa fa-left-right"></i> Compare
</a>
<br><br>
<div class="list-group">
{% for version in snip.snipContents|reverse %}
<a class="list-group-item {% if version.id == snip.activeVersion.id %}list-group-item-success{% endif %} d-flex justify-content-between"
href="{{ path('version_set', {version: version.id, snip: snip.id}) }}">
<span>
{{ include('generic/datetime.badge.html.twig', {datetime: version.id.dateTime}) }}
{% if version.name %}{{ version.name }}{% endif %}
</span>
<span class="text-muted">{{ version.id }}</span>
</a>
<pre class="mermaid">
flowchart BT
{% for versionData in versions %}
{{~ versionData ~}}
{% endfor %}
</div>
</pre>
{% endblock %}
{% block js %}
{{ parent() }}
<script src="https://cdn.jsdelivr.net/npm/mermaid@11.6.0/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({startOnLoad: true});
</script>
{% endblock %}
{% block css %}
{{ parent() }}
<style>
.node rect {
fill: var(--bs-secondary) !important;
stroke: var(--bs-secondary-text-emphasis) !important;
}
.node span {
color: var(--bs-light) !important;
}
.active rect {
fill: var(--bs-success) !important;
stroke: var(--bs-success-text-emphasis) !important;
}
</style>
{% endblock %}