Apr 06 2026: enhanced - update the dynamic QR code

This commit is contained in:
2026-04-06 09:28:58 -04:00
parent 28bcd13c7f
commit f9aa07716b
12 changed files with 727 additions and 74 deletions
+60 -4
View File
@@ -649,6 +649,26 @@
</div>
</div>
<!-- ===== ADDED: QR Code Type selector ===== -->
<div class="form-group">
<label for="qr_type">
<i class="fas fa-qrcode"></i>
QR Code Type
<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>
</select>
<small class="form-help">
<strong>Standard:</strong> employee checks in at one fixed location.<br>
<strong>Dynamic:</strong> employee picks a location from a list when scanning.
</small>
</div>
<!-- ===== 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 class="form-group">
<label for="location">
<i class="fas fa-map-marker-alt"></i>
@@ -658,8 +678,8 @@
type="text"
id="location"
name="location"
required
value="{{ qr_code.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"
@@ -669,9 +689,10 @@
used</small
>
<div class="character-counter">
<span id="locationCounter">{{ qr_code.location|length }}/100</span>
<span id="locationCounter">{{ qr_code.location|length if qr_code.qr_type != 'dynamic' else '0' }}/100</span>
</div>
</div>
</div><!-- end standardLocationNameGroup -->
<div class="form-group">
<label for="project_id">
@@ -693,7 +714,8 @@
</div>
</div>
<!-- Location Details Section -->
<!-- Location Details Section — hidden when Dynamic QR type is selected -->
<div id="standardLocationDetailsSection" {% if qr_code.qr_type == 'dynamic' %}style="display:none;"{% endif %}>
<div class="form-section">
<div class="section-header">
<h3>
@@ -782,6 +804,11 @@
</div>
</div>
</div>
</div><!-- end standardLocationDetailsSection -->
<!-- Event or Purpose — always visible for both Standard and Dynamic QR -->
<div class="form-section">
<div class="form-group">
<label for="location_event">
<i class="fas fa-calendar-alt"></i>
@@ -803,6 +830,7 @@
>Select the event type for this QR code</small
>
</div>
</div>
<!-- QR Code Customization Section -->
@@ -1451,4 +1479,32 @@
clearBtn.addEventListener('click', clearCoordinates);
});
</script>
<!-- ===== Dynamic QR Type Toggle ===== -->
<script>
function toggleQRTypeSection() {
var type = document.getElementById('qr_type').value;
var stdName = document.getElementById('standardLocationNameGroup');
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 (locInput) locInput.removeAttribute('required');
if (addrInput) addrInput.removeAttribute('required');
} else {
if (stdName) stdName.style.display = 'block';
if (stdDetails)stdDetails.style.display = 'block';
if (locInput) locInput.setAttribute('required', '');
if (addrInput) addrInput.setAttribute('required', '');
}
}
document.addEventListener('DOMContentLoaded', function() {
toggleQRTypeSection();
});
</script>
<!-- ===== END Dynamic QR Type Toggle ===== -->
{% endblock %}