Compare commits
No commits in common. "a64349e550d294d653d9cd4546740f20066672a1" and "f01f037330aaa93f889c6e53b93eaeddedb2f837" have entirely different histories.
a64349e550
...
f01f037330
@ -2,44 +2,31 @@
|
||||
|
||||
{% block content %}
|
||||
|
||||
<h1 class="mt-5">Habit erstellen📋</h1>
|
||||
|
||||
<form action="/habit" method="POST">
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="name" class="form-label">Name der Gewohnheit</label>
|
||||
<input type="text" class="form-control {% if errors.get('name') %} is-invalid {% endif %}" id="name" name="name">
|
||||
<div class="invalid-feedback">
|
||||
{{ errors.get('name', '') }}
|
||||
</div>
|
||||
<input type="text" class="form-control" id="name" name="name">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="note" class="form-label">Beschreibung</label>
|
||||
<input type="text" class="form-control {% if errors.get('note') %} is-invalid {% endif %}" id="note" name="note">
|
||||
<div class="invalid-feedback">
|
||||
{{ errors.get('note', '') }}
|
||||
</div>
|
||||
<input type="text" class="form-control" id="note" name="note">
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="mb-3 col-2">
|
||||
<label for="times" class="form-label">Häufigkeit</label>
|
||||
<input type="number" min="1" class="form-control {% if errors.get('times') %} is-invalid {% endif %}" id="times" name="times">
|
||||
<div class="invalid-feedback">
|
||||
{{ errors.get('times', '') }}
|
||||
</div>
|
||||
<input type="number" min="1" class="form-control" id="times" name="times">
|
||||
</div>
|
||||
<div class="mb-3 col-10">
|
||||
<label for="unit" class="form-label">Im Zeitraum</label>
|
||||
<select class="form-select {% if errors.get('unit') %} is-invalid {% endif %}" id="unit" name="unit">
|
||||
<label for="note" class="form-label">Im Zeitraum</label>
|
||||
<select class="form-select" id="unit" name="unit">
|
||||
<option selected value="Woche">Woche</option>
|
||||
<option value="Tag">Tag</option>
|
||||
<option value="Monat">Monat</option>
|
||||
<option value="Jahr">Jahr</option>
|
||||
|
||||
</select>
|
||||
<div class="invalid-feedback">
|
||||
{{ errors.get('unit', '') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -5,91 +5,51 @@
|
||||
<h3>{{ utc_dt }}</h3>
|
||||
|
||||
|
||||
<style>
|
||||
#heatmap {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 0fr); /* 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 class="row">
|
||||
|
||||
<div class="col-md-4 col-12" 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));
|
||||
}
|
||||
<div class="heatmap" id="heatmap"></div>
|
||||
|
||||
<script>
|
||||
// Simulierte Aktivitätsdaten (ersetze dies durch deine echten Daten)
|
||||
const activityData = [9, 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];
|
||||
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 < 7; i++) {
|
||||
const dayElement = document.createElement('div');
|
||||
dayElement.classList.add('day');
|
||||
//dayElement.textContent = mondayDate.toLocaleDateString('de-DE');
|
||||
heatmapContainer.appendChild(dayElement);
|
||||
|
||||
for (let j = 0; j < 4; j++) {
|
||||
const opacity = data[i * 7 + j] / Math.max(...data); // Berechne die Opazität basierend auf Aktivitätsanzahl
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const opacity = data[i] / 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="col-md-8 col-12">
|
||||
<div class="row">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<ul class="task-list row">
|
||||
<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" id="{{habit.id}}">
|
||||
<input type="checkbox" class="task-checkbox">
|
||||
</div>
|
||||
|
||||
<div class="col" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
|
||||
{{ habit.name }}
|
||||
{{ habit.name }} hhhbhghbhjndjksbeujsdkfheuwaihgkjfgfjnsidkgjnkdghujds
|
||||
</div>
|
||||
|
||||
</li>
|
||||
@ -99,8 +59,7 @@
|
||||
</div>
|
||||
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
@ -1,13 +1,37 @@
|
||||
{% extends 'layouts/main.html' %}
|
||||
2{% extends 'layouts/main.html' %}
|
||||
|
||||
{% block content %}
|
||||
<h1>{{ title }}</h1>
|
||||
<h3>{{ utc_dt }}</h3>
|
||||
|
||||
|
||||
<div class="heatmap" id="heatmap"></div>
|
||||
<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];
|
||||
|
||||
@ -15,25 +39,40 @@
|
||||
function createHeatmap(data) {
|
||||
const heatmapContainer = document.getElementById('heatmap');
|
||||
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const opacity = data[i] / Math.max(...data); // Berechne die Opazität basierend auf Aktivitätsanzahl
|
||||
// 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">
|
||||
|
||||
@ -8,9 +8,6 @@
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="/static/main.css">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
|
||||
|
||||
<!-- Axios Libary-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
</head>
|
||||
<body style="background-color: White">
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user