370 lines
12 KiB
HTML
370 lines
12 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}{{ standard.nummer }} – {{ standard.name }}{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="container-fluid">
|
||
<nav aria-label="breadcrumb">
|
||
<ol class="breadcrumb">
|
||
<li class="breadcrumb-item"><a href="/">Startseite</a></li>
|
||
<li class="breadcrumb-item"><a href="/dokumente">Standards</a></li>
|
||
<li class="breadcrumb-item active" aria-current="page">{{ standard.nummer }}</li>
|
||
</ol>
|
||
</nav>
|
||
|
||
<h1>{{ standard.nummer }} – {{ standard.name }}</h1>
|
||
|
||
{% if standard.history == True %}
|
||
<div class="alert alert-warning" role="alert">
|
||
<strong>Historische Version vom {{ standard.check_date }}</strong>
|
||
</div>
|
||
{% endif %}
|
||
<!-- Einleitung -->
|
||
{% if standard.einleitung_html %}
|
||
<div class="row mb-4">
|
||
<div class="col-md-12">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2>Einleitung</h2>
|
||
</div>
|
||
<div class="card-body">
|
||
{% for typ, html in standard.einleitung_html %}
|
||
<div class="mb-2">{{ html|safe }}</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
|
||
<!-- Geltungsbereich -->
|
||
{% if standard.geltungsbereich_html %}
|
||
<div class="row mb-4">
|
||
<div class="col-md-12">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2>Geltungsbereich</h2>
|
||
</div>
|
||
<div class="card-body">
|
||
{% for typ, html in standard.geltungsbereich_html %}
|
||
<div class="mb-2">{{ html|safe }}</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
|
||
<!-- Vorgaben -->
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<h2>Vorgaben</h2>
|
||
</div>
|
||
</div>
|
||
{% for vorgabe in vorgaben %}
|
||
{% if standard.history == True or vorgabe.long_status == "active" %}
|
||
<!-- Vorgabe {{ vorgabe.Vorgabennummer }} -->
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
{% if not forloop.first %}
|
||
<hr style="border: 0; border-top: 1px solid #d3d3d3; margin: 2rem 0;">
|
||
{% endif %}
|
||
|
||
<a id="{{ vorgabe.Vorgabennummer }}"></a>
|
||
<div class="card mb-4">
|
||
<div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
|
||
<h3>
|
||
{{ vorgabe.Vorgabennummer }} – {{ vorgabe.titel }}
|
||
{% if vorgabe.long_status != "active" and standard.history == True %}
|
||
<span class="badge badge-danger">{{ vorgabe.long_status }}</span>
|
||
{% endif %}
|
||
</h3>
|
||
<div style="display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; white-space: nowrap;">
|
||
<span class="badge badge-info">{{ vorgabe.thema }}</span>
|
||
{% if vorgabe.relevanzset %}
|
||
<span class="badge badge-secondary">
|
||
Relevanz: {{ vorgabe.relevanzset|join:", " }}
|
||
</span>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<!-- Kurztext -->
|
||
{% if vorgabe.kurztext_html.0.1 %}
|
||
<div class="alert alert-info">
|
||
{% for typ, html in vorgabe.kurztext_html %}
|
||
{% if html %}
|
||
<div class="mb-2">{{ html|safe }}</div>
|
||
{% endif %}
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
|
||
<!-- Langtext -->
|
||
<div class="mb-3">
|
||
{% for typ, html in vorgabe.langtext_html %}
|
||
{% if html %}
|
||
<div class="mb-3">{{ html|safe }}</div>
|
||
{% endif %}
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<!-- Checklistenfragen -->
|
||
<h4 class="h6">Checklistenfragen</h4>
|
||
{% if vorgabe.checklistenfragen.all %}
|
||
<ul class="list-group mb-3">
|
||
{% for frage in vorgabe.checklistenfragen.all %}
|
||
<li class="list-group-item">{{ frage.frage }}</li>
|
||
{% endfor %}
|
||
</ul>
|
||
{% else %}
|
||
<p class="text-muted"><em>Keine Checklistenfragen</em></p>
|
||
{% endif %}
|
||
|
||
<!-- Stichworte und Referenzen -->
|
||
<div class="mt-4 p-3" style="background-color: #f8f9fa; border-left: 3px solid #dee2e6; padding-left: 0.5en;">
|
||
<p class="mb-2">
|
||
<strong>Stichworte:</strong>
|
||
{% if vorgabe.stichworte.all %}
|
||
{% for s in vorgabe.stichworte.all %}
|
||
<a href="{% url 'stichwort_detail' stichwort=s %}" class="badge badge-secondary">{{ s }}</a>{% if not forloop.last %} {% endif %}
|
||
{% endfor %}
|
||
{% else %}
|
||
<span class="text-muted">Keine</span>
|
||
{% endif %}
|
||
</p>
|
||
<p class="mb-0">
|
||
<strong>Referenzen:</strong>
|
||
{% if vorgabe.referenzpfade %}
|
||
{% for ref in vorgabe.referenzpfade %}
|
||
{{ ref|safe }}{% if not forloop.last %}, {% endif %}
|
||
{% endfor %}
|
||
{% else %}
|
||
<span class="text-muted">Keine</span>
|
||
{% endif %}
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Comment Button -->
|
||
{% if user.is_authenticated %}
|
||
<div class="mt-3 text-right">
|
||
<button class="btn btn-sm btn-outline-primary comment-btn"
|
||
data-vorgabe-id="{{ vorgabe.id }}"
|
||
data-vorgabe-nummer="{{ vorgabe.Vorgabennummer }}">
|
||
<span class="emoji-icon">💬</span> Kommentare
|
||
{% if vorgabe.comment_count > 0 %}
|
||
<span class="comment-count">{{ vorgabe.comment_count }}</span>
|
||
{% endif %}
|
||
</button>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
{% endfor %}
|
||
<!-- Metadata -->
|
||
|
||
<h2>Metadaten</h2>
|
||
<div class="row mb-4">
|
||
<div class="col-md-12">
|
||
<dl class="row">
|
||
<dt class="col-sm-3">Autoren:</dt>
|
||
<dd class="col-sm-9">{{ standard.autoren.all|join:", " }}</dd>
|
||
|
||
<dt class="col-sm-3">Prüfende:</dt>
|
||
<dd class="col-sm-9">{{ standard.pruefende.all|join:", " }}</dd>
|
||
|
||
<dt class="col-sm-3">Gültigkeit:</dt>
|
||
<dd class="col-sm-9">{{ standard.gueltigkeit_von }} bis {{ standard.gueltigkeit_bis|default_if_none:"auf weiteres" }}</dd>
|
||
</dl>
|
||
<p>
|
||
<a href="{% url 'standard_json' standard.nummer %}"
|
||
class="btn btn-secondary icon icon--before icon--download"
|
||
download="{{ standard.nummer }}.json">
|
||
JSON herunterladen
|
||
</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Comment Modal -->
|
||
<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog modal-lg" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="commentModalLabel">Kommentare für <span id="modalVorgabeNummer"></span></h5>
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div id="commentsContainer">
|
||
<!-- Comments will be loaded here -->
|
||
</div>
|
||
|
||
<!-- Add Comment Form -->
|
||
<div class="mt-4">
|
||
<h6>Neuen Kommentar hinzufügen:</h6>
|
||
<textarea id="newCommentText" class="form-control" rows="3" placeholder="Ihr Kommentar..."></textarea>
|
||
<button id="addCommentBtn" class="btn btn-primary btn-sm mt-2">Kommentar hinzufügen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- JavaScript for Comments -->
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
let currentVorgabeId = null;
|
||
let currentVorgabeNummer = null;
|
||
|
||
// Comment button click handler
|
||
document.querySelectorAll('.comment-btn').forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
currentVorgabeId = this.dataset.vorgabeId;
|
||
currentVorgabeNummer = this.dataset.vorgabeNummer;
|
||
|
||
document.getElementById('modalVorgabeNummer').textContent = currentVorgabeNummer;
|
||
document.getElementById('newCommentText').value = '';
|
||
|
||
loadComments();
|
||
$('#commentModal').modal('show');
|
||
});
|
||
});
|
||
|
||
// Load comments function
|
||
function loadComments() {
|
||
fetch(`/dokumente/comments/${currentVorgabeId}/`)
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
renderComments(data.comments);
|
||
})
|
||
.catch(error => {
|
||
console.error('Error loading comments:', error);
|
||
document.getElementById('commentsContainer').innerHTML =
|
||
'<div class="alert alert-danger">Fehler beim Laden der Kommentare</div>';
|
||
});
|
||
}
|
||
|
||
// Render comments function
|
||
function renderComments(comments) {
|
||
const container = document.getElementById('commentsContainer');
|
||
|
||
if (comments.length === 0) {
|
||
container.innerHTML = '<p class="text-muted">Noch keine Kommentare vorhanden.</p>';
|
||
return;
|
||
}
|
||
|
||
let html = '';
|
||
comments.forEach(comment => {
|
||
const canDelete = comment.is_own || {% if user.is_authenticated %}'{{ user.is_staff|yesno:"true,false" }}'{% else %}'false'{% endif %} === 'true';
|
||
html += `
|
||
<div class="comment-item border-bottom pb-2 mb-2">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div class="flex-grow-1">
|
||
<strong>${comment.user}</strong>
|
||
<small class="text-muted">(${comment.created_at})</small>
|
||
${comment.updated_at !== comment.created_at ? `<small class="text-muted">(bearbeitet: ${comment.updated_at})</small>` : ''}
|
||
<div class="mt-1">${comment.text.replace(/\n/g, '<br>')}</div>
|
||
</div>
|
||
${canDelete ? `
|
||
<button class="btn btn-sm btn-outline-danger ml-2 delete-comment-btn" data-comment-id="${comment.id}">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
` : ''}
|
||
</div>
|
||
</div>
|
||
`;
|
||
});
|
||
|
||
container.innerHTML = html;
|
||
|
||
// Add delete handlers
|
||
document.querySelectorAll('.delete-comment-btn').forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
if (confirm('Möchten Sie diesen Kommentar wirklich löschen?')) {
|
||
deleteComment(this.dataset.commentId);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// Add comment function
|
||
document.getElementById('addCommentBtn').addEventListener('click', function() {
|
||
const text = document.getElementById('newCommentText').value.trim();
|
||
|
||
if (!text) {
|
||
alert('Bitte geben Sie einen Kommentar ein.');
|
||
return;
|
||
}
|
||
|
||
fetch(`/dokumente/comments/${currentVorgabeId}/add/`, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'X-CSRFToken': getCookie('csrftoken')
|
||
},
|
||
body: JSON.stringify({ text: text })
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.success) {
|
||
document.getElementById('newCommentText').value = '';
|
||
loadComments();
|
||
} else {
|
||
alert('Fehler: ' + (data.error || 'Unbekannter Fehler'));
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('Error adding comment:', error);
|
||
alert('Fehler beim Hinzufügen des Kommentars');
|
||
});
|
||
});
|
||
|
||
// Delete comment function
|
||
function deleteComment(commentId) {
|
||
fetch(`/dokumente/comments/delete/${commentId}/`, {
|
||
method: 'POST',
|
||
headers: {
|
||
'X-CSRFToken': getCookie('csrftoken')
|
||
}
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.success) {
|
||
loadComments();
|
||
} else {
|
||
alert('Fehler: ' + (data.error || 'Unbekannter Fehler'));
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('Error deleting comment:', error);
|
||
alert('Fehler beim Löschen des Kommentars');
|
||
});
|
||
}
|
||
|
||
// CSRF token helper
|
||
function getCookie(name) {
|
||
let cookieValue = null;
|
||
if (document.cookie && document.cookie !== '') {
|
||
const cookies = document.cookie.split(';');
|
||
for (let i = 0; i < cookies.length; i++) {
|
||
const cookie = cookies[i].trim();
|
||
if (cookie.substring(0, name.length + 1) === (name + '=')) {
|
||
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
return cookieValue;
|
||
}
|
||
});
|
||
</script>
|
||
|
||
{% endblock %}
|