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

04/15 Updated Editing QR code page, QR code name is unchangeable

Browse Source
This commit is contained in:
nngo
2026-04-15 15:38:51 -04:00
parent 07c540c7f9
commit 7bee3bfedc
2 changed files with 228 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files
routes/qr_codes.py
+5 -3
View File
@@ -454,9 +454,11 @@ def edit_qr_code(qr_id):
'back_color': getattr(qr_code, 'back_color', '#FFFFFF') 'back_color': getattr(qr_code, 'back_color', '#FFFFFF')
} }
# Update QR code fields # QR code name is immutable after creation — always retain the existing value.
new_name = request.form['name'] # The name field in the edit form is rendered read-only; this guard ensures
qr_code.name = new_name # the constraint is enforced even if the form is submitted programmatically.
new_name = qr_code.name # do not accept name changes from the form
# qr_code.name is intentionally NOT reassigned here
# --- ADDED: for dynamic QR codes, location/address are auto-managed --- # --- ADDED: for dynamic QR codes, location/address are auto-managed ---
new_qr_type = request.form.get('qr_type', 'standard') new_qr_type = request.form.get('qr_type', 'standard')
templates/edit_qr_code.html
+179 -254
View File
@@ -289,7 +289,7 @@
background: var(--primary-color); background: var(--primary-color);
cursor: pointer; cursor: pointer;
border: 2px solid white; 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 { .range-input-group input[type="range"]::-moz-range-thumb {
@@ -299,7 +299,7 @@
background: var(--primary-color); background: var(--primary-color);
cursor: pointer; cursor: pointer;
border: 2px solid white; 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 { .range-value {
@@ -579,9 +579,17 @@
} }
@keyframes pulse { @keyframes pulse {
0% { transform: scale(1); } 0% {
50% { transform: scale(1.05); } transform: scale(1);
100% { transform: scale(1); } }
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
} }
/* Toast notification styles */ /* Toast notification styles */
@@ -629,24 +637,19 @@
<div class="form-group"> <div class="form-group">
<label for="name"> <label for="name">
<i class="fas fa-tag"></i> <i class="fas fa-tag"></i>
QR Code Name <span style="color: var(--error-color)">*</span> QR Code Name
<span
style="margin-left: 0.4rem; font-size: 0.75rem; font-weight: 500; color: var(--gray-500); background: var(--gray-100); border: 1px solid var(--gray-300); border-radius: 4px; padding: 0.1rem 0.4rem;">
<i class="fas fa-lock" style="font-size: 0.7rem;"></i> Read-only
</span>
</label> </label>
<input <input type="text" id="name" name="name" readonly value="{{ qr_code.name }}"
type="text"
id="name"
name="name"
required
value="{{ qr_code.name }}"
data-original="{{ qr_code.name }}" data-original="{{ qr_code.name }}"
placeholder="e.g., Main Office Entrance, Conference Room A" style="background-color: var(--gray-100); color: var(--gray-600); cursor: not-allowed; border-color: var(--gray-300);" />
maxlength="100" <small class="form-help">
/> <i class="fas fa-info-circle"></i>
<small class="form-help" The QR code name cannot be changed after creation.
>A unique name to identify this QR code</small </small>
>
<div class="character-counter">
<span id="nameCounter">{{ qr_code.name|length }}/100</span>
</div>
</div> </div>
<!-- ===== ADDED: QR Code Type selector ===== --> <!-- ===== ADDED: QR Code Type selector ===== -->
@@ -657,8 +660,10 @@
<span style="color: var(--error-color)">*</span> <span style="color: var(--error-color)">*</span>
</label> </label>
<select id="qr_type" name="qr_type" class="form-control" onchange="toggleQRTypeSection()"> <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="standard" {% if qr_code.qr_type !='dynamic' %}selected{% endif %}>Standard — Fixed Location
<option value="dynamic" {% if qr_code.qr_type == 'dynamic' %}selected{% endif %}>Dynamic — Employee Selects Location</option> </option>
<option value="dynamic" {% if qr_code.qr_type=='dynamic' %}selected{% endif %}>Dynamic — Employee Selects
Location</option>
</select> </select>
<small class="form-help"> <small class="form-help">
<strong>Standard:</strong> employee checks in at one fixed location.<br> <strong>Standard:</strong> employee checks in at one fixed location.<br>
@@ -668,30 +673,23 @@
<!-- ===== END ADDED ===== --> <!-- ===== END ADDED ===== -->
<!-- ADDED: wrapper to hide/show for standard QR only --> <!-- 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"> <div class="form-group">
<label for="location"> <label for="location">
<i class="fas fa-map-marker-alt"></i> <i class="fas fa-map-marker-alt"></i>
Location Name <span style="color: var(--error-color)">*</span> Location Name <span style="color: var(--error-color)">*</span>
</label> </label>
<input <input type="text" id="location" name="location" {% if qr_code.qr_type !='dynamic' %}required{% endif %}
type="text" value="{{ qr_code.location if qr_code.qr_type != 'dynamic' else '' }}"
id="location" data-original="{{ qr_code.location }}" placeholder="e.g., Corporate Headquarters, Branch Office"
name="location" maxlength="100" />
{% if qr_code.qr_type != 'dynamic' %}required{% endif %} <small class="form-help">The name of the physical location where this QR code will be
value="{{ qr_code.location if qr_code.qr_type != 'dynamic' else '' }}" used</small>
data-original="{{ qr_code.location }}" <div class="character-counter">
placeholder="e.g., Corporate Headquarters, Branch Office" <span id="locationCounter">{{ qr_code.location|length if qr_code.qr_type != 'dynamic' else '0'
maxlength="100" }}/100</span>
/> </div>
<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>
</div> </div>
</div>
</div><!-- end standardLocationNameGroup --> </div><!-- end standardLocationNameGroup -->
<div class="form-group"> <div class="form-group">
@@ -699,10 +697,11 @@
<i class="fas fa-folder"></i> <i class="fas fa-folder"></i>
Project (Optional) Project (Optional)
</label> </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> <option value="">Select a project (Optional)</option>
{% for project in projects %} {% 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) {{ project.name }} ({{ project.qr_count }} QR codes)
</option> </option>
{% endfor %} {% endfor %}
@@ -715,96 +714,81 @@
</div> </div>
<!-- Location Details Section — hidden when Dynamic QR type is selected --> <!-- 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="form-section">
<div class="section-header"> <div class="section-header">
<h3> <h3>
<i class="fas fa-building"></i> <i class="fas fa-building"></i>
Location Details Location Details
</h3> </h3>
<p>Update the complete address and event information</p> <p>Update the complete address and event information</p>
</div>
<div class="form-group">
<label for="location_address">
<i class="fas fa-home"></i>
Complete Address
<span style="color: var(--error-color)">*</span>
</label>
<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
>
<div class="character-counter">
<span id="addressCounter">{{ qr_code.location_address|length }}/500</span>
</div> </div>
<!-- Address Coordinates Section --> <div class="form-group">
<div class="coordinates-section" id="coordinatesSection"> <label for="location_address">
<div class="coordinates-header"> <i class="fas fa-home"></i>
<i class="fas fa-crosshairs"></i> Complete Address
<h4>Address Coordinates</h4> <span style="color: var(--error-color)">*</span>
</label>
<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>
<div class="character-counter">
<span id="addressCounter">{{ qr_code.location_address|length }}/500</span>
</div> </div>
<div class="coordinates-content"> <!-- Address Coordinates Section -->
<div class="coordinate-display"> <div class="coordinates-section" id="coordinatesSection">
<div class="coordinate-info"> <div class="coordinates-header">
<div class="coordinate-value" id="latitudeDisplay"> <i class="fas fa-crosshairs"></i>
{% if qr_code.has_coordinates %} <h4>Address Coordinates</h4>
{{ "%.6f"|format(qr_code.address_latitude) }}
{% else %}
---.----------
{% endif %}
</div>
<div class="coordinate-label">Latitude</div>
</div>
<div class="coordinate-info">
<div class="coordinate-value" id="longitudeDisplay">
{% if qr_code.has_coordinates %}
{{ "%.6f"|format(qr_code.address_longitude) }}
{% else %}
---.----------
{% endif %}
</div>
<div class="coordinate-label">Longitude</div>
</div>
</div> </div>
<div class="coordinates-actions"> <div class="coordinates-content">
<button <div class="coordinate-display">
type="button" <div class="coordinate-info">
class="btn-coordinate" <div class="coordinate-value" id="latitudeDisplay">
id="geocodeBtn" {% if qr_code.has_coordinates %}
> {{ "%.6f"|format(qr_code.address_latitude) }}
<i class="fas fa-search-location"></i> {% else %}
{% if qr_code.has_coordinates %}Update{% else %}Get{% endif %} Coordinates ---.----------
</button> {% endif %}
<button </div>
type="button" <div class="coordinate-label">Latitude</div>
class="btn-coordinate" </div>
id="clearCoordinatesBtn" <div class="coordinate-info">
style="display: {% if qr_code.has_coordinates %}inline-flex{% else %}none{% endif %};" <div class="coordinate-value" id="longitudeDisplay">
> {% if qr_code.has_coordinates %}
<i class="fas fa-times"></i> {{ "%.6f"|format(qr_code.address_longitude) }}
Clear {% else %}
</button> ---.----------
</div> {% endif %}
</div>
<div class="coordinate-label">Longitude</div>
</div>
</div>
<div id="coordinateStatus"></div> <div class="coordinates-actions">
<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 %};">
<i class="fas fa-times"></i>
Clear
</button>
</div>
<div id="coordinateStatus"></div>
</div>
</div> </div>
</div> </div>
</div>
</div> </div>
</div><!-- end standardLocationDetailsSection --> </div><!-- end standardLocationDetailsSection -->
<!-- Event or Purpose — always visible for both Standard and Dynamic QR --> <!-- Event or Purpose — always visible for both Standard and Dynamic QR -->
@@ -815,20 +799,14 @@
Event or Purpose Event or Purpose
<span style="color: var(--error-color)">*</span> <span style="color: var(--error-color)">*</span>
</label> </label>
<select <select id="location_event" name="location_event" required class="form-control"
id="location_event" data-original="{{ qr_code.location_event }}">
name="location_event"
required
class="form-control"
data-original="{{ qr_code.location_event }}"
>
<option value="">Select Event Type</option> <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 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 Out" {% if qr_code.location_event=='Check Out' %}selected{% endif %}>Check Out
</option>
</select> </select>
<small class="form-help" <small class="form-help">Select the event type for this QR code</small>
>Select the event type for this QR code</small
>
</div> </div>
</div> </div>
@@ -852,13 +830,9 @@
<select id="style_id" name="style_id" onchange="applyStylePreset()"> <select id="style_id" name="style_id" onchange="applyStylePreset()">
<option value="">Custom Style</option> <option value="">Custom Style</option>
{% for style in styles %} {% for style in styles %}
<option <option value="{{ style.id }}" {% if qr_code.style_id==style.id %}selected{% endif %}
value="{{ style.id }}" data-fill="{{ style.fill_color }}" data-back="{{ style.back_color }}"
{% if qr_code.style_id == style.id %}selected{% endif %} data-box-size="{{ style.box_size }}" data-border="{{ style.border }}"
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 }}"> data-error-correction="{{ style.error_correction }}">
{{ style.name }} {{ style.name }}
</option> </option>
@@ -875,21 +849,10 @@
QR Code Color QR Code Color
</label> </label>
<div class="color-input-group"> <div class="color-input-group">
<input <input type="color" id="fill_color" name="fill_color" value="{{ qr_code.fill_color or '#000000' }}"
type="color" onchange="updatePreview()" />
id="fill_color" <input type="text" id="fill_color_text" value="{{ qr_code.fill_color or '#000000' }}"
name="fill_color" pattern="^#[0-9A-Fa-f]{6}$" placeholder="#000000" onchange="syncColorInput('fill')" />
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> </div>
<span class="form-help">Color of the QR code modules</span> <span class="form-help">Color of the QR code modules</span>
</div> </div>
@@ -900,21 +863,10 @@
Background Color Background Color
</label> </label>
<div class="color-input-group"> <div class="color-input-group">
<input <input type="color" id="back_color" name="back_color" value="{{ qr_code.back_color or '#FFFFFF' }}"
type="color" onchange="updatePreview()" />
id="back_color" <input type="text" id="back_color_text" value="{{ qr_code.back_color or '#FFFFFF' }}"
name="back_color" pattern="^#[0-9A-Fa-f]{6}$" placeholder="#FFFFFF" onchange="syncColorInput('back')" />
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> </div>
<span class="form-help">Background color of the QR code</span> <span class="form-help">Background color of the QR code</span>
</div> </div>
@@ -928,15 +880,8 @@
Module Size Module Size
</label> </label>
<div class="range-input-group"> <div class="range-input-group">
<input <input type="range" id="box_size" name="box_size" min="5" max="20" value="{{ qr_code.box_size or 10 }}"
type="range" oninput="updateRangeValue('box_size'); updatePreview()" />
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> <span class="range-value" id="box_size_value">{{ qr_code.box_size or 10 }}px</span>
</div> </div>
<span class="form-help">Size of each QR code module (affects overall size)</span> <span class="form-help">Size of each QR code module (affects overall size)</span>
@@ -948,15 +893,8 @@
Border Size Border Size
</label> </label>
<div class="range-input-group"> <div class="range-input-group">
<input <input type="range" id="border" name="border" min="1" max="10" value="{{ qr_code.border or 4 }}"
type="range" oninput="updateRangeValue('border'); updatePreview()" />
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> <span class="range-value" id="border_value">{{ qr_code.border or 4 }} modules</span>
</div> </div>
<span class="form-help">White border around the QR code</span> <span class="form-help">White border around the QR code</span>
@@ -970,10 +908,11 @@
Error Correction Level Error Correction Level
</label> </label>
<select id="error_correction" name="error_correction" onchange="updatePreview()"> <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="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="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="Q" {% if qr_code.error_correction=='Q' %}selected{% endif %}>Quartile (25% recovery)
<option value="H" {% if qr_code.error_correction == 'H' %}selected{% endif %}>High (30% recovery)</option> </option>
<option value="H" {% if qr_code.error_correction=='H' %}selected{% endif %}>High (30% recovery)</option>
</select> </select>
<span class="form-help">Higher levels allow QR code to work even if partially damaged</span> <span class="form-help">Higher levels allow QR code to work even if partially damaged</span>
</div> </div>
@@ -1008,24 +947,12 @@
</div> </div>
<!-- Hidden coordinate fields for form submission --> <!-- Hidden coordinate fields for form submission -->
<input <input type="hidden" id="address_latitude" name="address_latitude"
type="hidden" value="{% if qr_code.has_coordinates %}{{ qr_code.address_latitude }}{% endif %}" />
id="address_latitude" <input type="hidden" id="address_longitude" name="address_longitude"
name="address_latitude" value="{% if qr_code.has_coordinates %}{{ qr_code.address_longitude }}{% endif %}" />
value="{% if qr_code.has_coordinates %}{{ qr_code.address_latitude }}{% 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_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 --> <!-- Form Actions -->
<div class="form-actions"> <div class="form-actions">
@@ -1110,9 +1037,11 @@
<div class="detail-row"> <div class="detail-row">
<strong>Colors:</strong> <strong>Colors:</strong>
<span> <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 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> </span>
</div> </div>
</div> </div>
@@ -1355,22 +1284,22 @@
}, },
body: JSON.stringify({ address: address }) body: JSON.stringify({ address: address })
}) })
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
if (data.success) { if (data.success) {
const lat = data.data.latitude; const lat = data.data.latitude;
const lng = data.data.longitude; const lng = data.data.longitude;
updateCoordinates(lat, lng, 'geocoded'); updateCoordinates(lat, lng, 'geocoded');
showStatus('success', data.message || 'Coordinates updated successfully'); showStatus('success', data.message || 'Coordinates updated successfully');
} else { } else {
showStatus('warning', data.message || 'No coordinates found for this address'); showStatus('warning', data.message || 'No coordinates found for this address');
} }
}) })
.catch(error => { .catch(error => {
console.error('Geocoding error:', error); console.error('Geocoding error:', error);
showStatus('error', 'Failed to get coordinates. Please try again.'); showStatus('error', 'Failed to get coordinates. Please try again.');
}); });
} }
function updateCoordinates(lat, lng, accuracy) { function updateCoordinates(lat, lng, accuracy) {
@@ -1418,12 +1347,8 @@
} }
// Initialize on page load // Initialize on page load
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function () {
// Set up character counters // Set up character counters
document.getElementById('name').addEventListener('input', () => {
updateCharacterCount('name', 'nameCounter', 100);
updateCurrentInfo();
});
document.getElementById('location').addEventListener('input', () => { document.getElementById('location').addEventListener('input', () => {
updateCharacterCount('location', 'locationCounter', 100); updateCharacterCount('location', 'locationCounter', 100);
updateCurrentInfo(); updateCurrentInfo();
@@ -1444,7 +1369,7 @@
// Add form validation // Add form validation
const form = document.getElementById('editQRForm'); const form = document.getElementById('editQRForm');
if (form) { if (form) {
form.addEventListener('submit', function(e) { form.addEventListener('submit', function (e) {
if (!validateQRCustomization()) { if (!validateQRCustomization()) {
e.preventDefault(); e.preventDefault();
return false; return false;
@@ -1453,12 +1378,12 @@
} }
// Add color input synchronization // 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(); document.getElementById('fill_color_text').value = this.value.toUpperCase();
updatePreview(); updatePreview();
}); });
document.getElementById('back_color').addEventListener('change', function() { document.getElementById('back_color').addEventListener('change', function () {
document.getElementById('back_color_text').value = this.value.toUpperCase(); document.getElementById('back_color_text').value = this.value.toUpperCase();
updatePreview(); updatePreview();
}); });
@@ -1467,7 +1392,7 @@
const geocodeBtn = document.getElementById('geocodeBtn'); const geocodeBtn = document.getElementById('geocodeBtn');
const clearBtn = document.getElementById('clearCoordinatesBtn'); const clearBtn = document.getElementById('clearCoordinatesBtn');
geocodeBtn.addEventListener('click', function() { geocodeBtn.addEventListener('click', function () {
const address = document.getElementById('location_address').value.trim(); const address = document.getElementById('location_address').value.trim();
if (address.length > 10) { if (address.length > 10) {
geocodeAddress(address); geocodeAddress(address);
@@ -1483,26 +1408,26 @@
<!-- ===== Dynamic QR Type Toggle ===== --> <!-- ===== Dynamic QR Type Toggle ===== -->
<script> <script>
function toggleQRTypeSection() { function toggleQRTypeSection() {
var type = document.getElementById('qr_type').value; var type = document.getElementById('qr_type').value;
var stdName = document.getElementById('standardLocationNameGroup'); var stdName = document.getElementById('standardLocationNameGroup');
var stdDetails= document.getElementById('standardLocationDetailsSection'); var stdDetails = document.getElementById('standardLocationDetailsSection');
var locInput = document.getElementById('location'); var locInput = document.getElementById('location');
var addrInput = document.getElementById('location_address'); var addrInput = document.getElementById('location_address');
if (type === 'dynamic') { if (type === 'dynamic') {
if (stdName) stdName.style.display = 'none'; if (stdName) stdName.style.display = 'none';
if (stdDetails)stdDetails.style.display = 'none'; if (stdDetails) stdDetails.style.display = 'none';
if (locInput) locInput.removeAttribute('required'); if (locInput) locInput.removeAttribute('required');
if (addrInput) addrInput.removeAttribute('required'); if (addrInput) addrInput.removeAttribute('required');
} else { } else {
if (stdName) stdName.style.display = 'block'; if (stdName) stdName.style.display = 'block';
if (stdDetails)stdDetails.style.display = 'block'; if (stdDetails) stdDetails.style.display = 'block';
if (locInput) locInput.setAttribute('required', ''); if (locInput) locInput.setAttribute('required', '');
if (addrInput) addrInput.setAttribute('required', ''); if (addrInput) addrInput.setAttribute('required', '');
} }
} }
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function () {
toggleQRTypeSection(); toggleQRTypeSection();
}); });
</script> </script>