From 5020d79ef6a278eaabd4f037450a5d9857f9bfe1 Mon Sep 17 00:00:00 2001 From: Elto Borges Date: Wed, 21 Aug 2024 15:12:56 -0300 Subject: [PATCH] =?UTF-8?q?atualiza=C3=A7ao--=20if/else/else=20if=20para?= =?UTF-8?q?=20switch=20case?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ask.html | 2 +- src/css/styles.css | 4 +- src/javascript/askscript.js | 337 +++++++++++++++++++++--------------- 3 files changed, 196 insertions(+), 147 deletions(-) diff --git a/ask.html b/ask.html index 42213643..aa0f1b06 100644 --- a/ask.html +++ b/ask.html @@ -120,7 +120,7 @@

Qual é a sua experiência em academia?

Envie uma foto sua para o perfil

- +
diff --git a/src/css/styles.css b/src/css/styles.css index fb0b1542..78d1427c 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -659,7 +659,7 @@ button[type="button"] { transform: translateY(0); } -.ask-continue-button { +.ask-continue-button, .updatebutton { width: 100%; padding: 12px; background-color: #ff4a53; @@ -672,7 +672,7 @@ button[type="button"] { transition: background-color 0.3s ease; } -.ask-continue-button:hover { +.ask-continue-button:hover, .updatebutton:hover { background-color: #ff2a33; } diff --git a/src/javascript/askscript.js b/src/javascript/askscript.js index 215b31a1..1fd68167 100644 --- a/src/javascript/askscript.js +++ b/src/javascript/askscript.js @@ -1,165 +1,214 @@ -document.addEventListener('DOMContentLoaded', () => { - const steps = Array.from(document.querySelectorAll('.ask-form-step')); - const continueButtons = document.querySelectorAll('.ask-continue-button'); - const backButton = document.querySelector('.ask-back-button'); - const progressBarSteps = document.querySelectorAll('.ask-progress-bar .ask-step'); - - let currentStep = 0; - let responses = JSON.parse(localStorage.getItem('userResponses')) || {}; - - function showStep(index, isNext) { - const currentFormStep = steps[currentStep]; - const nextFormStep = steps[index]; - - currentFormStep.style.opacity = '0'; - currentFormStep.style.transform = isNext ? 'translateX(-100%)' : 'translateX(100%)'; - backButton.style.opacity = '0'; - backButton.style.transform = 'translateY(20px)'; - +document.addEventListener("DOMContentLoaded", () => { + const steps = Array.from(document.querySelectorAll(".ask-form-step")); + const continueButtons = document.querySelectorAll(".ask-continue-button"); + const backButton = document.querySelector(".ask-back-button"); + const progressBarSteps = document.querySelectorAll( + ".ask-progress-bar .ask-step" + ); + + let currentStep = 0; + let user = {}; + + function showStep(index, isNext) { + const currentFormStep = steps[currentStep]; + const nextFormStep = steps[index]; + + currentFormStep.style.opacity = "0"; + currentFormStep.style.transform = isNext + ? "translateX(-100%)" + : "translateX(100%)"; + backButton.style.opacity = "0"; + backButton.style.transform = "translateY(20px)"; + + setTimeout(() => { + currentFormStep.classList.remove("active"); + progressBarSteps[currentStep].classList.remove("active"); + + nextFormStep.classList.add("active"); + nextFormStep.style.opacity = "1"; + nextFormStep.style.transform = "translateX(0)"; + progressBarSteps[index].classList.add("active"); + + if (index > 0) { + backButton.classList.add("active"); setTimeout(() => { - currentFormStep.classList.remove('active'); - progressBarSteps[currentStep].classList.remove('active'); - - nextFormStep.classList.add('active'); - nextFormStep.style.opacity = '1'; - nextFormStep.style.transform = 'translateX(0)'; - progressBarSteps[index].classList.add('active'); - - if (index > 0) { - backButton.classList.add('active'); - setTimeout(() => { - backButton.style.opacity = '1'; - backButton.style.transform = 'translateY(0)'; - }, 100); - } else { - backButton.classList.remove('active'); - } - - currentStep = index; - }, 500); - } - - function saveResponses() { - const currentStepElement = steps[currentStep]; - - // Ajuste para pegar os valores corretamente - if (currentStep === 0) { - responses.signupName = currentStepElement.querySelector('input#singupname').value; - } else if (currentStep === 1) { - responses.meta = currentStepElement.querySelector('input[placeholder="Digite sua meta"]').value; - } else if (currentStep === 2) { - responses.weight = currentStepElement.querySelector('input[placeholder="Insira seu peso"]').value; - responses.height = currentStepElement.querySelector('input[placeholder="Insira sua altura"]').value; - } else if (currentStep === 3) { - responses.trainingDays = currentStepElement.querySelector('input[placeholder="De 1 a 7 dias"]').value; - } else if (currentStep === 4) { - responses.disease = currentStepElement.querySelector('input#disease-input').value; - } else if (currentStep === 5) { - responses.specialCondition = currentStepElement.querySelector('input#special-condition-input').value; - } else if (currentStep === 6) { - responses.phoneNumber = currentStepElement.querySelector('input[type="tel"]').value; - } else if (currentStep === 7) { - responses.birthDate = currentStepElement.querySelector('input[type="date"]').value; - } else if (currentStep === 8) { - responses.gender = Array.from(currentStepElement.querySelectorAll('.ask-option-button.selected')).map(btn => btn.textContent).join(', '); - } else if (currentStep === 9) { - responses.experience = Array.from(currentStepElement.querySelectorAll('.ask-option-button.selected')).map(btn => btn.textContent).join(', '); - } else if (currentStep === 10) { - const fileInput = currentStepElement.querySelector('input#ask-profile-image'); - if (fileInput.files.length > 0) { - const file = fileInput.files[0]; - const reader = new FileReader(); - reader.onload = function(e) { - const imageUrl = e.target.result; - responses.profileImage = imageUrl; - localStorage.setItem('userResponses', JSON.stringify(responses)); - const profileAvatar = document.getElementById('profile-avatar'); - if (profileAvatar) { - profileAvatar.src = imageUrl; - } - }; - reader.readAsDataURL(file); - } else { - responses.profileImage = responses.profileImage || ''; - localStorage.setItem('userResponses', JSON.stringify(responses)); + backButton.style.opacity = "1"; + backButton.style.transform = "translateY(0)"; + }, 100); + } else { + backButton.classList.remove("active"); + } + + currentStep = index; + }, 500); + } + + const nextButton = document.querySelectorAll(".ask-continue-button"); + + nextButton.forEach((button) => { + button.addEventListener("click", () => { + nextStetp(); + }); + }); + + function nextStetp() { + const currentStepElement = steps[currentStep]; + console.log("currentStepElement", currentStepElement); + + switch (currentStep) { + case 0: + user.signupName = + currentStepElement.querySelector("input#singupname").value; + break; + case 1: + user.meta = currentStepElement.querySelector( + 'input[placeholder="Digite sua meta"]' + ).value; + break; + case 2: + user.weight = currentStepElement.querySelector( + 'input[placeholder="Insira seu peso"]' + ).value; + user.height = currentStepElement.querySelector( + 'input[placeholder="Insira sua altura"]' + ).value; + break; + case 3: + user.trainingDays = currentStepElement.querySelector( + 'input[placeholder="De 1 a 7 dias"]' + ).value; + break; + case 4: + user.disease = currentStepElement.querySelector( + "input#disease-input" + ).value; + break; + case 5: + user.specialCondition = currentStepElement.querySelector( + "input#special-condition-input" + ).value; + break; + case 6: + user.phoneNumber = + currentStepElement.querySelector('input[type="tel"]').value; + break; + case 7: + user.birthDate = + currentStepElement.querySelector('input[type="date"]').value; + break; + case 8: + user.gender = Array.from( + currentStepElement.querySelectorAll(".ask-option-button.selected") + ) + .map((btn) => btn.textContent) + .join(", "); + break; + case 9: + user.experience = Array.from( + currentStepElement.querySelectorAll(".ask-option-button.selected") + ) + .map((btn) => btn.textContent) + .join(", "); + break; + case 10: + const fileInput = currentStepElement.querySelector( + "input#ask-profile-image" + ); + if (fileInput.files.length > 0) { + const file = fileInput.files[0]; + const reader = new FileReader(); + reader.onload = function (e) { + const imageUrl = e.target.result; + user.profileImage = imageUrl; + const profileAvatar = document.getElementById("profile-avatar"); + if (profileAvatar) { + profileAvatar.src = imageUrl; } + }; + reader.readAsDataURL(file); + } else { + user.profileImage = responses.profileImage || ""; } - - localStorage.setItem('userResponses', JSON.stringify(responses)); + break; + default: + console.log("Passo desconhecido:", currentStep); + break; } - - function submitForm() { - saveResponses(); - - fetch(`${URL_API}/users/me`, { - method: "PUT", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify(responses) - }) - .then(response => { - if (!response.ok) { - throw new Error(`HTTP deu erro! status: ${response.status}`); - } - return response.json(); - }) - .then(data => { - console.log(data); - alert("Informações atualizadas com sucesso!"); - window.location.href = "https://ifpi-picos.github.io/projeto-integrador-ugym/perf.html"; - }) - .catch(error => { - console.error("Erro ao atualizar informações:", error); - alert("Erro ao atualizar informações!"); - }); - } - - continueButtons.forEach(button => { - button.addEventListener('click', () => { - saveResponses(); - if (currentStep < steps.length - 1) { - showStep(currentStep + 1, true); - } else { - submitForm(); - } - }); - }); - - backButton.addEventListener('click', () => { - if (currentStep > 0) { - showStep(currentStep - 1, false); + } + + + function updateUser() { + console.log("user:", user); + fetch(`${URL_API}/users/me`, { + method: "PUT", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(user), + }) + .then((response) => { + if (!response.ok) { + throw new Error(`HTTP deu erro! status: ${response.status}`); } + return response.json(); + }) + .then((data) => { + console.log(data); + alert("Informações atualizadas com sucesso!"); + window.location.href = + "https://ifpi-picos.github.io/projeto-integrador-ugym/perf.html"; + }) + .catch((error) => { + console.error("Erro ao atualizar informações:", error); + alert("Erro ao atualizar informações!"); + }); + } + + continueButtons.forEach((button) => { + button.addEventListener("click", () => { + if (currentStep < steps.length - 1) { + showStep(currentStep + 1, true); + } else { + submitForm(); + } }); + }); + + backButton.addEventListener("click", () => { + if (currentStep > 0) { + showStep(currentStep - 1, false); + } + }); - const optionButtons = document.querySelectorAll(".ask-option-button"); - optionButtons.forEach(button => { - button.addEventListener("click", () => { - optionButtons.forEach(btn => btn.classList.remove("selected")); - button.classList.add("selected"); - }); + const optionButtons = document.querySelectorAll(".ask-option-button"); + optionButtons.forEach((button) => { + button.addEventListener("click", () => { + optionButtons.forEach((btn) => btn.classList.remove("selected")); + button.classList.add("selected"); }); + }); }); function proxpage() { - window.location.href = "https://ifpi-picos.github.io/projeto-integrador-ugym/perf.html"; + window.location.href = + "https://ifpi-picos.github.io/projeto-integrador-ugym/perf.html"; } function showInput() { - const input = document.getElementById('disease-input'); - input.style.display = 'block'; + const input = document.getElementById("disease-input"); + input.style.display = "block"; } function hideInput() { - const input = document.getElementById('disease-input'); - input.style.display = 'none'; + const input = document.getElementById("disease-input"); + input.style.display = "none"; } function handleOptionChange(option, inputId) { - const inputElement = document.getElementById(inputId); - if (option === 'Sim') { - inputElement.style.display = 'block'; - } else { - inputElement.style.display = 'none'; - } + const inputElement = document.getElementById(inputId); + if (option === "Sim") { + inputElement.style.display = "block"; + } else { + inputElement.style.display = "none"; + } }