Mathieu Moran
99035e86ee
- Pi history page gets a select checkbox column + 'Delete selected' button (mirrors the server UI) - POST /api/trips/delete batch endpoint - app_sql.delete_trips_batch() + deleted_trip_markers table so a later trip rebuild can't resurrect locally-deleted trips - Deletion is local-only: raw tracking rows are kept and the remote server is never notified (it keeps its archival copy recomputed from uploaded rows)
93 lines
5.0 KiB
HTML
93 lines
5.0 KiB
HTML
{% extends "base.html" %}
|
|
{% from "components.html" import data_table %}
|
|
|
|
{% block title %}Trip history - Yaris OBD{% endblock %}
|
|
|
|
{% block styles %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='vendor/leaflet/leaflet.css') }}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<h3 class="text-dark mb-3 fw-bold">Trip history</h3>
|
|
|
|
{# Mobile: list on top, map below. Desktop: side by side. #}
|
|
<div class="row g-3">
|
|
{# ── Trip list ──────────────────────────────────────────────────── #}
|
|
<div class="col-12 col-xl-5">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header py-2 d-flex justify-content-between align-items-center">
|
|
<h6 class="text-primary fw-bold m-0">Recorded trips</h6>
|
|
<button id="delete-selected-btn" class="btn btn-sm btn-outline-danger" type="button" hidden title="Delete selected trips">
|
|
<i class="fas fa-trash fa-fw"></i> Delete selected
|
|
</button>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div id="trip-loading" class="text-center text-muted py-4">
|
|
<span class="spinner-border spinner-border-sm me-2" aria-hidden="true"></span>
|
|
Loading…
|
|
</div>
|
|
<div id="trip-error" class="alert alert-danger m-3" role="alert" hidden></div>
|
|
{{ data_table(
|
|
"trip-list",
|
|
[
|
|
{"key": "", "label": "", "sortable": false, "class": "text-center"},
|
|
{"key": "started", "label": "Started", "sortable": true},
|
|
{"key": "distance", "label": "km", "sortable": true},
|
|
{"key": "duration", "label": "Time", "sortable": true},
|
|
{"key": "maxSpeed", "label": "Max", "sortable": true},
|
|
{"key": "odometer", "label": "Odometer", "sortable": false},
|
|
{"key": "action", "label": "", "sortable": false, "class": "d-none d-sm-table-cell"}
|
|
],
|
|
"No trips detected",
|
|
"Trip history appears after sustained GPS or OBD movement is recorded.",
|
|
deletable=true
|
|
) }}
|
|
<script>document.getElementById('trip-list').dataset.deleteUrl = '/api/trip/';</script>
|
|
<script>document.getElementById('trip-list').dataset.batchDeleteUrl = '/api/trips/delete';</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# ── Route replay map ───────────────────────────────────────────── #}
|
|
<div class="col-12 col-xl-7">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header py-2 d-flex justify-content-between align-items-center">
|
|
<h6 class="text-primary fw-bold m-0">Route replay</h6>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<button id="btn-recenter-history" class="btn btn-outline-secondary btn-sm" type="button" title="Recenter map" hidden>
|
|
<i class="fas fa-crosshairs" aria-hidden="true"></i>
|
|
</button>
|
|
<span id="trip-summary" class="small text-muted">Select a trip</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div id="history-map" aria-label="Selected trip route map"
|
|
data-min-zoom="8" data-max-zoom="15"></div>
|
|
<div id="trip-timeline" class="border-top p-3" hidden>
|
|
<div class="d-flex align-items-center gap-3">
|
|
<button id="trip-play" class="btn btn-primary btn-sm" type="button" aria-label="Play">
|
|
<i class="fas fa-play" aria-hidden="true"></i>
|
|
</button>
|
|
<input id="trip-scrubber" class="form-range flex-grow-1" type="range"
|
|
min="0" max="0" value="0" aria-label="Trip replay timeline">
|
|
</div>
|
|
<div class="d-flex flex-wrap justify-content-between gap-2 small mt-2">
|
|
<strong id="trip-replay-time"></strong>
|
|
<div class="text-end">
|
|
<span id="trip-replay-speed" class="text-muted d-block"></span>
|
|
<span id="trip-replay-odometer" class="text-muted d-block" style="font-size:0.75rem;"></span>
|
|
</div>
|
|
</div>
|
|
<div id="trip-replay-location" class="text-muted mt-1" style="font-size:0.75rem;min-height:1rem"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="{{ url_for('static', filename='vendor/leaflet/leaflet.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/history.js') }}"></script>
|
|
{% endblock %}
|