feat: Add submit functionality and styling

src/fellchensammlung/static/fellchensammlung/css/main.scss

@@ -267,23 +267,56 @@ AN Cards
 
 
 .new-animal-ad fieldset {
-    border-top: 4px solid var(--bulma-text-weak);
-    margin-top: 2em;
-    padding-top: 1em;
+  border-top: 4px solid var(--bulma-text-weak);
+  margin-top: 2em;
+  padding-top: 1em;
 }
+
 .new-animal-ad * {
-    transition: all ease 0.5s;
+  transition: all ease 0.5s;
 }
+
 .new-animal-ad .open {
-    display: block;
+  display: block;
 }
+
 .new-animal-ad .closed {
-    display: none;
-    overflow: hidden;
+  display: none;
+  overflow: hidden;
 }
+
 .new-animal-ad legend {
-    font-weight: bold;
-    padding-right: 0.2em;
-    color: var(--bulma-label-color);
-    font-size: 130%;
-}
+  font-weight: bold;
+  padding-right: 0.2em;
+  color: var(--bulma-label-color);
+  font-size: 130%;
+}
+
+.feedback-backdrop {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.feedback-add-new {
+  width: 40ch;
+  min-height: 40ch;
+  padding: 1.5em;
+  background-color: var(--bulma-info-on-scheme);
+  color: black;
+}
+
+.feedback-add-new.error {
+  background-color: var(--bulma-danger-on-scheme);
+}
+
+.feedback-add-new.success {
+  background-color: var(--bulma-success-on-scheme);
+}
+

src/fellchensammlung/static/fellchensammlung/js/adoption-notice-form.js

@@ -313,7 +313,7 @@ document.addEventListener('DOMContentLoaded', function () {
     div.appendChild(animals);
     div.appendChild(sButton);
     new_form.appendChild(div);
-    document.querySelector('.content').appendChild(new_form);
+    document.querySelector('.main-content').appendChild(new_form);
 
     // ------------------------------------------------ listeners
     // number of animals
@@ -380,15 +380,13 @@ document.addEventListener('DOMContentLoaded', function () {
         let postDate = date.toISOString().slice(0, 10);
         const path = '';
 
-        const xhttp = new XMLHttpRequest();
-        xhttp.onload = function () {
-            if (xhttp.status === 201) {
-                console.log(this.responseText);
-            } else {
-                console.log("Error while posting data!");
-            }
-        }
-        const csrftoken = getCookie('csrftoken');
+        let elResultsBd = document.createElement('div');
+        elResultsBd.classList.add('feedback-backdrop');
+        let elResults = document.createElement('div');
+        elResults.classList.add('feedback-add-new');
+        elResultsBd.appendChild(elResults);
+        document.querySelector('body').appendChild(elResultsBd);
+
         let data = JSON.stringify({
             "created_at": postDate,
             "searching_since": an_searching_since.value,
@@ -398,10 +396,28 @@ document.addEventListener('DOMContentLoaded', function () {
             "group_only": an_group_only.value,
             "location_string": an_location_string.value,
         });
-        xhttp.open("POST", path + "/api/adoption_notice");
-        xhttp.setRequestHeader("X-CSRFToken", csrftoken);
-        xhttp.setRequestHeader('content-type', 'application/json');
-        xhttp.send(data);
 
+        async function submitAN() {
+            const csrftoken = getCookie('csrftoken');
+            let response = await fetch('http://localhost:8000/api/adoption_notice', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json;charset=utf-8',
+                    'X-CSRFToken': csrftoken,
+                },
+                body: data,
+            });
+            console.log(response.status);
+            if (response.status === 201) {
+                let result = await response.json();
+                elResults.textContent = result.message + '<br>neue Id: ' + result.id;
+                elResults.classList.add('success');
+            } else {
+                elResults.textContent = 'Fehler! Status Code: ' + response.status;
+                elResults.classList.add('error');
+            }
+        }
+
+        submitAN();
     });
 });