Clean up JS for Groups and Images page

Clean up group.py and image.py

onlylegs/static/js/groupPage.js

@@ -0,0 +1,155 @@
+function groupDeletePopup() {
+    let title = 'Yeet!';
+    let subtitle =
+        'Are you surrrre? This action is irreversible ' +
+        'and very final. This wont delete the images, ' +
+        'but it will remove them from this group.'
+    let body = null;
+
+    let deleteBtn = document.createElement('button');
+        deleteBtn.classList.add('btn-block');
+        deleteBtn.classList.add('critical');
+        deleteBtn.innerHTML = 'Dewww eeeet!';
+        deleteBtn.onclick = groupDeleteConfirm;
+
+    popupShow(title, subtitle, body, [popupCancelButton, deleteBtn]);
+}
+
+function groupDeleteConfirm(event) {
+    // AJAX takes control of subby form :3
+    event.preventDefault();
+
+    fetch('/group/' + group_data['id'], {
+        method: 'DELETE',
+    }).then(response => {
+        if (response.ok) {
+            window.location.href = '/group/';
+        } else {
+            addNotification('Server exploded, returned:' + response.status, 2);
+        }
+    }).catch(error => {
+        addNotification('Error yeeting group!' + error, 2);
+    });
+}
+
+function groupEditPopup() {
+    let title = 'Nothing stays the same';
+    let subtitle = 'Add, remove, or change, the power is in your hands...'
+
+    let formSubmitButton = document.createElement('button');
+        formSubmitButton.setAttribute('form', 'groupEditForm');
+        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 groupEditConfirm(event);');
+        body.id = 'groupEditForm';
+
+    let formImageId = document.createElement('input');
+        formImageId.setAttribute('type', 'text');
+        formImageId.setAttribute('placeholder', 'Image ID');
+        formImageId.setAttribute('required', '');
+        formImageId.classList.add('input-block');
+        formImageId.id = 'groupFormImageId';
+
+    let formAction = document.createElement('input');
+        formAction.setAttribute('type', 'text');
+        formAction.setAttribute('value', 'add');
+        formAction.setAttribute('placeholder', '[add, remove]');
+        formAction.setAttribute('required', '');
+        formAction.classList.add('input-block');
+        formAction.id = 'groupFormAction';
+
+    body.appendChild(formImageId);
+    body.appendChild(formAction);
+
+    popupShow(title, subtitle, body, [popupCancelButton, formSubmitButton]);
+}
+
+function groupEditConfirm(event) {
+    // AJAX takes control of subby form :3
+    event.preventDefault();
+
+    let imageId = document.querySelector("#groupFormImageId").value;
+    let action = document.querySelector("#groupFormAction").value;
+    let formData = new FormData();
+        formData.append("imageId", imageId);
+        formData.append("action", action);
+
+    fetch('/group/' + group_data['id'], {
+        method: 'PUT',
+        body: formData
+    }).then(response => {
+       if (response.ok) {
+            window.location.reload();
+        } else {
+            addNotification('Server exploded, returned:' + response.status, 2);
+        }
+    }).catch(error => {
+        addNotification('Error!!!!! Panic!!!!' + error, 2);
+    });
+}
+
+function groupCreatePopup() {
+    let title = 'New stuff!';
+    let subtitle =
+        'Image groups are a simple way to ' +
+        '"group" images together, are you ready?'
+
+    let formSubmitButton = document.createElement('button');
+        formSubmitButton.setAttribute('form', 'groupCreateForm');
+        formSubmitButton.setAttribute('type', 'submit');
+        formSubmitButton.classList.add('btn-block');
+        formSubmitButton.classList.add('primary');
+        formSubmitButton.innerHTML = 'Huzzah!';
+
+    // Create form
+    let body = document.createElement('form');
+        body.setAttribute('onsubmit', 'return groupCreateConfirm(event);');
+        body.id = 'groupCreateForm';
+
+    let formName = document.createElement('input');
+        formName.setAttribute('type', 'text');
+        formName.setAttribute('placeholder', 'Group namey');
+        formName.setAttribute('required', '');
+        formName.classList.add('input-block');
+        formName.id = 'groupFormName';
+
+    let formDescription = document.createElement('input');
+        formDescription.setAttribute('type', 'text');
+        formDescription.setAttribute('placeholder', 'What it about????');
+        formDescription.classList.add('input-block');
+        formDescription.id = 'groupFormDescription';
+
+    body.appendChild(formName);
+    body.appendChild(formDescription);
+
+    popupShow(title, subtitle, body, [popupCancelButton, formSubmitButton]);
+}
+
+function groupCreateConfirm(event) {
+    // AJAX takes control of subby form :3
+    event.preventDefault();
+
+    let name = document.querySelector("#groupFormName").value;
+    let description = document.querySelector("#groupFormDescription").value;
+    let formData = new FormData();
+        formData.append("name", name);
+        formData.append("description", description);
+
+    fetch('/group/', {
+        method: 'POST',
+        body: formData
+    }).then(response => {
+        if (response.ok) {
+            window.location.reload();
+        } else {
+            addNotification('Server exploded, returned:' + response.status, 2);
+        }
+    }).catch(error => {
+        addNotification('Error summoning group!' + error, 2);
+    });
+}

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);
+        }
+    });
+}

