Apr 06 2026: enhanced - update the dynamic QR code
This commit is contained in:
@@ -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 %}
|
||||
Reference in New Issue
Block a user