Commit 4ac03308 authored by konrad-ivelic's avatar konrad-ivelic
Browse files
parents 59c49f08 bcca7d0a
......@@ -5,7 +5,8 @@
"description": "A sample Apache Cordova application that responds to the deviceready event.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"test": "platforms/browser && cordova run browser --port=3000 & cd .. && source venv/bin/activate && cd backend/secfit && python3 manage.py testserver test.json & node_modules/.bin/cypress open",
"cypress:open": "cypress open"
},
"keywords": [
"ecosystem:cordova"
......@@ -31,5 +32,8 @@
"browser",
"android"
]
},
"dependencies": {
"cypress": "^9.5.2"
}
}
\ No newline at end of file
}
......@@ -4,208 +4,217 @@ let deleteButton;
let editButton;
let oldFormData;
class MuscleGroup {
constructor(type) {
this.isValidType = false;
this.validTypes = ["Legs", "Chest", "Back", "Arms", "Abdomen", "Shoulders"]
this.type = this.validTypes.includes(type) ? type : undefined;
};
setMuscleGroupType = (newType) => {
this.isValidType = false;
if(this.validTypes.includes(newType)){
this.isValidType = true;
this.type = newType;
}
else{
alert("Invalid muscle group!");
}
};
getMuscleGroupType = () => {
console.log(this.type, "SWIOEFIWEUFH")
return this.type;
const formInputs = [
"name",
"description",
"duration",
"calories",
"muscleGroup",
"unit",
];
class MuscleGroup {
constructor(type) {
this.isValidType = false;
this.validTypes = ["Legs", "Chest", "Back", "Arms", "Abdomen", "Shoulders"];
this.type = this.validTypes.includes(type) ? type : undefined;
}
setMuscleGroupType = (newType) => {
this.isValidType = false;
if (this.validTypes.includes(newType)) {
this.isValidType = true;
this.type = newType;
} else {
alert("Invalid muscle group!");
}
};
getMuscleGroupType = () => {
return this.type;
};
}
function handleCancelButtonDuringEdit() {
setReadOnly(true, "#form-exercise");
document.querySelector("select").setAttribute("disabled", "")
okButton.className += " hide";
deleteButton.className += " hide";
cancelButton.className += " hide";
editButton.className = editButton.className.replace(" hide", "");
cancelButton.removeEventListener("click", handleCancelButtonDuringEdit);
let form = document.querySelector("#form-exercise");
if (oldFormData.has("name")) form.name.value = oldFormData.get("name");
if (oldFormData.has("description")) form.description.value = oldFormData.get("description");
if (oldFormData.has("duration")) form.duration.value = oldFormData.get("duration");
if (oldFormData.has("calories")) form.calories.value = oldFormData.get("calories");
if (oldFormData.has("muscleGroup")) form.muscleGroup.value = oldFormData.get("muscleGroup");
if (oldFormData.has("unit")) form.unit.value = oldFormData.get("unit");
oldFormData.delete("name");
oldFormData.delete("description");
oldFormData.delete("duration");
oldFormData.delete("calories");
oldFormData.delete("muscleGroup");
oldFormData.delete("unit");
setReadOnly(true, "#form-exercise");
document.querySelector("select").setAttribute("disabled", "");
showEditAndHideOthers();
addOldFormDataToForm();
deleteOldFormData();
}
function handleCancelButtonDuringCreate() {
window.location.replace("exercises.html");
window.location.replace("exercises.html");
}
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 response = await sendRequest("POST", `${HOST}/api/exercises/`, body);
if (response.ok) {
window.location.replace("exercises.html");
} else {
let data = await response.json();
let alert = createAlert("Could not create new exercise!", data);
document.body.prepend(alert);
}
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 response = await sendRequest("POST", `${HOST}/api/exercises/`, body);
if (response.ok) {
window.location.replace("exercises.html");
} else {
let data = await response.json();
let alert = createAlert("Could not create new exercise!", data);
document.body.prepend(alert);
}
}
function handleEditExerciseButtonClick() {
setReadOnly(false, "#form-exercise");
setReadOnly(false, "#form-exercise");
document.querySelector("select").removeAttribute("disabled")
document.querySelector("select").removeAttribute("disabled");
editButton.className += " hide";
okButton.className = okButton.className.replace(" hide", "");
cancelButton.className = cancelButton.className.replace(" hide", "");
deleteButton.className = deleteButton.className.replace(" hide", "");
editButton.className += " hide";
okButton.className = okButton.className.replace(" hide", "");
cancelButton.className = cancelButton.className.replace(" hide", "");
deleteButton.className = deleteButton.className.replace(" hide", "");
cancelButton.addEventListener("click", handleCancelButtonDuringEdit);
cancelButton.addEventListener("click", handleCancelButtonDuringEdit);
let form = document.querySelector("#form-exercise");
oldFormData = new FormData(form);
let form = document.querySelector("#form-exercise");
oldFormData = new FormData(form);
}
async function deleteExercise(id) {
let response = await sendRequest("DELETE", `${HOST}/api/exercises/${id}/`);
if (!response.ok) {
let data = await response.json();
let alert = createAlert(`Could not delete exercise ${id}`, data);
document.body.prepend(alert);
} else {
window.location.replace("exercises.html");
}
let response = await sendRequest("DELETE", `${HOST}/api/exercises/${id}/`);
if (!response.ok) {
let data = await response.json();
let alert = createAlert(`Could not delete exercise ${id}`, data);
document.body.prepend(alert);
} else {
window.location.replace("exercises.html");
}
}
async function retrieveExercise(id) {
let response = await sendRequest("GET", `${HOST}/api/exercises/${id}/`);
console.log(response.ok)
let response = await sendRequest("GET", `${HOST}/api/exercises/${id}/`);
if (!response.ok) {
let data = await response.json();
let alert = createAlert("Could not retrieve exercise data!", data);
document.body.prepend(alert);
} else {
document.querySelector("select").removeAttribute("disabled");
let exerciseData = await response.json();
let form = document.querySelector("#form-exercise");
let formData = new FormData(form);
if (!response.ok) {
let data = await response.json();
let alert = createAlert("Could not retrieve exercise data!", data);
document.body.prepend(alert);
} else {
document.querySelector("select").removeAttribute("disabled")
let exerciseData = await response.json();
let form = document.querySelector("#form-exercise");
let formData = new FormData(form);
for (let key of formData.keys()) {
let selector
key !== "muscleGroup" ? selector = `input[name="${key}"], textarea[name="${key}"]` : selector = `select[name=${key}]`
let input = form.querySelector(selector);
let newVal = exerciseData[key];
input.value = newVal;
}
document.querySelector("select").setAttribute("disabled", "")
for (let key of formData.keys()) {
let selector;
key !== "muscleGroup"
? (selector = `input[name="${key}"], textarea[name="${key}"]`)
: (selector = `select[name=${key}]`);
let input = form.querySelector(selector);
let newVal = exerciseData[key];
input.value = newVal;
}
document.querySelector("select").setAttribute("disabled", "");
}
}
async function updateExercise(id) {
let form = document.querySelector("#form-exercise");
let formData = new FormData(form);
let muscleGroupSelector = document.querySelector("select")
muscleGroupSelector.removeAttribute("disabled")
let form = document.querySelector("#form-exercise");
let formData = new FormData(form);
let muscleGroupSelector = document.querySelector("select");
muscleGroupSelector.removeAttribute("disabled");
let selectedMuscleGroup = new MuscleGroup(formData.get("muscleGroup"));
let body = {
name: formData.get("name"),
description: formData.get("description"),
duration: formData.get("duration"),
calories: formData.get("calories"),
muscleGroup: selectedMuscleGroup.getMuscleGroupType(),
unit: formData.get("unit"),
};
let response = await sendRequest("PUT", `${HOST}/api/exercises/${id}/`, body);
if (!response.ok) {
let data = await response.json();
let alert = createAlert(`Could not update exercise ${id}`, data);
document.body.prepend(alert);
} else {
muscleGroupSelector.setAttribute("disabled", "");
// duplicate code from handleCancelButtonDuringEdit
// you should refactor this
setReadOnly(true, "#form-exercise");
showEditAndHideOthers();
deleteOldFormData();
}
}
let selectedMuscleGroup = new MuscleGroup(formData.get("muscleGroup"));
function deleteOldFormData() {
oldFormData.delete("name");
oldFormData.delete("description");
oldFormData.delete("duration");
oldFormData.delete("calories");
oldFormData.delete("muscleGroup");
oldFormData.delete("unit");
}
let body = {"name": formData.get("name"),
"description": formData.get("description"),
"duration": formData.get("duration"),
"calories": formData.get("calories"),
"muscleGroup": selectedMuscleGroup.getMuscleGroupType(),
"unit": formData.get("unit")};
let response = await sendRequest("PUT", `${HOST}/api/exercises/${id}/`, body);
function addOldFormDataToForm() {
let form = document.querySelector("#form-exercise");
formInputs.forEach((input) => {
if (oldFormData.has(input)) form.description.value = oldFormData.get(input);
});
}
function showEditAndHideOthers() {
okButton.className += " hide";
deleteButton.className += " hide";
cancelButton.className += " hide";
editButton.className = editButton.className.replace(" hide", "");
if (!response.ok) {
let data = await response.json();
let alert = createAlert(`Could not update exercise ${id}`, data);
document.body.prepend(alert);
} else {
muscleGroupSelector.setAttribute("disabled", "")
// duplicate code from handleCancelButtonDuringEdit
// you should refactor this
setReadOnly(true, "#form-exercise");
okButton.className += " hide";
deleteButton.className += " hide";
cancelButton.className += " hide";
editButton.className = editButton.className.replace(" hide", "");
cancelButton.removeEventListener("click", handleCancelButtonDuringEdit);
oldFormData.delete("name");
oldFormData.delete("description");
oldFormData.delete("duration");
oldFormData.delete("calories");
oldFormData.delete("muscleGroup");
oldFormData.delete("unit");
}
cancelButton.removeEventListener("click", handleCancelButtonDuringEdit);
}
window.addEventListener("DOMContentLoaded", async () => {
cancelButton = document.querySelector("#btn-cancel-exercise");
okButton = document.querySelector("#btn-ok-exercise");
deleteButton = document.querySelector("#btn-delete-exercise");
editButton = document.querySelector("#btn-edit-exercise");
oldFormData = null;
const urlParams = new URLSearchParams(window.location.search);
// view/edit
if (urlParams.has('id')) {
const exerciseId = urlParams.get('id');
await retrieveExercise(exerciseId);
editButton.addEventListener("click", handleEditExerciseButtonClick);
deleteButton.addEventListener("click", (async (id) => await deleteExercise(id)).bind(undefined, exerciseId));
okButton.addEventListener("click", (async (id) => await updateExercise(id)).bind(undefined, exerciseId));
}
//create
else {
setReadOnly(false, "#form-exercise");
editButton.className += " hide";
okButton.className = okButton.className.replace(" hide", "");
cancelButton.className = cancelButton.className.replace(" hide", "");
okButton.addEventListener("click", async () => await createExercise());
cancelButton.addEventListener("click", handleCancelButtonDuringCreate);
}
});
\ No newline at end of file
cancelButton = document.querySelector("#btn-cancel-exercise");
okButton = document.querySelector("#btn-ok-exercise");
deleteButton = document.querySelector("#btn-delete-exercise");
editButton = document.querySelector("#btn-edit-exercise");
oldFormData = null;
const urlParams = new URLSearchParams(window.location.search);
// view/edit
if (urlParams.has("id")) {
const exerciseId = urlParams.get("id");
await retrieveExercise(exerciseId);
editButton.addEventListener("click", handleEditExerciseButtonClick);
deleteButton.addEventListener(
"click",
(async (id) => await deleteExercise(id)).bind(undefined, exerciseId)
);
okButton.addEventListener(
"click",
(async (id) => await updateExercise(id)).bind(undefined, exerciseId)
);
}
//create
else {
setReadOnly(false, "#form-exercise");
editButton.className += " hide";
okButton.className = okButton.className.replace(" hide", "");
cancelButton.className = cancelButton.className.replace(" hide", "");
okButton.addEventListener("click", async () => await createExercise());
cancelButton.addEventListener("click", handleCancelButtonDuringCreate);
}
});
let goBackButton;
let submitNewFileButton;
async function retrieveWorkoutImages(id) {
let workoutData = null;
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();
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 noImageText = document.querySelector("#no-images-text");
if(hasNoImages){
noImageText.classList.remove("hide");
return;
}
async function retrieveWorkoutImages(id) {
let workoutData = null;
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();
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 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++;
}
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;
}
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;