104 lines
3.2 KiB
HTML
104 lines
3.2 KiB
HTML
2{% extends 'layouts/main.html' %}
|
|
|
|
{% block content %}
|
|
<h1>{{ title }}</h1>
|
|
<h3>{{ utc_dt }}</h3>
|
|
|
|
|
|
<style>
|
|
#heatmap {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr); /* 7 Tage in einer Woche */
|
|
gap: 5px;
|
|
}
|
|
|
|
.day {
|
|
width: 50px; /* Ändere die Breite nach Bedarf */
|
|
height: 50px; /* Ändere die Höhe nach Bedarf */
|
|
border: 1px solid #ccc;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style>
|
|
|
|
<div id="heatmap"></div>
|
|
|
|
<script>
|
|
// Funktion zur Rückgabe des Montagsdatums
|
|
function getMonday(date) {
|
|
const day = date.getDay();
|
|
const diff = date.getDate() - day + (day === 0 ? -6 : 1); // Anpassung für Sonntag
|
|
return new Date(date.setDate(diff));
|
|
}
|
|
|
|
// Simulierte Aktivitätsdaten (ersetze dies durch deine echten Daten)
|
|
const activityData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 5, 4, 3, 2, 1, 9, 5, 36, 75, 8, 9, 1, 0, 23, 0, 0, 0, 64, 0, 0, 64, 0, 0, 19, 84];
|
|
|
|
// Funktion zum Erstellen der Heatmap
|
|
function createHeatmap(data) {
|
|
const heatmapContainer = document.getElementById('heatmap');
|
|
|
|
// Aktuelles Datum des Montags
|
|
const currentDate = new Date();
|
|
const mondayDate = getMonday(currentDate);
|
|
|
|
for (let i = 0; i < 7; i++) {
|
|
const dayElement = document.createElement('div');
|
|
dayElement.classList.add('day');
|
|
dayElement.textContent = currentDate.toLocaleDateString('de-DE', { weekday: 'short' });
|
|
heatmapContainer.appendChild(dayElement);
|
|
currentDate.setDate(currentDate.getDate() + 1);
|
|
}
|
|
|
|
// Aktuelles Datum des Montags in der neuen linken Spalte
|
|
for (let i = 0; i < 5; i++) {
|
|
const dayElement = document.createElement('div');
|
|
dayElement.classList.add('day');
|
|
dayElement.textContent = mondayDate.toLocaleDateString('de-DE');
|
|
heatmapContainer.appendChild(dayElement);
|
|
|
|
for (let j = 0; j < 7; j++) {
|
|
const opacity = data[i * 7 + j] / Math.max(...data); // Berechne die Opazität basierend auf Aktivitätsanzahl
|
|
const dayElement = document.createElement('div');
|
|
dayElement.classList.add('day');
|
|
dayElement.style.backgroundColor = `rgba(0, 255, 0, ${opacity})`;
|
|
heatmapContainer.appendChild(dayElement);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Erstelle die Heatmap mit den simulierten Daten
|
|
createHeatmap(activityData);
|
|
</script>
|
|
|
|
|
|
<div class="row">
|
|
<h2 class="col-10">Task List</h2>
|
|
<a class="col-2 btn btn-primary" role="button" href="/habit">
|
|
Task erstellen
|
|
</a>
|
|
</div>
|
|
|
|
<ul class="task-list row">
|
|
{% for habit in habits %}
|
|
<li class="row col-md-4">
|
|
<div class="col-auto">
|
|
<input type="checkbox" class="task-checkbox">
|
|
</div>
|
|
|
|
<div class="col" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
|
|
{{ habit.name }} hhhbhghbhjndjksbeujsdkfheuwaihgkjfgfjnsidkgjnkdghujds
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<div class="col-md-8" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
|
|
{{ habit.note }}
|
|
</div>
|
|
|
|
{% endfor %}
|
|
</ul>
|
|
|
|
|
|
{% endblock %} |