nngo/GOV_QR_Codes_Management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

05/19 Update QR code photo verification togglable

Browse Source
This commit is contained in:
nngo
2026-05-19 13:20:52 -04:00
parent 5e0c014ca7
commit 74e0b71a11
5 changed files with 1665 additions and 1542 deletions
Download Patch File Download Diff File Expand all files Collapse all files
models/qrcode.py
+2
View File
@@ -43,6 +43,8 @@ class QRCode(base.db.Model):
# 'standard' = fixed single location (existing behavior, default)
# 'dynamic' = employee selects location from a list at scan time
qr_type = base.db.Column(base.db.String(20), nullable=False, default='standard')
# Per-QR photo verification toggle (default: enabled)
photo_verification_enabled = base.db.Column(base.db.Boolean, nullable=False, default=True)
# Relationship to style
style = base.db.relationship('QRCodeStyle', backref='qr_codes')
routes/qr_codes.py
+15 -2
View File
@@ -160,6 +160,8 @@ def create_qr_code():
styles=QRCodeStyle.query.all())
# Create new QR code record first (without URL and image)
photo_verification_enabled = request.form.get('photo_verification_enabled', '1') != '0'
new_qr_code = QRCode(
name=name,
location=location,
@@ -174,6 +176,7 @@ def create_qr_code():
coordinate_accuracy=coordinate_accuracy if has_coordinates else None,
coordinates_updated_date=datetime.utcnow() if has_coordinates else None,
qr_type=qr_type, # ADDED: store QR type
photo_verification_enabled=photo_verification_enabled,
# NEW: Customization fields (only if columns exist)
**({
'fill_color': fill_color,
@@ -220,6 +223,7 @@ def create_qr_code():
'location_address': location_address,
'location_event': location_event,
'has_coordinates': has_coordinates,
'photo_verification_enabled': photo_verification_enabled,
'customization': {
'fill_color': fill_color,
'back_color': back_color,
@@ -514,6 +518,9 @@ def edit_qr_code(qr_id):
else:
qr_code.project_id = None
# Per-QR photo verification toggle
qr_code.photo_verification_enabled = request.form.get('photo_verification_enabled', '1') != '0'
# Handle QR code customization (only if columns exist)
fill_color = request.form.get('fill_color', '#000000')
back_color = request.form.get('back_color', '#FFFFFF')
@@ -558,6 +565,11 @@ def edit_qr_code(qr_id):
db.session.commit()
logger_handler.logger.info(
f"QR Code '{qr_code.name}' (ID: {qr_id}) updated by user {session.get('username', 'unknown')} — "
f"photo_verification_enabled={qr_code.photo_verification_enabled}"
)
# Success message
flash(f'QR Code "{qr_code.name}" updated successfully!', 'success')
return redirect(url_for('dashboard.dashboard'))
@@ -890,11 +902,12 @@ def qr_checkin(qr_url):
logger_handler.logger.warning("Could not calculate location accuracy — calculation returned None")
# CHECK DISTANCE THRESHOLD FOR PHOTO VERIFICATION
logger_handler.logger.debug(f"Photo verification enabled: {current_app.config.get('PHOTO_VERIFICATION_ENABLED', True)}")
logger_handler.logger.debug(f"Photo verification — global: {current_app.config.get('PHOTO_VERIFICATION_ENABLED', True)}, per-QR: {getattr(qr_code, 'photo_verification_enabled', True)}")
requires_verification = False
verification_photo_data = None
if current_app.config.get('PHOTO_VERIFICATION_ENABLED', True) and location_accuracy is not None and location_accuracy > current_app.config.get('DISTANCE_THRESHOLD_FOR_VERIFICATION', 0.3):
qr_photo_verification = getattr(qr_code, 'photo_verification_enabled', True)
if qr_photo_verification and current_app.config.get('PHOTO_VERIFICATION_ENABLED', True) and location_accuracy is not None and location_accuracy > current_app.config.get('DISTANCE_THRESHOLD_FOR_VERIFICATION', 0.3):
logger_handler.logger.info(f"Distance ({location_accuracy:.3f} mi) exceeds verification threshold for employee {employee_id}")
# Check if photo was provided
templates/create_qr_code.html
+135 -147
View File
@@ -1,13 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Create QR Code - QR Management System</title>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
rel="stylesheet"
/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
<style>
:root {
--primary-color: #2563eb;
@@ -43,11 +41,9 @@
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
sans-serif;
background: linear-gradient(
135deg,
background: linear-gradient(135deg,
var(--gray-50) 0%,
var(--gray-100) 100%
);
var(--gray-100) 100%);
color: var(--gray-800);
line-height: 1.6;
min-height: 100vh;
@@ -228,7 +224,7 @@
background: var(--primary-color);
cursor: pointer;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.range-input-group input[type="range"]::-moz-range-thumb {
@@ -238,7 +234,7 @@
background: var(--primary-color);
cursor: pointer;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.range-value {
@@ -523,9 +519,17 @@
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
/* Toast notification styles */
@@ -544,8 +548,9 @@
font-size: 1.1rem;
}
</style>
</head>
<body>
</head>
<body>
<div class="container">
<div class="form-container">
<div class="form-header">
@@ -557,7 +562,8 @@
</div>
<div style="margin-top: 1rem; margin-bottom: 1rem;">
<a href="{{ url_for('qr_codes.import_bulk_qr_codes') }}" class="btn btn-outline" style="display: inline-flex; align-items: center; gap: 0.5rem;">
<a href="{{ url_for('qr_codes.import_bulk_qr_codes') }}" class="btn btn-outline"
style="display: inline-flex; align-items: center; gap: 0.5rem;">
<i class="fas fa-file-excel"></i>
Bulk Import from Excel
</a>
@@ -580,17 +586,9 @@
<i class="fas fa-tag"></i>
QR Code Name <span style="color: var(--error-color)">*</span>
</label>
<input
type="text"
id="name"
name="name"
required
placeholder="e.g., Main Office Entrance, Conference Room A"
maxlength="100"
/>
<small class="form-help"
>A unique name to identify this QR code</small
>
<input type="text" id="name" name="name" required
placeholder="e.g., Main Office Entrance, Conference Room A" maxlength="100" />
<small class="form-help">A unique name to identify this QR code</small>
<div class="character-counter">
<span id="nameCounter">0/100</span>
</div>
@@ -621,18 +619,10 @@
<i class="fas fa-map-marker-alt"></i>
Location Name <span style="color: var(--error-color)">*</span>
</label>
<input
type="text"
id="location"
name="location"
required
placeholder="e.g., Corporate Headquarters, Branch Office"
maxlength="100"
/>
<small class="form-help"
>The name of the physical location where this QR code will be
used</small
>
<input type="text" id="location" name="location" required
placeholder="e.g., Corporate Headquarters, Branch Office" maxlength="100" />
<small class="form-help">The name of the physical location where this QR code will be
used</small>
<div class="character-counter">
<span id="locationCounter">0/100</span>
</div>
@@ -676,28 +666,17 @@
Complete Address
<span style="color: var(--error-color)">*</span>
</label>
<textarea
id="location_address"
name="location_address"
required
placeholder="Enter the full address including street, city, state, and ZIP code"
rows="3"
maxlength="500"
></textarea>
<small class="form-help"
>Include all address details for accurate location
identification</small
>
<textarea id="location_address" name="location_address" required
placeholder="Enter the full address including street, city, state, and ZIP code" rows="3"
maxlength="500"></textarea>
<small class="form-help">Include all address details for accurate location
identification</small>
<div class="character-counter">
<span id="addressCounter">0/500</span>
</div>
<!-- Address Coordinates Section -->
<div
class="coordinates-section"
id="coordinatesSection"
style="display: none"
>
<div class="coordinates-section" id="coordinatesSection" style="display: none">
<div class="coordinates-header">
<i class="fas fa-crosshairs"></i>
<h4>Address Coordinates</h4>
@@ -720,20 +699,11 @@
</div>
<div class="coordinates-actions">
<button
type="button"
class="btn-coordinate"
id="geocodeBtn"
>
<button type="button" class="btn-coordinate" id="geocodeBtn">
<i class="fas fa-search-location"></i>
Get Coordinates
</button>
<button
type="button"
class="btn-coordinate"
id="clearCoordinatesBtn"
style="display: none"
>
<button type="button" class="btn-coordinate" id="clearCoordinatesBtn" style="display: none">
<i class="fas fa-times"></i>
Clear
</button>
@@ -755,23 +725,45 @@
Event or Purpose
<span style="color: var(--error-color)">*</span>
</label>
<select
id="location_event"
name="location_event"
required
class="form-control"
>
<select id="location_event" name="location_event" required class="form-control">
<option value="">Select Event Type</option>
<option value="Check In">Check In</option>
<option value="Check Out">Check Out</option>
</select>
<small class="form-help"
>Select the event type for this QR code</small
>
<small class="form-help">Select the event type for this QR code</small>
</div>
</div>
<!-- Photo Verification Toggle -->
<div class="form-section">
<div class="section-header">
<h3>
<i class="fas fa-camera"></i>
Photo Verification
</h3>
<p>Require a photo when employee check-in location is too far from the QR code</p>
</div>
<div class="form-group">
<label class="toggle-label" for="photo_verification_enabled"
style="display:flex;align-items:center;gap:0.75rem;cursor:pointer;">
<div class="toggle-switch" id="photoVerifyToggle"
style="position:relative;display:inline-block;width:52px;height:28px;">
<input type="checkbox" id="photo_verification_enabled" name="photo_verification_enabled" value="1"
checked style="opacity:0;width:0;height:0;position:absolute;" onchange="syncPhotoVerifyHidden(this)">
<span class="toggle-slider"
style="position:absolute;cursor:pointer;inset:0;background:#cbd5e1;border-radius:28px;transition:0.3s;"></span>
</div>
<span id="photoVerifyLabel"
style="font-weight:600;color:var(--gray-700);font-size:0.875rem;">Enabled</span>
</label>
<input type="hidden" name="photo_verification_enabled" id="photo_verification_hidden" value="1">
<small class="form-help">When disabled, photo verification is skipped for this QR code regardless of
distance</small>
</div>
</div>
<!-- QR Code Customization Section -->
<div class="form-section">
<div class="section-header">
@@ -791,12 +783,8 @@
<select id="style_id" name="style_id" onchange="applyStylePreset()">
<option value="">Custom Style</option>
{% for style in styles %}
<option
value="{{ style.id }}"
data-fill="{{ style.fill_color }}"
data-back="{{ style.back_color }}"
data-box-size="{{ style.box_size }}"
data-border="{{ style.border }}"
<option value="{{ style.id }}" data-fill="{{ style.fill_color }}" data-back="{{ style.back_color }}"
data-box-size="{{ style.box_size }}" data-border="{{ style.border }}"
data-error-correction="{{ style.error_correction }}">
{{ style.name }}
</option>
@@ -813,21 +801,9 @@
QR Code Color
</label>
<div class="color-input-group">
<input
type="color"
id="fill_color"
name="fill_color"
value="#000000"
onchange="updatePreview()"
/>
<input
type="text"
id="fill_color_text"
value="#000000"
pattern="^#[0-9A-Fa-f]{6}$"
placeholder="#000000"
onchange="syncColorInput('fill')"
/>
<input type="color" id="fill_color" name="fill_color" value="#000000" onchange="updatePreview()" />
<input type="text" id="fill_color_text" value="#000000" pattern="^#[0-9A-Fa-f]{6}$"
placeholder="#000000" onchange="syncColorInput('fill')" />
</div>
<span class="form-help">Color of the QR code modules</span>
</div>
@@ -838,21 +814,9 @@
Background Color
</label>
<div class="color-input-group">
<input
type="color"
id="back_color"
name="back_color"
value="#FFFFFF"
onchange="updatePreview()"
/>
<input
type="text"
id="back_color_text"
value="#FFFFFF"
pattern="^#[0-9A-Fa-f]{6}$"
placeholder="#FFFFFF"
onchange="syncColorInput('back')"
/>
<input type="color" id="back_color" name="back_color" value="#FFFFFF" onchange="updatePreview()" />
<input type="text" id="back_color_text" value="#FFFFFF" pattern="^#[0-9A-Fa-f]{6}$"
placeholder="#FFFFFF" onchange="syncColorInput('back')" />
</div>
<span class="form-help">Background color of the QR code</span>
</div>
@@ -866,15 +830,8 @@
Module Size
</label>
<div class="range-input-group">
<input
type="range"
id="box_size"
name="box_size"
min="5"
max="20"
value="10"
oninput="updateRangeValue('box_size'); updatePreview()"
/>
<input type="range" id="box_size" name="box_size" min="5" max="20" value="10"
oninput="updateRangeValue('box_size'); updatePreview()" />
<span class="range-value" id="box_size_value">10px</span>
</div>
<span class="form-help">Size of each QR code module (affects overall size)</span>
@@ -886,15 +843,8 @@
Border Size
</label>
<div class="range-input-group">
<input
type="range"
id="border"
name="border"
min="1"
max="10"
value="4"
oninput="updateRangeValue('border'); updatePreview()"
/>
<input type="range" id="border" name="border" min="1" max="10" value="4"
oninput="updateRangeValue('border'); updatePreview()" />
<span class="range-value" id="border_value">4 modules</span>
</div>
<span class="form-help">White border around the QR code</span>
@@ -948,12 +898,7 @@
<!-- Hidden coordinate fields for form submission -->
<input type="hidden" id="latitude" name="latitude" value="" />
<input type="hidden" id="longitude" name="longitude" value="" />
<input
type="hidden"
id="coordinate_accuracy"
name="coordinate_accuracy"
value=""
/>
<input type="hidden" id="coordinate_accuracy" name="coordinate_accuracy" value="" />
<!-- Form Actions -->
<div class="form-actions">
@@ -1372,7 +1317,7 @@
}
// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('DOMContentLoaded', function () {
// Set up character counters
document.getElementById('name').addEventListener('input', () => updateCharacterCount('name', 'nameCounter', 100));
document.getElementById('location').addEventListener('input', () => updateCharacterCount('location', 'locationCounter', 100));
@@ -1386,7 +1331,7 @@
// Add form validation
const form = document.getElementById('createQRForm');
if (form) {
form.addEventListener('submit', function(e) {
form.addEventListener('submit', function (e) {
if (!validateQRCustomization()) {
e.preventDefault();
return false;
@@ -1395,12 +1340,12 @@
}
// Add color input synchronization
document.getElementById('fill_color').addEventListener('change', function() {
document.getElementById('fill_color').addEventListener('change', function () {
document.getElementById('fill_color_text').value = this.value.toUpperCase();
updatePreview();
});
document.getElementById('back_color').addEventListener('change', function() {
document.getElementById('back_color').addEventListener('change', function () {
document.getElementById('back_color_text').value = this.value.toUpperCase();
updatePreview();
});
@@ -1412,7 +1357,7 @@
const clearBtn = document.getElementById('clearCoordinatesBtn');
// Show coordinates section when address has content (like your original)
addressInput.addEventListener('input', function() {
addressInput.addEventListener('input', function () {
const address = this.value.trim();
if (address.length > 10) {
coordinatesSection.style.display = 'block';
@@ -1422,7 +1367,7 @@
}
});
geocodeBtn.addEventListener('click', function() {
geocodeBtn.addEventListener('click', function () {
const address = document.getElementById('location_address').value.trim();
if (address.length > 10) {
geocodeAddress(address);
@@ -1440,23 +1385,66 @@
function toggleQRTypeSection() {
var type = document.getElementById('qr_type').value;
var stdName = document.getElementById('standardLocationNameGroup');
var stdDetails= document.getElementById('standardLocationDetailsSection');
var stdDetails = document.getElementById('standardLocationDetailsSection');
var locInput = document.getElementById('location');
var addrInput = document.getElementById('location_address');
if (type === 'dynamic') {
if (stdName) stdName.style.display = 'none';
if (stdDetails)stdDetails.style.display = 'none';
if (stdDetails) stdDetails.style.display = 'none';
if (locInput) locInput.removeAttribute('required');
if (addrInput) addrInput.removeAttribute('required');
} else {
if (stdName) stdName.style.display = 'block';
if (stdDetails)stdDetails.style.display = 'block';
if (stdDetails) stdDetails.style.display = 'block';
if (locInput) locInput.setAttribute('required', '');
if (addrInput) addrInput.setAttribute('required', '');
}
}
</script>
<!-- ===== END Dynamic QR Type Toggle ===== -->
</body>
<style>
/* Photo Verification Toggle */
#photo_verification_enabled:checked+.toggle-slider {
background: var(--success-color, #10b981);
}
.toggle-slider::before {
content: "";
position: absolute;
height: 20px;
width: 20px;
left: 4px;
bottom: 4px;
background: white;
border-radius: 50%;
transition: 0.3s;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
#photo_verification_enabled:checked+.toggle-slider::before {
transform: translateX(24px);
}
</style>
<script>
function syncPhotoVerifyHidden(checkbox) {
document.getElementById('photo_verification_hidden').value = checkbox.checked ? '1' : '0';
document.getElementById('photoVerifyLabel').textContent = checkbox.checked ? 'Enabled' : 'Disabled';
document.getElementById('photoVerifyLabel').style.color = checkbox.checked ? 'var(--success-color, #10b981)' : 'var(--error-color, #ef4444)';
}
// Remove duplicate hidden field on submit (keep only the one synced by checkbox)
document.addEventListener('DOMContentLoaded', function () {
var form = document.getElementById('createQRForm');
if (form) {
form.addEventListener('submit', function () {
var cb = document.getElementById('photo_verification_enabled');
document.getElementById('photo_verification_hidden').value = cb && cb.checked ? '1' : '0';
});
}
});
</script>
</body>
</html>
templates/edit_qr_code.html
+159 -161
View File
@@ -2,6 +2,29 @@
{% block title %}Edit QR Code - QR Management System{% endblock %}
{% block extra_head %}
<style>
/* Photo Verification Toggle */
#photo_verification_enabled:checked+.toggle-slider {
background: var(--success-color, #10b981);
}
.toggle-slider::before {
content: "";
position: absolute;
height: 20px;
width: 20px;
left: 4px;
bottom: 4px;
background: white;
border-radius: 50%;
transition: 0.3s;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
#photo_verification_enabled:checked+.toggle-slider::before {
transform: translateX(24px);
}
</style>
<style>
:root {
--primary-color: #2563eb;
@@ -289,7 +312,7 @@
background: var(--primary-color);
cursor: pointer;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.range-input-group input[type="range"]::-moz-range-thumb {
@@ -299,7 +322,7 @@
background: var(--primary-color);
cursor: pointer;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.range-value {
@@ -579,9 +602,17 @@
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
/* Toast notification styles */
@@ -632,19 +663,10 @@
<i class="fas fa-tag"></i>
QR Code Name <span style="color: var(--error-color)">*</span>
</label>
<input
type="text"
id="name"
name="name"
required
value="{{ qr_code.name }}"
data-original="{{ qr_code.name }}"
placeholder="e.g., Main Office Entrance, Conference Room A"
maxlength="100"
/>
<small class="form-help"
>A unique name to identify this QR code</small
>
<input type="text" id="name" name="name" required value="{{ qr_code.name }}"
data-original="{{ qr_code.name }}" placeholder="e.g., Main Office Entrance, Conference Room A"
maxlength="100" />
<small class="form-help">A unique name to identify this QR code</small>
<div class="character-counter">
<span id="nameCounter">{{ qr_code.name|length }}/100</span>
</div>
@@ -658,8 +680,10 @@
<span style="color: var(--error-color)">*</span>
</label>
<select id="qr_type" name="qr_type" class="form-control" onchange="toggleQRTypeSection()">
<option value="standard" {% if qr_code.qr_type != 'dynamic' %}selected{% endif %}>Standard — Fixed Location</option>
<option value="dynamic" {% if qr_code.qr_type == 'dynamic' %}selected{% endif %}>Dynamic — Employee Selects Location</option>
<option value="standard" {% if qr_code.qr_type !='dynamic' %}selected{% endif %}>Standard — Fixed Location
</option>
<option value="dynamic" {% if qr_code.qr_type=='dynamic' %}selected{% endif %}>Dynamic — Employee Selects
Location</option>
</select>
<small class="form-help">
<strong>Standard:</strong> employee checks in at one fixed location.<br>
@@ -669,28 +693,21 @@
<!-- ===== END ADDED ===== -->
<!-- ADDED: wrapper to hide/show for standard QR only -->
<div id="standardLocationNameGroup" {% if qr_code.qr_type == 'dynamic' %}style="display:none;"{% endif %}>
<div id="standardLocationNameGroup" {% if qr_code.qr_type=='dynamic' %}style="display:none;" {% endif %}>
<div class="form-group">
<label for="location">
<i class="fas fa-map-marker-alt"></i>
Location Name <span style="color: var(--error-color)">*</span>
</label>
<input
type="text"
id="location"
name="location"
{% if qr_code.qr_type != 'dynamic' %}required{% endif %}
<input type="text" id="location" name="location" {% if qr_code.qr_type !='dynamic' %}required{% endif %}
value="{{ qr_code.location if qr_code.qr_type != 'dynamic' else '' }}"
data-original="{{ qr_code.location }}"
placeholder="e.g., Corporate Headquarters, Branch Office"
maxlength="100"
/>
<small class="form-help"
>The name of the physical location where this QR code will be
used</small
>
data-original="{{ qr_code.location }}" placeholder="e.g., Corporate Headquarters, Branch Office"
maxlength="100" />
<small class="form-help">The name of the physical location where this QR code will be
used</small>
<div class="character-counter">
<span id="locationCounter">{{ qr_code.location|length if qr_code.qr_type != 'dynamic' else '0' }}/100</span>
<span id="locationCounter">{{ qr_code.location|length if qr_code.qr_type != 'dynamic' else '0'
}}/100</span>
</div>
</div>
</div><!-- end standardLocationNameGroup -->
@@ -700,10 +717,11 @@
<i class="fas fa-folder"></i>
Project (Optional)
</label>
<select id="project_id" name="project_id" class="form-select" data-original="{{ qr_code.project_id or '' }}">
<select id="project_id" name="project_id" class="form-select"
data-original="{{ qr_code.project_id or '' }}">
<option value="">Select a project (Optional)</option>
{% for project in projects %}
<option value="{{ project.id }}" {% if qr_code.project_id == project.id %}selected{% endif %}>
<option value="{{ project.id }}" {% if qr_code.project_id==project.id %}selected{% endif %}>
{{ project.name }} ({{ project.qr_count }} QR codes)
</option>
{% endfor %}
@@ -716,7 +734,7 @@
</div>
<!-- Location Details Section — hidden when Dynamic QR type is selected -->
<div id="standardLocationDetailsSection" {% if qr_code.qr_type == 'dynamic' %}style="display:none;"{% endif %}>
<div id="standardLocationDetailsSection" {% if qr_code.qr_type=='dynamic' %}style="display:none;" {% endif %}>
<div class="form-section">
<div class="section-header">
<h3>
@@ -732,19 +750,12 @@
Complete Address
<span style="color: var(--error-color)">*</span>
</label>
<textarea
id="location_address"
name="location_address"
required
<textarea id="location_address" name="location_address" required
data-original="{{ qr_code.location_address }}"
placeholder="Enter the full address including street, city, state, and ZIP code"
rows="3"
maxlength="500"
>{{ qr_code.location_address }}</textarea>
<small class="form-help"
>Include all address details for accurate location
identification</small
>
placeholder="Enter the full address including street, city, state, and ZIP code" rows="3"
maxlength="500">{{ qr_code.location_address }}</textarea>
<small class="form-help">Include all address details for accurate location
identification</small>
<div class="character-counter">
<span id="addressCounter">{{ qr_code.location_address|length }}/500</span>
</div>
@@ -781,20 +792,12 @@
</div>
<div class="coordinates-actions">
<button
type="button"
class="btn-coordinate"
id="geocodeBtn"
>
<button type="button" class="btn-coordinate" id="geocodeBtn">
<i class="fas fa-search-location"></i>
{% if qr_code.has_coordinates %}Update{% else %}Get{% endif %} Coordinates
</button>
<button
type="button"
class="btn-coordinate"
id="clearCoordinatesBtn"
style="display: {% if qr_code.has_coordinates %}inline-flex{% else %}none{% endif %};"
>
<button type="button" class="btn-coordinate" id="clearCoordinatesBtn"
style="display: {% if qr_code.has_coordinates %}inline-flex{% else %}none{% endif %};">
<i class="fas fa-times"></i>
Clear
</button>
@@ -816,24 +819,52 @@
Event or Purpose
<span style="color: var(--error-color)">*</span>
</label>
<select
id="location_event"
name="location_event"
required
class="form-control"
data-original="{{ qr_code.location_event }}"
>
<select id="location_event" name="location_event" required class="form-control"
data-original="{{ qr_code.location_event }}">
<option value="">Select Event Type</option>
<option value="Check In" {% if qr_code.location_event == 'Check In' %}selected{% endif %}>Check In</option>
<option value="Check Out" {% if qr_code.location_event == 'Check Out' %}selected{% endif %}>Check Out</option>
<option value="Check In" {% if qr_code.location_event=='Check In' %}selected{% endif %}>Check In</option>
<option value="Check Out" {% if qr_code.location_event=='Check Out' %}selected{% endif %}>Check Out
</option>
</select>
<small class="form-help"
>Select the event type for this QR code</small
>
<small class="form-help">Select the event type for this QR code</small>
</div>
</div>
<!-- Photo Verification Toggle -->
<div class="form-section">
<div class="section-header">
<h3>
<i class="fas fa-camera"></i>
Photo Verification
</h3>
<p>Require a photo when employee check-in location is too far from the QR code</p>
</div>
<div class="form-group">
<label class="toggle-label" for="photo_verification_enabled"
style="display:flex;align-items:center;gap:0.75rem;cursor:pointer;">
<div class="toggle-switch" id="photoVerifyToggle"
style="position:relative;display:inline-block;width:52px;height:28px;">
<input type="checkbox" id="photo_verification_enabled" name="photo_verification_enabled" value="1" {% if
qr_code.photo_verification_enabled !=False %}checked{% endif %}
style="opacity:0;width:0;height:0;position:absolute;">
<span class="toggle-slider"
style="position:absolute;cursor:pointer;inset:0;background:#cbd5e1;border-radius:28px;transition:0.3s;"></span>
</div>
<span id="photoVerifyLabel"
style="font-weight:600;font-size:0.875rem;
{% if qr_code.photo_verification_enabled != False %}color:var(--success-color,#10b981){% else %}color:var(--error-color,#ef4444){% endif %}">
{% if qr_code.photo_verification_enabled != False %}Enabled{% else %}Disabled{% endif %}
</span>
</label>
<input type="hidden" name="photo_verification_enabled" id="photo_verification_hidden"
value="{% if qr_code.photo_verification_enabled != False %}1{% else %}0{% endif %}">
<small class="form-help">When disabled, photo verification is skipped for this QR code regardless of
distance</small>
</div>
</div>
<!-- QR Code Customization Section -->
<div class="form-section">
<div class="section-header">
@@ -853,13 +884,9 @@
<select id="style_id" name="style_id" onchange="applyStylePreset()">
<option value="">Custom Style</option>
{% for style in styles %}
<option
value="{{ style.id }}"
{% if qr_code.style_id == style.id %}selected{% endif %}
data-fill="{{ style.fill_color }}"
data-back="{{ style.back_color }}"
data-box-size="{{ style.box_size }}"
data-border="{{ style.border }}"
<option value="{{ style.id }}" {% if qr_code.style_id==style.id %}selected{% endif %}
data-fill="{{ style.fill_color }}" data-back="{{ style.back_color }}"
data-box-size="{{ style.box_size }}" data-border="{{ style.border }}"
data-error-correction="{{ style.error_correction }}">
{{ style.name }}
</option>
@@ -876,21 +903,10 @@
QR Code Color
</label>
<div class="color-input-group">
<input
type="color"
id="fill_color"
name="fill_color"
value="{{ qr_code.fill_color or '#000000' }}"
onchange="updatePreview()"
/>
<input
type="text"
id="fill_color_text"
value="{{ qr_code.fill_color or '#000000' }}"
pattern="^#[0-9A-Fa-f]{6}$"
placeholder="#000000"
onchange="syncColorInput('fill')"
/>
<input type="color" id="fill_color" name="fill_color" value="{{ qr_code.fill_color or '#000000' }}"
onchange="updatePreview()" />
<input type="text" id="fill_color_text" value="{{ qr_code.fill_color or '#000000' }}"
pattern="^#[0-9A-Fa-f]{6}$" placeholder="#000000" onchange="syncColorInput('fill')" />
</div>
<span class="form-help">Color of the QR code modules</span>
</div>
@@ -901,21 +917,10 @@
Background Color
</label>
<div class="color-input-group">
<input
type="color"
id="back_color"
name="back_color"
value="{{ qr_code.back_color or '#FFFFFF' }}"
onchange="updatePreview()"
/>
<input
type="text"
id="back_color_text"
value="{{ qr_code.back_color or '#FFFFFF' }}"
pattern="^#[0-9A-Fa-f]{6}$"
placeholder="#FFFFFF"
onchange="syncColorInput('back')"
/>
<input type="color" id="back_color" name="back_color" value="{{ qr_code.back_color or '#FFFFFF' }}"
onchange="updatePreview()" />
<input type="text" id="back_color_text" value="{{ qr_code.back_color or '#FFFFFF' }}"
pattern="^#[0-9A-Fa-f]{6}$" placeholder="#FFFFFF" onchange="syncColorInput('back')" />
</div>
<span class="form-help">Background color of the QR code</span>
</div>
@@ -929,15 +934,8 @@
Module Size
</label>
<div class="range-input-group">
<input
type="range"
id="box_size"
name="box_size"
min="5"
max="20"
value="{{ qr_code.box_size or 10 }}"
oninput="updateRangeValue('box_size'); updatePreview()"
/>
<input type="range" id="box_size" name="box_size" min="5" max="20" value="{{ qr_code.box_size or 10 }}"
oninput="updateRangeValue('box_size'); updatePreview()" />
<span class="range-value" id="box_size_value">{{ qr_code.box_size or 10 }}px</span>
</div>
<span class="form-help">Size of each QR code module (affects overall size)</span>
@@ -949,15 +947,8 @@
Border Size
</label>
<div class="range-input-group">
<input
type="range"
id="border"
name="border"
min="1"
max="10"
value="{{ qr_code.border or 4 }}"
oninput="updateRangeValue('border'); updatePreview()"
/>
<input type="range" id="border" name="border" min="1" max="10" value="{{ qr_code.border or 4 }}"
oninput="updateRangeValue('border'); updatePreview()" />
<span class="range-value" id="border_value">{{ qr_code.border or 4 }} modules</span>
</div>
<span class="form-help">White border around the QR code</span>
@@ -971,10 +962,11 @@
Error Correction Level
</label>
<select id="error_correction" name="error_correction" onchange="updatePreview()">
<option value="L" {% if qr_code.error_correction == 'L' %}selected{% endif %}>Low (7% recovery)</option>
<option value="M" {% if qr_code.error_correction == 'M' %}selected{% endif %}>Medium (15% recovery)</option>
<option value="Q" {% if qr_code.error_correction == 'Q' %}selected{% endif %}>Quartile (25% recovery)</option>
<option value="H" {% if qr_code.error_correction == 'H' %}selected{% endif %}>High (30% recovery)</option>
<option value="L" {% if qr_code.error_correction=='L' %}selected{% endif %}>Low (7% recovery)</option>
<option value="M" {% if qr_code.error_correction=='M' %}selected{% endif %}>Medium (15% recovery)</option>
<option value="Q" {% if qr_code.error_correction=='Q' %}selected{% endif %}>Quartile (25% recovery)
</option>
<option value="H" {% if qr_code.error_correction=='H' %}selected{% endif %}>High (30% recovery)</option>
</select>
<span class="form-help">Higher levels allow QR code to work even if partially damaged</span>
</div>
@@ -1009,24 +1001,12 @@
</div>
<!-- Hidden coordinate fields for form submission -->
<input
type="hidden"
id="address_latitude"
name="address_latitude"
value="{% if qr_code.has_coordinates %}{{ qr_code.address_latitude }}{% endif %}"
/>
<input
type="hidden"
id="address_longitude"
name="address_longitude"
value="{% if qr_code.has_coordinates %}{{ qr_code.address_longitude }}{% endif %}"
/>
<input
type="hidden"
id="coordinate_accuracy"
name="coordinate_accuracy"
value="{% if qr_code.has_coordinates %}{{ qr_code.coordinate_accuracy }}{% endif %}"
/>
<input type="hidden" id="address_latitude" name="address_latitude"
value="{% if qr_code.has_coordinates %}{{ qr_code.address_latitude }}{% endif %}" />
<input type="hidden" id="address_longitude" name="address_longitude"
value="{% if qr_code.has_coordinates %}{{ qr_code.address_longitude }}{% endif %}" />
<input type="hidden" id="coordinate_accuracy" name="coordinate_accuracy"
value="{% if qr_code.has_coordinates %}{{ qr_code.coordinate_accuracy }}{% endif %}" />
<!-- Form Actions -->
<div class="form-actions">
@@ -1111,9 +1091,11 @@
<div class="detail-row">
<strong>Colors:</strong>
<span>
<span style="display: inline-block; width: 12px; height: 12px; background: {{ qr_code.fill_color or '#000000' }}; border-radius: 2px; margin-right: 4px;"></span>
<span
style="display: inline-block; width: 12px; height: 12px; background: {{ qr_code.fill_color or '#000000' }}; border-radius: 2px; margin-right: 4px;"></span>
on
<span style="display: inline-block; width: 12px; height: 12px; background: {{ qr_code.back_color or '#FFFFFF' }}; border: 1px solid #ccc; border-radius: 2px; margin-left: 4px;"></span>
<span
style="display: inline-block; width: 12px; height: 12px; background: {{ qr_code.back_color or '#FFFFFF' }}; border: 1px solid #ccc; border-radius: 2px; margin-left: 4px;"></span>
</span>
</div>
</div>
@@ -1420,7 +1402,7 @@
}
// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('DOMContentLoaded', function () {
// Set up character counters
document.getElementById('name').addEventListener('input', () => {
updateCharacterCount('name', 'nameCounter', 100);
@@ -1446,7 +1428,7 @@
// Add form validation
const form = document.getElementById('editQRForm');
if (form) {
form.addEventListener('submit', function(e) {
form.addEventListener('submit', function (e) {
if (!validateQRCustomization()) {
e.preventDefault();
return false;
@@ -1455,12 +1437,12 @@
}
// Add color input synchronization
document.getElementById('fill_color').addEventListener('change', function() {
document.getElementById('fill_color').addEventListener('change', function () {
document.getElementById('fill_color_text').value = this.value.toUpperCase();
updatePreview();
});
document.getElementById('back_color').addEventListener('change', function() {
document.getElementById('back_color').addEventListener('change', function () {
document.getElementById('back_color_text').value = this.value.toUpperCase();
updatePreview();
});
@@ -1469,7 +1451,7 @@
const geocodeBtn = document.getElementById('geocodeBtn');
const clearBtn = document.getElementById('clearCoordinatesBtn');
geocodeBtn.addEventListener('click', function() {
geocodeBtn.addEventListener('click', function () {
const address = document.getElementById('location_address').value.trim();
if (address.length > 10) {
geocodeAddress(address);
@@ -1487,26 +1469,42 @@
function toggleQRTypeSection() {
var type = document.getElementById('qr_type').value;
var stdName = document.getElementById('standardLocationNameGroup');
var stdDetails= document.getElementById('standardLocationDetailsSection');
var stdDetails = document.getElementById('standardLocationDetailsSection');
var locInput = document.getElementById('location');
var addrInput = document.getElementById('location_address');
if (type === 'dynamic') {
if (stdName) stdName.style.display = 'none';
if (stdDetails)stdDetails.style.display = 'none';
if (stdDetails) stdDetails.style.display = 'none';
if (locInput) locInput.removeAttribute('required');
if (addrInput) addrInput.removeAttribute('required');
} else {
if (stdName) stdName.style.display = 'block';
if (stdDetails)stdDetails.style.display = 'block';
if (stdDetails) stdDetails.style.display = 'block';
if (locInput) locInput.setAttribute('required', '');
if (addrInput) addrInput.setAttribute('required', '');
}
}
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('DOMContentLoaded', function () {
toggleQRTypeSection();
});
</script>
<!-- ===== END Dynamic QR Type Toggle ===== -->
<script>
// Photo Verification Toggle
document.addEventListener('DOMContentLoaded', function () {
var cb = document.getElementById('photo_verification_enabled');
var hidden = document.getElementById('photo_verification_hidden');
var label = document.getElementById('photoVerifyLabel');
if (cb) {
cb.addEventListener('change', function () {
hidden.value = cb.checked ? '1' : '0';
label.textContent = cb.checked ? 'Enabled' : 'Disabled';
label.style.color = cb.checked ? 'var(--success-color, #10b981)' : 'var(--error-color, #ef4444)';
});
}
});
</script>
<!-- ===== END Photo Verification Toggle ===== -->
{% endblock %}
tools/migration_photo_verification_toggle.py
+122
View File
@@ -0,0 +1,122 @@
"""
migration_photo_verification_toggle.py
=======================================
Adds `photo_verification_enabled` column to the `qr_codes` table.
Uses pymysql directly to avoid SQLAlchemy ORM loading the model
(which would fail if the column doesn't exist yet).
Default: 1 (True) for all existing rows — preserves current behaviour.
Run once on each server (LT and GOV):
python3 tools/migration_photo_verification_toggle.py
Safe to re-run — skips if column already exists.
"""
import os, sys, re
sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
from dotenv import load_dotenv
load_dotenv()
import pymysql
TABLE = 'qr_codes'
COLUMN = 'photo_verification_enabled'
def parse_db_url(url):
"""
Parse DATABASE_URL robustly using regex to handle special characters
(including @ or : ) in the password.
Supports:
mysql+pymysql://user:pass@host:port/dbname
mysql+pymysql://user:pass@host/dbname
"""
# Strip driver prefix
url = re.sub(r'^mysql\+pymysql://', '', url)
url = re.sub(r'^mysql://', '', url)
# Split credentials from host/db on the LAST @ before the host
# Pattern: user:password@host[:port]/dbname[?...]
m = re.match(
r'^(?P<user>[^:]+):(?P<password>.+)@(?P<host>[^@:/]+)(?::(?P<port>\d+))?/(?P<db>[^?]+)',
url
)
if not m:
print(f"[ERROR] Could not parse DATABASE_URL. Raw (redacted): {url[:30]}...")
sys.exit(1)
return {
'host': m.group('host'),
'port': int(m.group('port')) if m.group('port') else 3306,
'user': m.group('user'),
'password': m.group('password'),
'database': m.group('db'),
}
def get_connection():
db_url = os.environ.get('DATABASE_URL', '')
if not db_url:
print("[ERROR] DATABASE_URL not set in .env")
sys.exit(1)
params = parse_db_url(db_url)
return pymysql.connect(
host=params['host'],
port=params['port'],
user=params['user'],
password=params['password'],
database=params['database'],
charset='utf8mb4',
autocommit=False,
)
def run():
conn = get_connection()
try:
with conn.cursor() as cur:
# Check if column already exists
cur.execute(
"SELECT COUNT(*) FROM information_schema.COLUMNS "
"WHERE TABLE_SCHEMA = DATABASE() "
f"AND TABLE_NAME = '{TABLE}' "
f"AND COLUMN_NAME = '{COLUMN}'"
)
exists = cur.fetchone()[0] > 0
if exists:
print(f"[SKIP] Column '{COLUMN}' already exists on '{TABLE}'. Nothing to do.")
return
print(f"[ADD] Adding column '{COLUMN}' to '{TABLE}' ...")
cur.execute(
f"ALTER TABLE `{TABLE}` "
f"ADD COLUMN `{COLUMN}` TINYINT(1) NOT NULL DEFAULT 1"
)
conn.commit()
# Verify
cur.execute(
"SELECT COUNT(*) FROM information_schema.COLUMNS "
"WHERE TABLE_SCHEMA = DATABASE() "
f"AND TABLE_NAME = '{TABLE}' "
f"AND COLUMN_NAME = '{COLUMN}'"
)
if cur.fetchone()[0] > 0:
print(f"[OK] Column '{COLUMN}' added. All existing rows default to 1 (enabled).")
else:
print(f"[FAIL] Column was not created — check DB permissions.")
sys.exit(1)
finally:
conn.close()
if __name__ == '__main__':
run()