05/19 Update QR code photo verification togglable
This commit is contained in:
+1234
-1246
File diff suppressed because it is too large
Load Diff
+290
-292
@@ -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 {
|
||||
@@ -544,18 +567,18 @@
|
||||
.form-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
|
||||
.qr-preview-container {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.range-input-group {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
|
||||
.range-value {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -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 */
|
||||
@@ -616,7 +647,7 @@
|
||||
</div>
|
||||
|
||||
<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 -->
|
||||
<div class="form-section">
|
||||
<div class="section-header">
|
||||
@@ -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,30 +693,23 @@
|
||||
<!-- ===== 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>
|
||||
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 %}
|
||||
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
|
||||
>
|
||||
<div class="character-counter">
|
||||
<span id="locationCounter">{{ qr_code.location|length if qr_code.qr_type != 'dynamic' else '0' }}/100</span>
|
||||
<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 %}
|
||||
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>
|
||||
<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 class="form-group">
|
||||
@@ -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,96 +734,81 @@
|
||||
</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 class="form-section">
|
||||
<div class="section-header">
|
||||
<h3>
|
||||
<i class="fas fa-building"></i>
|
||||
Location Details
|
||||
</h3>
|
||||
<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 id="standardLocationDetailsSection" {% if qr_code.qr_type=='dynamic' %}style="display:none;" {% endif %}>
|
||||
<div class="form-section">
|
||||
<div class="section-header">
|
||||
<h3>
|
||||
<i class="fas fa-building"></i>
|
||||
Location Details
|
||||
</h3>
|
||||
<p>Update the complete address and event information</p>
|
||||
</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 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 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>
|
||||
<!-- 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-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 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 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><!-- end standardLocationDetailsSection -->
|
||||
|
||||
<!-- Event or Purpose — always visible for both Standard and Dynamic QR -->
|
||||
@@ -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>
|
||||
@@ -1126,11 +1108,11 @@
|
||||
function updateCharacterCount(inputId, counterId, maxLength) {
|
||||
const input = document.getElementById(inputId);
|
||||
const counter = document.getElementById(counterId);
|
||||
|
||||
|
||||
if (input && counter) {
|
||||
const length = input.value.length;
|
||||
counter.textContent = `${length}/${maxLength}`;
|
||||
|
||||
|
||||
if (length > maxLength * 0.9) {
|
||||
counter.classList.add('warning');
|
||||
} else {
|
||||
@@ -1143,7 +1125,7 @@
|
||||
function applyStylePreset() {
|
||||
const styleSelect = document.getElementById('style_id');
|
||||
const selectedOption = styleSelect.options[styleSelect.selectedIndex];
|
||||
|
||||
|
||||
if (selectedOption.value) {
|
||||
// Apply preset values
|
||||
const fillColor = selectedOption.getAttribute('data-fill');
|
||||
@@ -1151,7 +1133,7 @@
|
||||
const boxSize = selectedOption.getAttribute('data-box-size');
|
||||
const border = selectedOption.getAttribute('data-border');
|
||||
const errorCorrection = selectedOption.getAttribute('data-error-correction');
|
||||
|
||||
|
||||
// Update form inputs
|
||||
document.getElementById('fill_color').value = fillColor;
|
||||
document.getElementById('fill_color_text').value = fillColor;
|
||||
@@ -1160,14 +1142,14 @@
|
||||
document.getElementById('box_size').value = boxSize;
|
||||
document.getElementById('border').value = border;
|
||||
document.getElementById('error_correction').value = errorCorrection;
|
||||
|
||||
|
||||
// Update range value displays
|
||||
updateRangeValue('box_size');
|
||||
updateRangeValue('border');
|
||||
|
||||
|
||||
// Update preview
|
||||
updatePreview();
|
||||
|
||||
|
||||
// Show toast notification
|
||||
showToast(`Applied "${selectedOption.text}" style preset`, 'success');
|
||||
}
|
||||
@@ -1176,14 +1158,14 @@
|
||||
function syncColorInput(type) {
|
||||
const colorInput = document.getElementById(`${type}_color`);
|
||||
const textInput = document.getElementById(`${type}_color_text`);
|
||||
|
||||
|
||||
let value = textInput.value.trim().toUpperCase();
|
||||
|
||||
|
||||
// Add # if missing
|
||||
if (!value.startsWith('#')) {
|
||||
value = '#' + value;
|
||||
}
|
||||
|
||||
|
||||
// Validate hex format
|
||||
if (/^#[0-9A-F]{6}$/i.test(value)) {
|
||||
colorInput.value = value;
|
||||
@@ -1199,7 +1181,7 @@
|
||||
function updateRangeValue(inputId) {
|
||||
const input = document.getElementById(inputId);
|
||||
const valueDisplay = document.getElementById(`${inputId}_value`);
|
||||
|
||||
|
||||
if (inputId === 'box_size') {
|
||||
valueDisplay.textContent = `${input.value}px`;
|
||||
} else if (inputId === 'border') {
|
||||
@@ -1212,31 +1194,31 @@
|
||||
const backColor = document.getElementById('back_color').value;
|
||||
const boxSize = document.getElementById('box_size').value;
|
||||
const border = document.getElementById('border').value;
|
||||
|
||||
|
||||
// Update preview QR modules
|
||||
const qrSample = document.getElementById('qr_sample');
|
||||
const qrModules = qrSample.querySelectorAll('.qr-module:not(.empty)');
|
||||
|
||||
|
||||
// Apply colors to QR modules
|
||||
qrModules.forEach(module => {
|
||||
module.style.backgroundColor = fillColor;
|
||||
});
|
||||
|
||||
|
||||
// Apply background color
|
||||
qrSample.style.backgroundColor = backColor;
|
||||
|
||||
|
||||
// Apply border (padding represents border)
|
||||
const borderPx = Math.max(4, parseInt(border) * 2);
|
||||
qrSample.style.padding = `${borderPx}px`;
|
||||
|
||||
|
||||
// Apply module size effect (simulate with scale)
|
||||
const scale = Math.max(0.7, Math.min(1.3, parseInt(boxSize) / 10));
|
||||
qrSample.style.transform = `scale(${scale})`;
|
||||
|
||||
|
||||
// Sync text inputs with color inputs
|
||||
document.getElementById('fill_color_text').value = fillColor.toUpperCase();
|
||||
document.getElementById('back_color_text').value = backColor.toUpperCase();
|
||||
|
||||
|
||||
// Add animation class
|
||||
const preview = document.getElementById('qr_preview');
|
||||
preview.style.animation = 'none';
|
||||
@@ -1254,11 +1236,11 @@
|
||||
document.getElementById('box_size').value = '10';
|
||||
document.getElementById('border').value = '4';
|
||||
document.getElementById('error_correction').value = 'L';
|
||||
|
||||
|
||||
updateRangeValue('box_size');
|
||||
updateRangeValue('border');
|
||||
updatePreview();
|
||||
|
||||
|
||||
showToast('Reset to default QR code styling', 'info');
|
||||
}
|
||||
|
||||
@@ -1272,7 +1254,7 @@
|
||||
<span>${message}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
toast.style.cssText = `
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
@@ -1288,14 +1270,14 @@
|
||||
border-left: 4px solid ${getToastColor(type)};
|
||||
max-width: 350px;
|
||||
`;
|
||||
|
||||
|
||||
document.body.appendChild(toast);
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
toast.style.opacity = '1';
|
||||
toast.style.transform = 'translateX(0)';
|
||||
}, 100);
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
toast.style.opacity = '0';
|
||||
toast.style.transform = 'translateX(100%)';
|
||||
@@ -1331,58 +1313,58 @@
|
||||
function validateQRCustomization() {
|
||||
const fillColor = document.getElementById('fill_color_text').value;
|
||||
const backColor = document.getElementById('back_color_text').value;
|
||||
|
||||
|
||||
// Check if colors are too similar
|
||||
if (fillColor.toLowerCase() === backColor.toLowerCase()) {
|
||||
showToast('QR code color and background color cannot be the same', 'error');
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
// Geocoding functionality
|
||||
function geocodeAddress(address) {
|
||||
showStatus('info', 'Getting coordinates...');
|
||||
|
||||
|
||||
// Using server API which prefers Google Maps with OpenStreetMap fallback
|
||||
const encodedAddress = encodeURIComponent(address);
|
||||
|
||||
|
||||
// First try the server API
|
||||
fetch('/api/geocode', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'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 })
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
const lat = data.data.latitude;
|
||||
const lng = data.data.longitude;
|
||||
|
||||
updateCoordinates(lat, lng, 'geocoded');
|
||||
showStatus('success', data.message || 'Coordinates updated successfully');
|
||||
} else {
|
||||
showStatus('warning', data.message || 'No coordinates found for this address');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Geocoding error:', error);
|
||||
showStatus('error', 'Failed to get coordinates. Please try again.');
|
||||
});
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
const lat = data.data.latitude;
|
||||
const lng = data.data.longitude;
|
||||
|
||||
updateCoordinates(lat, lng, 'geocoded');
|
||||
showStatus('success', data.message || 'Coordinates updated successfully');
|
||||
} else {
|
||||
showStatus('warning', data.message || 'No coordinates found for this address');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Geocoding error:', error);
|
||||
showStatus('error', 'Failed to get coordinates. Please try again.');
|
||||
});
|
||||
}
|
||||
|
||||
function updateCoordinates(lat, lng, accuracy) {
|
||||
document.getElementById('address_latitude').value = lat;
|
||||
document.getElementById('address_longitude').value = lng;
|
||||
document.getElementById('coordinate_accuracy').value = accuracy;
|
||||
|
||||
|
||||
document.getElementById('latitudeDisplay').textContent = lat.toFixed(10);
|
||||
document.getElementById('longitudeDisplay').textContent = lng.toFixed(10);
|
||||
|
||||
|
||||
document.getElementById('clearCoordinatesBtn').style.display = 'inline-flex';
|
||||
document.getElementById('geocodeBtn').innerHTML = '<i class="fas fa-search-location"></i> Update Coordinates';
|
||||
}
|
||||
@@ -1391,13 +1373,13 @@
|
||||
document.getElementById('address_latitude').value = '';
|
||||
document.getElementById('address_longitude').value = '';
|
||||
document.getElementById('coordinate_accuracy').value = '';
|
||||
|
||||
|
||||
document.getElementById('latitudeDisplay').textContent = '---.----------';
|
||||
document.getElementById('longitudeDisplay').textContent = '---.----------';
|
||||
|
||||
|
||||
document.getElementById('clearCoordinatesBtn').style.display = 'none';
|
||||
document.getElementById('geocodeBtn').innerHTML = '<i class="fas fa-search-location"></i> Get Coordinates';
|
||||
|
||||
|
||||
showStatus('info', 'Coordinates cleared');
|
||||
}
|
||||
|
||||
@@ -1405,7 +1387,7 @@
|
||||
const statusDiv = document.getElementById('coordinateStatus');
|
||||
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>`;
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
statusDiv.innerHTML = '';
|
||||
}, 5000);
|
||||
@@ -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);
|
||||
@@ -1434,33 +1416,33 @@
|
||||
updateCharacterCount('location_address', 'addressCounter', 500);
|
||||
updateCurrentInfo();
|
||||
});
|
||||
|
||||
|
||||
// Set up event listener for location_event
|
||||
document.getElementById('location_event').addEventListener('change', updateCurrentInfo);
|
||||
|
||||
|
||||
// Set up initial values for QR customization
|
||||
updateRangeValue('box_size');
|
||||
updateRangeValue('border');
|
||||
updatePreview();
|
||||
|
||||
|
||||
// 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;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 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);
|
||||
@@ -1485,28 +1467,44 @@
|
||||
<!-- ===== 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 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 (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 (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() {
|
||||
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 %}
|
||||
Reference in New Issue
Block a user