azube/core/templates/write.html

132 lines
3.5 KiB
HTML
Raw Normal View History

2024-12-02 16:49:45 +01:00
<html>
2024-12-04 09:37:01 +01:00
<head>
<title>Neues Berichtsheft</title>
2024-12-04 11:41:57 +01:00
{% include 'head.html' %}
2024-12-04 09:37:01 +01:00
</head>
2024-12-04 16:36:57 +01:00
<body class="bg-gray-50 text-gray-800 font-sans min-h-screen flex flex-col items-center">
2024-12-02 16:49:45 +01:00
2024-12-04 16:36:57 +01:00
{% include 'header.html' with title="Neues Berichtsheft" %}
2024-12-02 16:49:45 +01:00
2024-12-04 16:36:57 +01:00
<main class="flex-grow w-full max-w-4xl mx-auto p-6 bg-white shadow-lg rounded-lg mt-6">
<div class="mb-6">
<p class="text-lg font-medium">{{ user.display_name }}</p>
<p class="text-gray-600">
Berichtsheft <span class="font-semibold">{{ year }}</span> / <span class="font-semibold">{{ week }}</span>
</p>
<p class="text-gray-600">
Von: <span class="font-semibold">{{ start_date|date:"d.m.Y" }}</span> bis: <span class="font-semibold">{{ end_date|date:"d.m.Y" }}</span>
</p>
</div>
2024-12-02 16:49:45 +01:00
2024-12-04 16:36:57 +01:00
<form method="post" class="space-y-4">
2024-12-05 13:45:51 +01:00
{% load set_content %}
{% load access %}
2024-12-04 16:36:57 +01:00
{% for field in form %}
<div class="mb-4">
<label for="{{ field.id_for_label }}">
{{ field.label|safe }}
</label>
2024-12-05 13:45:51 +01:00
{% if field.id_for_label == "id_department" %}
{{ field|set_content:draft.department}}
{%else%}
{% with content=draft.content|access:field.id_for_label %}
{{ field|set_content:content }}
{% endwith %}
{%endif%}
2024-12-04 16:36:57 +01:00
{% if field.errors %}
<p class="text-red-500 text-sm">{{ field.errors|join:", " }}</p>
{% endif %}
</div>
{% endfor %}
2024-12-02 16:49:45 +01:00
2024-12-04 16:36:57 +01:00
{% csrf_token %}
<button
type="submit"
class="w-full bg-red-600 text-white py-2 px-4 rounded-lg shadow hover:bg-red-700 focus:ring focus:ring-red-400">
Submit
</button>
</form>
2024-12-05 13:45:51 +01:00
<script>
function updateDraft() {
const formData = {};
{% for field in form %}
var field = document.getElementById("{{ field.id_for_label }}");
formData["{{ field.id_for_label }}"] = field.value;
{% endfor%}
fetch("/draft", {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': getCSRFToken(),
},
body: JSON.stringify(formData),
})
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
})
.then(data => {
console.log('Updated Draft:', data);
})
.catch(error => {
console.error('Error:', error);
});
}
function debounce(func, delay) {
let timeout;
return function (...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), delay);
};
}
function getCSRFToken() {
const name = 'csrftoken';
const cookies = document.cookie.split(';');
for (let cookie of cookies) {
cookie = cookie.trim();
if (cookie.startsWith(name + '=')) {
return cookie.substring(name.length + 1);
}
}
return null;
}
function setupListeners() {
const textareas = document.querySelectorAll('textarea');
const inputs = document.querySelectorAll('input');
const debouncedSend = debounce(() => updateDraft(), 500);
textareas.forEach(textarea => {
textarea.addEventListener('input', () => debouncedSend());
});
inputs.forEach(input => {
if (input.type === 'text' || input.type === 'email' || input.type === 'password' || input.type === 'hidden') {
input.addEventListener('input', () => debouncedSend());
}
});
}
setupListeners();
</script>
2024-12-04 16:36:57 +01:00
</main>
2024-12-04 09:37:01 +01:00
</body>
2024-12-02 16:49:45 +01:00
</html>