Made buttons work and removed temp forms

This commit is contained in:
Michał 2023-04-04 20:45:35 +00:00
parent 95bc745b03
commit c5d381a049
4 changed files with 244 additions and 32 deletions

View file

@ -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 %}

View file

@ -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 %}

View file

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

View file

@ -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'])
def metadata(img_id):
@blueprint.route('/group/delete', methods=['POST'])
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)
exif = mt.Metadata(img_path).yoink()
db_session.query(db.Groups).filter_by(id=group_id).delete()
db_session.query(db.GroupJunction).filter_by(group_id=group_id).delete()
db_session.commit()
return jsonify(exif)
flash(['Group yeeted!', '1'])
return ':3'