Basic progress graphs work

3 files changed, 30 insertions, 6 deletions

diff --git a/app/routes/api.py b/app/routes/api.py
index 77ebdcf..77c8650 100644
--- a/app/routes/api.py
+++ b/app/routes/api.py
@@ -34,7 +34,7 @@ def api_progress_exercise(exercise_id=None):
         return redirect(url_for("home"))
 
     results = (
-        db.session.query(WorkoutRecord.id, db.func.max(SetRecord.lbs))
+        db.session.query(WorkoutRecord.finished, db.func.max(SetRecord.lbs))
         # .join(SetRecord.workout_record_id == WorkoutRecord.id)
         .filter(
             SetRecord.exercise_id == exercise_id,
@@ -43,7 +43,10 @@ def api_progress_exercise(exercise_id=None):
         ).group_by(WorkoutRecord.id)
     ).all()
 
-    print(results)
+    # prepare values TODO include date
+    # jsonify can't handle objects so we have to do this hack
+    values = [(row[0].strftime("%m/%d/%y"), row[1]) for row in results]
 
-    # TODO doesnt work
-    return jsonify(results)
+    response = jsonify(values)
+    response.headers.add("Access-Control-Allow-Origin", "*")  # for AJAX
+    return response
diff --git a/app/static/js/chart.js b/app/static/js/chart.js
index 06edc4d..779d8d3 100644
--- a/app/static/js/chart.js
+++ b/app/static/js/chart.js
@@ -1,4 +1,10 @@
-function exercise_chart(elem_id, exercise_id) {
+async function request(url) {
+	const response = await fetch(url);
+
+	return response.json();
+}
+
+async function exercise_chart(elem_id, exercise_id, exercise_name) {
 	// Create initial chart
 	let chart = new Chart(document.getElementById(elem_id), {
 		type: 'line',
@@ -8,6 +14,12 @@ function exercise_chart(elem_id, exercise_id) {
 			pointStyle: 'circle',
 			pointRadius: 5,
 			pointHoverRadius: 10,
+			datasets: [{
+				label: exercise_name,
+				data: [],
+				fill: false,
+				tension: 0.1
+			}]
 		},
 		option: {
 			scales: {
@@ -19,4 +31,13 @@ function exercise_chart(elem_id, exercise_id) {
 	});
 
 	// Load chart data for exercise
+	const json = await request(`/api/progress/exercise/${exercise_id}`);
+
+	json.forEach(row => {
+		chart.data.datasets[0].data.push(row[1]);
+		chart.data.labels.push(row[0]);
+	});
+
+
+	chart.update();
 }
diff --git a/app/templates/progress/exercise.html b/app/templates/progress/exercise.html
index e66618f..7167cda 100644
--- a/app/templates/progress/exercise.html
+++ b/app/templates/progress/exercise.html
@@ -14,7 +14,7 @@
 
 <script type="text/javascript" src="/static/js/chart.js"></script>
 <script>
-	exercise_chart('exercise_chart', {{ exercise.id }});
+	exercise_chart('exercise_chart', {{ exercise.id }}, '{{ exercise.name }}');
 </script>
 
 {% endblock %}