70 lines
2.3 KiB
HTML
70 lines
2.3 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ bike.name }} - bike-admin{% endblock %}
|
|
{% block content %}
|
|
<div class="page-head">
|
|
<h1>{{ bike.name }}</h1>
|
|
<a href="/bikes/{{ bike.id }}/edit" class="btn">Edit</a>
|
|
</div>
|
|
|
|
<div id="bike-body">
|
|
{% include "components/service_card.html" with context %}
|
|
|
|
<section class="card list-card">
|
|
{% include "events/list.html" with context %}
|
|
</section>
|
|
</div>
|
|
|
|
<section class="card">
|
|
<h2>Log a new event</h2>
|
|
<form method="post" action="/bikes/{{ bike.id }}/events" novalidate
|
|
hx-post="/bikes/{{ bike.id }}/events"
|
|
hx-target="#bike-body"
|
|
hx-swap="innerHTML"
|
|
hx-indicator="#busy-btn"
|
|
hx-on::after-request="this.reset()">
|
|
<input type="hidden" name="csrf" value="{{ csrf }}">
|
|
<div class="form-row">
|
|
<label>
|
|
<span>Type</span>
|
|
<select name="type" required>
|
|
{% for t in event_types %}
|
|
<option value="{{ t }}">{{ t }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</label>
|
|
<label>
|
|
<span>Date</span>
|
|
<input type="date" name="event_date" required max="{{ today.isoformat() }}"
|
|
value="{{ today.isoformat() }}">
|
|
</label>
|
|
</div>
|
|
<div class="form-row">
|
|
<label>
|
|
<span>Mileage (optional)</span>
|
|
<input type="number" name="mileage" min="0" step="1"
|
|
{% if summary.due.current_mileage is not none %}value="{{ summary.due.current_mileage }}"{% endif %}>
|
|
<small class="muted">Odometer reading at this event{% if summary.due.current_mileage is not none %}. Prefilled with your last reading of {{ summary.due.current_mileage | money }} mi; just nudge it up{% endif %}.</small>
|
|
</label>
|
|
<label>
|
|
<span>Cost (optional)</span>
|
|
<input type="number" name="cost" min="0" step="1">
|
|
</label>
|
|
</div>
|
|
<label>
|
|
<span>Notes</span>
|
|
<textarea name="notes" rows="2"></textarea>
|
|
</label>
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn btn-primary" id="busy-btn">
|
|
<span class="btn-label">Add event</span>
|
|
<span class="btn-busy">Adding…</span>
|
|
</button>
|
|
<p class="add-note">
|
|
Tip: logging a <em>service</em> with the current mileage keeps your due
|
|
date accurate.
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
{% endblock %}
|