Clean up JS for Groups and Images page

Clean up group.py and image.py

onlylegs/static/js/imagePage.js

@@ -0,0 +1,101 @@
+function imageFullscreen() {
+    let info = document.querySelector('.info-container');
+    let image = document.querySelector('.image-container');
+
+    if (info.classList.contains('collapsed')) {
+        info.classList.remove('collapsed');
+        image.classList.remove('collapsed');
+        document.cookie = "image-info=0"
+    } else {
+        info.classList.add('collapsed');
+        image.classList.add('collapsed');
+        document.cookie = "image-info=1"
+    }
+}
+function imageDeletePopup() {
+    let title = 'DESTRUCTION!!!!!!';
+    let subtitle =
+        'Do you want to delete this image along with ' +
+        'all of its data??? This action is irreversible!';
+    let body = null;
+
+    let deleteBtn = document.createElement('button');
+        deleteBtn.classList.add('btn-block');
+        deleteBtn.classList.add('critical');
+        deleteBtn.innerHTML = 'Dewww eeeet!';
+        deleteBtn.onclick = imageDeleteConfirm;
+
+    popupShow(title, subtitle, body, [popupCancelButton, deleteBtn]);
+}
+function imageDeleteConfirm() {
+    popupDismiss();
+
+    fetch('/image/' + image_data["id"], {
+        method: 'DELETE',
+    }).then(response => {
+        if (response.ok) {
+            window.location.href = '/';
+        } else {
+            addNotification('Image *clings*', 2);
+        }
+    });
+}
+
+function imageEditPopup() {
+    let title = 'Edit image!';
+    let subtitle = 'Enter funny stuff here!';
+
+    let formSubmitButton = document.createElement('button');
+        formSubmitButton.setAttribute('form', 'imageEditForm');
+        formSubmitButton.setAttribute('type', 'submit');
+        formSubmitButton.classList.add('btn-block');
+        formSubmitButton.classList.add('primary');
+        formSubmitButton.innerHTML = 'Saveeee';
+
+    // Create form
+    let body = document.createElement('form');
+        body.setAttribute('onsubmit', 'return imageEditConfirm(event);');
+        body.id = 'imageEditForm';
+
+    let formAlt = document.createElement('input');
+        formAlt.setAttribute('type', 'text');
+        formAlt.setAttribute('value', image_data["alt"]);
+        formAlt.setAttribute('placeholder', 'Image Alt');
+        formAlt.classList.add('input-block');
+        formAlt.id = 'imageFormAlt';
+
+    let formDescription = document.createElement('input');
+        formDescription.setAttribute('type', 'text');
+        formDescription.setAttribute('value', image_data["description"]);
+        formDescription.setAttribute('placeholder', 'Image Description');
+        formDescription.classList.add('input-block');
+        formDescription.id = 'imageFormDescription';
+
+    body.appendChild(formAlt);
+    body.appendChild(formDescription);
+
+    popupShow(title, subtitle, body, [popupCancelButton, formSubmitButton]);
+}
+
+function imageEditConfirm(event) {
+    // Yoink subby form
+    event.preventDefault();
+
+    let alt = document.querySelector('#imageFormAlt').value;
+    let description = document.querySelector('#imageFormDescription').value;
+    let form = new FormData();
+        form.append('alt', alt);
+        form.append('description', description);
+
+    fetch('/image/' + image_data["id"], {
+        method: 'PUT',
+        body: form,
+    }).then(response => {
+        if (response.ok) {
+            popupDismiss();
+            window.location.reload();
+        } else {
+            addNotification('Image *clings*', 2);
+        }
+    });
+}