work + report draft

core/templates/header.html

@@ -1,4 +1,4 @@
-<header class="w-full bg-red-600 text-white py-4 shadow-md">
+<header class="w-full bg-red-600 text-white py-4 shadow-md max-h-20 h-full max-h-20">
     <div class="max-w-4xl {% if center is None or center %}mx-auto{% endif %} px-4">
       <h1 class="text-2xl font-bold {% if center is None or center %}{% else %}ml-5{% endif %}">{{ title }}</h1>
     </div>

core/templates/write.html

@@ -19,13 +19,25 @@
       </div>
 
       <form method="post" class="space-y-4">
-        
+
+        {% load set_content %}
+        {% load access %}
+
         {% for field in form %}
         <div class="mb-4">
             <label for="{{ field.id_for_label }}">
                 {{ field.label|safe }}
             </label>
-            {{ field }}
+
+            {% 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%}
             {% if field.errors %}
                 <p class="text-red-500 text-sm">{{ field.errors|join:", " }}</p>
             {% endif %}
@@ -39,6 +51,81 @@
           Submit
         </button>
       </form>
+
+      <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>
+
     </main>
   </body>
 </html>