Made buttons work and removed temp forms

gallery/templates/groups/group.html

@@ -26,7 +26,7 @@
                 deleteBtn.classList.add('btn-block');
                 deleteBtn.classList.add('critical');
                 deleteBtn.innerHTML = 'No ragrats!';
-                // deleteBtn.onclick = deleteConfirm;
+                deleteBtn.onclick = deleteConfirm;
                 
                 popUpShow('Yeet!',
                           'Are you surrrre? This action is irreversible and very final.' +
@@ -35,8 +35,139 @@
                           [cancelBtn, deleteBtn]);
             }
 
+            function deleteConfirm(event) {
+                // AJAX takes control of subby form :3
+                event.preventDefault();
+            
+                let formID = {{ group.id }};
+            
+                if (!formID) {
+                    addNotification("Dont tamper with the JavaScript pls!", 3);
+                    return;
+                }
+            
+                // Make form
+                const formData = new FormData();
+                formData.append("group", formID);
+            
+                fetch('{{ url_for('api.delete_group') }}', {
+                    method: 'POST',
+                    body: formData
+                }).then(response => {
+                    if (response.status === 200) {
+                        // Redirect to groups page
+                        window.location.href = '{{ url_for('group.groups') }}';
+                    } else {
+                        switch (response.status) {
+                            case 500:
+                                addNotification('Server exploded, F\'s in chat', 2);
+                                break;
+                            case 403:
+                                addNotification('None but devils play past here... Bad information', 2);
+                                break;
+                            default:
+                                addNotification('Error logging in, blame someone', 2);
+                                break;
+                        }
+                    }
+                }).catch(error => {
+                    addNotification('Error yeeting group!', 2);
+                });
+            }
+
             function groupEdit() {
-                addNotification("Are you sure you want to edit this image?", 2);
+                // Create elements
+                cancelBtn = document.createElement('button');
+                cancelBtn.classList.add('btn-block');
+                cancelBtn.innerHTML = 'go baaaaack';
+                cancelBtn.onclick = popupDissmiss;
+
+                submitBtn = document.createElement('button');
+                submitBtn.classList.add('btn-block');
+                submitBtn.classList.add('primary');
+                submitBtn.innerHTML = 'Saveeee';
+                submitBtn.type = 'submit';
+                submitBtn.setAttribute('form', 'editForm');
+
+                // Create form
+                editForm = document.createElement('form');
+                editForm.id = 'editForm';
+                editForm.setAttribute('onsubmit', 'return edit(event);');
+
+                groupInput = document.createElement('input');
+                groupInput.classList.add('input-block');
+                groupInput.type = 'text';
+                groupInput.placeholder = 'Group ID';
+                groupInput.value = {{ group.id }};
+                groupInput.id = 'group';
+
+                imageInput = document.createElement('input');
+                imageInput.classList.add('input-block');
+                imageInput.type = 'text';
+                imageInput.placeholder = 'Image ID';
+                imageInput.id = 'image';
+
+                actionInput = document.createElement('input');
+                actionInput.classList.add('input-block');
+                actionInput.type = 'text';
+                actionInput.placeholder = 'add/remove';
+                actionInput.value = 'add';
+                actionInput.id = 'action';
+
+                editForm.appendChild(groupInput);
+                editForm.appendChild(imageInput);
+                editForm.appendChild(actionInput);
+
+                popUpShow(
+                    'Nothing stays the same',
+                    'Add, remove, or change, the power is in your hands...',
+                    editForm,
+                    [cancelBtn, submitBtn]
+                );
+            }
+
+            function edit(event) {
+                // AJAX takes control of subby form :3
+                event.preventDefault();
+            
+                let formGroup = document.querySelector("#group").value;
+                let formImage = document.querySelector("#image").value;
+                let formAction = document.querySelector("#action").value;
+            
+                if (!formGroup || !formImage || !formAction) {
+                    addNotification("All values must be set!", 3);
+                    return;
+                }
+            
+                // Make form
+                const formData = new FormData();
+                formData.append("group", formGroup);
+                formData.append("image", formImage);
+                formData.append("action", formAction);
+            
+                fetch('{{ url_for('api.modify_group') }}', {
+                    method: 'POST',
+                    body: formData
+                }).then(response => {
+                    if (response.status === 200) {
+                        addNotification('Group edited!!!', 1);
+                        popupDissmiss();
+                    } else {
+                        switch (response.status) {
+                            case 500:
+                                addNotification('Server exploded, F\'s in chat', 2);
+                                break;
+                            case 403:
+                                addNotification('None but devils play past here... Bad information', 2);
+                                break;
+                            default:
+                                addNotification('Error logging in, blame someone', 2);
+                                break;
+                        }
+                    }
+                }).catch(error => {
+                    addNotification('Error!!!!! Panic!!!!', 2);
+                });
             }
         {% endif %}
     </script>
@@ -127,13 +258,6 @@
         </div>
     {% endif %}
 
-    <form id="modifyGroup" action="/api/group/modify" method="post">
-        <input type="text" name="group" placeholder="group id" value="{{ group.id }}">
-        <input type="text" name="image" placeholder="image id">
-        <input type="text" name="action" placeholder="add/remove" value="add">
-        <button type="submit">Submit</button>
-    </form>
-
     {% if images %}
         <div class="gallery-grid">
             {% for image in images %}

gallery/templates/groups/list.html

@@ -1,5 +1,98 @@
 {% extends 'layout.html' %}
 {% block nav_groups %}selected{% endblock %}
