mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-06-29 03:26:16 +00:00
Clean up JS for Groups and Images page
Clean up group.py and image.py
This commit is contained in:
parent
bdecdaff7c
commit
54a98a8591
13 changed files with 470 additions and 474 deletions
|
|
@ -36,7 +36,7 @@
|
|||
<button class="top-of-page" aria-label="Jump to top of page"><i class="ph ph-arrow-up"></i></button>
|
||||
|
||||
<div class="pop-up">
|
||||
<span class="pop-up__click-off" onclick="popupDissmiss()"></span>
|
||||
<span class="pop-up__click-off" onclick="popupDismiss()"></span>
|
||||
<div class="pop-up-wrapper">
|
||||
<div class="pop-up-header"></div>
|
||||
<div class="pop-up-controlls"></div>
|
||||
|
|
@ -160,7 +160,7 @@
|
|||
infoButton.classList.add('show');
|
||||
}
|
||||
infoButton.onclick = () => {
|
||||
popUpShow('OnlyLegs',
|
||||
popupShow('OnlyLegs',
|
||||
'<a href="https://github.com/Fluffy-Bean/onlylegs">v{{ config['APP_VERSION'] }}</a> ' +
|
||||
'using <a href="https://phosphoricons.com/">Phosphoricons</a> and Flask.' +
|
||||
'<br>Made by Fluffy and others with ❤️');
|
||||
|
|
|
|||
|
|
@ -11,163 +11,11 @@
|
|||
{% endif %}
|
||||
|
||||
<script type="text/javascript">
|
||||
{% if current_user.id == group.author.id %}
|
||||
function groupDelete() {
|
||||
cancelBtn = document.createElement('button');
|
||||
cancelBtn.classList.add('btn-block');
|
||||
cancelBtn.classList.add('transparent');
|
||||
cancelBtn.innerHTML = 'AAAAAAAAAA';
|
||||
cancelBtn.onclick = popupDissmiss;
|
||||
|
||||
deleteBtn = document.createElement('button');
|
||||
deleteBtn.classList.add('btn-block');
|
||||
deleteBtn.classList.add('critical');
|
||||
deleteBtn.innerHTML = 'No ragrats!';
|
||||
deleteBtn.onclick = deleteConfirm;
|
||||
|
||||
popUpShow('Yeet!',
|
||||
'Are you surrrre? This action is irreversible and very final.' +
|
||||
' This wont delete the images, but it will remove them from this group.',
|
||||
null,
|
||||
[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() {
|
||||
// Create elements
|
||||
cancelBtn = document.createElement('button');
|
||||
cancelBtn.classList.add('btn-block');
|
||||
cancelBtn.classList.add('transparent');
|
||||
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 %}
|
||||
group_data = {
|
||||
'id': {{ group.id }},
|
||||
'name': "{{ group.name }}",
|
||||
'description': "{{ group.description }}",
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
@ -234,8 +82,8 @@
|
|||
</div>
|
||||
{% if current_user.id == group.author.id %}
|
||||
<div>
|
||||
<button class="pill-item pill__critical" onclick="groupDelete()"><i class="ph ph-trash"></i></button>
|
||||
<button class="pill-item pill__critical" onclick="groupEdit()"><i class="ph ph-pencil-simple"></i></button>
|
||||
<button class="pill-item pill__critical" onclick="groupDeletePopup()"><i class="ph ph-trash"></i></button>
|
||||
<button class="pill-item pill__critical" onclick="groupEditPopup()"><i class="ph ph-pencil-simple"></i></button>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
@ -252,8 +100,8 @@
|
|||
</div>
|
||||
{% if current_user.id == group.author.id %}
|
||||
<div>
|
||||
<button class="pill-item pill__critical" onclick="groupDelete()"><i class="ph ph-trash"></i></button>
|
||||
<button class="pill-item pill__critical" onclick="groupEdit()"><i class="ph ph-pencil-simple"></i></button>
|
||||
<button class="pill-item pill__critical" onclick="groupDeletePopup()"><i class="ph ph-trash"></i></button>
|
||||
<button class="pill-item pill__critical" onclick="groupEditPopup()"><i class="ph ph-pencil-simple"></i></button>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,65 +9,11 @@
|
|||
<meta name="twitter:card" content="summary_large_image">
|
||||
|
||||
<script type="text/javascript">
|
||||
function fullscreen() {
|
||||
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"
|
||||
}
|
||||
}
|
||||
|
||||
{% if current_user.id == image.author.id %}
|
||||
function imageDelete() {
|
||||
cancelBtn = document.createElement('button');
|
||||
cancelBtn.classList.add('btn-block');
|
||||
cancelBtn.classList.add('transparent');
|
||||
cancelBtn.innerHTML = 'nuuuuuuuu';
|
||||
cancelBtn.onclick = popupDissmiss;
|
||||
|
||||
deleteBtn = document.createElement('button');
|
||||
deleteBtn.classList.add('btn-block');
|
||||
deleteBtn.classList.add('critical');
|
||||
deleteBtn.innerHTML = 'Dewww eeeet!';
|
||||
deleteBtn.onclick = deleteConfirm;
|
||||
|
||||
popUpShow('DESTRUCTION!!!!!!',
|
||||
'Do you want to delete this image along with all of its data??? ' +
|
||||
'This action is irreversible!',
|
||||
null,
|
||||
[cancelBtn, deleteBtn]);
|
||||
}
|
||||
function deleteConfirm() {
|
||||
popupDissmiss();
|
||||
|
||||
fetch('{{ url_for('api.delete_image', image_id=image['id']) }}', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
action: 'delete'
|
||||
})
|
||||
}).then(function(response) {
|
||||
if (response.ok) {
|
||||
window.location.href = '/';
|
||||
} else {
|
||||
addNotification(`Image *clings*`, 2);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function imageEdit() {
|
||||
addNotification("Not an option, oops!", 3);
|
||||
}
|
||||
{% endif %}
|
||||
const image_data = {
|
||||
'id': {{ image.id }},
|
||||
'description': '{{ image.description }}',
|
||||
'alt': '{{ image.alt }}',
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
@ -85,14 +31,14 @@
|
|||
<div class="pill-row">
|
||||
{% if next_url %}<div><a class="pill-item" href="{{ next_url }}"><i class="ph ph-arrow-left"></i></a></div>{% endif %}
|
||||
<div>
|
||||
<button class="pill-item" onclick="fullscreen()" id="fullscreenImage"><i class="ph ph-info"></i></button>
|
||||
<button class="pill-item" onclick="imageFullscreen()" id="fullscreenImage"><i class="ph ph-info"></i></button>
|
||||
<button class="pill-item" onclick="copyToClipboard(window.location.href)"><i class="ph ph-export"></i></button>
|
||||
<a class="pill-item" href="{{ url_for('api.media', path='uploads/' + image.filename) }}" download onclick="addNotification('Download started!', 4)"><i class="ph ph-file-arrow-down"></i></a>
|
||||
</div>
|
||||
{% if current_user.id == image.author.id %}
|
||||
<div>
|
||||
<button class="pill-item pill__critical" onclick="imageDelete()"><i class="ph ph-trash"></i></button>
|
||||
<button class="pill-item pill__critical" onclick="imageEdit()"><i class="ph ph-pencil-simple"></i></button>
|
||||
<button class="pill-item pill__critical" onclick="imageDeletePopup()"><i class="ph ph-trash"></i></button>
|
||||
<button class="pill-item pill__critical" onclick="imageEditPopup()"><i class="ph ph-pencil-simple"></i></button>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if prev_url %}<div><a class="pill-item" href="{{ prev_url }}"><i class="ph ph-arrow-right"></i></a></div>{% endif %}
|
||||
|
|
|
|||
|
|
@ -3,95 +3,6 @@
|
|||
|
||||
{% block head %}
|
||||
{% if images %}<meta name="theme-color" content="rgb{{ images.0.colours.0 }}"/>{% endif %}
|
||||
|
||||
{% if current_user.is_authenticated %}
|
||||
<script type="text/javascript">
|
||||
function showCreate() {
|
||||
// Create elements
|
||||
cancelBtn = document.createElement('button');
|
||||
cancelBtn.classList.add('btn-block');
|
||||
cancelBtn.classList.add('transparent');
|
||||
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 header %}
|
||||
|
|
@ -108,7 +19,7 @@
|
|||
{% if current_user.is_authenticated %}
|
||||
<div class="pill-row">
|
||||
<div>
|
||||
<button class="pill-item" onclick="showCreate()"><i class="ph ph-plus"></i></button>
|
||||
<button class="pill-item" onclick="groupCreatePopup()"><i class="ph ph-plus"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
<script type="text/javascript">
|
||||
function moreInfo() {
|
||||
popUpShow('{{ user.username }}',
|
||||
popupShow('{{ user.username }}',
|
||||
'<p>Joined: {{ user.joined_at }}</p><br>' +
|
||||
'<p>Images: {{ images|length }}</p><br>' +
|
||||
'<p>Groups: {{ groups|length }}</p>');
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue