osiris/templates/tracker/today.html

{% extends "admin/base_site.html" %}

{% block title %}Osiris — {{ day.date|date:"D d M" }}{% endblock %}

{% block extrastyle %}
{{ block.super }}
<style>
  /* Mobile-first: big touch targets, single column, no horizontal scrolling. */
  #content { padding: 12px; max-width: 640px; margin: 0 auto; }
  .osiris-card {
    background: var(--body-bg);
    border: 1px solid var(--hairline-color);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
  }
  .osiris-daynav {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 16px;
  }
  .osiris-daynav a, .osiris-daynav strong { font-size: 1rem; }
  .osiris-daynav .today-label { text-align: center; flex: 1; }

  .osiris-dose {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--hairline-color);
    cursor: pointer;
  }
  .osiris-dose:last-of-type { border-bottom: none; }
  .osiris-dose input[type="checkbox"] {
    width: 28px; height: 28px; flex: none; margin: 0;
  }
  .osiris-dose .dose-name { font-weight: 600; }
  .osiris-dose .dose-detail { color: var(--body-quiet-color); font-size: 0.85rem; }
  .osiris-dose.is-taken .dose-name { color: var(--object-tools-bg, #417690); }

  .osiris-timeofday {
    text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.06em;
    color: var(--body-quiet-color); margin: 16px 0 4px;
  }

  .osiris-pulse input[type="number"] {
    font-size: 1.6rem; width: 100%; padding: 12px;
    border-radius: 8px; border: 1px solid var(--border-color);
  }
  .osiris-save {
    width: 100%; padding: 16px; font-size: 1.05rem; font-weight: 600;
    border: none; border-radius: 10px; cursor: pointer;
    background: var(--button-bg); color: var(--button-fg);
  }
  .osiris-stats { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
  .osiris-stats div { font-size: 0.85rem; color: var(--body-quiet-color); }
  .osiris-stats strong { display: block; font-size: 1.15rem; color: var(--body-fg); }
  .osiris-chart { width: 100%; height: auto; overflow: visible; }
  .osiris-empty { color: var(--body-quiet-color); font-style: italic; }
</style>
{% endblock %}

{% block breadcrumbs %}{% endblock %}

{% block content %}
<div class="osiris-daynav">
  <a href="?date={{ previous_date|date:'Y-m-d' }}">&larr; Prev</a>
  <span class="today-label">
    <strong>{{ day.date|date:"l j F" }}</strong>
    {% if is_today %}<br><small>Today</small>{% endif %}
  </span>
  {% if is_today %}
    <span></span>
  {% else %}
    <a href="?date={{ next_date|date:'Y-m-d' }}">Next &rarr;</a>
  {% endif %}
</div>

<form method="post">
  {% csrf_token %}
  <input type="hidden" name="date" value="{{ day.date|date:'Y-m-d' }}">

  <div class="osiris-card">
    <h2 style="margin-top:0">Medication</h2>
    {% regroup day.doses by time_of_day_label as dose_groups %}
    {% for group in dose_groups %}
      <div class="osiris-timeofday">{{ group.grouper }}</div>
      {% for dose in group.list %}
        <label class="osiris-dose {% if dose.taken %}is-taken{% endif %}">
          <input type="checkbox" name="dose-{{ dose.id }}" {% if dose.taken %}checked{% endif %}>
          <span>
            <span class="dose-name">{{ dose.medication_name }}</span><br>
            <span class="dose-detail">{{ dose.amount }}{% if dose.taken is None %} — not recorded{% endif %}</span>
          </span>
        </label>
      {% endfor %}
    {% empty %}
      <p class="osiris-empty">
        No active medication yet.
        <a href="{% url 'admin:tracker_medication_add' %}">Add one</a>.
      </p>
    {% endfor %}
  </div>

  <div class="osiris-card osiris-pulse">
    <h2 style="margin-top:0">Pulse</h2>
    <label for="bpm" class="dose-detail">Beats per minute (leave empty to clear)</label>
    <input type="number" id="bpm" name="bpm" inputmode="numeric" min="20" max="400"
           placeholder="e.g. 180" value="{{ day.pulse.bpm|default_if_none:'' }}">
  </div>

  <button type="submit" class="osiris-save">Save {{ day.date|date:"D j M" }}</button>
</form>

<div class="osiris-card" style="margin-top:16px">
  <h2 style="margin-top:0">Pulse — last 90 days</h2>
  {% if chart %}
    <svg class="osiris-chart" viewBox="0 0 {{ chart.width }} {{ chart.height }}" role="img"
         aria-label="Pulse from {{ chart.first_date }} to {{ chart.last_date }}">
      <line x1="24" y1="24" x2="{{ chart.width|add:'-24' }}" y2="24"
            stroke="currentColor" stroke-width="0.5" opacity="0.2"/>
      <line x1="24" y1="{{ chart.height|add:'-24' }}" x2="{{ chart.width|add:'-24' }}"
            y2="{{ chart.height|add:'-24' }}" stroke="currentColor" stroke-width="0.5" opacity="0.2"/>
      <polyline points="{{ chart.polyline }}" fill="none" stroke="#79aec8" stroke-width="2"
                stroke-linejoin="round" stroke-linecap="round" vector-effect="non-scaling-stroke"/>
      {% for point in chart.points %}
        <circle cx="{{ point.x }}" cy="{{ point.y }}" r="2" fill="#417690">
          <title>{{ point.reading.date }} — {{ point.reading.bpm }} bpm</title>
        </circle>
      {% endfor %}
      <text x="2" y="27" font-size="8" fill="currentColor" opacity="0.6">{{ chart.high }}</text>
      <text x="2" y="{{ chart.height|add:'-21' }}" font-size="8" fill="currentColor" opacity="0.6">{{ chart.low }}</text>
    </svg>
    <div class="osiris-stats">
      <div>Average<strong>{{ chart.average }} bpm</strong></div>
      <div>Range<strong>{{ chart.low }}–{{ chart.high }}</strong></div>
      <div>Readings<strong>{{ reading_count }}</strong></div>
      <div>
        Trend
        <strong>
          {% if chart.trend > 0 %}&uarr; +{{ chart.trend }}{% elif chart.trend < 0 %}&darr; {{ chart.trend }}{% else %}&rarr; steady{% endif %}
          {% if chart.trend %}<span style="font-size:0.75rem">bpm/day</span>{% endif %}
        </strong>
      </div>
    </div>
  {% else %}
    <p class="osiris-empty">Record the pulse on at least two days to see the graph.</p>
  {% endif %}
</div>

<p style="text-align:center"><a href="{% url 'admin:index' %}">Manage medication &amp; history &rarr;</a></p>
{% endblock %}