228 lines
10 KiB
HTML
228 lines
10 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Device Registry{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="row mb-4 align-items-center">
|
|
<div class="col">
|
|
<h2><i class="bi bi-tablet me-2"></i>Device Registry</h2>
|
|
<p class="text-muted mb-0">
|
|
iOS devices that have opened the JanitorialQC app.
|
|
Records update on every app launch — <strong>Last Seen</strong> reflects the most recent foreground.
|
|
</p>
|
|
</div>
|
|
<div class="col-auto">
|
|
<span class="badge bg-secondary fs-6">{{ devices|length }} device{{ 's' if devices|length != 1 }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% for category, message in messages %}
|
|
<div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
|
|
{{ message }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endwith %}
|
|
|
|
<div class="row g-4">
|
|
|
|
{# ── Device Table ──────────────────────────────────────────────────── #}
|
|
<div class="col-xl-8">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header d-flex align-items-center gap-2">
|
|
<i class="bi bi-list-ul"></i>
|
|
<strong>Registered Devices</strong>
|
|
<span class="text-muted fw-normal ms-1 small">sorted by most recently active</span>
|
|
<div class="ms-auto">
|
|
<input type="text" id="deviceSearch" class="form-control form-control-sm"
|
|
placeholder="Filter…" style="width:180px;">
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
{% if devices %}
|
|
<div class="table-responsive">
|
|
<table class="table table-hover table-sm mb-0" id="deviceTable">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>Device</th>
|
|
<th>User</th>
|
|
<th class="text-center">App Ver.</th>
|
|
<th class="text-center">iOS Ver.</th>
|
|
<th>Last Seen</th>
|
|
<th>Registered</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for d in devices %}
|
|
{% set app_ver = d.app_version or '—' %}
|
|
<tr>
|
|
<td>
|
|
<i class="bi bi-tablet me-1 text-muted"></i>
|
|
{{ d.device_name or '—' }}
|
|
</td>
|
|
<td>
|
|
<span class="fw-semibold">{{ d.user.display_name if d.user else '—' }}</span>
|
|
{% if d.user %}
|
|
<br><span class="text-muted small">{{ d.user.username }}</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="text-center">
|
|
<span class="badge version-badge" data-version="{{ d.app_version }}">
|
|
{{ app_ver }}
|
|
</span>
|
|
</td>
|
|
<td class="text-center text-muted small">{{ d.ios_version or '—' }}</td>
|
|
<td class="text-nowrap small">
|
|
{{ (d.last_seen_at or d.registered_at).strftime('%b %-d, %Y') }}<br>
|
|
<span class="text-muted" style="font-size:.75rem;">
|
|
{{ (d.last_seen_at or d.registered_at).strftime('%I:%M %p') }}
|
|
</span>
|
|
</td>
|
|
<td class="text-nowrap small text-muted">
|
|
{{ d.registered_at.strftime('%b %-d, %Y') }}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center text-muted py-5">
|
|
<i class="bi bi-tablet fs-1 d-block mb-2 opacity-25"></i>
|
|
No devices registered yet. Devices appear here once the iOS app opens while online.
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# ── Send Update Notice ────────────────────────────────────────────── #}
|
|
<div class="col-xl-4">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header bg-warning text-dark">
|
|
<i class="bi bi-bell-fill me-2"></i><strong>Send Update Notice</strong>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="text-muted small mb-3">
|
|
Sends an in-app notification to every user whose device is running
|
|
an app version <em>older</em> than the version you enter.
|
|
Delivered within 60 seconds via the app's background poll.
|
|
One notification per user (even if they have multiple devices).
|
|
</p>
|
|
<form method="POST" action="{{ url_for('devices.notify_update') }}"
|
|
onsubmit="return confirm('Send update notice to all users on older versions?')">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
|
|
<div class="mb-3">
|
|
<label for="current_version" class="form-label fw-semibold">
|
|
Current / Target Version <span class="text-danger">*</span>
|
|
</label>
|
|
<input type="text" class="form-control" id="current_version"
|
|
name="current_version" placeholder="e.g. 1.3.0"
|
|
pattern="^\d+\.\d+(\.\d+)?$"
|
|
title="Format: 1.0 or 1.3.0"
|
|
required>
|
|
<div class="form-text">
|
|
Devices running a version below this will receive the notice.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="message" class="form-label fw-semibold">
|
|
Custom Message <span class="text-muted fw-normal">(optional)</span>
|
|
</label>
|
|
<textarea class="form-control" id="message" name="message"
|
|
rows="3" maxlength="500"
|
|
placeholder="Leave blank to use the default message."></textarea>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-warning">
|
|
<i class="bi bi-send-fill me-2"></i>Send Update Notice
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
{% if devices %}
|
|
<hr class="mt-4">
|
|
<p class="text-muted small mb-2 fw-semibold">Version breakdown</p>
|
|
<div id="versionBreakdown"></div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /row -->
|
|
|
|
<script>
|
|
// ── Inline filter ──────────────────────────────────────────────────────────
|
|
(function () {
|
|
var input = document.getElementById('deviceSearch');
|
|
if (!input) return;
|
|
input.addEventListener('input', function () {
|
|
var q = this.value.toLowerCase();
|
|
document.querySelectorAll('#deviceTable tbody tr').forEach(function (row) {
|
|
row.style.display = row.textContent.toLowerCase().includes(q) ? '' : 'none';
|
|
});
|
|
});
|
|
})();
|
|
|
|
// ── Version badges + breakdown ────────────────────────────────────────────
|
|
(function () {
|
|
var badges = document.querySelectorAll('.version-badge[data-version]');
|
|
if (!badges.length) return;
|
|
|
|
// Collect all version strings from the table
|
|
var versions = Array.from(badges).map(function (b) { return b.dataset.version || ''; });
|
|
|
|
// Find the most-common latest version to use as the "current" baseline
|
|
var freq = {};
|
|
versions.forEach(function (v) { if (v) freq[v] = (freq[v] || 0) + 1; });
|
|
var sorted = Object.keys(freq).sort(function (a, b) {
|
|
return compareSemver(b, a); // desc — highest first
|
|
});
|
|
var latest = sorted[0] || '';
|
|
|
|
// Colour each badge relative to the latest version seen in the table
|
|
badges.forEach(function (badge) {
|
|
var v = badge.dataset.version || '';
|
|
if (!v || v === '—') {
|
|
badge.classList.add('bg-secondary');
|
|
} else if (v === latest) {
|
|
badge.classList.add('bg-success');
|
|
} else if (compareSemver(v, latest) < 0) {
|
|
badge.classList.add('bg-danger');
|
|
} else {
|
|
badge.classList.add('bg-secondary');
|
|
}
|
|
});
|
|
|
|
// Version breakdown summary
|
|
var breakdown = document.getElementById('versionBreakdown');
|
|
if (breakdown && sorted.length) {
|
|
var html = '<ul class="list-unstyled mb-0">';
|
|
sorted.forEach(function (v) {
|
|
var cls = (v === latest) ? 'text-success fw-semibold' : 'text-danger';
|
|
html += '<li class="d-flex justify-content-between small mb-1">'
|
|
+ '<span class="' + cls + '">' + v + '</span>'
|
|
+ '<span class="badge bg-secondary rounded-pill">' + freq[v] + ' device' + (freq[v] === 1 ? '' : 's') + '</span>'
|
|
+ '</li>';
|
|
});
|
|
html += '</ul>';
|
|
breakdown.innerHTML = html;
|
|
}
|
|
|
|
function compareSemver(a, b) {
|
|
var pa = a.split('.').map(Number);
|
|
var pb = b.split('.').map(Number);
|
|
for (var i = 0; i < Math.max(pa.length, pb.length); i++) {
|
|
var diff = (pa[i] || 0) - (pb[i] || 0);
|
|
if (diff !== 0) return diff;
|
|
}
|
|
return 0;
|
|
}
|
|
})();
|
|
</script>
|
|
{% endblock %}
|