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

05/19 Implement Changing QR code name when editing

Browse Source
This commit is contained in:
nngo
2026-05-19 16:18:31 -04:00
parent 0a85fa8fe3
commit f81e3cea7f
1 changed files with 320 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/edit_qr_code.html
+320 -253
View File
@@ -4,10 +4,7 @@
{% block extra_head %} {% block extra_head %}
<style> <style>
/* Photo Verification Toggle */ /* Photo Verification Toggle */
#photo_verification_enabled:checked+.toggle-slider { #photo_verification_enabled:checked + .toggle-slider { background: var(--success-color, #10b981); }
background: var(--success-color, #10b981);
}
.toggle-slider::before { .toggle-slider::before {
content: ""; content: "";
position: absolute; position: absolute;
@@ -18,12 +15,9 @@
background: white; background: white;
border-radius: 50%; border-radius: 50%;
transition: 0.3s; transition: 0.3s;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
#photo_verification_enabled:checked+.toggle-slider::before {
transform: translateX(24px);
} }
#photo_verification_enabled:checked + .toggle-slider::before { transform: translateX(24px); }
</style> </style>
<style> <style>
:root { :root {
@@ -312,7 +306,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 {
@@ -322,7 +316,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 {
@@ -567,18 +561,18 @@
.form-row { .form-row {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.qr-preview-container { .qr-preview-container {
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
} }
.range-input-group { .range-input-group {
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.5rem;
align-items: stretch; align-items: stretch;
} }
.range-value { .range-value {
text-align: center; text-align: center;
} }
@@ -602,17 +596,9 @@
} }
@keyframes pulse { @keyframes pulse {
0% { 0% { transform: scale(1); }
transform: scale(1); 50% { transform: scale(1.05); }
} 100% { transform: scale(1); }
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
} }
/* Toast notification styles */ /* Toast notification styles */
@@ -647,7 +633,7 @@
</div> </div>
<form method="POST" class="form" id="editQRForm"> <form method="POST" class="form" id="editQRForm">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"> <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<!-- Basic Information Section --> <!-- Basic Information Section -->
<div class="form-section"> <div class="form-section">
<div class="section-header"> <div class="section-header">
@@ -661,15 +647,27 @@
<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="color: var(--secondary-color); font-size: 0.75rem; font-weight: 400; margin-left: 0.4rem;">
<i class="fas fa-lock"></i> Cannot be changed
</span>
</label> </label>
<input type="text" id="name" name="name" required value="{{ qr_code.name }}" <input
data-original="{{ qr_code.name }}" placeholder="e.g., Main Office Entrance, Conference Room A" type="text"
maxlength="100" /> id="name"
<small class="form-help">A unique name to identify this QR code</small> name="name"
<div class="character-counter"> required
<span id="nameCounter">{{ qr_code.name|length }}/100</span> value="{{ qr_code.name }}"
</div> data-original="{{ qr_code.name }}"
placeholder="e.g., Main Office Entrance, Conference Room A"
maxlength="100"
readonly
style="background: var(--gray-100, #f1f5f9); cursor: not-allowed; color: var(--gray-700, #334155);"
/>
<small class="form-help">
<i class="fas fa-info-circle"></i>
QR code name cannot be changed after creation as it is linked to the QR URL.
</small>
</div> </div>
<!-- ===== ADDED: QR Code Type selector ===== --> <!-- ===== ADDED: QR Code Type selector ===== -->
@@ -680,10 +678,8 @@
<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 value="standard" {% if qr_code.qr_type != 'dynamic' %}selected{% endif %}>Standard — Fixed Location</option>
</option> <option value="dynamic" {% if qr_code.qr_type == 'dynamic' %}selected{% endif %}>Dynamic — Employee Selects Location</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>
@@ -693,23 +689,30 @@
<!-- ===== 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 type="text" id="location" name="location" {% if qr_code.qr_type !='dynamic' %}required{% endif %} <input
value="{{ qr_code.location if qr_code.qr_type != 'dynamic' else '' }}" type="text"
data-original="{{ qr_code.location }}" placeholder="e.g., Corporate Headquarters, Branch Office" id="location"
maxlength="100" /> name="location"
<small class="form-help">The name of the physical location where this QR code will be {% if qr_code.qr_type != 'dynamic' %}required{% endif %}
used</small> value="{{ qr_code.location if qr_code.qr_type != 'dynamic' else '' }}"
<div class="character-counter"> data-original="{{ qr_code.location }}"
<span id="locationCounter">{{ qr_code.location|length if qr_code.qr_type != 'dynamic' else '0' placeholder="e.g., Corporate Headquarters, Branch Office"
}}/100</span> maxlength="100"
</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">
@@ -717,11 +720,10 @@
<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" <select id="project_id" name="project_id" class="form-select" data-original="{{ qr_code.project_id or '' }}">
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 %}
@@ -734,81 +736,96 @@
</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>
<!-- Address Coordinates Section -->
<div class="coordinates-section" id="coordinatesSection">
<div class="coordinates-header">
<i class="fas fa-crosshairs"></i>
<h4>Address Coordinates</h4>
</div>
<div class="coordinates-content">
<div class="coordinate-display">
<div class="coordinate-info">
<div class="coordinate-value" id="latitudeDisplay">
{% if qr_code.has_coordinates %}
{{ "%.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 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 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>
<!-- Address Coordinates Section -->
<div class="coordinates-section" id="coordinatesSection">
<div class="coordinates-header">
<i class="fas fa-crosshairs"></i>
<h4>Address Coordinates</h4>
</div>
<div class="coordinates-content">
<div class="coordinate-display">
<div class="coordinate-info">
<div class="coordinate-value" id="latitudeDisplay">
{% if qr_code.has_coordinates %}
{{ "%.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 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><!-- 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 -->
@@ -819,14 +836,20 @@
Event or Purpose Event or Purpose
<span style="color: var(--error-color)">*</span> <span style="color: var(--error-color)">*</span>
</label> </label>
<select id="location_event" name="location_event" required class="form-control" <select
data-original="{{ qr_code.location_event }}"> id="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 value="Check Out" {% if qr_code.location_event == 'Check Out' %}selected{% endif %}>Check Out</option>
</option>
</select> </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>
</div> </div>
@@ -842,26 +865,21 @@
<p>Require a photo when employee check-in location is too far from the QR code</p> <p>Require a photo when employee check-in location is too far from the QR code</p>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="toggle-label" for="photo_verification_enabled" <label class="toggle-label" for="photo_verification_enabled" style="display:flex;align-items:center;gap:0.75rem;cursor:pointer;">
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;">
<div class="toggle-switch" id="photoVerifyToggle" <input type="checkbox" id="photo_verification_enabled" name="photo_verification_enabled" value="1"
style="position:relative;display:inline-block;width:52px;height:28px;"> {% if qr_code.photo_verification_enabled != False %}checked{% endif %}
<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;"> style="opacity:0;width:0;height:0;position:absolute;">
<span class="toggle-slider" <span class="toggle-slider" style="position:absolute;cursor:pointer;inset:0;background:#cbd5e1;border-radius:28px;transition:0.3s;"></span>
style="position:absolute;cursor:pointer;inset:0;background:#cbd5e1;border-radius:28px;transition:0.3s;"></span>
</div> </div>
<span id="photoVerifyLabel" <span id="photoVerifyLabel" style="font-weight:600;font-size:0.875rem;
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 %}color:var(--success-color,#10b981){% else %}color:var(--error-color,#ef4444){% endif %}">
{% if qr_code.photo_verification_enabled != False %}Enabled{% else %}Disabled{% endif %} {% if qr_code.photo_verification_enabled != False %}Enabled{% else %}Disabled{% endif %}
</span> </span>
</label> </label>
<input type="hidden" name="photo_verification_enabled" id="photo_verification_hidden" <input type="hidden" name="photo_verification_enabled" id="photo_verification_hidden"
value="{% if qr_code.photo_verification_enabled != False %}1{% else %}0{% endif %}"> 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 <small class="form-help">When disabled, photo verification is skipped for this QR code regardless of distance</small>
distance</small>
</div> </div>
</div> </div>
@@ -884,9 +902,13 @@
<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 value="{{ style.id }}" {% if qr_code.style_id==style.id %}selected{% endif %} <option
data-fill="{{ style.fill_color }}" data-back="{{ style.back_color }}" value="{{ style.id }}"
data-box-size="{{ style.box_size }}" data-border="{{ style.border }}" {% 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 }}"> data-error-correction="{{ style.error_correction }}">
{{ style.name }} {{ style.name }}
</option> </option>
@@ -903,10 +925,21 @@
QR Code Color QR Code Color
</label> </label>
<div class="color-input-group"> <div class="color-input-group">
<input type="color" id="fill_color" name="fill_color" value="{{ qr_code.fill_color or '#000000' }}" <input
onchange="updatePreview()" /> type="color"
<input type="text" id="fill_color_text" value="{{ qr_code.fill_color or '#000000' }}" id="fill_color"
pattern="^#[0-9A-Fa-f]{6}$" placeholder="#000000" onchange="syncColorInput('fill')" /> 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> </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>
@@ -917,10 +950,21 @@
Background Color Background Color
</label> </label>
<div class="color-input-group"> <div class="color-input-group">
<input type="color" id="back_color" name="back_color" value="{{ qr_code.back_color or '#FFFFFF' }}" <input
onchange="updatePreview()" /> type="color"
<input type="text" id="back_color_text" value="{{ qr_code.back_color or '#FFFFFF' }}" id="back_color"
pattern="^#[0-9A-Fa-f]{6}$" placeholder="#FFFFFF" onchange="syncColorInput('back')" /> 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> </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>
@@ -934,8 +978,15 @@
Module Size Module Size
</label> </label>
<div class="range-input-group"> <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 }}" <input
oninput="updateRangeValue('box_size'); updatePreview()" /> 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> <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>
@@ -947,8 +998,15 @@
Border Size Border Size
</label> </label>
<div class="range-input-group"> <div class="range-input-group">
<input type="range" id="border" name="border" min="1" max="10" value="{{ qr_code.border or 4 }}" <input
oninput="updateRangeValue('border'); updatePreview()" /> 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> <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>
@@ -962,11 +1020,10 @@
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 value="Q" {% if qr_code.error_correction == 'Q' %}selected{% endif %}>Quartile (25% recovery)</option>
</option> <option value="H" {% if qr_code.error_correction == 'H' %}selected{% endif %}>High (30% recovery)</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>
@@ -1001,12 +1058,24 @@
</div> </div>
<!-- Hidden coordinate fields for form submission --> <!-- Hidden coordinate fields for form submission -->
<input type="hidden" id="address_latitude" name="address_latitude" <input
value="{% if qr_code.has_coordinates %}{{ qr_code.address_latitude }}{% endif %}" /> type="hidden"
<input type="hidden" id="address_longitude" name="address_longitude" id="address_latitude"
value="{% if qr_code.has_coordinates %}{{ qr_code.address_longitude }}{% endif %}" /> name="address_latitude"
<input type="hidden" id="coordinate_accuracy" name="coordinate_accuracy" value="{% if qr_code.has_coordinates %}{{ qr_code.address_latitude }}{% endif %}"
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">
@@ -1091,11 +1160,9 @@
<div class="detail-row"> <div class="detail-row">
<strong>Colors:</strong> <strong>Colors:</strong>
<span> <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>
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 <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>
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>
@@ -1108,11 +1175,11 @@
function updateCharacterCount(inputId, counterId, maxLength) { function updateCharacterCount(inputId, counterId, maxLength) {
const input = document.getElementById(inputId); const input = document.getElementById(inputId);
const counter = document.getElementById(counterId); const counter = document.getElementById(counterId);
if (input && counter) { if (input && counter) {
const length = input.value.length; const length = input.value.length;
counter.textContent = `${length}/${maxLength}`; counter.textContent = `${length}/${maxLength}`;
if (length > maxLength * 0.9) { if (length > maxLength * 0.9) {
counter.classList.add('warning'); counter.classList.add('warning');
} else { } else {
@@ -1125,7 +1192,7 @@
function applyStylePreset() { function applyStylePreset() {
const styleSelect = document.getElementById('style_id'); const styleSelect = document.getElementById('style_id');
const selectedOption = styleSelect.options[styleSelect.selectedIndex]; const selectedOption = styleSelect.options[styleSelect.selectedIndex];
if (selectedOption.value) { if (selectedOption.value) {
// Apply preset values // Apply preset values
const fillColor = selectedOption.getAttribute('data-fill'); const fillColor = selectedOption.getAttribute('data-fill');
@@ -1133,7 +1200,7 @@
const boxSize = selectedOption.getAttribute('data-box-size'); const boxSize = selectedOption.getAttribute('data-box-size');
const border = selectedOption.getAttribute('data-border'); const border = selectedOption.getAttribute('data-border');
const errorCorrection = selectedOption.getAttribute('data-error-correction'); const errorCorrection = selectedOption.getAttribute('data-error-correction');
// Update form inputs // Update form inputs
document.getElementById('fill_color').value = fillColor; document.getElementById('fill_color').value = fillColor;
document.getElementById('fill_color_text').value = fillColor; document.getElementById('fill_color_text').value = fillColor;
@@ -1142,14 +1209,14 @@
document.getElementById('box_size').value = boxSize; document.getElementById('box_size').value = boxSize;
document.getElementById('border').value = border; document.getElementById('border').value = border;
document.getElementById('error_correction').value = errorCorrection; document.getElementById('error_correction').value = errorCorrection;
// Update range value displays // Update range value displays
updateRangeValue('box_size'); updateRangeValue('box_size');
updateRangeValue('border'); updateRangeValue('border');
// Update preview // Update preview
updatePreview(); updatePreview();
// Show toast notification // Show toast notification
showToast(`Applied "${selectedOption.text}" style preset`, 'success'); showToast(`Applied "${selectedOption.text}" style preset`, 'success');
} }
@@ -1158,14 +1225,14 @@
function syncColorInput(type) { function syncColorInput(type) {
const colorInput = document.getElementById(`${type}_color`); const colorInput = document.getElementById(`${type}_color`);
const textInput = document.getElementById(`${type}_color_text`); const textInput = document.getElementById(`${type}_color_text`);
let value = textInput.value.trim().toUpperCase(); let value = textInput.value.trim().toUpperCase();
// Add # if missing // Add # if missing
if (!value.startsWith('#')) { if (!value.startsWith('#')) {
value = '#' + value; value = '#' + value;
} }
// Validate hex format // Validate hex format
if (/^#[0-9A-F]{6}$/i.test(value)) { if (/^#[0-9A-F]{6}$/i.test(value)) {
colorInput.value = value; colorInput.value = value;
@@ -1181,7 +1248,7 @@
function updateRangeValue(inputId) { function updateRangeValue(inputId) {
const input = document.getElementById(inputId); const input = document.getElementById(inputId);
const valueDisplay = document.getElementById(`${inputId}_value`); const valueDisplay = document.getElementById(`${inputId}_value`);
if (inputId === 'box_size') { if (inputId === 'box_size') {
valueDisplay.textContent = `${input.value}px`; valueDisplay.textContent = `${input.value}px`;
} else if (inputId === 'border') { } else if (inputId === 'border') {
@@ -1194,31 +1261,31 @@
const backColor = document.getElementById('back_color').value; const backColor = document.getElementById('back_color').value;
const boxSize = document.getElementById('box_size').value; const boxSize = document.getElementById('box_size').value;
const border = document.getElementById('border').value; const border = document.getElementById('border').value;
// Update preview QR modules // Update preview QR modules
const qrSample = document.getElementById('qr_sample'); const qrSample = document.getElementById('qr_sample');
const qrModules = qrSample.querySelectorAll('.qr-module:not(.empty)'); const qrModules = qrSample.querySelectorAll('.qr-module:not(.empty)');
// Apply colors to QR modules // Apply colors to QR modules
qrModules.forEach(module => { qrModules.forEach(module => {
module.style.backgroundColor = fillColor; module.style.backgroundColor = fillColor;
}); });
// Apply background color // Apply background color
qrSample.style.backgroundColor = backColor; qrSample.style.backgroundColor = backColor;
// Apply border (padding represents border) // Apply border (padding represents border)
const borderPx = Math.max(4, parseInt(border) * 2); const borderPx = Math.max(4, parseInt(border) * 2);
qrSample.style.padding = `${borderPx}px`; qrSample.style.padding = `${borderPx}px`;
// Apply module size effect (simulate with scale) // Apply module size effect (simulate with scale)
const scale = Math.max(0.7, Math.min(1.3, parseInt(boxSize) / 10)); const scale = Math.max(0.7, Math.min(1.3, parseInt(boxSize) / 10));
qrSample.style.transform = `scale(${scale})`; qrSample.style.transform = `scale(${scale})`;
// Sync text inputs with color inputs // Sync text inputs with color inputs
document.getElementById('fill_color_text').value = fillColor.toUpperCase(); document.getElementById('fill_color_text').value = fillColor.toUpperCase();
document.getElementById('back_color_text').value = backColor.toUpperCase(); document.getElementById('back_color_text').value = backColor.toUpperCase();
// Add animation class // Add animation class
const preview = document.getElementById('qr_preview'); const preview = document.getElementById('qr_preview');
preview.style.animation = 'none'; preview.style.animation = 'none';
@@ -1236,11 +1303,11 @@
document.getElementById('box_size').value = '10'; document.getElementById('box_size').value = '10';
document.getElementById('border').value = '4'; document.getElementById('border').value = '4';
document.getElementById('error_correction').value = 'L'; document.getElementById('error_correction').value = 'L';
updateRangeValue('box_size'); updateRangeValue('box_size');
updateRangeValue('border'); updateRangeValue('border');
updatePreview(); updatePreview();
showToast('Reset to default QR code styling', 'info'); showToast('Reset to default QR code styling', 'info');
} }
@@ -1254,7 +1321,7 @@
<span>${message}</span> <span>${message}</span>
</div> </div>
`; `;
toast.style.cssText = ` toast.style.cssText = `
position: fixed; position: fixed;
top: 20px; top: 20px;
@@ -1270,14 +1337,14 @@
border-left: 4px solid ${getToastColor(type)}; border-left: 4px solid ${getToastColor(type)};
max-width: 350px; max-width: 350px;
`; `;
document.body.appendChild(toast); document.body.appendChild(toast);
setTimeout(() => { setTimeout(() => {
toast.style.opacity = '1'; toast.style.opacity = '1';
toast.style.transform = 'translateX(0)'; toast.style.transform = 'translateX(0)';
}, 100); }, 100);
setTimeout(() => { setTimeout(() => {
toast.style.opacity = '0'; toast.style.opacity = '0';
toast.style.transform = 'translateX(100%)'; toast.style.transform = 'translateX(100%)';
@@ -1313,58 +1380,58 @@
function validateQRCustomization() { function validateQRCustomization() {
const fillColor = document.getElementById('fill_color_text').value; const fillColor = document.getElementById('fill_color_text').value;
const backColor = document.getElementById('back_color_text').value; const backColor = document.getElementById('back_color_text').value;
// Check if colors are too similar // Check if colors are too similar
if (fillColor.toLowerCase() === backColor.toLowerCase()) { if (fillColor.toLowerCase() === backColor.toLowerCase()) {
showToast('QR code color and background color cannot be the same', 'error'); showToast('QR code color and background color cannot be the same', 'error');
return false; return false;
} }
return true; return true;
} }
// Geocoding functionality // Geocoding functionality
function geocodeAddress(address) { function geocodeAddress(address) {
showStatus('info', 'Getting coordinates...'); showStatus('info', 'Getting coordinates...');
// Using server API which prefers Google Maps with OpenStreetMap fallback // Using server API which prefers Google Maps with OpenStreetMap fallback
const encodedAddress = encodeURIComponent(address); const encodedAddress = encodeURIComponent(address);
// First try the server API // First try the server API
fetch('/api/geocode', { fetch('/api/geocode', {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'X-CSRF-Token': (window.qrConfig && window.qrConfig.csrfToken) || '', 'X-CSRF-Token': (window.qrConfig && window.qrConfig.csrfToken) || '',
}, },
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) {
document.getElementById('address_latitude').value = lat; document.getElementById('address_latitude').value = lat;
document.getElementById('address_longitude').value = lng; document.getElementById('address_longitude').value = lng;
document.getElementById('coordinate_accuracy').value = accuracy; document.getElementById('coordinate_accuracy').value = accuracy;
document.getElementById('latitudeDisplay').textContent = lat.toFixed(10); document.getElementById('latitudeDisplay').textContent = lat.toFixed(10);
document.getElementById('longitudeDisplay').textContent = lng.toFixed(10); document.getElementById('longitudeDisplay').textContent = lng.toFixed(10);
document.getElementById('clearCoordinatesBtn').style.display = 'inline-flex'; document.getElementById('clearCoordinatesBtn').style.display = 'inline-flex';
document.getElementById('geocodeBtn').innerHTML = '<i class="fas fa-search-location"></i> Update Coordinates'; document.getElementById('geocodeBtn').innerHTML = '<i class="fas fa-search-location"></i> Update Coordinates';
} }
@@ -1373,13 +1440,13 @@
document.getElementById('address_latitude').value = ''; document.getElementById('address_latitude').value = '';
document.getElementById('address_longitude').value = ''; document.getElementById('address_longitude').value = '';
document.getElementById('coordinate_accuracy').value = ''; document.getElementById('coordinate_accuracy').value = '';
document.getElementById('latitudeDisplay').textContent = '---.----------'; document.getElementById('latitudeDisplay').textContent = '---.----------';
document.getElementById('longitudeDisplay').textContent = '---.----------'; document.getElementById('longitudeDisplay').textContent = '---.----------';
document.getElementById('clearCoordinatesBtn').style.display = 'none'; document.getElementById('clearCoordinatesBtn').style.display = 'none';
document.getElementById('geocodeBtn').innerHTML = '<i class="fas fa-search-location"></i> Get Coordinates'; document.getElementById('geocodeBtn').innerHTML = '<i class="fas fa-search-location"></i> Get Coordinates';
showStatus('info', 'Coordinates cleared'); showStatus('info', 'Coordinates cleared');
} }
@@ -1387,7 +1454,7 @@
const statusDiv = document.getElementById('coordinateStatus'); const statusDiv = document.getElementById('coordinateStatus');
if (statusDiv) { if (statusDiv) {
statusDiv.innerHTML = `<div class="status-${type}" style="padding: 0.5rem; border-radius: 4px; margin-top: 0.5rem; font-size: 0.875rem;">${message}</div>`; statusDiv.innerHTML = `<div class="status-${type}" style="padding: 0.5rem; border-radius: 4px; margin-top: 0.5rem; font-size: 0.875rem;">${message}</div>`;
setTimeout(() => { setTimeout(() => {
statusDiv.innerHTML = ''; statusDiv.innerHTML = '';
}, 5000); }, 5000);
@@ -1402,7 +1469,7 @@
} }
// 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', () => { document.getElementById('name').addEventListener('input', () => {
updateCharacterCount('name', 'nameCounter', 100); updateCharacterCount('name', 'nameCounter', 100);
@@ -1416,33 +1483,33 @@
updateCharacterCount('location_address', 'addressCounter', 500); updateCharacterCount('location_address', 'addressCounter', 500);
updateCurrentInfo(); updateCurrentInfo();
}); });
// Set up event listener for location_event // Set up event listener for location_event
document.getElementById('location_event').addEventListener('change', updateCurrentInfo); document.getElementById('location_event').addEventListener('change', updateCurrentInfo);
// Set up initial values for QR customization // Set up initial values for QR customization
updateRangeValue('box_size'); updateRangeValue('box_size');
updateRangeValue('border'); updateRangeValue('border');
updatePreview(); updatePreview();
// 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;
} }
}); });
} }
// 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();
}); });
@@ -1451,7 +1518,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);
@@ -1467,38 +1534,38 @@
<!-- ===== 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>
<!-- ===== END Dynamic QR Type Toggle ===== --> <!-- ===== END Dynamic QR Type Toggle ===== -->
<script> <script>
// Photo Verification Toggle // Photo Verification Toggle
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function() {
var cb = document.getElementById('photo_verification_enabled'); var cb = document.getElementById('photo_verification_enabled');
var hidden = document.getElementById('photo_verification_hidden'); var hidden = document.getElementById('photo_verification_hidden');
var label = document.getElementById('photoVerifyLabel'); var label = document.getElementById('photoVerifyLabel');
if (cb) { if (cb) {
cb.addEventListener('change', function () { cb.addEventListener('change', function() {
hidden.value = cb.checked ? '1' : '0'; hidden.value = cb.checked ? '1' : '0';
label.textContent = cb.checked ? 'Enabled' : 'Disabled'; label.textContent = cb.checked ? 'Enabled' : 'Disabled';
label.style.color = cb.checked ? 'var(--success-color, #10b981)' : 'var(--error-color, #ef4444)'; label.style.color = cb.checked ? 'var(--success-color, #10b981)' : 'var(--error-color, #ef4444)';