Commit d2b7ffbc authored by Tomas Vaagen Gule's avatar Tomas Vaagen Gule
Browse files

Long method gone

parent e608fd3d
Pipeline #172083 passed with stages
in 2 minutes and 6 seconds
let goBackButton; let goBackButton;
async function retrieveWorkoutImages(id) { const imageTypes = ["jpg", "png", "gif", "jpeg", "JPG", "PNG", "GIF", "JPEG"];
let workoutData = null;
async function retriveWorkout(id) {
let response = await sendRequest("GET", `${HOST}/api/workouts/${id}/`); let response = await sendRequest("GET", `${HOST}/api/workouts/${id}/`);
if (!response.ok) { if (!response.ok) {
let data = await response.json(); let data = await response.json();
let alert = createAlert("Could not retrieve workout data!", data); let alert = createAlert("Could not retrieve workout data!", data);
document.body.prepend(alert); document.body.prepend(alert);
} else { return;
workoutData = await response.json(); }
document.getElementById(
"workout-title"
).innerHTML = `Workout name : ${workoutData["name"]}`;
document.getElementById(
"workout-owner"
).innerHTML = `Owner: ${workoutData["owner_username"]}`;
return await response.json();
}
document.getElementById( function addDeleteButton(file, fileCounter) {
"workout-title" let filesDeleteDiv = document.getElementById("img-collection-delete");
).innerHTML = `Workout name : ${workoutData["name"]}`; let deleteImgButton = document.createElement("input");
document.getElementById( deleteImgButton.type = "button";
"workout-owner" deleteImgButton.className = "btn btn-close";
).innerHTML = `Owner: ${workoutData["owner_username"]}`; deleteImgButton.id = file.url.split("/")[file.url.split("/").length - 2];
deleteImgButton.addEventListener("click", () =>
handleDeleteImgClick(
deleteImgButton.id,
"DELETE",
`Could not delete workout ${deleteImgButton.id}!`,
HOST,
imageTypes
)
);
filesDeleteDiv.appendChild(deleteImgButton);
deleteImgButton.style.left = `${(fileCounter % 4) * 191}px`;
deleteImgButton.style.top = `${Math.floor(fileCounter / 4) * 105}px`;
}
let hasNoImages = workoutData.files.length === 0; function addImages(files) {
let noImageText = document.querySelector("#no-images-text"); let filesDiv = document.getElementById("img-collection");
if (hasNoImages) { const currentImageFileElement = document.querySelector("#current");
noImageText.classList.remove("hide"); let isFirstImg = true;
return;
} let fileCounter = 0;
for (let file of files) {
let a = document.createElement("a");
a.href = file.file;
let pathArray = file.file.split("/");
a.text = pathArray[pathArray.length - 1];
a.className = "me-2";
let isImage = imageTypes.includes(a.text.split(".")[1]);
if (isImage) {
addDeleteButton(file, fileCounter);
noImageText.classList.add("hide"); let img = document.createElement("img");
img.src = file.file;
let filesDiv = document.getElementById("img-collection"); filesDiv.appendChild(img);
let filesDeleteDiv = document.getElementById("img-collection-delete");
if (isFirstImg) {
const currentImageFileElement = document.querySelector("#current"); currentImageFileElement.src = file.file;
let isFirstImg = true; isFirstImg = false;
let fileCounter = 0;
for (let file of workoutData.files) {
let a = document.createElement("a");
a.href = file.file;
let pathArray = file.file.split("/");
a.text = pathArray[pathArray.length - 1];
a.className = "me-2";
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`;
if (isFirstImg) {
currentImageFileElement.src = file.file;
isFirstImg = false;
}
fileCounter++;
} }
fileCounter++;
} }
}
}
const otherImageFileElements = document.querySelectorAll(".imgs img"); function styleImages() {
const selectedOpacity = 0.6; const currentImageFileElement = document.querySelector("#current");
otherImageFileElements[0].style.opacity = selectedOpacity; const otherImageFileElements = document.querySelectorAll(".imgs img");
const selectedOpacity = 0.6;
otherImageFileElements.forEach((imageFileElement) => otherImageFileElements[0].style.opacity = selectedOpacity;
imageFileElement.addEventListener("click", (event) => {
//Changes the main image otherImageFileElements.forEach((imageFileElement) =>
currentImageFileElement.src = event.target.src; imageFileElement.addEventListener("click", (event) => {
//Changes the main image
//Adds the fade animation currentImageFileElement.src = event.target.src;
currentImageFileElement.classList.add("fade-in");
setTimeout( //Adds the fade animation
() => currentImageFileElement.classList.remove("fade-in"), currentImageFileElement.classList.add("fade-in");
500 setTimeout(
); () => currentImageFileElement.classList.remove("fade-in"),
500
//Sets the opacity of the selected image to 0.4 );
otherImageFileElements.forEach(
(imageFileElement) => (imageFileElement.style.opacity = 1) //Sets the opacity of the selected image to 0.4
); otherImageFileElements.forEach(
event.target.style.opacity = selectedOpacity; (imageFileElement) => (imageFileElement.style.opacity = 1)
}) );
); event.target.style.opacity = selectedOpacity;
})
);
}
async function retrieveWorkoutImages(id) {
let workoutData = retriveWorkout(id);
if (!workoutData) {
return;
}
let hasNoImages = workoutData.files.length === 0;
let noImageText = document.querySelector("#no-images-text");
if (hasNoImages) {
noImageText.classList.remove("hide");
return;
} }
noImageText.classList.add("hide");
addImages(workoutData.files);
styleImages();
return workoutData; return workoutData;
} }
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment