05/19 Fix geocode using Google Maps error
This commit is contained in:
+694
-63
@@ -1,11 +1,13 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
<head>
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Create QR Code - QR Management System</title>
|
<title>Create QR Code - QR Management System</title>
|
||||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
|
<link
|
||||||
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
--primary-color: #2563eb;
|
--primary-color: #2563eb;
|
||||||
@@ -41,9 +43,11 @@
|
|||||||
body {
|
body {
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||||
sans-serif;
|
sans-serif;
|
||||||
background: linear-gradient(135deg,
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
var(--gray-50) 0%,
|
var(--gray-50) 0%,
|
||||||
var(--gray-100) 100%);
|
var(--gray-100) 100%
|
||||||
|
);
|
||||||
color: var(--gray-800);
|
color: var(--gray-800);
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -224,7 +228,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 {
|
||||||
@@ -234,7 +238,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 {
|
||||||
@@ -519,17 +523,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 */
|
||||||
@@ -548,9 +544,14 @@
|
|||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
<!-- CSRF token for AJAX requests (mirrors base_authenticated.html injection) -->
|
||||||
|
<script>
|
||||||
<body>
|
window.qrConfig = {
|
||||||
|
csrfToken: '{{ csrf_token() }}'
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="form-container">
|
<div class="form-container">
|
||||||
<div class="form-header">
|
<div class="form-header">
|
||||||
@@ -562,8 +563,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="margin-top: 1rem; margin-bottom: 1rem;">
|
<div style="margin-top: 1rem; margin-bottom: 1rem;">
|
||||||
<a href="{{ url_for('qr_codes.import_bulk_qr_codes') }}" class="btn btn-outline"
|
<a href="{{ url_for('qr_codes.import_bulk_qr_codes') }}" class="btn btn-outline" style="display: inline-flex; align-items: center; gap: 0.5rem;">
|
||||||
style="display: inline-flex; align-items: center; gap: 0.5rem;">
|
|
||||||
<i class="fas fa-file-excel"></i>
|
<i class="fas fa-file-excel"></i>
|
||||||
Bulk Import from Excel
|
Bulk Import from Excel
|
||||||
</a>
|
</a>
|
||||||
@@ -586,9 +586,17 @@
|
|||||||
<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(--error-color)">*</span>
|
||||||
</label>
|
</label>
|
||||||
<input type="text" id="name" name="name" required
|
<input
|
||||||
placeholder="e.g., Main Office Entrance, Conference Room A" maxlength="100" />
|
type="text"
|
||||||
<small class="form-help">A unique name to identify this QR code</small>
|
id="name"
|
||||||
|
name="name"
|
||||||
|
required
|
||||||
|
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">
|
<div class="character-counter">
|
||||||
<span id="nameCounter">0/100</span>
|
<span id="nameCounter">0/100</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -619,10 +627,18 @@
|
|||||||
<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" required
|
<input
|
||||||
placeholder="e.g., Corporate Headquarters, Branch Office" maxlength="100" />
|
type="text"
|
||||||
<small class="form-help">The name of the physical location where this QR code will be
|
id="location"
|
||||||
used</small>
|
name="location"
|
||||||
|
required
|
||||||
|
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">
|
<div class="character-counter">
|
||||||
<span id="locationCounter">0/100</span>
|
<span id="locationCounter">0/100</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -666,17 +682,28 @@
|
|||||||
Complete Address
|
Complete Address
|
||||||
<span style="color: var(--error-color)">*</span>
|
<span style="color: var(--error-color)">*</span>
|
||||||
</label>
|
</label>
|
||||||
<textarea id="location_address" name="location_address" required
|
<textarea
|
||||||
placeholder="Enter the full address including street, city, state, and ZIP code" rows="3"
|
id="location_address"
|
||||||
maxlength="500"></textarea>
|
name="location_address"
|
||||||
<small class="form-help">Include all address details for accurate location
|
required
|
||||||
identification</small>
|
placeholder="Enter the full address including street, city, state, and ZIP code"
|
||||||
|
rows="3"
|
||||||
|
maxlength="500"
|
||||||
|
></textarea>
|
||||||
|
<small class="form-help"
|
||||||
|
>Include all address details for accurate location
|
||||||
|
identification</small
|
||||||
|
>
|
||||||
<div class="character-counter">
|
<div class="character-counter">
|
||||||
<span id="addressCounter">0/500</span>
|
<span id="addressCounter">0/500</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Address Coordinates Section -->
|
<!-- Address Coordinates Section -->
|
||||||
<div class="coordinates-section" id="coordinatesSection" style="display: none">
|
<div
|
||||||
|
class="coordinates-section"
|
||||||
|
id="coordinatesSection"
|
||||||
|
style="display: none"
|
||||||
|
>
|
||||||
<div class="coordinates-header">
|
<div class="coordinates-header">
|
||||||
<i class="fas fa-crosshairs"></i>
|
<i class="fas fa-crosshairs"></i>
|
||||||
<h4>Address Coordinates</h4>
|
<h4>Address Coordinates</h4>
|
||||||
@@ -699,11 +726,20 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="coordinates-actions">
|
<div class="coordinates-actions">
|
||||||
<button type="button" class="btn-coordinate" id="geocodeBtn">
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn-coordinate"
|
||||||
|
id="geocodeBtn"
|
||||||
|
>
|
||||||
<i class="fas fa-search-location"></i>
|
<i class="fas fa-search-location"></i>
|
||||||
Get Coordinates
|
Get Coordinates
|
||||||
</button>
|
</button>
|
||||||
<button type="button" class="btn-coordinate" id="clearCoordinatesBtn" style="display: none">
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn-coordinate"
|
||||||
|
id="clearCoordinatesBtn"
|
||||||
|
style="display: none"
|
||||||
|
>
|
||||||
<i class="fas fa-times"></i>
|
<i class="fas fa-times"></i>
|
||||||
Clear
|
Clear
|
||||||
</button>
|
</button>
|
||||||
@@ -725,12 +761,19 @@
|
|||||||
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
|
||||||
|
id="location_event"
|
||||||
|
name="location_event"
|
||||||
|
required
|
||||||
|
class="form-control"
|
||||||
|
>
|
||||||
<option value="">Select Event Type</option>
|
<option value="">Select Event Type</option>
|
||||||
<option value="Check In">Check In</option>
|
<option value="Check In">Check In</option>
|
||||||
<option value="Check Out">Check Out</option>
|
<option value="Check Out">Check Out</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>
|
||||||
@@ -746,21 +789,18 @@
|
|||||||
<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"
|
|
||||||
style="position:relative;display:inline-block;width:52px;height:28px;">
|
|
||||||
<input type="checkbox" id="photo_verification_enabled" name="photo_verification_enabled" value="1"
|
<input type="checkbox" id="photo_verification_enabled" name="photo_verification_enabled" value="1"
|
||||||
checked style="opacity:0;width:0;height:0;position:absolute;" onchange="syncPhotoVerifyHidden(this)">
|
checked
|
||||||
<span class="toggle-slider"
|
style="opacity:0;width:0;height:0;position:absolute;"
|
||||||
style="position:absolute;cursor:pointer;inset:0;background:#cbd5e1;border-radius:28px;transition:0.3s;"></span>
|
onchange="syncPhotoVerifyHidden(this)">
|
||||||
|
<span class="toggle-slider" 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;color:var(--gray-700);font-size:0.875rem;">Enabled</span>
|
||||||
style="font-weight:600;color:var(--gray-700);font-size:0.875rem;">Enabled</span>
|
|
||||||
</label>
|
</label>
|
||||||
<input type="hidden" name="photo_verification_enabled" id="photo_verification_hidden" value="1">
|
<input type="hidden" name="photo_verification_enabled" id="photo_verification_hidden" value="1">
|
||||||
<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>
|
||||||
|
|
||||||
@@ -783,8 +823,12 @@
|
|||||||
<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 }}" data-fill="{{ style.fill_color }}" data-back="{{ style.back_color }}"
|
<option
|
||||||
data-box-size="{{ style.box_size }}" data-border="{{ style.border }}"
|
value="{{ style.id }}"
|
||||||
|
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>
|
||||||
@@ -801,9 +845,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="#000000" onchange="updatePreview()" />
|
<input
|
||||||
<input type="text" id="fill_color_text" value="#000000" pattern="^#[0-9A-Fa-f]{6}$"
|
type="color"
|
||||||
placeholder="#000000" onchange="syncColorInput('fill')" />
|
id="fill_color"
|
||||||
|
name="fill_color"
|
||||||
|
value="#000000"
|
||||||
|
onchange="updatePreview()"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="fill_color_text"
|
||||||
|
value="#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>
|
||||||
@@ -814,9 +870,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="#FFFFFF" onchange="updatePreview()" />
|
<input
|
||||||
<input type="text" id="back_color_text" value="#FFFFFF" pattern="^#[0-9A-Fa-f]{6}$"
|
type="color"
|
||||||
placeholder="#FFFFFF" onchange="syncColorInput('back')" />
|
id="back_color"
|
||||||
|
name="back_color"
|
||||||
|
value="#FFFFFF"
|
||||||
|
onchange="updatePreview()"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="back_color_text"
|
||||||
|
value="#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>
|
||||||
@@ -830,8 +898,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="10"
|
<input
|
||||||
oninput="updateRangeValue('box_size'); updatePreview()" />
|
type="range"
|
||||||
|
id="box_size"
|
||||||
|
name="box_size"
|
||||||
|
min="5"
|
||||||
|
max="20"
|
||||||
|
value="10"
|
||||||
|
oninput="updateRangeValue('box_size'); updatePreview()"
|
||||||
|
/>
|
||||||
<span class="range-value" id="box_size_value">10px</span>
|
<span class="range-value" id="box_size_value">10px</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>
|
||||||
@@ -843,8 +918,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="4"
|
<input
|
||||||
oninput="updateRangeValue('border'); updatePreview()" />
|
type="range"
|
||||||
|
id="border"
|
||||||
|
name="border"
|
||||||
|
min="1"
|
||||||
|
max="10"
|
||||||
|
value="4"
|
||||||
|
oninput="updateRangeValue('border'); updatePreview()"
|
||||||
|
/>
|
||||||
<span class="range-value" id="border_value">4 modules</span>
|
<span class="range-value" id="border_value">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>
|
||||||
@@ -897,6 +979,555 @@
|
|||||||
|
|
||||||
<!-- Hidden coordinate fields for form submission -->
|
<!-- Hidden coordinate fields for form submission -->
|
||||||
<input type="hidden" id="latitude" name="latitude" value="" />
|
<input type="hidden" id="latitude" name="latitude" value="" />
|
||||||
|
<input type="hidden" id="longitude" name="longitude" value="" />
|
||||||
|
<input
|
||||||
|
type="hidden"
|
||||||
|
id="coordinate_accuracy"
|
||||||
|
name="coordinate_accuracy"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Form Actions -->
|
||||||
|
<div class="form-actions">
|
||||||
|
<a href="{{ url_for('dashboard.dashboard') }}" class="btn btn-secondary">
|
||||||
|
<i class="fas fa-arrow-left"></i>
|
||||||
|
Cancel
|
||||||
|
</a>
|
||||||
|
<button type="button" class="btn btn-outline" onclick="resetToDefaults()">
|
||||||
|
<i class="fas fa-undo"></i>
|
||||||
|
Reset Styling
|
||||||
|
</button>
|
||||||
|
<button type="submit" class="btn btn-primary" id="submitBtn">
|
||||||
|
<i class="fas fa-save"></i>
|
||||||
|
Create QR Code
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Character counting functionality
|
||||||
|
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 {
|
||||||
|
counter.classList.remove('warning');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// QR Code Customization JavaScript Functions
|
||||||
|
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');
|
||||||
|
const backColor = selectedOption.getAttribute('data-back');
|
||||||
|
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;
|
||||||
|
document.getElementById('back_color').value = backColor;
|
||||||
|
document.getElementById('back_color_text').value = backColor;
|
||||||
|
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');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
textInput.value = value;
|
||||||
|
updatePreview();
|
||||||
|
} else {
|
||||||
|
// Reset to previous valid value
|
||||||
|
textInput.value = colorInput.value;
|
||||||
|
showToast('Invalid color format. Use #RRGGBB format.', 'warning');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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') {
|
||||||
|
valueDisplay.textContent = `${input.value} modules`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updatePreview() {
|
||||||
|
const fillColor = document.getElementById('fill_color').value;
|
||||||
|
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';
|
||||||
|
setTimeout(() => {
|
||||||
|
preview.style.animation = 'pulse 0.3s ease-in-out';
|
||||||
|
}, 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetToDefaults() {
|
||||||
|
document.getElementById('style_id').value = '';
|
||||||
|
document.getElementById('fill_color').value = '#000000';
|
||||||
|
document.getElementById('fill_color_text').value = '#000000';
|
||||||
|
document.getElementById('back_color').value = '#FFFFFF';
|
||||||
|
document.getElementById('back_color_text').value = '#FFFFFF';
|
||||||
|
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');
|
||||||
|
}
|
||||||
|
|
||||||
|
function showToast(message, type = 'info') {
|
||||||
|
// Create toast notification
|
||||||
|
const toast = document.createElement('div');
|
||||||
|
toast.className = `toast toast-${type}`;
|
||||||
|
toast.innerHTML = `
|
||||||
|
<div class="toast-content">
|
||||||
|
<i class="fas ${getToastIcon(type)}"></i>
|
||||||
|
<span>${message}</span>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
toast.style.cssText = `
|
||||||
|
position: fixed;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||||
|
padding: 1rem;
|
||||||
|
z-index: 1000;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(100%);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
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%)';
|
||||||
|
setTimeout(() => {
|
||||||
|
if (document.body.contains(toast)) {
|
||||||
|
document.body.removeChild(toast);
|
||||||
|
}
|
||||||
|
}, 300);
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getToastIcon(type) {
|
||||||
|
const icons = {
|
||||||
|
success: 'fa-check-circle',
|
||||||
|
error: 'fa-exclamation-circle',
|
||||||
|
warning: 'fa-exclamation-triangle',
|
||||||
|
info: 'fa-info-circle'
|
||||||
|
};
|
||||||
|
return icons[type] || icons.info;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getToastColor(type) {
|
||||||
|
const colors = {
|
||||||
|
success: '#059669',
|
||||||
|
error: '#dc2626',
|
||||||
|
warning: '#d97706',
|
||||||
|
info: '#0891b2'
|
||||||
|
};
|
||||||
|
return colors[type] || colors.info;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Form validation
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check contrast (basic check)
|
||||||
|
if (getColorBrightness(fillColor) === getColorBrightness(backColor)) {
|
||||||
|
showToast('Warning: Low contrast may affect QR code readability', 'warning');
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getColorBrightness(hex) {
|
||||||
|
const r = parseInt(hex.substr(1, 2), 16);
|
||||||
|
const g = parseInt(hex.substr(3, 2), 16);
|
||||||
|
const b = parseInt(hex.substr(5, 2), 16);
|
||||||
|
return (r * 299 + g * 587 + b * 114) / 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Geocoding functionality - Enhanced version to match your original
|
||||||
|
let coordinatesData = {
|
||||||
|
latitude: null,
|
||||||
|
longitude: null,
|
||||||
|
accuracy: null
|
||||||
|
};
|
||||||
|
|
||||||
|
function geocodeAddress(address) {
|
||||||
|
showStatus('info', 'Getting coordinates...');
|
||||||
|
|
||||||
|
// Show loading state
|
||||||
|
const geocodeBtn = document.getElementById('geocodeBtn');
|
||||||
|
geocodeBtn.innerHTML = '<span class="loading-spinner"></span> Getting coordinates...';
|
||||||
|
geocodeBtn.disabled = true;
|
||||||
|
|
||||||
|
// Try your API first, then fallback to OSM
|
||||||
|
fetch('/api/geocode', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'X-CSRF-Token': (window.qrConfig && window.qrConfig.csrfToken) || '',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ address: address })
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
if (data.success) {
|
||||||
|
// Update coordinates from your API
|
||||||
|
coordinatesData = {
|
||||||
|
latitude: data.data.latitude,
|
||||||
|
longitude: data.data.longitude,
|
||||||
|
accuracy: data.data.accuracy || 'geocoded'
|
||||||
|
};
|
||||||
|
|
||||||
|
updateCoordinatesDisplay();
|
||||||
|
updateHiddenFields();
|
||||||
|
showStatus('success', data.message || 'Coordinates found successfully');
|
||||||
|
showCoordinatesSection();
|
||||||
|
} else {
|
||||||
|
// Fallback to OpenStreetMap Nominatim API
|
||||||
|
fallbackToOSMGeocoding(address);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Primary geocoding error:', error);
|
||||||
|
// Fallback to OpenStreetMap Nominatim API
|
||||||
|
fallbackToOSMGeocoding(address);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
// Reset button state
|
||||||
|
geocodeBtn.innerHTML = '<i class="fas fa-search-location"></i> Get Coordinates';
|
||||||
|
geocodeBtn.disabled = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function fallbackToOSMGeocoding(address) {
|
||||||
|
// Using OpenStreetMap Nominatim API as fallback when Google Maps fails
|
||||||
|
const encodedAddress = encodeURIComponent(address);
|
||||||
|
const url = `https://nominatim.openstreetmap.org/search?format=json&q=${encodedAddress}&limit=1`;
|
||||||
|
|
||||||
|
fetch(url)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
if (data && data.length > 0) {
|
||||||
|
const result = data[0];
|
||||||
|
coordinatesData = {
|
||||||
|
latitude: parseFloat(result.lat),
|
||||||
|
longitude: parseFloat(result.lon),
|
||||||
|
accuracy: 'geocoded'
|
||||||
|
};
|
||||||
|
|
||||||
|
updateCoordinatesDisplay();
|
||||||
|
updateHiddenFields();
|
||||||
|
showStatus('success', 'Coordinates found successfully (OpenStreetMap fallback - Google Maps unavailable)');
|
||||||
|
showCoordinatesSection();
|
||||||
|
} else {
|
||||||
|
showStatus('warning', 'No coordinates found for this address');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Fallback geocoding error:', error);
|
||||||
|
showStatus('error', 'Failed to get coordinates. Please try again.');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateCoordinatesDisplay() {
|
||||||
|
const latDisplay = document.getElementById('latitudeDisplay');
|
||||||
|
const lngDisplay = document.getElementById('longitudeDisplay');
|
||||||
|
const clearBtn = document.getElementById('clearCoordinatesBtn');
|
||||||
|
|
||||||
|
if (coordinatesData.latitude && coordinatesData.longitude) {
|
||||||
|
latDisplay.textContent = coordinatesData.latitude.toFixed(10);
|
||||||
|
lngDisplay.textContent = coordinatesData.longitude.toFixed(10);
|
||||||
|
clearBtn.style.display = 'inline-flex';
|
||||||
|
|
||||||
|
// Update button text
|
||||||
|
document.getElementById('geocodeBtn').innerHTML = '<i class="fas fa-search-location"></i> Update Coordinates';
|
||||||
|
} else {
|
||||||
|
latDisplay.textContent = '---.----------';
|
||||||
|
lngDisplay.textContent = '---.----------';
|
||||||
|
clearBtn.style.display = 'none';
|
||||||
|
|
||||||
|
// Reset button text
|
||||||
|
document.getElementById('geocodeBtn').innerHTML = '<i class="fas fa-search-location"></i> Get Coordinates';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateHiddenFields() {
|
||||||
|
console.log('📝 Updating hidden coordinate fields');
|
||||||
|
|
||||||
|
// Update hidden form fields with coordinate data
|
||||||
|
const latitudeField = document.getElementById('latitude');
|
||||||
|
const longitudeField = document.getElementById('longitude');
|
||||||
|
const accuracyField = document.getElementById('coordinate_accuracy');
|
||||||
|
|
||||||
|
if (coordinatesData.latitude && coordinatesData.longitude) {
|
||||||
|
latitudeField.value = coordinatesData.latitude;
|
||||||
|
longitudeField.value = coordinatesData.longitude;
|
||||||
|
accuracyField.value = coordinatesData.accuracy || 'geocoded';
|
||||||
|
|
||||||
|
console.log('✓ Hidden fields updated:', {
|
||||||
|
latitude: latitudeField.value,
|
||||||
|
longitude: longitudeField.value,
|
||||||
|
accuracy: accuracyField.value,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// Clear fields if no coordinates
|
||||||
|
latitudeField.value = '';
|
||||||
|
longitudeField.value = '';
|
||||||
|
accuracyField.value = '';
|
||||||
|
|
||||||
|
console.log('✓ Hidden fields cleared');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearCoordinates() {
|
||||||
|
coordinatesData = {
|
||||||
|
latitude: null,
|
||||||
|
longitude: null,
|
||||||
|
accuracy: null
|
||||||
|
};
|
||||||
|
|
||||||
|
updateCoordinatesDisplay();
|
||||||
|
updateHiddenFields();
|
||||||
|
showStatus('info', 'Coordinates cleared');
|
||||||
|
}
|
||||||
|
|
||||||
|
function showCoordinatesSection() {
|
||||||
|
const section = document.getElementById('coordinatesSection');
|
||||||
|
if (section) {
|
||||||
|
section.style.display = 'block';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showStatus(type, message) {
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize on page load
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
// Set up character counters
|
||||||
|
document.getElementById('name').addEventListener('input', () => updateCharacterCount('name', 'nameCounter', 100));
|
||||||
|
document.getElementById('location').addEventListener('input', () => updateCharacterCount('location', 'locationCounter', 100));
|
||||||
|
document.getElementById('location_address').addEventListener('input', () => updateCharacterCount('location_address', 'addressCounter', 500));
|
||||||
|
|
||||||
|
// Set up initial values
|
||||||
|
updateRangeValue('box_size');
|
||||||
|
updateRangeValue('border');
|
||||||
|
updatePreview();
|
||||||
|
|
||||||
|
// Add form validation
|
||||||
|
const form = document.getElementById('createQRForm');
|
||||||
|
if (form) {
|
||||||
|
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_text').value = this.value.toUpperCase();
|
||||||
|
updatePreview();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('back_color').addEventListener('change', function() {
|
||||||
|
document.getElementById('back_color_text').value = this.value.toUpperCase();
|
||||||
|
updatePreview();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initialize geocoding functionality with automatic section showing
|
||||||
|
const addressInput = document.getElementById('location_address');
|
||||||
|
const coordinatesSection = document.getElementById('coordinatesSection');
|
||||||
|
const geocodeBtn = document.getElementById('geocodeBtn');
|
||||||
|
const clearBtn = document.getElementById('clearCoordinatesBtn');
|
||||||
|
|
||||||
|
// Show coordinates section when address has content (like your original)
|
||||||
|
addressInput.addEventListener('input', function() {
|
||||||
|
const address = this.value.trim();
|
||||||
|
if (address.length > 10) {
|
||||||
|
coordinatesSection.style.display = 'block';
|
||||||
|
} else {
|
||||||
|
coordinatesSection.style.display = 'none';
|
||||||
|
clearCoordinates();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
geocodeBtn.addEventListener('click', function() {
|
||||||
|
const address = document.getElementById('location_address').value.trim();
|
||||||
|
if (address.length > 10) {
|
||||||
|
geocodeAddress(address);
|
||||||
|
} else {
|
||||||
|
showStatus('error', 'Please enter a complete address first');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
clearBtn.addEventListener('click', clearCoordinates);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- ===== Dynamic QR Type Toggle ===== -->
|
||||||
|
<script>
|
||||||
|
function toggleQRTypeSection() {
|
||||||
|
var type = document.getElementById('qr_type').value;
|
||||||
|
var stdName = document.getElementById('standardLocationNameGroup');
|
||||||
|
var stdDetails= document.getElementById('standardLocationDetailsSection');
|
||||||
|
var locInput = document.getElementById('location');
|
||||||
|
var addrInput = document.getElementById('location_address');
|
||||||
|
|
||||||
|
if (type === 'dynamic') {
|
||||||
|
if (stdName) stdName.style.display = 'none';
|
||||||
|
if (stdDetails)stdDetails.style.display = 'none';
|
||||||
|
if (locInput) locInput.removeAttribute('required');
|
||||||
|
if (addrInput) addrInput.removeAttribute('required');
|
||||||
|
} else {
|
||||||
|
if (stdName) stdName.style.display = 'block';
|
||||||
|
if (stdDetails)stdDetails.style.display = 'block';
|
||||||
|
if (locInput) locInput.setAttribute('required', '');
|
||||||
|
if (addrInput) addrInput.setAttribute('required', '');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<!-- ===== END Dynamic QR Type Toggle ===== -->
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function syncPhotoVerifyHidden(checkbox) {
|
||||||
|
document.getElementById('photo_verification_hidden').value = checkbox.checked ? '1' : '0';
|
||||||
|
document.getElementById('photoVerifyLabel').textContent = checkbox.checked ? 'Enabled' : 'Disabled';
|
||||||
|
document.getElementById('photoVerifyLabel').style.color = checkbox.checked ? 'var(--success-color, #10b981)' : 'var(--error-color, #ef4444)';
|
||||||
|
}
|
||||||
|
// Remove duplicate hidden field on submit (keep only the one synced by checkbox)
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
var form = document.getElementById('createQRForm');
|
||||||
|
if (form) {
|
||||||
|
form.addEventListener('submit', function() {
|
||||||
|
var cb = document.getElementById('photo_verification_enabled');
|
||||||
|
document.getElementById('photo_verification_hidden').value = cb && cb.checked ? '1' : '0';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>"latitude" name="latitude" value="" />
|
||||||
<input type="hidden" id="longitude" name="longitude" value="" />
|
<input type="hidden" id="longitude" name="longitude" value="" />
|
||||||
<input type="hidden" id="coordinate_accuracy" name="coordinate_accuracy" value="" />
|
<input type="hidden" id="coordinate_accuracy" name="coordinate_accuracy" value="" />
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user