85 lines
2.8 KiB
HTML
85 lines
2.8 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Shared Day {{ page.date_text }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<a href="/u/{{ page.username }}" class="inline-flex items-center gap-2 text-sm font-medium text-slate-600 transition hover:text-slate-900">
|
|
<span>←</span>
|
|
<span>Back to @{{ page.username }}</span>
|
|
</a>
|
|
|
|
<section class="mt-4 rounded-3xl border border-slate-200/80 bg-white/90 p-6 shadow-sm">
|
|
<h1 class="text-3xl font-bold tracking-tight">@{{ page.username }} - {{ page.date_text }}</h1>
|
|
<p class="mt-3 inline-flex items-center rounded-full bg-emerald-100 px-3 py-1 text-sm font-semibold text-emerald-900">
|
|
Daily total: {{ page.daily_total }} cal
|
|
</p>
|
|
{% if page.show_weight %}
|
|
<p class="mt-2 text-sm text-slate-700">Weight: {{ page.weight_label }}</p>
|
|
{% endif %}
|
|
</section>
|
|
|
|
<section class="mt-4 rounded-3xl border border-slate-200/80 bg-white/90 p-6 shadow-sm">
|
|
<h2 class="text-xl font-bold tracking-tight">Food Entries</h2>
|
|
<div class="mt-4 overflow-hidden rounded-2xl border border-slate-200">
|
|
<table class="w-full border-collapse">
|
|
<thead class="bg-slate-50 text-left text-xs uppercase tracking-wide text-slate-500">
|
|
<tr><th class="px-5 py-3">Food</th><th class="px-5 py-3">Calories</th></tr>
|
|
</thead>
|
|
<tbody class="bg-white">
|
|
{% if page.entries.is_empty() %}
|
|
<tr><td colspan="2" class="px-5 py-8 text-center text-slate-500">No entries shared for this day.</td></tr>
|
|
{% else %}
|
|
{% for entry in page.entries %}
|
|
<tr class="border-t border-slate-200">
|
|
<td class="px-5 py-3 text-sm text-slate-800">{{ entry.name }}</td>
|
|
<td class="px-5 py-3 text-sm font-semibold text-slate-900">{{ entry.calories }} cal</td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
{% if !page.entries.is_empty() %}
|
|
<section class="mt-4 rounded-3xl border border-slate-200/80 bg-white/90 p-6 shadow-sm">
|
|
<h2 class="text-xl font-bold tracking-tight text-slate-900">Calories by Entry</h2>
|
|
<div class="mt-4 h-80">
|
|
<canvas id="public-day-chart"></canvas>
|
|
</div>
|
|
</section>
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
{% if !page.entries.is_empty() %}
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
const labels = {{ page.chart_labels_js|safe }};
|
|
const values = {{ page.chart_values_js|safe }};
|
|
new Chart(
|
|
document.getElementById("public-day-chart"),
|
|
{
|
|
type: "bar",
|
|
data: {
|
|
labels,
|
|
datasets: [
|
|
{
|
|
label: "Calories",
|
|
data: values,
|
|
backgroundColor: "rgba(15, 118, 110, 0.25)",
|
|
borderColor: "#0f766e",
|
|
borderWidth: 1
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
scales: { y: { beginAtZero: true } }
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
{% endif %}
|
|
{% endblock %}
|