Heatmap tasks udn task abruf
This commit is contained in:
parent
70c9a3fbdf
commit
b925683aa4
15
app.py
15
app.py
@ -4,6 +4,7 @@ import hashlib
|
||||
from flask import Flask, render_template, redirect, url_for, request
|
||||
from flask_login import login_required, LoginManager, login_user, logout_user, current_user
|
||||
|
||||
from models.Habit import Habit
|
||||
from models.User import User
|
||||
from utils import anonymous_required
|
||||
|
||||
@ -31,7 +32,19 @@ def inject_user():
|
||||
@app.route('/')
|
||||
def index():
|
||||
# return 'Hello World'
|
||||
return render_template('index.html', title='Home', utc_dt=datetime.datetime.now().strftime("%d.%m.%Y %H:%M:%S"))
|
||||
"""
|
||||
if current_user.is_authenticated:
|
||||
habits = Habit.get_all(current_user.id)
|
||||
else:
|
||||
habits = []
|
||||
"""
|
||||
# habits = [("lesen", "eine Seite vor dem schlafen gehen"), ("sport", "3x Gym")]
|
||||
return render_template(
|
||||
'index.html',
|
||||
title='Home',
|
||||
utc_dt=datetime.datetime.now().strftime("%d.%m.%Y %H:%M:%S"),
|
||||
#habits=habits
|
||||
)
|
||||
|
||||
|
||||
@app.route('/test')
|
||||
|
||||
@ -22,3 +22,14 @@
|
||||
50%{background-position:100% 50%}
|
||||
100%{background-position:0 50%}
|
||||
}
|
||||
.day {
|
||||
width: calc(100% / 7);
|
||||
height: 20px;
|
||||
border: 1px solid #ccc;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.heatmap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@ -4,109 +4,51 @@
|
||||
<h1>Hello World!</h1>
|
||||
<h3>{{ utc_dt }}</h3>
|
||||
|
||||
<button id="test">
|
||||
Drück nicht!
|
||||
</button>
|
||||
|
||||
<div class="heatmap" id="heatmap"></div>
|
||||
|
||||
<script>
|
||||
document.getElementById('test').addEventListener('click', function () {
|
||||
alert('Du hast mich gedrückt!');
|
||||
});
|
||||
// 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');
|
||||
|
||||
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>
|
||||
|
||||
<table class="table" id="js-datatable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Prediction</th>
|
||||
<th>Integer</th>
|
||||
<th>Percentage</th>
|
||||
<th>Currency</th>
|
||||
<th>Formatted Float</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>N/A</td>
|
||||
<td>1110</td>
|
||||
<td>200%</td>
|
||||
<td>$1000</td>
|
||||
<td>1,000.5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="heatmap-stable">Yellow</td>
|
||||
<td>777</td>
|
||||
<td>1199%</td>
|
||||
<td>$101</td>
|
||||
<td>9,900</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="heatmap-positive">Green</td>
|
||||
<td>1000</td>
|
||||
<td>201%</td>
|
||||
<td>$201</td>
|
||||
<td>2,001.1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="heatmap-negative">Red</td>
|
||||
<td>999</td>
|
||||
<td>200%</td>
|
||||
<td>$2890</td>
|
||||
<td>2,000.2</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<script>
|
||||
function clean_formatted_data(str) {
|
||||
return parseFloat(str.replace(/([%,$,\,])+/g, ''));
|
||||
}
|
||||
|
||||
function col_to_array(tbl_col, target) {
|
||||
// Returns column `n` (zero indexed) in table id `target` as an array
|
||||
|
||||
var colArray = $('#' + target + ' td:nth-child(' + tbl_col + ')').map(function () {
|
||||
return clean_formatted_data($(this).text());
|
||||
}).get();
|
||||
|
||||
return colArray;
|
||||
}
|
||||
|
||||
//------ new schtuff ------------------------//
|
||||
|
||||
function get_pos_of_max(col_data) {
|
||||
return $.inArray(Math.max.apply(Math, col_data), col_data)
|
||||
}
|
||||
|
||||
function generate_opacities(col_data, max) {
|
||||
var opacity_array = [];
|
||||
var increment = max / (col_data.length);
|
||||
|
||||
for (i = col_data.length; i >= 1; i--) {
|
||||
opacity_array.push(i * increment / 100);
|
||||
}
|
||||
|
||||
return opacity_array;
|
||||
}
|
||||
|
||||
|
||||
function process_col_best_performing(tbl_col, target) {
|
||||
var col_data = col_to_array(tbl_col, target);
|
||||
var opacity_array = generate_opacities(col_data, 50);
|
||||
var row_count = col_data.length;
|
||||
|
||||
for (var i = 1; i <= row_count; i++) {
|
||||
$('#' + target + ' tr:nth-child(' + (get_pos_of_max(col_data) + 1) + ') td:nth-child(' + tbl_col + ')').css('background', 'rgba(0,0,255,' + opacity_array[0] + ')');
|
||||
col_data[get_pos_of_max(col_data)] = null;
|
||||
opacity_array.splice(0, 1);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
process_col_best_performing(2, 'js-datatable');
|
||||
process_col_best_performing(3, 'js-datatable');
|
||||
process_col_best_performing(4, 'js-datatable');
|
||||
process_col_best_performing(5, 'js-datatable');
|
||||
</script>
|
||||
<div class="row">
|
||||
<div class="col-md-5">eins</div>
|
||||
<div class="col-md-4">zwei
|
||||
<h2>Task List</h2>
|
||||
<ul class="task-list">
|
||||
<li class="task-item">
|
||||
<input type="checkbox" class="task-checkbox">
|
||||
<span class="task-text">Task 1</span>
|
||||
</li>
|
||||
<li class="task-item">
|
||||
<input type="checkbox" class="task-checkbox">
|
||||
<span class="task-text">Task 2</span>
|
||||
</li>
|
||||
<li class="task-item">
|
||||
<input type="checkbox" class="task-checkbox">
|
||||
<span class="task-text">Task 3</span>
|
||||
</li>
|
||||
<!-- Add more tasks as needed -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
@ -9,9 +9,8 @@
|
||||
<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">
|
||||
</head>
|
||||
<body style="background-color: #2B2B2B">
|
||||
<body style="background-color: White">
|
||||
|
||||
<div class="animated_background">
|
||||
<nav class="navbar navbar-expand-lg" style="background-color: #000000">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="{{ url_for('index') }}" style="color: ivory">HabitTracker</a>
|
||||
@ -49,6 +48,5 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user