Batman

app/templates/components/bike_form.html

@@ -0,0 +1,28 @@
+{# Shared bike form. Expects: action (url), csrf, old (dict), errors (dict), is_edit, bike #}
+<form method="post" action="{{ action }}" novalidate>
+  <input type="hidden" name="csrf" value="{{ csrf }}">
+  {% if errors %}
+    <div class="alert alert-error" role="alert">
+      {% for key, val in errors.items() %}
+        <div>{{ val }} {{ ' ' if not loop.last else '' }}</div>
+      {% endfor %}
+    </div>
+  {% endif %}
+
+  <label>
+    <span>Name</span>
+    <input type="text" name="name" value="{{ old.get('name', bike.name if bike else '') }}" required>
+  </label>
+
+  <label>
+    <span>Service interval (miles)</span>
+    <input type="number" name="service_interval_miles" min="1" step="1"
+           value="{{ old.get('service_interval_miles', bike.service_interval_miles if bike else '') }}">
+    <small class="muted">How often this bike needs a full service, in miles.</small>
+  </label>
+
+  <div class="form-actions">
+    <button type="submit" class="btn btn-primary">{{ 'Save changes' if is_edit else 'Add bike' }}</button>
+    <a href="javascript:history.back()" class="btn">Cancel</a>
+  </div>
+</form>

app/templates/components/service_card.html

@@ -0,0 +1,23 @@
+{# Service-status card. Expects: bike, summary (BikeSummary). #}
+<div class="card due-card {{ status_class(summary.due) }}">
+  <div class="due-top">
+    <div>
+      <h2 class="due-title">Service status</h2>
+      <p class="due-summary">{{ status_text(summary.due) }}</p>
+    </div>
+    <span class="badge {{ status_class(summary.due) }}">{{ status_text(summary.due) }}</span>
+  </div>
+  <dl class="due-meta">
+    {% if summary.due.current_mileage is not none %}
+      <dt>Odometer</dt><dd>{{ summary.due.current_mileage | money }} mi</dd>
+    {% endif %}
+    {% if summary.due.last_service %}
+      {% set ls = summary.due.last_service %}
+      <dt>Last service</dt><dd>{{ ls.event_date }} &middot; {{ ls.mileage | money }} mi</dd>
+    {% endif %}
+    <dt>Interval</dt>
+    <dd>{% if bike.service_interval_miles %}{{ bike.service_interval_miles | money }} mi{% else %}<span class="muted">not set</span>{% endif %}</dd>
+    <dt>Records</dt><dd>{{ summary.event_count }}</dd>
+    <dt>Cost to date</dt><dd>{{ summary.total_cost | money }}</dd>
+  </dl>
+</div>