Skip to content
GitLab
Commit 2fecf094 authored by WilliamHLe's avatar WilliamHLe
Browse files

Add refactor js

parent eb3ce67f
Pipeline #171957 passed with stages
in 2 minutes and 40 seconds
Hide whitespace changes
Inline Side-by-side
frontend/www/scripts/exercise.js
View file @ 2fecf094
......@@ -4,7 +4,7 @@ let deleteButton;
let editButton;
let oldFormData;
class MuscleGroup {
class MuscleGroup {
constructor(type) {
this.isValidType = false;
this.validTypes = ["Legs", "Chest", "Back", "Arms", "Abdomen", "Shoulders"]
......@@ -14,7 +14,7 @@ class MuscleGroup {
setMuscleGroupType = (newType) => {
this.isValidType = false;
if(this.validTypes.includes(newType)){
this.isValidType = true;
this.type = newType;
......@@ -24,7 +24,7 @@ class MuscleGroup {
}
};
getMuscleGroupType = () => {
console.log(this.type, "SWIOEFIWEUFH")
return this.type;
......@@ -89,21 +89,8 @@ function generateExerciseForm() {
async function createExercise() {
document.querySelector("select").removeAttribute("disabled")
// let form = document.querySelector("#form-exercise");
// let formData = new FormData(form);
// // let body = {"name": formData.get("name"),
// "description": formData.get("description"),
// "duration": formData.get("duration"),
// "calories": formData.get("calories"),
// "muscleGroup": formData.get("muscleGroup"),
// "unit": formData.get("unit")};
let submitForm = generateExerciseForm();
// let submitTrial = new FormData();
// for (let file of formData.getAll("files")) {
// submitTrial.append("file", file);
// // submitTrial.append('exercise',exercise.url);
// }
for (let key of submitForm.keys()) {
......@@ -111,10 +98,6 @@ async function createExercise() {
}
let response = await sendRequest("POST", `${HOST}/api/exercises/`, submitForm, "");
// let response1 = await sendRequest("POST", `${HOST}/api/exercise-files/`, submitTrial, "");
// let response = await sendRequest("POST", `${HOST}/api/exercises/`, body);
if (response.ok) {
window.location.replace("exercises.html");
......
frontend/www/scripts/gallery.js
View file @ 2fecf094
let goBackButton;
let submitNewFileButton;
async function retrieveWorkoutImages(id) {
const fileExtensions = ["jpg", "png", "gif", "jpeg", "JPG", "PNG", "GIF", "JPEG"];
const selectedOpacity = 0.6;
async function retrieveWorkoutImages(id) {
let workoutData = null;
let response = await sendRequest("GET", `${HOST}/api/workouts/${id}/`);
if (!response.ok) {
......@@ -14,95 +16,117 @@ async function retrieveWorkoutImages(id) {
document.getElementById("workout-title").innerHTML = "Workout name: " + workoutData["name"];
document.getElementById("workout-owner").innerHTML = "Owner: " + workoutData["owner_username"];
let hasNoImages = workoutData.files.length == 0;
let hasNoImages = getWorkoutDataImgFiles(workoutData.files).length === 0;
let noImageText = document.querySelector("#no-images-text");
if(hasNoImages){
noImageText.classList.remove("hide");
return;
}
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++;
}
}
createImageView(workoutData.files, currentImageFileElement);
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;
createAnimation(event, currentImageFileElement, otherImageFileElements)
}));
}
return workoutData;
}
function createImageView(imageFiles, currentImageFileElement) {
let filesDiv = document.getElementById("img-collection");
let filesDeleteDiv = document.getElementById("img-collection-delete");
let fileCounter = 0
let isFirstImg = true
for (let file of imageFiles) {
let isImage = fileExtensions.includes(file.file.split("/")[file.file.split("/").length - 1].split(".")[1]);
if(isImage){
let deleteImageButton = createDeleteImageButton(file, fileCounter);
filesDeleteDiv.appendChild(deleteImageButton);
let img = document.createElement("img");
img.src = file.file;
filesDiv.appendChild(img);
if(isFirstImg){
currentImageFileElement.src = file.file;
isFirstImg = false;
}
fileCounter++;
}
}
}
function createAnimation(event, currentImageFileElement, otherImageFileElements) {
//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((otherImageFileElement) => otherImageFileElement.style.opacity = 1)
event.target.style.opacity = selectedOpacity;
}
//Adds the fade animation
currentImageFileElement.classList.add('fade-in')
setTimeout(() => currentImageFileElement.classList.remove('fade-in'), 500);
function createDeleteImageButton(file, fileCounter) {
//Sets the opacity of the selected image to 0.4
otherImageFileElements.forEach((imageFileElement) => imageFileElement.style.opacity = 1)
event.target.style.opacity = selectedOpacity;
}))
let deleteImgButton = document.createElement("input");
deleteImgButton.type = "button";
deleteImgButton.className = "btn btn-close";
deleteImgButton.id = file.url.split("/")[file.url.split("/").length - 2];
deleteImgButton.style.left = `${(fileCounter % 4) * 191}px`;
deleteImgButton.style.top = `${Math.floor(fileCounter / 4) * 105}px`;
deleteImgButton.addEventListener('click', () =>
handleDeleteImgClick(deleteImgButton.id, "DELETE", `Could not delete workout ${deleteImgButton.id}!`)
);
return deleteImgButton
}
function getWorkoutDataImgFiles(workoutDataFiles) {
let imgFiles = [];
for (let file of workoutDataFiles) {
if (fileExtensions.includes(file.file.split(".")[1])) {
imgFiles.push(file);
}
}
return workoutData;
return imgFiles;
}
async function validateImgFileType(id, host_variable, acceptedFileTypes) {
let file = await sendRequest("GET", `${host_variable}/api/workout-files/${id}/`);
async function validateImgFileType(id) {
let file = await sendRequest("GET", `${HOST}/api/workout-files/${id}/`);
let fileData = await file.json();
let fileType = fileData.file.split("/")[fileData.file.split("/").length - 1].split(".")[1];
return acceptedFileTypes.includes(fileType);
return fileExtensions.includes(fileType);
}
async function handleDeleteImgClick (id, http_keyword, fail_alert_text, host_variable, acceptedFileTypes) {
if(validateImgFileType(id, host_variable, acceptedFileTypes, )){
return
async function handleDeleteImgClick(id, http_keyword, fail_alert_text) {
if(!validateImgFileType(id)) {
return;
}
let response = await sendRequest(http_keyword, `${host_variable}/api/workout-files/${id}/`);
let response = await sendRequest(http_keyword, `${HOST}/api/workout-files/${id}/`);
if (!response.ok) {
let data = await response.json();
......@@ -111,6 +135,7 @@ async function handleDeleteImgClick (id, http_keyword, fail_alert_text, host_var
} else {
location.reload();
}
}
function handleGoBackToWorkoutClick() {
......@@ -123,9 +148,8 @@ window.addEventListener("DOMContentLoaded", async () => {
goBackButton = document.querySelector("#btn-back-workout");
goBackButton.addEventListener('click', handleGoBackToWorkoutClick);
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get('id');
let workoutData = await retrieveWorkoutImages(id);
await retrieveWorkoutImages(id);
});
\ No newline at end of file
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