404 lines
13 KiB
HTML
404 lines
13 KiB
HTML
{% extends "base.html" %}
|
||
{% block title %}{{ standard.nummer }} – {{ standard.name }}{% endblock %}
|
||
{% block breadcrumb_items %}
|
||
<li class="breadcrumb-item"><a href="{% url 'standard_list' %}">Standards</a></li>
|
||
<li class="breadcrumb-item active" aria-current="page">{{ standard.nummer }}</li>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="row">
|
||
<!-- Main Content -->
|
||
<div class="col-lg-8">
|
||
<!-- Standard Header -->
|
||
<div class="card mb-4">
|
||
<div class="card-header bg-primary text-white">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div>
|
||
<h1 class="h2 mb-2">{{ standard.nummer }} – {{ standard.name }}</h1>
|
||
{% if standard.history == True %}
|
||
<p class="mb-0 opacity-75">Version vom {{ standard.check_date|date:"d.m.Y" }}</p>
|
||
{% endif %}
|
||
</div>
|
||
<div class="d-flex gap-2">
|
||
{% if not standard.aktiv %}
|
||
<span class="badge bg-danger">Inaktiv</span>
|
||
{% else %}
|
||
<span class="badge bg-success">Aktiv</span>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<h6 class="text-muted mb-2">📅 Gültigkeit</h6>
|
||
<p class="mb-3">
|
||
<strong>Von:</strong> {{ standard.gueltigkeit_von|default_if_none:"-" }}<br>
|
||
<strong>Bis:</strong> {{ standard.gueltigkeit_bis|default_if_none:"Auf weiteres" }}
|
||
</p>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<h6 class="text-muted mb-2">👥 Verantwortlich</h6>
|
||
{% if standard.autoren.all %}
|
||
<p class="mb-1"><strong>Autoren:</strong><br>
|
||
{% for autor in standard.autoren.all %}
|
||
<span class="badge bg-light text-dark me-1">{{ autor }}</span>
|
||
{% endfor %}
|
||
</p>
|
||
{% endif %}
|
||
{% if standard.pruefende.all %}
|
||
<p class="mb-3"><strong>Prüfende:</strong><br>
|
||
{% for pruefender in standard.pruefende.all %}
|
||
<span class="badge bg-light text-dark me-1">{{ pruefender }}</span>
|
||
{% endfor %}
|
||
</p>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-flex gap-2">
|
||
<a href="{% url 'standard_json' standard.nummer %}" class="btn btn-outline btn-sm" download="{{ standard.nummer }}.json">
|
||
📄 JSON herunterladen
|
||
</a>
|
||
<button class="btn btn-outline btn-sm" onclick="window.print()">
|
||
🖨️ Drucken
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Table of Contents -->
|
||
<div class="toc mb-4" id="table-of-contents">
|
||
<h3>📋 Inhaltsverzeichnis</h3>
|
||
<ul class="list-unstyled">
|
||
{% if standard.einleitung_html %}
|
||
<li><a href="#einleitung">Einleitung</a></li>
|
||
{% endif %}
|
||
{% if standard.geltungsbereich_html %}
|
||
<li><a href="#geltungsbereich">Geltungsbereich</a></li>
|
||
{% endif %}
|
||
<li><a href="#vorgaben">Vorgaben ({{ vorgaben|length }})</a>
|
||
<ul class="ms-3 mt-1">
|
||
{% for vorgabe in vorgaben %}
|
||
{% if standard.history == True or vorgabe.long_status == "active" %}
|
||
<li><a href="#{{ vorgabe.Vorgabennummer }}">{{ vorgabe.Vorgabennummer }} – {{ vorgabe.titel|truncatechars:50 }}</a></li>
|
||
{% endif %}
|
||
{% endfor %}
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Einleitung -->
|
||
{% if standard.einleitung_html %}
|
||
<section id="einleitung" class="mb-5">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2 class="h4 mb-0">📖 Einleitung</h2>
|
||
</div>
|
||
<div class="card-body">
|
||
{% for typ, html in standard.einleitung_html %}
|
||
<div class="content-section">{{ html|safe }}</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{% endif %}
|
||
|
||
<!-- Geltungsbereich -->
|
||
{% if standard.geltungsbereich_html %}
|
||
<section id="geltungsbereich" class="mb-5">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2 class="h4 mb-0">🎯 Geltungsbereich</h2>
|
||
</div>
|
||
<div class="card-body">
|
||
{% for typ, html in standard.geltungsbereich_html %}
|
||
<div class="content-section">{{ html|safe }}</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{% endif %}
|
||
|
||
<!-- Vorgaben -->
|
||
<section id="vorgaben" class="mb-5">
|
||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||
<h2 class="h4 mb-0">📝 Vorgaben</h2>
|
||
<div class="btn-group" role="group">
|
||
<button type="button" class="btn btn-outline btn-sm" onclick="toggleAllVorgaben(true)">Alle ausklappen</button>
|
||
<button type="button" class="btn btn-outline btn-sm" onclick="toggleAllVorgaben(false)">Alle einklappen</button>
|
||
</div>
|
||
</div>
|
||
|
||
{% for vorgabe in vorgaben %}
|
||
{% if standard.history == True or vorgabe.long_status == "active" %}
|
||
<div class="card mb-4 vorgabe-card" id="{{ vorgabe.Vorgabennummer }}">
|
||
<div class="card-header {% if vorgabe.long_status == "active" %}bg-success text-white{% else %}bg-secondary text-white{% endif %}"
|
||
style="cursor: pointer;"
|
||
onclick="toggleVorgabe('{{ vorgabe.Vorgabennummer }}')">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<div class="d-flex align-items-center">
|
||
<span class="toggle-icon me-2">▼</span>
|
||
<h3 class="h5 m-0">
|
||
{{ vorgabe.Vorgabennummer }} – {{ vorgabe.titel }}
|
||
{% if vorgabe.long_status != "active" and standard.history == True %}
|
||
<span class="badge bg-warning text-dark ms-2">{{ vorgabe.long_status }}</span>
|
||
{% endif %}
|
||
</h3>
|
||
</div>
|
||
<div class="d-flex gap-2">
|
||
{% if vorgabe.relevanzset %}
|
||
<span class="badge bg-light text-dark">
|
||
🔥 {{ vorgabe.relevanzset|join:", " }}
|
||
</span>
|
||
{% endif %}
|
||
{% if vorgabe.thema %}
|
||
<span class="badge bg-info">{{ vorgabe.thema }}</span>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-body vorgabe-content" id="content-{{ vorgabe.Vorgabennummer }}">
|
||
<!-- Kurztext -->
|
||
{% if vorgabe.kurztext_html.0.1 %}
|
||
<div class="alert alert-info mb-3">
|
||
<h6 class="alert-heading">📌 Kurztext</h6>
|
||
{% for typ, html in vorgabe.kurztext_html %}
|
||
{% if html %}
|
||
<div class="mb-2">{{ html|safe }}</div>
|
||
{% endif %}
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
|
||
<!-- Langtext -->
|
||
<div class="mb-4">
|
||
{% for typ, html in vorgabe.langtext_html %}
|
||
{% if html %}
|
||
<div class="content-section mb-3">{{ html|safe }}</div>
|
||
{% endif %}
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<!-- Checklistenfragen -->
|
||
<div class="mb-4">
|
||
<h6 class="mb-3">✅ Checklistenfragen</h6>
|
||
{% if vorgabe.checklistenfragen.all %}
|
||
<div class="list-group">
|
||
{% for frage in vorgabe.checklistenfragen.all %}
|
||
<div class="list-group-item">
|
||
<div class="d-flex align-items-start">
|
||
<input type="checkbox" class="form-check-input me-2 mt-1" id="check-{{ forloop.counter }}">
|
||
<label class="form-check-label" for="check-{{ forloop.counter }}">
|
||
{{ frage.frage }}
|
||
</label>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% else %}
|
||
<p class="text-muted"><em>Keine Checklistenfragen vorhanden</em></p>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<!-- Metadaten -->
|
||
<div class="border-top pt-3">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<h6 class="text-muted mb-2">🏷️ Stichworte</h6>
|
||
{% if vorgabe.stichworte.all %}
|
||
<div>
|
||
{% for s in vorgabe.stichworte.all %}
|
||
<a href="{% url 'stichwort_detail' stichwort=s %}" class="badge bg-light text-dark text-decoration-none me-1 mb-1">
|
||
{{ s }}
|
||
</a>
|
||
{% endfor %}
|
||
</div>
|
||
{% else %}
|
||
<p class="text-muted small mb-0">Keine Stichworte</p>
|
||
{% endif %}
|
||
</div>
|
||
<div class="col-md-6">
|
||
<h6 class="text-muted mb-2">🔗 Referenzen</h6>
|
||
{% if vorgabe.referenzpfade %}
|
||
<div class="small">
|
||
{% for ref in vorgabe.referenzpfade %}
|
||
<div class="mb-1">{{ ref|safe }}</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% else %}
|
||
<p class="text-muted small mb-0">Keine Referenzen</p>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
{% endfor %}
|
||
</section>
|
||
</div>
|
||
|
||
<!-- Sidebar -->
|
||
<div class="col-lg-4">
|
||
<!-- Quick Actions -->
|
||
<div class="card mb-4 sticky-top" style="top: 1rem;">
|
||
<div class="card-header">
|
||
<h5 class="mb-0">⚡ Schnellaktionen</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="d-grid gap-2">
|
||
<button class="btn btn-outline btn-sm" onclick="scrollToSection('einleitung')">
|
||
📖 Zur Einleitung
|
||
</button>
|
||
<button class="btn btn-outline btn-sm" onclick="scrollToSection('geltungsbereich')">
|
||
🎯 Zum Geltungsbereich
|
||
</button>
|
||
<button class="btn btn-outline btn-sm" onclick="scrollToSection('vorgaben')">
|
||
📝 Zu den Vorgaben
|
||
</button>
|
||
<hr>
|
||
<a href="{% url 'standard_list' %}" class="btn btn-outline btn-sm">
|
||
← Zurück zur Liste
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Statistics -->
|
||
<div class="card mb-4">
|
||
<div class="card-header">
|
||
<h5 class="mb-0">📊 Statistiken</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="row text-center">
|
||
<div class="col-6">
|
||
<div class="border-end">
|
||
<h4 class="text-primary mb-1">{{ vorgaben|length }}</h4>
|
||
<small class="text-muted">Vorgaben</small>
|
||
</div>
|
||
</div>
|
||
<div class="col-6">
|
||
<h4 class="text-success mb-1">
|
||
{% for vorgabe in vorgaben %}
|
||
{% if vorgabe.long_status == "active" %}
|
||
{% if forloop.first %}1{% else %}{{ forloop.counter }}{% endif %}
|
||
{% endif %}
|
||
{% endfor %}
|
||
</h4>
|
||
<small class="text-muted">Aktiv</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- JavaScript -->
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// Update active TOC item on scroll
|
||
const sections = document.querySelectorAll('section[id]');
|
||
const tocLinks = document.querySelectorAll('.toc a');
|
||
|
||
function updateActiveTOC() {
|
||
let current = '';
|
||
sections.forEach(section => {
|
||
const sectionTop = section.offsetTop;
|
||
const sectionHeight = section.clientHeight;
|
||
if (pageYOffset >= sectionTop - 100) {
|
||
current = section.getAttribute('id');
|
||
}
|
||
});
|
||
|
||
tocLinks.forEach(link => {
|
||
link.classList.remove('active');
|
||
if (link.getAttribute('href') === '#' + current) {
|
||
link.classList.add('active');
|
||
}
|
||
});
|
||
}
|
||
|
||
window.addEventListener('scroll', updateActiveTOC);
|
||
updateActiveTOC();
|
||
});
|
||
|
||
function toggleVorgabe(vorgabeId) {
|
||
const content = document.getElementById('content-' + vorgabeId);
|
||
const icon = document.querySelector('#' + vorgabeId + ' .toggle-icon');
|
||
|
||
if (content.style.display === 'none') {
|
||
content.style.display = 'block';
|
||
icon.textContent = '▼';
|
||
} else {
|
||
content.style.display = 'none';
|
||
icon.textContent = '▶';
|
||
}
|
||
}
|
||
|
||
function toggleAllVorgaben(expand) {
|
||
const contents = document.querySelectorAll('.vorgabe-content');
|
||
const icons = document.querySelectorAll('.toggle-icon');
|
||
|
||
contents.forEach(content => {
|
||
content.style.display = expand ? 'block' : 'none';
|
||
});
|
||
|
||
icons.forEach(icon => {
|
||
icon.textContent = expand ? '▼' : '▶';
|
||
});
|
||
}
|
||
|
||
function scrollToSection(sectionId) {
|
||
const element = document.getElementById(sectionId);
|
||
if (element) {
|
||
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.content-section {
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.content-section h1, .content-section h2, .content-section h3 {
|
||
margin-top: 1.5rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.content-section ul, .content-section ol {
|
||
margin-bottom: 1rem;
|
||
padding-left: 1.5rem;
|
||
}
|
||
|
||
.content-section li {
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.vorgabe-card {
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.vorgabe-card:hover {
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.toc a.active {
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
}
|
||
|
||
@media print {
|
||
.vorgabe-content {
|
||
display: block !important;
|
||
}
|
||
.toggle-icon {
|
||
display: none !important;
|
||
}
|
||
}
|
||
</style>
|
||
{% endblock %}
|