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;
async function retrieveWorkoutImages(id) {
let workoutData = null;
const imageTypes = ["jpg", "png", "gif", "jpeg", "JPG", "PNG", "GIF", "JPEG"];
async function retriveWorkout(id) {
let response = await sendRequest("GET", `${HOST}/api/workouts/${id}/`);
if (!response.ok) {
let data = await response.json();
let alert = createAlert("Could not retrieve workout data!", data);
document.body.prepend(alert);
} else {
workoutData = await response.json();
return;
}
document.getElementById(
"workout-title"
).innerHTML = `Workout name : ${workoutData["name"]}`;
document.getElementById(
"workout-owner"
).innerHTML = `Owner: ${workoutData["owner_username"]}`;
return await response.json();
}
document.getElementById(
"workout-title"
).innerHTML = `Workout name : ${workoutData["name"]}`;
document.getElementById(
"workout-owner"
).innerHTML = `Owner: ${workoutData["owner_username"]}`;
function addDeleteButton(file, fileCounter) {
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,
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;
let noImageText = document.querySelector("#no-images-text");
function addImages(files) {
let filesDiv = document.getElementById("img-collection");
if (hasNoImages) {
noImageText.classList.remove("hide");
return;
}
const currentImageFileElement = document.querySelector("#current");
let isFirstImg = true;
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 filesDiv = document.getElementById("img-collection");
let filesDeleteDiv = document.getElementById("img-collection-delete");
const currentImageFileElement = document.querySelector("#current");
let isFirstImg = true;
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++;
let img = document.createElement("img");
img.src = file.file;
filesDiv.appendChild(img);
if (isFirstImg) {
currentImageFileElement.src = file.file;
isFirstImg = false;
}
fileCounter++;
}
}
}
const otherImageFileElements = document.querySelectorAll(".imgs img");
const selectedOpacity = 0.6;
otherImageFileElements[0].style.opacity = selectedOpacity;
otherImageFileElements.forEach((imageFileElement) =>
imageFileElement.addEventListener("click", (event) => {
//Changes the main image
currentImageFileElement.src = event.target.src;
//Adds the fade animation
currentImageFileElement.classList.add("fade-in");
setTimeout(
() => currentImageFileElement.classList.remove("fade-in"),
500
);
//Sets the opacity of the selected image to 0.4
otherImageFileElements.forEach(
(imageFileElement) => (imageFileElement.style.opacity = 1)
);
event.target.style.opacity = selectedOpacity;
})
);
function styleImages() {
const currentImageFileElement = document.querySelector("#current");
const otherImageFileElements = document.querySelectorAll(".imgs img");
const selectedOpacity = 0.6;
otherImageFileElements[0].style.opacity = selectedOpacity;
otherImageFileElements.forEach((imageFileElement) =>
imageFileElement.addEventListener("click", (event) => {
//Changes the main image
currentImageFileElement.src = event.target.src;
//Adds the fade animation
currentImageFileElement.classList.add("fade-in");
setTimeout(
() => currentImageFileElement.classList.remove("fade-in"),
500
);
//Sets the opacity of the selected image to 0.4
otherImageFileElements.forEach(
(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;
}
......
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