quoije/yaris-obd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add trip history and route replay

Browse Source 
Co-authored-by: Copilot <[email protected]>
This commit is contained in:
Mathieu Moran
2026-08-09 19:48:06 -04:00
co-authored by Copilot
parent 3a981f5c6d
commit d3bc313e7f
13 changed files with 1158 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/base.html
+5
View File
@@ -31,6 +31,11 @@
<i class="fas fa-video"></i><span>Dashcam</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link{% if request.endpoint == 'history' %} active{% endif %}" href="{{ url_for('history') }}">
<i class="fas fa-route"></i><span>Trip history</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link{% if request.endpoint == 'dtc' %} active{% endif %}" href="{{ url_for('dtc') }}">
<i class="fas fa-exclamation-triangle"></i><span>DTC</span>
templates/history.html
+74
View File
@@ -0,0 +1,74 @@
{% 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 %}
<div class="d-sm-flex justify-content-between align-items-center mb-4">
<div>
<h3 class="text-dark mb-1">Trip history</h3>
<p class="text-muted mb-0">Review recorded drives and replay their routes offline.</p>
</div>
</div>
<div class="row">
<div class="col-xl-5 mb-4">
<div class="card shadow h-100">
<div class="card-header py-3">
<h6 class="text-primary fw-bold m-0">Recorded trips</h6>
</div>
<div class="card-body p-0">
<div id="trip-loading" class="text-center text-muted p-5">
<span class="spinner-border spinner-border-sm me-2" aria-hidden="true"></span>
Loading trips...
</div>
<div id="trip-error" class="alert alert-danger m-3" role="alert" hidden></div>
{{ data_table(
"trip-list",
[
{"key": "started", "label": "Started", "sortable": true},
{"key": "distance", "label": "Distance", "sortable": true},
{"key": "duration", "label": "Duration", "sortable": true},
{"key": "maxSpeed", "label": "Max speed", "sortable": true},
{"key": "action", "label": "", "sortable": false}
],
"No trips detected",
"Trip history appears after sustained GPS or OBD movement is recorded."
) }}
</div>
</div>
</div>
<div class="col-xl-7 mb-4">
<div class="card shadow">
<div class="card-header py-3 d-flex justify-content-between align-items-center">
<h6 class="text-primary fw-bold m-0">Route replay</h6>
<span id="trip-summary" class="small text-muted">Select a trip</span>
</div>
<div class="card-body p-0">
<div id="history-map" aria-label="Selected trip route map"></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 trip replay">
<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>
<span id="trip-replay-speed" class="text-muted"></span>
</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 %}