fix: stored js in static folder
This commit is contained in:
68
ticketsystem/static/js/ticket_detail.js
Normal file
68
ticketsystem/static/js/ticket_detail.js
Normal file
@@ -0,0 +1,68 @@
|
||||
function initializeTicketDetail(config) {
|
||||
// Course-Tutor Mapping
|
||||
if (config.canEdit) {
|
||||
const courseSelect = document.getElementById('id_course');
|
||||
const tutorText = document.getElementById('tutor_text');
|
||||
const tutorDisplay = document.getElementById('tutor_display');
|
||||
|
||||
if (courseSelect && config.courseTutorMap) {
|
||||
courseSelect.addEventListener('change', function() {
|
||||
const selectedCourseId = this.value;
|
||||
|
||||
if (selectedCourseId && config.courseTutorMap[selectedCourseId]) {
|
||||
tutorText.textContent = config.courseTutorMap[selectedCourseId];
|
||||
tutorDisplay.classList.remove('bg-gray-100');
|
||||
tutorDisplay.classList.add('bg-blue-50');
|
||||
} else if (selectedCourseId) {
|
||||
tutorText.textContent = 'Kein Tutor zugewiesen';
|
||||
tutorDisplay.classList.remove('bg-blue-50');
|
||||
tutorDisplay.classList.add('bg-gray-100');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Answer Field Toggle (nur für Tutoren)
|
||||
if (config.canEdit && !config.isCreator) {
|
||||
const statusSelect = document.querySelector('select[name="status"]');
|
||||
const answerField = document.querySelector('textarea[name="answer"]');
|
||||
const answerLabel = answerField?.previousElementSibling;
|
||||
|
||||
function toggleAnswerField() {
|
||||
if (!answerField) return;
|
||||
|
||||
if (statusSelect.value === 'resolved') {
|
||||
answerField.disabled = false;
|
||||
answerField.classList.remove('bg-gray-100', 'cursor-not-allowed');
|
||||
answerField.classList.add('bg-white');
|
||||
answerField.required = true;
|
||||
|
||||
if (answerLabel && !answerLabel.querySelector('.text-red-500')) {
|
||||
answerLabel.innerHTML = answerLabel.textContent + ' <span class="text-red-500">*</span>';
|
||||
}
|
||||
} else {
|
||||
answerField.disabled = true;
|
||||
answerField.classList.add('bg-gray-100', 'cursor-not-allowed');
|
||||
answerField.classList.remove('bg-white');
|
||||
answerField.required = false;
|
||||
|
||||
if (answerLabel) {
|
||||
answerLabel.innerHTML = answerLabel.textContent.replace(' *', '');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (statusSelect && answerField) {
|
||||
toggleAnswerField();
|
||||
statusSelect.addEventListener('change', toggleAnswerField);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialisierung wenn DOM geladen
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Config wird vom Template bereitgestellt
|
||||
if (window.ticketDetailConfig) {
|
||||
initializeTicketDetail(window.ticketDetailConfig);
|
||||
}
|
||||
});
|
||||
@@ -1,4 +1,5 @@
|
||||
{% extends "ticketsystem/base.html" %}
|
||||
{% load static %}
|
||||
{% block content %}
|
||||
<!-- Messages -->
|
||||
{% if messages %}
|
||||
@@ -75,7 +76,7 @@
|
||||
{% if form.status.errors %}<div class="text-red-600 text-sm mt-1">{{ form.status.errors }}</div>{% endif %}
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Priorität:</label>
|
||||
<label class="block text-sm font-medium mb-1">Fehlerart:</label>
|
||||
<select name="mistake"
|
||||
{% if not view.can_edit or form.mistake.field.disabled %}disabled{% endif %}
|
||||
class="w-full p-2 border border-gray-300 rounded shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 {% if not view.can_edit or form.mistake.field.disabled %}bg-gray-100{% endif %}">
|
||||
@@ -119,12 +120,12 @@
|
||||
<!-- Bearbeitbares Feld -->
|
||||
<textarea name="answer"
|
||||
rows="4"
|
||||
{% if not view.can_edit or ticket.status != 'resolved' %}disabled{% endif %}
|
||||
{% if not view.can_edit or form.answer.field.disabled %}disabled{% endif %}
|
||||
placeholder="Beschreibe die Lösung des Problems..."
|
||||
class="w-full p-2 border border-gray-300 rounded shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-black {% if not view.can_edit or ticket.status != 'resolved' %}bg-gray-100 cursor-not-allowed{% endif %}">{{ ticket.answer|default:'' }}</textarea>
|
||||
class="w-full p-2 border border-gray-300 rounded shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-gray-900 {% if not view.can_edit or ticket.status != 'resolved' or form.answer.field.disabled %}bg-gray-100 cursor-not-allowed{% endif %}">{{ ticket.answer|default:'' }}</textarea>
|
||||
{% if form.answer.errors %}<div class="text-red-600 text-sm mt-1">{{ form.answer.errors }}</div>{% endif %}
|
||||
<p class="text-xs text-gray-500 mt-1">
|
||||
{% if ticket.status != 'resolved' or ticket.status != 'closed' %}
|
||||
{% if ticket.status != 'resolved' %}
|
||||
Eine Antwort ist erforderlich beim Setzen des Status auf "Gelöst"
|
||||
{% endif %}
|
||||
</p>
|
||||
@@ -197,70 +198,16 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- JavaScript für dynamische Tutor-Anzeige -->
|
||||
<script src="{% static 'js/ticket_detail.js' %}"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const courseSelect = document.getElementById('id_course');
|
||||
const tutorText = document.getElementById('tutor_text');
|
||||
const tutorDisplay = document.getElementById('tutor_display');
|
||||
|
||||
// Course-Tutor Mapping
|
||||
const courseTutorMap = {
|
||||
window.ticketDetailConfig = {
|
||||
canEdit: {% if view.can_edit %}true{% else %}false{% endif %},
|
||||
isCreator: {% if is_creator %}true{% else %}false{% endif %},
|
||||
courseTutorMap: {
|
||||
{% for course in form.course.field.queryset %}
|
||||
{% if course.tutor %}'{{ course.pk }}': '{{ course.tutor.username }}',{% endif %}
|
||||
{% endfor %}
|
||||
};
|
||||
|
||||
// Nur aktivieren wenn User bearbeiten kann
|
||||
{% if view.can_edit %}
|
||||
courseSelect.addEventListener('change', function() {
|
||||
const selectedCourseId = this.value;
|
||||
|
||||
if (selectedCourseId && courseTutorMap[selectedCourseId]) {
|
||||
tutorText.textContent = courseTutorMap[selectedCourseId];
|
||||
tutorDisplay.classList.remove('bg-gray-100');
|
||||
tutorDisplay.classList.add('bg-blue-50');
|
||||
} else if (selectedCourseId) {
|
||||
tutorText.textContent = 'Kein Tutor zugewiesen';
|
||||
tutorDisplay.classList.remove('bg-blue-50');
|
||||
tutorDisplay.classList.add('bg-gray-100');
|
||||
}
|
||||
});
|
||||
{% endif %}
|
||||
});
|
||||
|
||||
// Answer Feld nur bei Status "resolved" aktivieren
|
||||
{% if view.can_edit %}
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const statusSelect = document.querySelector('select[name="status"]');
|
||||
const answerField = document.querySelector('textarea[name="answer"]');
|
||||
const answerLabel = answerField.previousElementSibling;
|
||||
|
||||
function toggleAnswerField() {
|
||||
if (statusSelect.value === 'resolved' || statusSelect.value === 'closed') {
|
||||
answerField.disabled = false;
|
||||
answerField.classList.remove('bg-gray-100', 'cursor-not-allowed');
|
||||
answerField.classList.add('bg-white');
|
||||
answerField.required = true;
|
||||
// Pflichtfeld-Stern anzeigen
|
||||
if (!answerLabel.querySelector('.text-red-500')) {
|
||||
answerLabel.innerHTML = answerLabel.textContent + ' <span class="text-red-500">*</span>';
|
||||
}
|
||||
} else {
|
||||
answerField.disabled = true;
|
||||
answerField.classList.add('bg-gray-100', 'cursor-not-allowed');
|
||||
answerField.classList.remove('bg-white');
|
||||
answerField.required = false;
|
||||
// Pflichtfeld-Stern entfernen
|
||||
answerLabel.innerHTML = answerLabel.textContent.replace(' *', '');
|
||||
}
|
||||
}
|
||||
|
||||
// Initial prüfen
|
||||
toggleAnswerField();
|
||||
|
||||
// Bei Status-Änderung prüfen
|
||||
statusSelect.addEventListener('change', toggleAnswerField);
|
||||
});
|
||||
{% endif %}
|
||||
};
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
@@ -161,61 +161,62 @@
|
||||
{% elif ticket.status == 'closed' %}
|
||||
<span class="px-2 py-1 rounded-full text-xs font-bold bg-gray-600 text-white">{{ ticket.get_status_display }}</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<span class="px-2 py-1 rounded-full text-xs font-bold bg-blue-500 text-white">{{ ticket.get_mistake_display }}</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-600">
|
||||
{% if ticket.assigned_to %}
|
||||
{{ ticket.assigned_to.username }}
|
||||
{% else %}
|
||||
<span class="text-gray-400 italic">Nicht zugewiesen</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-center text-sm text-gray-500">
|
||||
<div>{{ ticket.created_at|date:"d.m.Y" }}</div>
|
||||
<div class="text-xs text-gray-400">{{ ticket.created_at|date:"H:i" }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Pagination -->
|
||||
{% if is_paginated %}
|
||||
<div class="mt-6 flex justify-between items-center">
|
||||
<div class="text-sm text-gray-600">Seite {{ page_obj.number }} von {{ page_obj.paginator.num_pages }}</div>
|
||||
<div class="flex gap-2">
|
||||
{% if page_obj.has_previous %}
|
||||
<a href="?page={{ page_obj.previous_page_number }}{% if selected_status %}&status={{ selected_status }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}"
|
||||
class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-50">Zurück</a>
|
||||
{% endif %}
|
||||
{% if page_obj.has_next %}
|
||||
<a href="?page={{ page_obj.next_page_number }}{% if selected_status %}&status={{ selected_status }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}"
|
||||
class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-50">Weiter</a>
|
||||
{% endif %}
|
||||
<td class="px-4 py-3 text-center">
|
||||
<span class="px-2 py-1 rounded-full text-xs font-bold {% if ticket.mistake == 'typo' %}bg-blue-500 {% elif ticket.mistake == 'formatting_issue' %}bg-purple-500 {% elif ticket.mistake == 'missing_content' %}bg-red-500 {% elif ticket.mistake == 'outdated_content' %}bg-orange-500 {% elif ticket.mistake == 'audio_problem' %}bg-green-500 {% elif ticket.mistake == 'video_problem' %}bg-yellow-500 {% elif ticket.mistake == 'other' %}bg-gray-500 {% else %}bg-gray-400 {% endif %} text-white">
|
||||
{{ ticket.get_mistake_display }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-600">
|
||||
{% if ticket.assigned_to %}
|
||||
{{ ticket.assigned_to.username }}
|
||||
{% else %}
|
||||
<span class="text-gray-400 italic">Nicht zugewiesen</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-center text-sm text-gray-500">
|
||||
<div>{{ ticket.created_at|date:"d.m.Y" }}</div>
|
||||
<div class="text-xs text-gray-400">{{ ticket.created_at|date:"H:i" }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Pagination -->
|
||||
{% if is_paginated %}
|
||||
<div class="mt-6 flex justify-between items-center">
|
||||
<div class="text-sm text-gray-600">Seite {{ page_obj.number }} von {{ page_obj.paginator.num_pages }}</div>
|
||||
<div class="flex gap-2">
|
||||
{% if page_obj.has_previous %}
|
||||
<a href="?page={{ page_obj.previous_page_number }}{% if selected_status %}&status={{ selected_status }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}"
|
||||
class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-50">Zurück</a>
|
||||
{% endif %}
|
||||
{% if page_obj.has_next %}
|
||||
<a href="?page={{ page_obj.next_page_number }}{% if selected_status %}&status={{ selected_status }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}"
|
||||
class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-50">Weiter</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<!-- Keine Tickets -->
|
||||
<div class="text-center py-12 bg-white rounded-lg shadow">
|
||||
<div class="text-gray-400 text-6xl mb-4">📋</div>
|
||||
{% if search_query %}
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-2">Keine Tickets gefunden</h3>
|
||||
<p class="text-gray-500 mb-4">
|
||||
Keine Tickets gefunden für die Suche „<strong>{{ search_query }}</strong>"
|
||||
</p>
|
||||
<a href="?" class="text-blue-600 hover:text-blue-800 font-medium">Alle Tickets anzeigen</a>
|
||||
{% else %}
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-2">Noch keine Tickets vorhanden</h3>
|
||||
<p class="text-gray-500 mb-4">Erstelle dein erstes Ticket um loszulegen.</p>
|
||||
<a href="{% url 'create' %}"
|
||||
class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded font-medium">
|
||||
Erstes Ticket erstellen
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<!-- Keine Tickets -->
|
||||
<div class="text-center py-12 bg-white rounded-lg shadow">
|
||||
<div class="text-gray-400 text-6xl mb-4">📋</div>
|
||||
{% if search_query %}
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-2">Keine Tickets gefunden</h3>
|
||||
<p class="text-gray-500 mb-4">
|
||||
Keine Tickets gefunden für die Suche „<strong>{{ search_query }}</strong>"
|
||||
</p>
|
||||
<a href="?" class="text-blue-600 hover:text-blue-800 font-medium">Alle Tickets anzeigen</a>
|
||||
{% else %}
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-2">Noch keine Tickets vorhanden</h3>
|
||||
<p class="text-gray-500 mb-4">Erstelle dein erstes Ticket um loszulegen.</p>
|
||||
<a href="{% url 'create' %}"
|
||||
class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded font-medium">
|
||||
Erstes Ticket erstellen
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user