sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2024-11-15 01:05:42 +00:00
Code Issues Projects Releases Wiki Activity

Update some logic for avatars

Browse Source
This commit is contained in:
Patrick Jentsch 2022-12-19 16:25:10 +01:00
parent c27d6ec0fe
commit 14d7dfc957
3 changed files with 68 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/profile/routes.py
View File

@ -33,7 +33,7 @@ def profile(user_id):
abort(403)
return render_template(
'profile/profile.html.j2',
user=user.to_json_serializeable(),
user=user.to_json_serializeable()
)

48
app/static/js/Utils.js
View File

@ -227,6 +227,54 @@ class Utils {
});
}
static deleteProfileAvatarRequest(userId) {
return new Promise((resolve, reject) => {
let modalElement = Utils.elementFromString(
`
<div class="modal">
<div class="modal-content">
<h4>Confirm Avatar deletion</h4>
<p>Do you really want to delete your Avatar?</p>
</div>
<div class="modal-footer">
<a class="action-button btn modal-close waves-effect waves-light" data-action="cancel">Cancel</a>
<a class="action-button btn modal-close red waves-effect waves-light" data-action="confirm">Delete</a>
</div>
</div>
`
);
document.querySelector('#modals').appendChild(modalElement);
let modal = M.Modal.init(
modalElement,
{
dismissible: false,
onCloseEnd: () => {
modal.destroy();
modalElement.remove();
}
}
);
let confirmElement = modalElement.querySelector('.action-button[data-action="confirm"]');
confirmElement.addEventListener('click', (event) => {
fetch(`/profile/${userId}/avatar`, {method: 'DELETE', headers: {Accept: 'application/json'}})
.then(
(response) => {
if (response.status === 403) {app.flash('Forbidden', 'error'); reject(response);}
if (response.status === 404) {app.flash('Not Found', 'error'); reject(response);}
app.flash(`Avatar marked for deletion`);
resolve(response);
},
(response) => {
app.flash('Something went wrong', 'error');
reject(response);
}
);
});
modal.open();
});
}
static deleteJobRequest(userId, jobId) {
return new Promise((resolve, reject) => {
let job = app.data.users[userId].jobs[jobId];

67
app/templates/profile/edit_profile.html.j2
View File

@ -71,7 +71,7 @@
{% if user.avatar %}
<img src="{{ url_for('.profile_avatar', user_id=user.id) }}" alt="user-image" class="circle responsive-img" id="avatar">
{% else %}
<img src="{{ url_for('static', filename='images/user_avatar.png') }}" alt="user-image" class="circle responsive-img" id="placeholder-avatar">
<img src="{{ url_for('static', filename='images/user_avatar.png') }}" alt="user-image" class="circle responsive-img" id="avatar">
{% endif %}
</div>
<div class="col s2"></div>
@ -79,7 +79,7 @@
<div class="row">
<div class="col s2">
<div class="center-align">
<a class="action-button btn-floating red waves-effect waves-light modal-trigger" href="#delete-request" style="margin-top:15px;"><i class="material-icons">delete</i></a>
<a class="action-button btn-floating red waves-effect waves-light" style="margin-top:15px;" id="delete-avatar"><i class="material-icons">delete</i></a>
</div>
</div>
<div class="col s10">
@ -111,83 +111,44 @@
</div>
{% endblock page_content %}
{% block modals %}
<div class="modal" id="delete-request">
<div class="modal-content">
<h4>Confirm Avatar deletion</h4>
<p>Do you really want to delete your Avatar?</p>
</div>
<div class="modal-footer">
<a class="action-button btn modal-close waves-effect waves-light" data-action="cancel">Cancel</a>
<a class="action-button btn modal-close red waves-effect waves-light" data-action="delete">Delete</a>
</div>
</div>
{% endblock modals %}
{% block scripts %}
{{ super() }}
<script>
let publicProfile = document.querySelector('#public-profile');
let disableButtons = document.querySelectorAll('[data-action="disable"]');
let deleteButton = document.querySelector('[data-action="delete"]');
let cancelButton = document.querySelector('[data-action="cancel"]');
let deleteRequestModal = document.querySelector('#delete-request');
let deleteButton = document.querySelector('#delete-avatar');
let avatar = document.querySelector('#avatar');
let placeholderAvatar = document.querySelector('#placeholder-avatar');
let avatarUpload = document.querySelector('#avatar-upload');
for (let i = 0; i < disableButtons.length; i++) {
disableButtons[i].disabled = !publicProfile.checked;
for (let disableButton of disableButtons) {
disableButton.disabled = !publicProfile.checked;
}
publicProfile.addEventListener('change', function() {
publicProfile.addEventListener('change', () => {
if (publicProfile.checked) {
for (let i = 0; i < disableButtons.length; i++) {
disableButtons[i].disabled = false;
for (let disableButton of disableButtons) {
disableButton.disabled = false;
}
} else {
for (let i = 0; i < disableButtons.length; i++) {
disableButtons[i].checked = false;
disableButtons[i].disabled = true;
for (let disableButton of disableButtons) {
disableButton.checked = false;
disableButton.disabled = true;
}
}
});
avatarUpload.addEventListener('change', function() {
let file = this.files[0];
if (avatar){
avatar.src = URL.createObjectURL(file);
} else {
placeholderAvatar.src = URL.createObjectURL(file);
}
});
deleteButton.addEventListener('click', function() {
return new Promise((resolve, reject) => {
let user_id = {{ user.hashid }};
fetch(`/profile/${user_id}/avatar`, {method: 'DELETE', headers: {Accept: 'application/json'}})
deleteButton.addEventListener('click', () => {
Utils.deleteProfileAvatarRequest({{ user.hashid|tojson }})
.then(
(response) => {
if (response.status === 403) {app.flash('Forbidden', 'error'); reject(response);}
if (response.status === 404) {app.flash('Not Found', 'error'); reject(response);}
app.flash('Avatar marked for deletion');
resolve(response);
},
(response) => {
app.flash('Something went wrong', 'error');
reject(response);
avatar.src = "{{ url_for('static', filename='images/user_avatar.png') }}";
}
);
avatar.src = "{{ url_for('static', filename='images/user_avatar.png') }}";
});
});
cancelButton.addEventListener('click', function() {
let modal = M.Modal.getInstance(deleteRequestModal);
modal.close();
});
</script>
{% endblock scripts %}