Jul 10 - Update facility's area with QR code

app/templates/facilities/area_qr.html

@@ -0,0 +1,64 @@
+{% extends "base.html" %}
+{% block title %}QR Code — {{ area.name }}{% endblock %}
+
+{% block content %}
+<style>
+    @media print {
+        .no-print { display: none !important; }
+        .navbar, nav, footer { display: none !important; }
+        .qr-card { border: none !important; box-shadow: none !important; }
+    }
+    .qr-card { max-width: 520px; margin: 0 auto; }
+</style>
+
+<div class="d-flex justify-content-between align-items-center mb-3 no-print">
+    <a href="{{ url_for('facilities.view_facility', facility_id=facility.id) }}"
+       class="btn btn-outline-secondary btn-sm">
+        <i class="bi bi-arrow-left"></i> Back to Facility
+    </a>
+    <div class="d-flex gap-2">
+        {% if current_user.role in ['admin', 'director', 'customer'] %}
+        <form method="POST"
+              action="{{ url_for('facilities.area_qr_regenerate', area_id=area.id) }}"
+              onsubmit="return confirm('Regenerate this QR code? Any codes already printed and posted for {{ area.name }} will STOP working and must be reprinted.');">
+            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+            <button type="submit" class="btn btn-outline-danger btn-sm"
+                    title="Invalidate the current code and generate a new one">
+                <i class="bi bi-arrow-repeat"></i> Regenerate
+            </button>
+        </form>
+        {% endif %}
+        <button onclick="window.print()" class="btn btn-primary btn-sm">
+            <i class="bi bi-printer"></i> Print
+        </button>
+    </div>
+</div>
+
+<div class="card shadow-sm qr-card">
+    <div class="card-body text-center p-4">
+        <div class="text-muted text-uppercase small" style="letter-spacing:.08em;">
+            Scan for Area Status
+        </div>
+        <h1 class="h3 fw-bold mt-1 mb-0">{{ area.name }}</h1>
+        <div class="text-muted mb-3">{{ facility.name }}</div>
+
+        <img src="{{ url_for('facilities.area_qr_png', area_id=area.id) }}"
+             alt="QR code for {{ area.name }}"
+             style="width:260px;height:260px;max-width:100%;" class="mb-3">
+
+        <p class="mb-1">Scan this code with your phone camera to see this area's
+           recent cleaning quality and to <strong>report a problem</strong>.</p>
+
+        {% if public_url %}
+        <div class="small text-muted mt-3">
+            Or visit:<br>
+            <a href="{{ public_url }}" class="text-break">{{ public_url }}</a>
+        </div>
+        {% endif %}
+    </div>
+</div>
+
+<p class="text-center text-muted small mt-3 no-print">
+    Tip: print this and post it inside the area itself (e.g. on the restroom door).
+</p>
+{% endblock %}

app/templates/facilities/view.html

@@ -135,6 +135,12 @@
                         </td>
                         <td>{{ area.inspections.count() }}</td>
                         <td>
+                            {% if current_user.role in ['admin', 'director', 'project_manager', 'customer'] %}
+                            <a href="{{ url_for('facilities.area_qr_page', area_id=area.id) }}"
+                               class="btn btn-sm btn-outline-dark" title="Printable QR code for this area">
+                                <i class="bi bi-qr-code"></i>
+                            </a>
+                            {% endif %}
                             {% if current_user.role in ['admin', 'director'] %}
                             <a href="{{ url_for('facilities.edit_area', area_id=area.id) }}" class="btn btn-sm btn-outline-primary">
                                 <i class="bi bi-pencil"></i>