Compare commits
No commits in common. "56af47bda313d85b04c07281f6a76e23de89a6c4" and "32cec2e7313e7d716d455d9b4d4f8c89f489ad99" have entirely different histories.
56af47bda3
...
32cec2e731
5
app.py
5
app.py
@ -565,14 +565,13 @@ def check_habit():
|
||||
habit.reset_statistics()
|
||||
|
||||
habit.load_statistics()
|
||||
heatmap_values = current_user.get_heatmap()
|
||||
|
||||
|
||||
return {
|
||||
"habitId": habit_id,
|
||||
"unchecked": not delete_tracking,
|
||||
"percentage": habit.percentage,
|
||||
"streak": habit.streak,
|
||||
"heatmap": heatmap_values
|
||||
"streak": habit.streak
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -74,4 +74,5 @@ class User(UserMixin):
|
||||
for day in range (0, 28):
|
||||
value = get_heatmap_value(self.id, day)
|
||||
heatmap.append(value)
|
||||
heatmap.reverse()
|
||||
return heatmap
|
||||
@ -1,173 +0,0 @@
|
||||
|
||||
// Funktion zum Erstellen der Heatmap
|
||||
function createHeatmap(data) {
|
||||
const heatmapContainer = document.getElementById('heatmap');
|
||||
|
||||
// Aktuelles Datum des Montags
|
||||
const days = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
|
||||
|
||||
for (let i = 0; i < 7; i++) {
|
||||
const dayElement = document.createElement('div');
|
||||
dayElement.classList.add('day');
|
||||
dayElement.textContent = days[i];
|
||||
heatmapContainer.appendChild(dayElement);
|
||||
// currentDate.setDate(currentDate.getDate() + 1);
|
||||
}
|
||||
|
||||
// Aktuelles Datum des Montags in der neuen linken Spalte
|
||||
for (let i = 0; i < 7; i++) {
|
||||
for (let j = 0; j < 4; j++) {
|
||||
// console.log(i * 7 + j, data[i * 7 + j], Math.max(...data));
|
||||
const opacity = data[i * 7 + j] / (Math.max(...data) <= 0 ? 1 : Math.max(...data)); // Berechne die Opazität basierend auf Aktivitätsanzahl
|
||||
|
||||
if (data[i * 7 + j]) {
|
||||
const dayElement = document.createElement('div');
|
||||
dayElement.classList.add('day');
|
||||
dayElement.style.backgroundColor = `rgba(0, 255, 0, ${opacity})`;
|
||||
heatmapContainer.appendChild(dayElement);
|
||||
} else {
|
||||
const dayElement = document.createElement('div');
|
||||
dayElement.classList.add('day');
|
||||
dayElement.style.backgroundColor = `rgba(0, 255, 0, ${opacity})`;
|
||||
heatmapContainer.appendChild(dayElement);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function deleteHeatmap() {
|
||||
const heatmapContainer = document.getElementById('heatmap');
|
||||
const dayElements = heatmapContainer.getElementsByClassName('day');
|
||||
|
||||
// Convert HTMLCollection to array and iterate to remove each element
|
||||
Array.from(dayElements).forEach(element => {
|
||||
element.remove();
|
||||
});
|
||||
}
|
||||
|
||||
function checkCompletionAndAnimate(habitId, percentage) {
|
||||
const progressBar = document.getElementById("progress-bar-" + habitId);
|
||||
const habitBlock = document.getElementById("habit-" + habitId);
|
||||
|
||||
if (percentage === 100) {
|
||||
progressBar.style.backgroundColor = "green";
|
||||
habitBlock.classList.add("animate-bounce");
|
||||
setTimeout(function () {
|
||||
habitBlock.classList.remove("animate-bounce");
|
||||
}, 2000);
|
||||
} else {
|
||||
progressBar.style.backgroundColor = "";
|
||||
habitBlock.classList.remove("animate-bounce");
|
||||
}
|
||||
}
|
||||
|
||||
function sendPostRequest(checkboxId) {
|
||||
// Get the habit id from the checkbox id attribute
|
||||
const habitId = checkboxId;
|
||||
|
||||
// Make a POST request to /check with the habit id
|
||||
axios.post('/check', {habitId: habitId}, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
}).then(function (response) {
|
||||
// Handle the success response if needed
|
||||
console.log(response.data);
|
||||
|
||||
// Set the percentage of the habit. percentage received as integer
|
||||
const percentage = response.data.percentage;
|
||||
const progressBar = document.getElementById("progress-bar-" + habitId);
|
||||
progressBar.style.width = percentage + "%";
|
||||
checkCompletionAndAnimate(habitId, percentage);
|
||||
|
||||
const streak = response.data.streak;
|
||||
const streakSymbol = document.getElementById("streak-" + habitId);
|
||||
streakSymbol.innerText = streak > 0 ? streak.toString() + " 🔥" : "";
|
||||
|
||||
const heatmapValues = response.data.heatmap;
|
||||
deleteHeatmap()
|
||||
createHeatmap(heatmapValues)
|
||||
|
||||
}).catch(function (error) {
|
||||
// Handle the error if needed
|
||||
console.error('Error:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function deleteHabit(habitId) {
|
||||
// Make a POST request to /delete with the habit id
|
||||
|
||||
axios.post('/delete', {habitId: habitId}, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
}).then(function (response) {
|
||||
// Handle the success response if needed
|
||||
console.log(response.data);
|
||||
|
||||
// Remove the habit from the DOM
|
||||
const habitElement = document.getElementById("habit-" + habitId);
|
||||
habitElement.remove();
|
||||
}).catch(function (error) {
|
||||
// Handle the error if needed
|
||||
console.error('Error:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function deleteList(listId) {
|
||||
// Make a POST request to /delete with the habit id
|
||||
|
||||
axios.post('/delete-list', {listId: listId}, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
}).then(function (response) {
|
||||
// Handle the success response if needed
|
||||
console.log(response.data);
|
||||
|
||||
// Remove the habit from the DOM
|
||||
var habitElement = document.getElementById("simple-tabpanel-" + listId);
|
||||
habitElement.remove();
|
||||
var habitElement = document.getElementById("tab-" + listId);
|
||||
habitElement.remove();
|
||||
}).catch(function (error) {
|
||||
// Handle the error if needed
|
||||
console.error('Error:', error);
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', (event) => {
|
||||
var elements = document.querySelectorAll('.task-list').values()
|
||||
|
||||
// loop through the elements
|
||||
for (let el of elements) {
|
||||
Sortable.create(el, {
|
||||
handle: '.drag-handle',
|
||||
animation: 150,
|
||||
onEnd: function (evt) {
|
||||
var habitId = el.children[evt.newIndex].id.split('-')[1];
|
||||
var oldIndex = evt.oldIndex;
|
||||
var newIndex = evt.newIndex;
|
||||
|
||||
axios.post('/reorder', {habitId: habitId, oldIndex: oldIndex, newIndex: newIndex}, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
}).then(function (response) {
|
||||
// Handle the success response if needed
|
||||
}).catch(function (error) {
|
||||
// Handle the error if needed
|
||||
console.error('Error:', error);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$(function () {
|
||||
$('[data-toggle="tooltip"]').tooltip()
|
||||
|
||||
// Erstelle die Heatmap mit den simulierten Daten
|
||||
createHeatmap(activityData);
|
||||
|
||||
})
|
||||
@ -7,6 +7,49 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Generates activity based on the Values given by the Backend
|
||||
|
||||
// Simulierte Aktivitätsdaten (ersetze dies durch deine echten Daten)
|
||||
const activityData = {{ heatmap_values }};
|
||||
|
||||
// Funktion zum Erstellen der Heatmap
|
||||
function createHeatmap(data) {
|
||||
const heatmapContainer = document.getElementById('heatmap');
|
||||
|
||||
// Aktuelles Datum des Montags
|
||||
const days = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
|
||||
|
||||
for (let i = 0; i < 7; i++) {
|
||||
const dayElement = document.createElement('div');
|
||||
dayElement.classList.add('day');
|
||||
dayElement.textContent = days[i];
|
||||
heatmapContainer.appendChild(dayElement);
|
||||
// currentDate.setDate(currentDate.getDate() + 1);
|
||||
}
|
||||
|
||||
// Aktuelles Datum des Montags in der neuen linken Spalte
|
||||
for (let i = 0; i < 7; i++) {
|
||||
for (let j = 0; j < 4; j++) {
|
||||
// console.log(i * 7 + j, data[i * 7 + j], Math.max(...data));
|
||||
const opacity = data[i * 7 + j] / (Math.max(...data) <= 0 ? 1 : Math.max(...data)); // Berechne die Opazität basierend auf Aktivitätsanzahl
|
||||
|
||||
if (data[i * 7 + j]) {
|
||||
const dayElement = document.createElement('div');
|
||||
dayElement.classList.add('day');
|
||||
dayElement.style.backgroundColor = `rgba(0, 255, 0, ${opacity})`;
|
||||
heatmapContainer.appendChild(dayElement);
|
||||
} else {
|
||||
const dayElement = document.createElement('div');
|
||||
dayElement.classList.add('day');
|
||||
dayElement.style.backgroundColor = `rgba(0, 255, 0, ${opacity})`;
|
||||
heatmapContainer.appendChild(dayElement);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var left = 7 - (new Date()).getDay();
|
||||
}
|
||||
|
||||
// Erstelle die Heatmap mit den simulierten Daten
|
||||
createHeatmap(activityData);
|
||||
|
||||
</script>
|
||||
125
templates/components/scripts.html
Normal file
125
templates/components/scripts.html
Normal file
@ -0,0 +1,125 @@
|
||||
<script>
|
||||
function checkCompletionAndAnimate(habitId, percentage) {
|
||||
var progressBar = document.getElementById("progress-bar-" + habitId);
|
||||
var habitBlock = document.getElementById("habit-" + habitId);
|
||||
|
||||
if (percentage === 100) {
|
||||
progressBar.style.backgroundColor = "green";
|
||||
habitBlock.classList.add("animate-bounce");
|
||||
setTimeout(function () {
|
||||
habitBlock.classList.remove("animate-bounce");
|
||||
}, 2000);
|
||||
} else {
|
||||
progressBar.style.backgroundColor = "";
|
||||
habitBlock.classList.remove("animate-bounce");
|
||||
}
|
||||
}
|
||||
|
||||
function sendPostRequest(checkboxId) {
|
||||
// Get the checkbox element using the provided ID
|
||||
var checkbox = document.getElementById(checkboxId);
|
||||
// console.log(checkbox);
|
||||
|
||||
// Get the habit id from the checkbox id attribute
|
||||
var habitId = checkboxId;
|
||||
|
||||
// Make a POST request to /check with the habit id
|
||||
axios.post('/check', {habitId: habitId}, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
}).then(function (response) {
|
||||
// Handle the success response if needed
|
||||
console.log(response.data);
|
||||
|
||||
|
||||
// Set the percentage of the habit. percentage received as integer
|
||||
const percentage = response.data.percentage;
|
||||
const progressBar = document.getElementById("progress-bar-" + habitId);
|
||||
progressBar.style.width = percentage + "%";
|
||||
checkCompletionAndAnimate(habitId, percentage);
|
||||
|
||||
const streak = response.data.streak;
|
||||
const streakSymbol = document.getElementById("streak-" + habitId);
|
||||
streakSymbol.innerText = streak > 0 ? streak.toString() + " 🔥" : "";
|
||||
}).catch(function (error) {
|
||||
// Handle the error if needed
|
||||
console.error('Error:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function deleteHabit(habitId) {
|
||||
// Make a POST request to /delete with the habit id
|
||||
|
||||
axios.post('/delete', {habitId: habitId}, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
}).then(function (response) {
|
||||
// Handle the success response if needed
|
||||
console.log(response.data);
|
||||
|
||||
// Remove the habit from the DOM
|
||||
var habitElement = document.getElementById("habit-" + habitId);
|
||||
habitElement.remove();
|
||||
}).catch(function (error) {
|
||||
// Handle the error if needed
|
||||
console.error('Error:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function deleteList(listId) {
|
||||
// Make a POST request to /delete with the habit id
|
||||
|
||||
axios.post('/delete-list', {listId: listId}, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
}).then(function (response) {
|
||||
// Handle the success response if needed
|
||||
console.log(response.data);
|
||||
|
||||
// Remove the habit from the DOM
|
||||
var habitElement = document.getElementById("simple-tabpanel-" + listId);
|
||||
habitElement.remove();
|
||||
var habitElement = document.getElementById("tab-" + listId);
|
||||
habitElement.remove();
|
||||
}).catch(function (error) {
|
||||
// Handle the error if needed
|
||||
console.error('Error:', error);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', (event) => {
|
||||
var elements = document.querySelectorAll('.task-list').values()
|
||||
|
||||
// loop through the elements
|
||||
for (let el of elements) {
|
||||
Sortable.create(el, {
|
||||
handle: '.drag-handle',
|
||||
animation: 150,
|
||||
onEnd: function (evt) {
|
||||
var habitId = el.children[evt.newIndex].id.split('-')[1];
|
||||
var oldIndex = evt.oldIndex;
|
||||
var newIndex = evt.newIndex;
|
||||
|
||||
axios.post('/reorder', {habitId: habitId, oldIndex: oldIndex, newIndex: newIndex}, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
}).then(function (response) {
|
||||
// Handle the success response if needed
|
||||
}).catch(function (error) {
|
||||
// Handle the error if needed
|
||||
console.error('Error:', error);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$(function () {
|
||||
$('[data-toggle="tooltip"]').tooltip()
|
||||
})
|
||||
</script>
|
||||
@ -91,6 +91,7 @@
|
||||
{% include 'components/heatmap.html' %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if current_user.is_authenticated %}
|
||||
{% include 'components/habit_lists.html' %}
|
||||
{% endif %}
|
||||
@ -103,8 +104,13 @@
|
||||
{% include 'components/delete_list.html' %}
|
||||
{% endif %}
|
||||
|
||||
{% if not current_user.is_authenticated %}
|
||||
<script type="module" src="https://unpkg.com/@splinetool/viewer@1.0.55/build/spline-viewer.js"></script>
|
||||
<spline-viewer loading-anim-type="spinner-small-dark" url="https://prod.spline.design/4mCpd7DzpXgN2X9q/scene.splinecode"></spline-viewer>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../static/script/script-index.js"></script>
|
||||
{% include 'components/scripts.html' %}
|
||||
|
||||
{% endblock %}
|
||||
Loading…
x
Reference in New Issue
Block a user