Skip to content
Snippets Groups Projects
Commit 96903f5b authored by hollum's avatar hollum
Browse files

edit profile with up to date values as placeholder

parent 0d5cb283
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/www/profile.html
+ 57
− 45
View file @ 96903f5b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile</title>
<title>Register</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/0ce6c392ca.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles/style.css">
<script src="scripts/navbar.js" type="text/javascript" defer></script>
</head>
<body>
<navbar-el></navbar-el>
<!-- Adapted from https://bootsnipp.com/snippets/z8699 START -->
<div class="container">
<div class="row">
<div class="col-lg">
<h3 class="mt-3">Profile settings</h3>
</div>
</div>
<form class="row g-3" id="form-exercise">
<div class="col-lg-6 ">
<label for="inputName" class="form-label">Name</label>
<input type="text" class="form-control" id="inputName" name="name" readonly>
</div>
<div class="col-lg-6"></div>
<div class="col-lg-6">
</div>
<div class="col-lg-6"></div>
<div class="col-lg-6 ">
<label for="inputName" class="form-label">Favourite Exercise</label>
<input type="text" class="form-control" id="inputFavouriteExercise" name="favouriteExercise" readonly>
</div>
<div class="col-lg-6"></div>
<div class="col-lg-6">
<div class="card mt-3 border-0">
<article class="card-body mx-auto">
<h4 class="card-title mt-3 text-center">Edit profile</h4>
<form id="form-edit-user">
<div class="input-group mb-2">
<span class="input-group-text"> <i class="fas fa-user"></i> </span>
<input name="username" id="username" class="form-control" placeholder="User name" type="text" disabled>
</div> <!-- form-group// -->
<div class="input-group mb-2">
<span class="input-group-text"> <i class="fas fa-envelope"></i> </span>
<input name="email" id="email" class="form-control" placeholder="Email address" type="email" required>
</div>
<div class="input-group mb-2">
<span class="input-group-text"> <i class="fas fa-mobile"></i> </span>
<input class="form-control" id="phone_number" name="phone_number" placeholder="Phone number" type="text"
required>
</div> <!-- form-group// -->
<div class="input-group mb-2">
<span class="input-group-text"> <i class="fas fa-globe"></i> </span>
<input class="form-control" id="country" name="country" placeholder="Country" type="text"
required>
</div> <!-- form-group// -->
<div class="input-group mb-2">
<span class="input-group-text"> <i class="fas fa-building"></i> </span>
<input class="form-control" id="city" name="city" placeholder="City" type="text"
required>
</div> <!-- form-group// -->
<div class="input-group mb-2">
<span class="input-group-text"> <i class="fas fa-hotel"></i> </span>
<input class="form-control" id="street_address" name="street_address" placeholder="Street address" type="text"
required>
</div> <!-- form-group// -->
<div class="input-group mb-2">
<span class="input-group-text"> <i class="fas fa-hotel"></i> </span>
<input class="form-control" id="main_gym" name="main_gym" placeholder="Main gym" type="text"
required>
</div> <!-- form-group// -->
<div class="input-group mb-2">
<span class="input-group-text"> <i class="fas fa-hotel"></i> </span>
<input class="form-control" id="favourite_exercise" name="favourite_exercise" placeholder="Favourite exercise" type="text"
required>
</div> <!-- form-group// -->
<div class="d-grid">
<input type="button" class="btn btn-primary" id="btn-create-account"
value=" Create Account ">
</div> <!-- form-group// -->
</form>
</article>
</div> <!-- card.// -->
</div>
<div class="col-lg-6"></div>
<div class="col-lg-6">
<label for="inputMuscles" class="form-label">Main gym</label>
<select class="form-select" name="gymGroup" disabled="true">
<option value="Legs">SIT</option>
<option value="Chest">IMPULS</option>
<option value="Back">3T</option>
<option value="Arms">STAMINA</option>
</select>
</div>
<div class="col-lg-6"></div>
<div class="col-lg-6">
<input type="button" class="btn btn-primary hide" id="btn-ok-exercise" value=" OK ">
<input type="button" class="btn btn-primary" id="btn-edit-exercise" value=" Edit ">
<input type="button" class="btn btn-secondary hide" id="btn-cancel-exercise" value="Cancel">
<input type="button" class="btn btn-danger float-end hide" id="btn-delete-exercise" value="Delete">
</div>
<div class="col-lg-6">
</div>
</form>
</div>
<!--container end.//-->
<!-- Adapted from https://bootsnipp.com/snippets/z8699 END -->
<script src="scripts/defaults.js"></script>
<script src="scripts/scripts.js"></script>
<script src="scripts/profile.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
frontend/www/scripts/profile.js
+ 51
− 196
View file @ 96903f5b
let cancelButton;
let okButton;
let deleteButton;
let editButton;
let oldFormData;
class MuscleGroup {
constructor(type) {
this.isValidType = false;
this.validTypes = ["SIT", "IMPULS", "3T", "STAMINA"];
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!");
async function init() {
console.log("Running init")
const username = sessionStorage.getItem("username");
let userResponse = await sendRequest("GET", `${HOST}/api/users/${username}/`);
let user = await userResponse.json().then((val) => {
if(val){
console.log(val);
document.getElementById("username").placeholder = `${val.username}`;
document.getElementById("email").placeholder = `${val.email}`;
document.getElementById("phone_number").placeholder = `${val.phone_number}`;
document.getElementById("country").placeholder = `${val.country}`;
document.getElementById("city").placeholder = `${val.city}`;
document.getElementById("street_address").placeholder = `${val.street_address}`;
document.getElementById("main_gym").placeholder = `${val.main_gym}`;
document.getElementById("favourite_exercise").placeholder = `${val.favourite_exercise}`;
}
};
getMuscleGroupType = () => {
console.log(this.type, "SWIOEFIWEUFH")
return this.type;
}
}
function handleCancelButtonDuringEdit() {
console.log("fjpfjhpisdfhøidksfho")
/*
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("favouriteExercise")) form.name.value = oldFormData.get("favouriteExercise");
if (oldFormData.has("gymGroup")) form.muscleGroup.value = oldFormData.get("gymGroup");
oldFormData.delete("name");
oldFormData.delete("favouriteExercise");
oldFormData.delete("gymGroup");
*/
}).catch(console.log)
}
function handleCancelButtonDuringCreate() {
window.location.replace("profile.html");
}
async function createExercise() {
document.querySelector("select").removeAttribute("disabled")
console.log("dasdadasda")
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("Coulds not create new exercise!", data);
document.body.prepend(alert);
}
async function createNewUser(event) {
const username = sessionStorage.getItem("username");
console.log("USERNAME:", username);
let response2 = await sendRequest("GET", `${HOST}/api/users/${username}/`);
let data2 = await response2.json();
console.log("*USER", data2)
//console.log("USER:", data2.results.map((item) => console.log(item)));
}
function handleEditExerciseButtonClick() {
setReadOnly(false, "#form-exercise");
let userResponse = await sendRequest("GET", `${HOST}/api/users/${username}/`);
let user = await userResponse.json();
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", "");
cancelButton.addEventListener("click", handleCancelButtonDuringEdit);
let form = document.querySelector("#form-exercise");
oldFormData = new FormData(form);
}
let form = document.querySelector("#form-edit-user");
console.log(form);
let formData = new FormData(form);
/*
let response = await sendRequest("POST", `${HOST}/api/users/`, formData, "");
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);
let alert = createAlert("Registration failed!", 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)
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;
let body = {
username: formData.get("username"),
password: formData.get("password"),
phone_number: formData.get("phone_number"),
country: formData.get("country"),
city: formData.get("city"),
street_address: formData.get("street_address"),
main_gym: formData.get("main_gym"),
favourite_exercise: formData.get("favourite_exercise")
};
response = await sendRequest("POST", `${HOST}/api/token/`, body);
if (response.ok) {
let data = await response.json();
setCookie("access", data.access, 86400, "/");
setCookie("refresh", data.refresh, 86400, "/");
sessionStorage.setItem("username", formData.get("username"));
} else {
console.log("CAN'T GET JWT TOKEN ON REGISTRATION");
let data = await response.json();
let alert = createAlert("Registration could not complete. Try again!", data);
document.body.prepend(alert);
}
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 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");
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");
form.reset();
//window.location.replace("workouts.html");
}
*/
}
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);
}
});
document.querySelector("#btn-create-account").addEventListener("click", async (event) => await createNewUser(event));
init();
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