From 7341a23d3977ed5f8703aa13a456d2ca8c631890 Mon Sep 17 00:00:00 2001 From: Nguyen Ngo Date: Thu, 14 Aug 2025 20:58:33 -0400 Subject: [PATCH] Change create/edit qr code event to dropdown menu --- app.py | 5 ++ templates/create_qr_code.html | 98 ++++++++++++++++++----------------- templates/edit_qr_code.html | 58 ++++++++++----------- 3 files changed, 84 insertions(+), 77 deletions(-) diff --git a/app.py b/app.py index 5fab4e9..12ba0e5 100644 --- a/app.py +++ b/app.py @@ -2400,6 +2400,11 @@ def create_qr_code(): 'coordinate_accuracy': coordinate_accuracy } logger_handler.logger.info(f"User {session['username']} created QR code: {json.dumps(log_data)}") + logger_handler.log_user_action( + f'QR Code created: {name} with event type: {location_event}', + 'create', + additional_info={'location_event': location_event} + ) # Success message with coordinates info project_info = f" in project '{project.name}'" if project else "" diff --git a/templates/create_qr_code.html b/templates/create_qr_code.html index a974964..2dbc621 100644 --- a/templates/create_qr_code.html +++ b/templates/create_qr_code.html @@ -542,27 +542,31 @@ Event or Purpose * - - Describe the event or purpose for this QR code + + + + + Select the event type for this QR code -
- 0/200 -
- +
@@ -614,32 +618,30 @@ } function initializeCharacterCounters() { - const counters = [ - { input: "name", counter: "nameCounter", max: 100 }, - { input: "location", counter: "locationCounter", max: 100 }, - { input: "location_address", counter: "addressCounter", max: 500 }, - { input: "location_event", counter: "eventCounter", max: 200 }, + const fields = [ + { id: "name", counter: "nameCounter", max: 100 }, + { id: "location", counter: "locationCounter", max: 150 }, + { id: "location_address", counter: "addressCounter", max: 255 }, ]; - counters.forEach((item) => { - const input = document.getElementById(item.input); - const counter = document.getElementById(item.counter); + fields.forEach((field) => { + const input = document.getElementById(field.id); + const counter = document.getElementById(field.counter); if (input && counter) { - input.addEventListener("input", function () { - const length = this.value.length; - counter.textContent = `${length}/${item.max}`; + function updateCounter() { + const length = input.value.length; + counter.textContent = `${length}/${field.max}`; - if (length > item.max * 0.9) { - counter.classList.add("warning"); + if (length > field.max * 0.9) { + counter.style.color = "var(--warning-color)"; } else { - counter.classList.remove("warning"); + counter.style.color = ""; } - }); + } - // Initial count - const length = input.value.length; - counter.textContent = `${length}/${item.max}`; + input.addEventListener("input", updateCounter); + updateCounter(); } }); } @@ -743,28 +745,28 @@ 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'; - + accuracyField.value = coordinatesData.accuracy || "geocoded"; + console.log("✓ Hidden fields updated:", { latitude: latitudeField.value, longitude: longitudeField.value, - accuracy: accuracyField.value + accuracy: accuracyField.value, }); } else { // Clear fields if no coordinates - latitudeField.value = ''; - longitudeField.value = ''; - accuracyField.value = ''; - + latitudeField.value = ""; + longitudeField.value = ""; + accuracyField.value = ""; + console.log("✓ Hidden fields cleared"); } } @@ -816,7 +818,9 @@ function validateForm() { const name = document.getElementById("name").value.trim(); const location = document.getElementById("location").value.trim(); - const address = document.getElementById("location_address").value.trim(); + const address = document + .getElementById("location_address") + .value.trim(); if (!name || !location || !address) { alert("Please fill in all required fields"); @@ -827,7 +831,7 @@ const latitude = document.getElementById("latitude").value; const longitude = document.getElementById("longitude").value; const accuracy = document.getElementById("coordinate_accuracy").value; - + console.log("🚀 Form submission data:", { name: name, location: location, @@ -835,8 +839,8 @@ coordinates: { latitude: latitude, longitude: longitude, - accuracy: accuracy - } + accuracy: accuracy, + }, }); return true; @@ -868,16 +872,16 @@ // Project dropdown functionality function initializeProjectDropdown() { - const projectSelect = document.getElementById('project_id'); - + const projectSelect = document.getElementById("project_id"); + if (projectSelect) { // Load projects dynamically (optional enhancement) // For now, projects are loaded server-side - projectSelect.addEventListener('change', function() { + projectSelect.addEventListener("change", function () { const selectedOption = this.options[this.selectedIndex]; - + if (selectedOption.value) { - console.log('Selected project:', selectedOption.text); + console.log("Selected project:", selectedOption.text); } }); } diff --git a/templates/edit_qr_code.html b/templates/edit_qr_code.html index 9bed09b..7b84d91 100644 --- a/templates/edit_qr_code.html +++ b/templates/edit_qr_code.html @@ -657,24 +657,20 @@ Event or Purpose * - - Describe the event or purpose for this QR code -
- {{ qr_code.location_event|length }}/200 -
+ + + + + Select the event type for this QR code
@@ -816,28 +812,30 @@ } function initializeCharacterCounters() { - const counters = [ - { input: 'name', counter: 'nameCounter', max: 100 }, - { input: 'location', counter: 'locationCounter', max: 100 }, - { input: 'location_address', counter: 'addressCounter', max: 500 }, - { input: 'location_event', counter: 'eventCounter', max: 200 } + const fields = [ + { id: 'name', counter: 'nameCounter', max: 100 }, + { id: 'location', counter: 'locationCounter', max: 150 }, + { id: 'location_address', counter: 'addressCounter', max: 255 } ]; - counters.forEach(item => { - const input = document.getElementById(item.input); - const counter = document.getElementById(item.counter); - + fields.forEach(field => { + const input = document.getElementById(field.id); + const counter = document.getElementById(field.counter); + if (input && counter) { - input.addEventListener('input', function() { - const length = this.value.length; - counter.textContent = `${length}/${item.max}`; - - if (length > item.max * 0.9) { - counter.classList.add('warning'); + function updateCounter() { + const length = input.value.length; + counter.textContent = `${length}/${field.max}`; + + if (length > field.max * 0.9) { + counter.style.color = 'var(--warning-color)'; } else { - counter.classList.remove('warning'); + counter.style.color = ''; } - }); + } + + input.addEventListener('input', updateCounter); + updateCounter(); } }); }