Update some logic for avatars

app/profile/routes.py

@@ -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()
     )
 
 

app/static/js/Utils.js

@@ -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];

app/templates/profile/edit_profile.html.j2

@@ -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);
-  }
+  avatar.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'}})
-      .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') }}";
-  });
+deleteButton.addEventListener('click', () => {
+  Utils.deleteProfileAvatarRequest({{ user.hashid|tojson }})
+    .then(
+      (response) => {
+        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 %}