Merge remote-tracking branch 'origin/master'
This commit is contained in:
Luis
commit
817ef7f683
4
app.py
4
app.py
@ -146,6 +146,7 @@ def index():
|
||||
"Friday": "Freitag", "Saturday": "Samstag", "Sunday": "Sonntag"}
|
||||
|
||||
date = datetime.datetime.now().strftime("%d.%m.%Y %H:%M ") + days[datetime.datetime.now().strftime("%A")]
|
||||
color = '255, 0, 255'
|
||||
|
||||
return render_template(
|
||||
'index.html',
|
||||
@ -154,6 +155,7 @@ def index():
|
||||
habit_lists=habit_lists,
|
||||
heatmap_values=heatmap_values,
|
||||
day=day,
|
||||
color=color,
|
||||
errors={}
|
||||
)
|
||||
|
||||
@ -573,7 +575,7 @@ def check_habit():
|
||||
"percentage": habit.percentage,
|
||||
"streak": habit.streak,
|
||||
"heatmap": heatmap_values,
|
||||
"day": day
|
||||
"day": day,
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
|
||||
// Funktion zum Erstellen der Heatmap
|
||||
function createHeatmap(data, day) {
|
||||
function createHeatmap(data, day, color) {
|
||||
const heatmapContainer = document.getElementById('heatmap');
|
||||
|
||||
const days = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
|
||||
@ -21,17 +21,8 @@ function createHeatmap(data, day) {
|
||||
if (data[i * 7 + j]) {
|
||||
const dayElement = document.createElement('div');
|
||||
dayElement.classList.add('day');
|
||||
dayElement.style.backgroundColor = `rgba(0, 255, 0, ${opacity})`;
|
||||
if (day == i * 7 + j){
|
||||
dayElement.style.borderColor = `rgba(255, 0, 0)`;
|
||||
dayElement.style.borderWidth = "2px";
|
||||
}
|
||||
heatmapContainer.appendChild(dayElement);
|
||||
} else {
|
||||
const dayElement = document.createElement('div');
|
||||
dayElement.classList.add('day');
|
||||
dayElement.style.backgroundColor = `rgba(0, 255, 0, ${opacity})`;
|
||||
if (day == i * 7 + j){
|
||||
dayElement.style.backgroundColor = `rgba(${color}, ${opacity})`;
|
||||
if (day === i * 7 + j){
|
||||
dayElement.style.borderColor = `rgba(255, 0, 0)`;
|
||||
dayElement.style.borderWidth = "2px";
|
||||
}
|
||||
@ -92,7 +83,7 @@ function sendPostRequest(checkboxId) {
|
||||
|
||||
const heatmapValues = response.data.heatmap;
|
||||
deleteHeatmap()
|
||||
createHeatmap(heatmapValues, day)
|
||||
createHeatmap(heatmapValues, day, color)
|
||||
|
||||
}).catch(function (error) {
|
||||
// Handle the error if needed
|
||||
@ -142,7 +133,7 @@ function deleteList(listId) {
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', (event) => {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const elements = document.querySelectorAll('.task-list').values()
|
||||
|
||||
// loop through the elements
|
||||
@ -174,7 +165,6 @@ $(function () {
|
||||
$('[data-toggle="tooltip"]').tooltip()
|
||||
|
||||
})
|
||||
console.log(activityData, day)
|
||||
// Erstelle die Heatmap mit den simulierten Daten
|
||||
createHeatmap(activityData, day);
|
||||
createHeatmap(activityData, day, color);
|
||||
|
||||
|
||||
183
static/script/script-profile.js
Normal file
183
static/script/script-profile.js
Normal file
@ -0,0 +1,183 @@
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
// Get elements
|
||||
const profileImage = document.getElementById("profileImage");
|
||||
const profileImageOverlay = document.getElementById("profileImageOverlay");
|
||||
const profileImageInput = document.getElementById("profileImageInput");
|
||||
const uploadForm = document.getElementById("uploadForm");
|
||||
|
||||
const editButton = document.getElementById("editButton");
|
||||
const saveChangesButton = document.getElementById("saveChangesButton");
|
||||
const editForm = document.getElementById("editForm");
|
||||
const editModal = new bootstrap.Modal(document.getElementById('editModal'));
|
||||
|
||||
const submitPasswordChangeButton = document.getElementById("submitPasswordChange");
|
||||
|
||||
// Open file input when profile image is clicked
|
||||
profileImageOverlay.addEventListener("click", function() {
|
||||
profileImageInput.click();
|
||||
});
|
||||
|
||||
// Change profile image when a new file is selected
|
||||
profileImageInput.addEventListener("change", function() {
|
||||
const file = this.files[0];
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = function(e) {
|
||||
profileImage.src = e.target.result;
|
||||
};
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
// Submit the form
|
||||
uploadForm.submit();
|
||||
});
|
||||
|
||||
// Add event listener to edit button to open modal
|
||||
editButton.addEventListener("click", function() {
|
||||
editModal.show();
|
||||
document.getElementById("newName").value = "{{ name }}";
|
||||
document.getElementById("newEmail").value = "{{ email }}";
|
||||
document.getElementById("password").value = "";
|
||||
});
|
||||
|
||||
// Add event listener to save changes button to submit form
|
||||
saveChangesButton.addEventListener("click", function() {
|
||||
// Perform client-side validation before submitting the form
|
||||
validateForm()
|
||||
.then(isValid => {
|
||||
if (isValid) {
|
||||
console.log("Validated 2");
|
||||
editForm.submit();
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
// Handle validation error
|
||||
console.log("Account Form validation failed", error);
|
||||
});
|
||||
});
|
||||
|
||||
// Function to perform client-side validation
|
||||
async function validateForm() {
|
||||
let isValid = true;
|
||||
|
||||
isValid = validateInput("newName", "nameFeedback", "Bitte geben Sie einen neuen Namen ein.") && isValid;
|
||||
isValid = validateEmail("newEmail", "emailFeedback", "Bitte geben Sie eine gültige E-Mail-Adresse ein.") && isValid;
|
||||
|
||||
try {
|
||||
const passwordValid = await validatePassword("password", "passwordFeedback", "Bitte geben Sie Ihr Passwort ein.");
|
||||
isValid = passwordValid && isValid;
|
||||
} catch (error) {
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
return isValid;
|
||||
}
|
||||
|
||||
// Function to validate input fields
|
||||
function validateInput(inputId, feedbackId, errorMessage) {
|
||||
const input = document.getElementById(inputId);
|
||||
const feedback = document.getElementById(feedbackId);
|
||||
if (!input.value.trim()) {
|
||||
feedback.textContent = errorMessage;
|
||||
input.classList.add("is-invalid");
|
||||
return false;
|
||||
} else {
|
||||
feedback.textContent = "";
|
||||
input.classList.remove("is-invalid");
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// Function to validate email
|
||||
function validateEmail(emailId, feedbackId, errorMessage) {
|
||||
const input = document.getElementById(emailId);
|
||||
const feedback = document.getElementById(feedbackId);
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Regular expression for email validation
|
||||
if (!input.value.trim()) {
|
||||
feedback.textContent = "Bitte geben Sie eine neue E-Mail-Adresse ein.";
|
||||
input.classList.add("is-invalid");
|
||||
return false;
|
||||
} else if (!emailRegex.test(input.value.trim())) {
|
||||
feedback.textContent = errorMessage;
|
||||
input.classList.add("is-invalid");
|
||||
return false;
|
||||
} else {
|
||||
feedback.textContent = "";
|
||||
input.classList.remove("is-invalid");
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// Function to validate password
|
||||
function validatePassword(passwordId, passwordFeedbackId, errorMessage) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const passwordInput = document.getElementById(passwordId);
|
||||
const passwordFeedback = document.getElementById(passwordFeedbackId);
|
||||
const password = passwordInput.value.trim(); // Get the password entered by the user
|
||||
if (!passwordInput.value.trim()) {
|
||||
passwordFeedback.textContent = errorMessage;
|
||||
passwordInput.classList.add("is-invalid");
|
||||
reject(false);
|
||||
} else {
|
||||
axios.post('/check_password', { password: password })
|
||||
.then(response => {
|
||||
if (!response.data.valid) {
|
||||
passwordFeedback.textContent = "Falsches Passwort.";
|
||||
passwordInput.classList.add("is-invalid");
|
||||
passwordInput.value = "";
|
||||
reject(false);
|
||||
} else {
|
||||
passwordInput.classList.remove("is-invalid");
|
||||
resolve(true);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error checking password:', error);
|
||||
reject(false);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
submitPasswordChangeButton.addEventListener("click", function() {
|
||||
// Perform client-side validation before submitting the form
|
||||
validatePasswordChangeForm()
|
||||
.then(isValid => {
|
||||
if (isValid) {
|
||||
document.getElementById("editPasswordForm").submit();
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
// Handle validation error
|
||||
console.log("Password change form validation failed", error);
|
||||
});
|
||||
});
|
||||
|
||||
async function validatePasswordChangeForm() {
|
||||
let isValid = true;
|
||||
|
||||
try {
|
||||
const passwordValid = await validatePassword("oldPassword", "oldPasswordFeedback", "Bitte geben Sie Ihr altes Passwort ein.");
|
||||
isValid = passwordValid && isValid;
|
||||
} catch (error) {
|
||||
isValid = false;
|
||||
}
|
||||
isValid = validateInput("newPassword", "newPasswordFeedback", "Bitte geben Sie Ihr neues Passwort ein.") && isValid;
|
||||
isValid = validateInput("confirmPassword", "confirmPasswordFeedback", "Bitte bestätigen Sie Ihr neues Passwort.") && isValid;
|
||||
|
||||
// Check if new password matches confirm password
|
||||
const newPassword = document.getElementById("newPassword").value.trim();
|
||||
const confirmPassword = document.getElementById("confirmPassword").value.trim();
|
||||
if (newPassword !== confirmPassword) {
|
||||
document.getElementById("confirmPasswordFeedback").textContent = "Die Passwörter stimmen nicht überein.";
|
||||
document.getElementById("confirmPassword").classList.add("is-invalid");
|
||||
isValid = false;
|
||||
} else {
|
||||
document.getElementById("confirmPasswordFeedback").textContent = "";
|
||||
document.getElementById("confirmPassword").classList.remove("is-invalid");
|
||||
}
|
||||
|
||||
return isValid;
|
||||
}
|
||||
|
||||
});
|
||||
@ -10,4 +10,5 @@
|
||||
// Generates activity based on the Values given by the Backend
|
||||
const activityData = {{ heatmap_values }};
|
||||
const day = {{ day }};
|
||||
const color = "{{ color }}";
|
||||
</script>
|
||||
@ -100,191 +100,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
// Get elements
|
||||
const profileImage = document.getElementById("profileImage");
|
||||
const profileImageOverlay = document.getElementById("profileImageOverlay");
|
||||
const profileImageInput = document.getElementById("profileImageInput");
|
||||
const uploadForm = document.getElementById("uploadForm");
|
||||
|
||||
const editButton = document.getElementById("editButton");
|
||||
const saveChangesButton = document.getElementById("saveChangesButton");
|
||||
const editForm = document.getElementById("editForm");
|
||||
const editModal = new bootstrap.Modal(document.getElementById('editModal'));
|
||||
|
||||
const submitPasswordChangeButton = document.getElementById("submitPasswordChange");
|
||||
|
||||
// Open file input when profile image is clicked
|
||||
profileImageOverlay.addEventListener("click", function() {
|
||||
profileImageInput.click();
|
||||
});
|
||||
|
||||
// Change profile image when a new file is selected
|
||||
profileImageInput.addEventListener("change", function() {
|
||||
const file = this.files[0];
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = function(e) {
|
||||
profileImage.src = e.target.result;
|
||||
};
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
// Submit the form
|
||||
uploadForm.submit();
|
||||
});
|
||||
|
||||
// Add event listener to edit button to open modal
|
||||
editButton.addEventListener("click", function() {
|
||||
editModal.show();
|
||||
document.getElementById("newName").value = "{{ name }}";
|
||||
document.getElementById("newEmail").value = "{{ email }}";
|
||||
document.getElementById("password").value = "";
|
||||
});
|
||||
|
||||
// Add event listener to save changes button to submit form
|
||||
saveChangesButton.addEventListener("click", function() {
|
||||
// Perform client-side validation before submitting the form
|
||||
validateForm()
|
||||
.then(isValid => {
|
||||
if (isValid) {
|
||||
console.log("Validated 2");
|
||||
editForm.submit();
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
// Handle validation error
|
||||
console.log("Account Form validation failed", error);
|
||||
});
|
||||
});
|
||||
|
||||
// Function to perform client-side validation
|
||||
async function validateForm() {
|
||||
let isValid = true;
|
||||
|
||||
isValid = validateInput("newName", "nameFeedback", "Bitte geben Sie einen neuen Namen ein.") && isValid;
|
||||
isValid = validateEmail("newEmail", "emailFeedback", "Bitte geben Sie eine gültige E-Mail-Adresse ein.") && isValid;
|
||||
|
||||
try {
|
||||
const passwordValid = await validatePassword("password", "passwordFeedback", "Bitte geben Sie Ihr Passwort ein.");
|
||||
isValid = passwordValid && isValid;
|
||||
} catch (error) {
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
return isValid;
|
||||
}
|
||||
|
||||
// Function to validate input fields
|
||||
function validateInput(inputId, feedbackId, errorMessage) {
|
||||
const input = document.getElementById(inputId);
|
||||
const feedback = document.getElementById(feedbackId);
|
||||
if (!input.value.trim()) {
|
||||
feedback.textContent = errorMessage;
|
||||
input.classList.add("is-invalid");
|
||||
return false;
|
||||
} else {
|
||||
feedback.textContent = "";
|
||||
input.classList.remove("is-invalid");
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// Function to validate email
|
||||
function validateEmail(emailId, feedbackId, errorMessage) {
|
||||
const input = document.getElementById(emailId);
|
||||
const feedback = document.getElementById(feedbackId);
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Regular expression for email validation
|
||||
if (!input.value.trim()) {
|
||||
feedback.textContent = "Bitte geben Sie eine neue E-Mail-Adresse ein.";
|
||||
input.classList.add("is-invalid");
|
||||
return false;
|
||||
} else if (!emailRegex.test(input.value.trim())) {
|
||||
feedback.textContent = errorMessage;
|
||||
input.classList.add("is-invalid");
|
||||
return false;
|
||||
} else {
|
||||
feedback.textContent = "";
|
||||
input.classList.remove("is-invalid");
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// Function to validate password
|
||||
function validatePassword(passwordId, passwordFeedbackId, errorMessage) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const passwordInput = document.getElementById(passwordId);
|
||||
const passwordFeedback = document.getElementById(passwordFeedbackId);
|
||||
const password = passwordInput.value.trim(); // Get the password entered by the user
|
||||
if (!passwordInput.value.trim()) {
|
||||
passwordFeedback.textContent = errorMessage;
|
||||
passwordInput.classList.add("is-invalid");
|
||||
reject(false);
|
||||
} else {
|
||||
axios.post('/check_password', { password: password })
|
||||
.then(response => {
|
||||
if (!response.data.valid) {
|
||||
passwordFeedback.textContent = "Falsches Passwort.";
|
||||
passwordInput.classList.add("is-invalid");
|
||||
passwordInput.value = "";
|
||||
reject(false);
|
||||
} else {
|
||||
passwordInput.classList.remove("is-invalid");
|
||||
resolve(true);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error checking password:', error);
|
||||
reject(false);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
submitPasswordChangeButton.addEventListener("click", function() {
|
||||
// Perform client-side validation before submitting the form
|
||||
validatePasswordChangeForm()
|
||||
.then(isValid => {
|
||||
if (isValid) {
|
||||
document.getElementById("editPasswordForm").submit();
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
// Handle validation error
|
||||
console.log("Password change form validation failed", error);
|
||||
});
|
||||
});
|
||||
|
||||
async function validatePasswordChangeForm() {
|
||||
let isValid = true;
|
||||
|
||||
try {
|
||||
const passwordValid = await validatePassword("oldPassword", "oldPasswordFeedback", "Bitte geben Sie Ihr altes Passwort ein.");
|
||||
isValid = passwordValid && isValid;
|
||||
} catch (error) {
|
||||
isValid = false;
|
||||
}
|
||||
isValid = validateInput("newPassword", "newPasswordFeedback", "Bitte geben Sie Ihr neues Passwort ein.") && isValid;
|
||||
isValid = validateInput("confirmPassword", "confirmPasswordFeedback", "Bitte bestätigen Sie Ihr neues Passwort.") && isValid;
|
||||
|
||||
// Check if new password matches confirm password
|
||||
const newPassword = document.getElementById("newPassword").value.trim();
|
||||
const confirmPassword = document.getElementById("confirmPassword").value.trim();
|
||||
if (newPassword !== confirmPassword) {
|
||||
document.getElementById("confirmPasswordFeedback").textContent = "Die Passwörter stimmen nicht überein.";
|
||||
document.getElementById("confirmPassword").classList.add("is-invalid");
|
||||
isValid = false;
|
||||
} else {
|
||||
document.getElementById("confirmPasswordFeedback").textContent = "";
|
||||
document.getElementById("confirmPassword").classList.remove("is-invalid");
|
||||
}
|
||||
|
||||
return isValid;
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="../static/script/script-profile.js"></script>
|
||||
|
||||
{% endblock %}
|
||||
Loading…
x
Reference in New Issue
Block a user