+{% block head %}
+    {% if images %}
+        <meta name="theme-color" content="rgb({{ images.0.image_colours.0.0 }}{{ images.0.image_colours.0.1 }}{{ images.0.image_colours.0.2 }})"/>
+    {% endif %}
+
+    {% if current_user.is_authenticated %}
+        <script type="text/javascript">
+            function showCreate() {
+                // Create elements
+                cancelBtn = document.createElement('button');
+                cancelBtn.classList.add('btn-block');
+                cancelBtn.innerHTML = 'nuuuuuuuu';
+                cancelBtn.onclick = popupDissmiss;
+
+                submitBtn = document.createElement('button');
+                submitBtn.classList.add('btn-block');
+                submitBtn.classList.add('primary');
+                submitBtn.innerHTML = 'Submit!!';
+                submitBtn.type = 'submit';
+                submitBtn.setAttribute('form', 'createForm');
+
+                // Create form
+                createForm = document.createElement('form');
+                createForm.id = 'createForm';
+                createForm.setAttribute('onsubmit', 'return create(event);');
+
+                titleInput = document.createElement('input');
+                titleInput.classList.add('input-block');
+                titleInput.type = 'text';
+                titleInput.placeholder = 'Group namey';
+                titleInput.id = 'name';
+
+                descriptionInput = document.createElement('input');
+                descriptionInput.classList.add('input-block');
+                descriptionInput.type = 'text';
+                descriptionInput.placeholder = 'What it about????';
+                descriptionInput.id = 'description';
+
+                createForm.appendChild(titleInput);
+                createForm.appendChild(descriptionInput);
+
+                popUpShow(
+                    'New stuff!',
+                    'Image groups are a simple way to "group" images together, are you ready?',
+                    createForm,
+                    [cancelBtn, submitBtn]
+                );
+            }
+
+            function create(event) {
+                // AJAX takes control of subby form :3
+                event.preventDefault();
+            
+                let formName = document.querySelector("#name").value;
+                let formDescription = document.querySelector("#description").value;
+            
+                if (!formName) {
+                    addNotification("Group name must be set!", 3);
+                    return;
+                }
+            
+                // Make form
+                const formData = new FormData();
+                formData.append("name", formName);
+                formData.append("description", formDescription);
+            
+                fetch('{{ url_for('api.create_group') }}', {
+                    method: 'POST',
+                    body: formData
+                }).then(response => {
+                    if (response.status === 200) {
+                        addNotification('Group created!', 1);
+                        popupDissmiss();
+                    } else {
+                        switch (response.status) {
+                            case 500:
+                                addNotification('Server exploded, F\'s in chat', 2);
+                                break;
+                            case 403:
+                                addNotification('None but devils play past here... Bad information', 2);
+                                break;
+                            default:
+                                addNotification('Error logging in, blame someone', 2);
+                                break;
+                        }
+                    }
+                }).catch(error => {
+                    addNotification('Error making group! :c', 2);
+                });
+            }
+        </script>
+    {% endif %}
+{% endblock %}
 {% block content %}
     <div class="banner-small">
         <div class="banner-content">
@@ -14,7 +107,7 @@
             {% if current_user.is_authenticated %}
                 <div class="pill-row">
                     <div>
-                        <button class="pill-item" onclick="groupShare()">
+                        <button class="pill-item" onclick="showCreate()">
                             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>
                         </button>
                     </div>
@@ -23,12 +116,6 @@
         </div>
     </div>
 
-    <form action="/api/group/create" method="post" enctype="multipart/form-data">
-        <input class="input-block black" type="text" name="name" placeholder="name">
-        <input class="input-block black" type="text" name="description" placeholder="description">
-        <button class="btn-block black" type="submit">Submit</button>
-    </form>
-
     {% if groups %}
         <div class="gallery-grid">
             {% for group in groups %}

gallery/templates/layout.html

@@ -37,12 +37,6 @@
         <link rel="stylesheet" href="{{ ASSET_URL }}" type="text/css" defer>
     {% endassets %}
     
-    <style>
-        #modifyGroup {
-            padding: 0.5rem;
-        }
-    </style>
-
     {% block head %}{% endblock %}
 </head>
 <body>

gallery/views/api.py

@@ -166,6 +166,7 @@ def modify_group():
     """
     group_id = request.form['group']
     image_id = request.form['image']
+    action = request.form['action']
 
     group = db_session.query(db.Groups).filter_by(id=group_id).first()
 
@@ -174,7 +175,7 @@ def modify_group():
     elif group.author_id != current_user.id:
         abort(403)
 
-    if request.form['action'] == 'add':
+    if action:
         if not (db_session.query(db.GroupJunction)
                           .filter_by(group_id=group_id, post_id=image_id)
                           .first()):
@@ -191,17 +192,23 @@ def modify_group():
     return ':3'
 
 
-@blueprint.route('/metadata/<int:img_id>', methods=['GET'])
+@blueprint.route('/group/delete', methods=['POST'])
-def metadata(img_id):
+def delete_group():
     """
-    Yoinks metadata from an image
+    Deletes a group
     """
-    img = db_session.query(db.Posts).filter_by(id=img_id).first()
+    group_id = request.form['group']
 
-    if not img:
+    group = db_session.query(db.Groups).filter_by(id=group_id).first()
+
+    if group is None:
         abort(404)
+    elif group.author_id != current_user.id:
+        abort(403)
 
-    img_path = os.path.join(current_app.config['UPLOAD_FOLDER'], img.file_name)
+    db_session.query(db.Groups).filter_by(id=group_id).delete()
-    exif = mt.Metadata(img_path).yoink()
+    db_session.query(db.GroupJunction).filter_by(group_id=group_id).delete()
+    db_session.commit()
 
-    return jsonify(exif)
+    flash(['Group yeeted!', '1'])
+    return ':3'