222 lines
11 KiB
HTML
222 lines
11 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Status - Yaris OBD{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
|
|
<h3 class="text-dark fw-bold m-0">Status</h3>
|
|
<div class="d-flex flex-wrap align-items-center gap-2 justify-content-end">
|
|
<button id="status-action-test-server" class="btn btn-outline-primary btn-sm" type="button">Test server now</button>
|
|
<button id="status-action-sync-now" class="btn btn-outline-primary btn-sm" type="button">Sync now</button>
|
|
<button id="status-action-reconnect-uplink" class="btn btn-outline-secondary btn-sm" type="button">Reconnect uplink</button>
|
|
<button id="status-action-restart-app" class="btn btn-outline-danger btn-sm" type="button">Restart app service</button>
|
|
<span id="status-updated" class="small text-muted">Loading…</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="status-error" class="alert alert-danger py-2" role="alert" hidden></div>
|
|
<div id="status-action-message" class="alert py-2" role="alert" hidden></div>
|
|
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-xl-4">
|
|
<div class="card shadow-sm h-100">
|
|
<div class="card-header py-2 d-flex justify-content-between align-items-center">
|
|
<h6 class="text-primary fw-bold m-0">Remote server</h6>
|
|
<span id="server-badge" class="badge text-bg-secondary">Checking…</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="small text-muted text-uppercase fw-bold mb-1">Server URL</div>
|
|
<div id="server-url" class="fw-semibold text-break mb-3">—</div>
|
|
<div class="small text-muted text-uppercase fw-bold mb-1">Device</div>
|
|
<div id="server-device" class="fw-semibold mb-3">—</div>
|
|
<div class="small text-muted text-uppercase fw-bold mb-1">Health check</div>
|
|
<div id="server-detail" class="fw-semibold mb-2">—</div>
|
|
<div id="server-message" class="small text-muted">—</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-4">
|
|
<div class="card shadow-sm h-100">
|
|
<div class="card-header py-2 d-flex justify-content-between align-items-center">
|
|
<h6 class="text-primary fw-bold m-0">Wi-Fi / uplink</h6>
|
|
<span id="uplink-badge" class="badge text-bg-secondary">Checking…</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-6">
|
|
<div class="small text-muted text-uppercase fw-bold mb-1">Mode</div>
|
|
<div id="uplink-mode" class="fw-semibold">—</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="small text-muted text-uppercase fw-bold mb-1">Interface</div>
|
|
<div id="uplink-interface" class="fw-semibold">—</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="small text-muted text-uppercase fw-bold mb-1">Connection</div>
|
|
<div id="uplink-connection" class="fw-semibold">—</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="small text-muted text-uppercase fw-bold mb-1">IP</div>
|
|
<div id="uplink-ip" class="fw-semibold">—</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div id="uplink-message" class="small text-muted">—</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-4">
|
|
<div class="card shadow-sm h-100">
|
|
<div class="card-header py-2 d-flex justify-content-between align-items-center">
|
|
<h6 class="text-primary fw-bold m-0">Uploads</h6>
|
|
<span id="upload-badge" class="badge text-bg-secondary">Checking…</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-6">
|
|
<div class="small text-muted text-uppercase fw-bold mb-1">Pending rows</div>
|
|
<div id="upload-pending" class="fw-semibold">—</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="small text-muted text-uppercase fw-bold mb-1">Last path</div>
|
|
<div id="upload-path" class="fw-semibold">—</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="small text-muted text-uppercase fw-bold mb-1">Trip sync</div>
|
|
<div id="upload-configured" class="fw-semibold">—</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="small text-muted text-uppercase fw-bold mb-1">Dashcam upload</div>
|
|
<div id="upload-dashcam" class="fw-semibold">—</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div id="upload-message" class="small text-muted">—</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-xl-5">
|
|
<div class="card shadow-sm h-100">
|
|
<div class="card-header py-2 d-flex justify-content-between align-items-center">
|
|
<h6 class="text-primary fw-bold m-0">Pi health</h6>
|
|
<span id="health-badge" class="badge text-bg-secondary">Checking…</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="health-warning" class="alert alert-warning py-2 mb-2" role="alert" hidden></div>
|
|
<div id="health-error" class="alert alert-danger py-2 mb-2" role="alert" hidden></div>
|
|
<div class="row g-3">
|
|
<div class="col-6 col-lg-3">
|
|
<div class="small text-muted text-uppercase fw-bold mb-1">CPU temp</div>
|
|
<div id="health-temperature" class="fw-semibold">—</div>
|
|
</div>
|
|
<div class="col-6 col-lg-3">
|
|
<div class="small text-muted text-uppercase fw-bold mb-1">Memory</div>
|
|
<div id="health-memory" class="fw-semibold">—</div>
|
|
</div>
|
|
<div class="col-6 col-lg-3">
|
|
<div class="small text-muted text-uppercase fw-bold mb-1">Disk</div>
|
|
<div id="health-disk" class="fw-semibold">—</div>
|
|
</div>
|
|
<div class="col-6 col-lg-3">
|
|
<div class="small text-muted text-uppercase fw-bold mb-1">Uptime</div>
|
|
<div id="health-uptime" class="fw-semibold">—</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-4">
|
|
<div class="card shadow-sm h-100">
|
|
<div class="card-header py-2 d-flex justify-content-between align-items-center">
|
|
<h6 class="text-primary fw-bold m-0">GPS / cellular HAT</h6>
|
|
<span id="gps-badge" class="badge text-bg-secondary">Checking…</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-6">
|
|
<div class="small text-muted text-uppercase fw-bold mb-1">GPS fix</div>
|
|
<div id="gps-fix" class="fw-semibold">—</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="small text-muted text-uppercase fw-bold mb-1">Fix age</div>
|
|
<div id="gps-age" class="fw-semibold">—</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="small text-muted text-uppercase fw-bold mb-1">Latitude</div>
|
|
<div id="gps-latitude" class="fw-semibold">—</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="small text-muted text-uppercase fw-bold mb-1">Longitude</div>
|
|
<div id="gps-longitude" class="fw-semibold">—</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="small text-muted text-uppercase fw-bold mb-1">SIM868 UART</div>
|
|
<div id="cellular-uart" class="fw-semibold">—</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="small text-muted text-uppercase fw-bold mb-1">Modem</div>
|
|
<div id="cellular-modem" class="fw-semibold">—</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div id="cellular-message" class="small text-muted">—</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3">
|
|
<div class="card shadow-sm h-100">
|
|
<div class="card-header py-2 d-flex justify-content-between align-items-center">
|
|
<h6 class="text-primary fw-bold m-0">OBD</h6>
|
|
<span id="obd-badge" class="badge text-bg-secondary">Checking…</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="small text-muted text-uppercase fw-bold mb-1">Adapter</div>
|
|
<div id="obd-adapter" class="fw-semibold mb-3">—</div>
|
|
<div class="small text-muted text-uppercase fw-bold mb-1">Port</div>
|
|
<div id="obd-port" class="fw-semibold mb-3">—</div>
|
|
<div class="small text-muted text-uppercase fw-bold mb-1">Car link</div>
|
|
<div id="obd-status" class="fw-semibold">—</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card shadow-sm">
|
|
<div class="card-header py-2">
|
|
<h6 class="text-primary fw-bold m-0">Local services</h6>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-sm mb-0 align-middle">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th class="ps-3">Service</th>
|
|
<th>Status</th>
|
|
<th>Sub-state</th>
|
|
<th>Enabled</th>
|
|
<th>Restarts</th>
|
|
<th class="pe-3">Result</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="services-table">
|
|
<tr>
|
|
<td colspan="6" class="text-muted ps-3 py-3">Loading…</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
{{ super() }}
|
|
<script src="{{ url_for('static', filename='js/status.js') }}"></script>
|
|
{% endblock %}
|