onlylegs/static/js/login.js

@@ -5,7 +5,7 @@ function showLogin() {
     cancelBtn.classList.add('btn-block');
     cancelBtn.classList.add('transparent');
     cancelBtn.innerHTML = 'nuuuuuuuu';
-    cancelBtn.onclick = popupDissmiss;
+    cancelBtn.onclick = popupDismiss;
 
     loginBtn = document.createElement('button');
     loginBtn.classList.add('btn-block');
@@ -50,7 +50,7 @@ function showLogin() {
     loginForm.appendChild(passwordInput);
     loginForm.appendChild(rememberMeSpan);
 
-    popUpShow(
+    popupShow(
         'Login!',
         'Need an account? <span class="link" onclick="showRegister()">Register!</span>',
         loginForm,
@@ -103,7 +103,7 @@ function showRegister() {
     cancelBtn.classList.add('btn-block');
     cancelBtn.classList.add('transparent');
     cancelBtn.innerHTML = 'nuuuuuuuu';
-    cancelBtn.onclick = popupDissmiss;
+    cancelBtn.onclick = popupDismiss;
 
     registerBtn = document.createElement('button');
     registerBtn.classList.add('btn-block');
@@ -146,7 +146,7 @@ function showRegister() {
     registerForm.appendChild(passwordInput);
     registerForm.appendChild(passwordInputRepeat);
     
-    popUpShow(
+    popupShow(
         'Who are you?',
         'Already have an account? <span class="link" onclick="showLogin()">Login!</span>',
         registerForm,

onlylegs/static/js/popup.js

@@ -1,4 +1,4 @@
-function popUpShow(titleText, subtitleText, bodyContent=null, userActions=null) {
+function popupShow(titleText, subtitleText, bodyContent=null, userActions=null) {
     // Get popup elements
     const popupSelector = document.querySelector('.pop-up');
     const headerSelector = document.querySelector('.pop-up-header');
@@ -9,38 +9,47 @@ function popUpShow(titleText, subtitleText, bodyContent=null, userActions=null)
     actionsSelector.innerHTML = '';
 
     // Set popup header and subtitle
-    const titleElement = document.createElement('h2');
-    titleElement.innerHTML = titleText;
-    headerSelector.appendChild(titleElement);
+    let titleElement = document.createElement('h2');
+        titleElement.innerHTML = titleText;
+        headerSelector.appendChild(titleElement);
 
-    const subtitleElement = document.createElement('p');
-    subtitleElement.innerHTML = subtitleText;
-    headerSelector.appendChild(subtitleElement);
+    let subtitleElement = document.createElement('p');
+        subtitleElement.innerHTML = subtitleText;
+        headerSelector.appendChild(subtitleElement);
 
-    if (bodyContent) {
-        headerSelector.appendChild(bodyContent);
-    }
+    if (bodyContent) { headerSelector.appendChild(bodyContent) }
 
     // Set buttons that will be displayed
     if (userActions) {
-        // for each user action, add the element
-        for (let i = 0; i < userActions.length; i++) {
-            actionsSelector.appendChild(userActions[i]);
-        }
+        userActions.forEach((action) => {
+            actionsSelector.appendChild(action);
+        });
     } else {
-        actionsSelector.innerHTML = '<button class="btn-block transparent" onclick="popupDissmiss()">Close</button>';
+        let closeButton = document.createElement('button');
+            closeButton.classList.add('btn-block');
+            closeButton.classList.add('transparent');
+            closeButton.innerHTML = 'Yeet!';
+            closeButton.onclick = popupDismiss;
+        actionsSelector.appendChild(closeButton);
     }
 
     // Stop scrolling and show popup
     document.querySelector("html").style.overflow = "hidden";
     popupSelector.style.display = 'block';
-    setTimeout(() => { popupSelector.classList.add('active') }, 5);  // 2ms delay to allow for css transition >:C
+
+    // 5ms delay to allow for css transition >:C
+    setTimeout(() => { popupSelector.classList.add('active') }, 5);
 }
 
-function popupDissmiss() {
+function popupDismiss() {
     const popupSelector = document.querySelector('.pop-up');
-
     document.querySelector("html").style.overflow = "auto";
     popupSelector.classList.remove('active');
     setTimeout(() => { popupSelector.style.display = 'none'; }, 200);
 }
+
+const popupCancelButton = document.createElement('button');
+      popupCancelButton.classList.add('btn-block');
+      popupCancelButton.classList.add('transparent');
+      popupCancelButton.innerHTML = 'nuuuuuuuu';
+      popupCancelButton.onclick = popupDismiss;