Merge branch 'master' of https://gitlab.stud.idi.ntnu.no/eytan/tdt-4242-base-group-33

frontend/www/scripts/gallery.js

 let goBackButton;
 let submitNewFileButton;
 
+function addImage(file, fileCounter){
+    let filesDiv = document.getElementById("img-collection");
+    let filesDeleteDiv = document.getElementById("img-collection-delete");
+
+    let deleteImgButton = document.createElement("input");
+    deleteImgButton.type = "button";
+    deleteImgButton.className = "btn btn-close";
+    deleteImgButton.id = file.url.split("/")[file.url.split("/").length - 2];
+    deleteImgButton.addEventListener('click', () => handleDeleteImgClick(deleteImgButton.id, "DELETE", `Could not delete workout ${deleteImgButton.id}!`, HOST, ["jpg", "png", "gif", "jpeg", "JPG", "PNG", "GIF", "JPEG"]));
+    filesDeleteDiv.appendChild(deleteImgButton);
+    
+    let img = document.createElement("img");
+    img.src = file.file;
+    
+    filesDiv.appendChild(img);
+    deleteImgButton.style.left = `${(fileCounter % 4) * 191}px`;
+    deleteImgButton.style.top = `${Math.floor(fileCounter / 4) * 105}px`;
+}
 
 async function retrieveWorkoutImages(id) {  
     let workoutData = null;
@@ -24,9 +42,6 @@ async function retrieveWorkoutImages(id) {
         }
 
         noImageText.classList.add("hide");
-
-        let filesDiv = document.getElementById("img-collection");
-        let filesDeleteDiv = document.getElementById("img-collection-delete");
         
         const currentImageFileElement = document.querySelector("#current");
         let isFirstImg = true;
@@ -43,20 +58,7 @@ async function retrieveWorkoutImages(id) {
             let isImage = ["jpg", "png", "gif", "jpeg", "JPG", "PNG", "GIF", "JPEG"].includes(a.text.split(".")[1]);
 
             if(isImage){
-                let deleteImgButton = document.createElement("input");
-                deleteImgButton.type = "button";
-                deleteImgButton.className = "btn btn-close";
-                deleteImgButton.id = file.url.split("/")[file.url.split("/").length - 2];
-                deleteImgButton.addEventListener('click', () => handleDeleteImgClick(deleteImgButton.id, "DELETE", `Could not delete workout ${deleteImgButton.id}!`, HOST, ["jpg", "png", "gif", "jpeg", "JPG", "PNG", "GIF", "JPEG"]));
-                filesDeleteDiv.appendChild(deleteImgButton);
-                
-                let img = document.createElement("img");
-                img.src = file.file;
-                
-                filesDiv.appendChild(img);
-                deleteImgButton.style.left = `${(fileCounter % 4) * 191}px`;
-                deleteImgButton.style.top = `${Math.floor(fileCounter / 4) * 105}px`;
-
+                addImage(file, fileCounter);
                 if(isFirstImg){
                     currentImageFileElement.src = file.file;
                     isFirstImg = false;
@@ -95,17 +97,17 @@ async function validateImgFileType(id) {
     return acceptedFileTypes.includes(fileType);
 }
 
-async function handleDeleteImgClick (id, http_keyword, fail_alert_text, host_variable, acceptedFileTypes) {
+async function handleDeleteImgClick (id) {
     
     if(validateImgFileType(id)){
         return
     }
 
-    let response = await sendRequest(http_keyword, `${host_variable}/api/workout-files/${id}/`);
+    let response = await sendRequest("DELETE", `${HOST}/api/workout-files/${id}/`);
 
     if (!response.ok) {
         let data = await response.json();
-        let alert = createAlert(fail_alert_text, data);
+        let alert = createAlert("Could not delete workout ${id}!", data);
         document.body.prepend(alert);
     } else {
         location.reload();
@@ -125,6 +127,6 @@ window.addEventListener("DOMContentLoaded", async () => {
 
     const urlParams = new URLSearchParams(window.location.search);
     const id = urlParams.get('id');
-    let workoutData = await retrieveWorkoutImages(id);   
+    await retrieveWorkoutImages(id);   
 
 });