Compare commits
No commits in common. "48bae38872537d8bfd2366837cf83d823ebffce1" and "c6dc48dd52c2b54e5220b4702f128641ef78a874" have entirely different histories.
48bae38872
...
c6dc48dd52
8
app.py
8
app.py
@ -41,6 +41,7 @@ def index():
|
|||||||
# habits = [("lesen", "eine Seite vor dem schlafen gehen"), ("sport", "3x Gym")]
|
# habits = [("lesen", "eine Seite vor dem schlafen gehen"), ("sport", "3x Gym")]
|
||||||
return render_template(
|
return render_template(
|
||||||
'index.html',
|
'index.html',
|
||||||
|
title=f"Hallo {current_user.name}",
|
||||||
utc_dt=datetime.datetime.now().strftime("%d.%m.%Y %H:%M %A"),
|
utc_dt=datetime.datetime.now().strftime("%d.%m.%Y %H:%M %A"),
|
||||||
habits=habits,
|
habits=habits,
|
||||||
errors={},
|
errors={},
|
||||||
@ -221,13 +222,6 @@ def habit_create():
|
|||||||
errors=errors,
|
errors=errors,
|
||||||
)
|
)
|
||||||
|
|
||||||
@app.route('/test1')
|
|
||||||
def test1():
|
|
||||||
return render_template('layouts/indextest1.html', errors={})
|
|
||||||
|
|
||||||
@app.route('/test2')
|
|
||||||
def test2():
|
|
||||||
return render_template('layouts/indextest2.html', errors={})
|
|
||||||
|
|
||||||
# Run the application
|
# Run the application
|
||||||
if __name__ == '__main__':
|
if __name__ == '__main__':
|
||||||
|
|||||||
@ -1,167 +0,0 @@
|
|||||||
{% extends 'layouts/main.html' %}
|
|
||||||
|
|
||||||
{% block content %}
|
|
||||||
<h1>{{ title }}</h1>
|
|
||||||
<h3>{{ utc_dt }}</h3>
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
th, td {
|
|
||||||
border: 1px solid #dddddd;
|
|
||||||
text-align: center;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
background-color: #f2f2f2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.current-week {
|
|
||||||
/* Change the color for the current week */
|
|
||||||
background-color: rgba(255, 204, 0, 1); /* Full opacity */
|
|
||||||
}
|
|
||||||
|
|
||||||
.past-week {
|
|
||||||
/* Change the color for past weeks */
|
|
||||||
background-color: rgba(224, 224, 224, 1); /* Full opacity */
|
|
||||||
}
|
|
||||||
|
|
||||||
.future-week {
|
|
||||||
/* Change the color for future weeks */
|
|
||||||
background-color: rgba(192, 224, 192, 1); /* Full opacity */
|
|
||||||
}
|
|
||||||
|
|
||||||
.current-day {
|
|
||||||
/* Highlight the current day */
|
|
||||||
border: 2px solid #ff0000;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<table id="heatmap">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th></th> <!-- Empty cell for spacing -->
|
|
||||||
<th class="past-week">-2</th>
|
|
||||||
<th class="past-week">-1</th>
|
|
||||||
<th class="current-week">0</th>
|
|
||||||
<th class="future-week">+1</th>
|
|
||||||
<th class="future-week">+2</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td >Montag</td>
|
|
||||||
<td class="past-week" data-tasks="5">15</td>
|
|
||||||
<td class="past-week" data-tasks="8">20</td>
|
|
||||||
<td class="current-week" data-tasks="12">25</td>
|
|
||||||
<td class="future-week" data-tasks="7">30</td>
|
|
||||||
<td class="future-week" data-tasks="10">35</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td class="current-day">Dienstag</td>
|
|
||||||
<td class="past-week" data-tasks="5">15</td>
|
|
||||||
<td class="past-week" data-tasks="8">20</td>
|
|
||||||
<td class="current-week" data-tasks="12">25</td>
|
|
||||||
<td class="future-week" data-tasks="7">30</td>
|
|
||||||
<td class="future-week" data-tasks="10">35</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td >Mittwoch</td>
|
|
||||||
<td class="past-week" data-tasks="5">15</td>
|
|
||||||
<td class="past-week" data-tasks="8">20</td>
|
|
||||||
<td class="current-week" data-tasks="12">25</td>
|
|
||||||
<td class="future-week" data-tasks="7">30</td>
|
|
||||||
<td class="future-week" data-tasks="10">35</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td >Donnerstag</td>
|
|
||||||
<td class="past-week" data-tasks="5">15</td>
|
|
||||||
<td class="past-week" data-tasks="8">20</td>
|
|
||||||
<td class="current-week" data-tasks="12">25</td>
|
|
||||||
<td class="future-week" data-tasks="7">30</td>
|
|
||||||
<td class="future-week" data-tasks="10">35</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td >Freitag</td>
|
|
||||||
<td class="past-week" data-tasks="5">15</td>
|
|
||||||
<td class="past-week" data-tasks="8">20</td>
|
|
||||||
<td class="current-week" data-tasks="12">25</td>
|
|
||||||
<td class="future-week" data-tasks="7">30</td>
|
|
||||||
<td class="future-week" data-tasks="10">35</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td >Samstag</td>
|
|
||||||
<td class="past-week" data-tasks="5">15</td>
|
|
||||||
<td class="past-week" data-tasks="8">20</td>
|
|
||||||
<td class="current-week" data-tasks="12">25</td>
|
|
||||||
<td class="future-week" data-tasks="7">30</td>
|
|
||||||
<td class="future-week" data-tasks="10">35</td>
|
|
||||||
</tr> <tr>
|
|
||||||
<td >Sonntag</td>
|
|
||||||
<td class="past-week" data-tasks="5">15</td>
|
|
||||||
<td class="past-week" data-tasks="8">20</td>
|
|
||||||
<td class="current-week" data-tasks="12">25</td>
|
|
||||||
<td class="future-week" data-tasks="7">30</td>
|
|
||||||
<td class="future-week" data-tasks="10">35</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// Adjust background color based on the number of tasks
|
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
|
||||||
var cells = document.querySelectorAll('#heatmap tbody td');
|
|
||||||
|
|
||||||
cells.forEach(function (cell) {
|
|
||||||
var tasks = parseInt(cell.getAttribute('data-tasks')) || 0;
|
|
||||||
var opacity = tasks / 20; // Adjust the denominator based on your preference
|
|
||||||
|
|
||||||
// Get the RGB values from the background color
|
|
||||||
var rgb = cell.style.backgroundColor.match(/\d+/g);
|
|
||||||
|
|
||||||
// Calculate the green value based on the number of tasks
|
|
||||||
var greenValue = Math.round(opacity * 255);
|
|
||||||
|
|
||||||
// Set the new background color with adjusted green value
|
|
||||||
cell.style.backgroundColor = 'rgba(0,' + greenValue + ',0,' + opacity + ')';
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</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 %}
|
|
||||||
@ -1,104 +0,0 @@
|
|||||||
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 %}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user