From 89bf472867d18e0d88f5e1c83e860ca369d4196b Mon Sep 17 00:00:00 2001 From: Dillard Blom Date: Sat, 11 Jul 2026 02:18:34 +0200 Subject: [PATCH] Fase 3 feedback round 3: sidebar icons, thumbnail preview, location search - Sidebar submenu bullets (List all/Add new/Batch create) swapped from far fa-circle to fas fa-angle-right - the outlined circle read as an unchecked radio button, per feedback. - List-page qr thumbnails now sit in a fixed 100x100 box with object-fit:contain instead of width/height attrs, so taller images (e.g. icon-above-qr) no longer get squashed into a square. Thumbnails are now clickable, opening a shared Bootstrap modal with the full-size image (same data-toggle/data-target pattern already used for the delete-confirmation modal). - Location QR form gets an address search box backed by OpenStreetMap Nominatim (dist/js/location-search.js): free-text query, pick a result, it fills in latitude/longitude. No API key needed; the browser talks to nominatim.openstreetmap.org directly, called out in the field's help text since queries leave the self-hosted server. --- src/dist/css/custom.css | 17 +++++++++ src/dist/js/location-search.js | 69 ++++++++++++++++++++++++++++++++++ src/forms/static/location.php | 35 ++++++++++++----- src/forms/table_dynamic.php | 32 +++++++++++++++- src/forms/table_static.php | 32 +++++++++++++++- src/includes/sidebar.php | 10 ++--- 6 files changed, 178 insertions(+), 17 deletions(-) create mode 100644 src/dist/js/location-search.js diff --git a/src/dist/css/custom.css b/src/dist/css/custom.css index f0da0aa..f4a9fff 100644 --- a/src/dist/css/custom.css +++ b/src/dist/css/custom.css @@ -6,4 +6,21 @@ #err-msg { display: none; color: red; +} + +/* List-page qr code thumbnails: fixed box, but object-fit:contain instead of + width/height attrs so taller images (e.g. icon-above-qr) don't get squashed. */ +.qr-thumb-link { + display: inline-block; + padding: 0; + border: 0; + background: none; + cursor: pointer; +} +.qr-thumb-img { + width: 100px; + height: 100px; + object-fit: contain; + background: #fff; + border: 1px solid #dee2e6; } \ No newline at end of file diff --git a/src/dist/js/location-search.js b/src/dist/js/location-search.js new file mode 100644 index 0000000..3059f4c --- /dev/null +++ b/src/dist/js/location-search.js @@ -0,0 +1,69 @@ +(function () { + document.addEventListener('DOMContentLoaded', function () { + var searchInput = document.getElementById('location_search'); + var searchBtn = document.getElementById('location_search_btn'); + var resultsBox = document.getElementById('location_search_results'); + var latInput = document.getElementById('latitude'); + var lngInput = document.getElementById('longitude'); + + if (!searchInput || !searchBtn || !resultsBox || !latInput || !lngInput) { + return; + } + + function clearResults() { + resultsBox.innerHTML = ''; + } + + function doSearch() { + var query = searchInput.value.trim(); + if (!query) { + return; + } + + clearResults(); + resultsBox.innerHTML = '
Searching...
'; + + fetch('https://nominatim.openstreetmap.org/search?format=json&limit=5&q=' + encodeURIComponent(query)) + .then(function (response) { return response.json(); }) + .then(function (results) { + clearResults(); + + if (!results.length) { + resultsBox.innerHTML = '
No results found.
'; + return; + } + + results.forEach(function (place) { + var item = document.createElement('button'); + item.type = 'button'; + item.className = 'list-group-item list-group-item-action'; + item.textContent = place.display_name; + item.addEventListener('click', function () { + latInput.value = place.lat; + lngInput.value = place.lon; + searchInput.value = place.display_name; + clearResults(); + }); + resultsBox.appendChild(item); + }); + }) + .catch(function () { + resultsBox.innerHTML = '
Search failed (network error).
'; + }); + } + + searchBtn.addEventListener('click', doSearch); + searchInput.addEventListener('keydown', function (e) { + if (e.key === 'Enter') { + e.preventDefault(); + doSearch(); + } + }); + + document.addEventListener('click', function (e) { + if (e.target !== searchInput && !resultsBox.contains(e.target)) { + clearResults(); + } + }); + }); +})(); diff --git a/src/forms/static/location.php b/src/forms/static/location.php index 597afb0..788c95c 100644 --- a/src/forms/static/location.php +++ b/src/forms/static/location.php @@ -2,26 +2,41 @@ -
-
- - +
+
+ +
+ +
+ +
+
+
+ Looks up coordinates via OpenStreetMap Nominatim (your search leaves this server and goes to nominatim.openstreetmap.org). Or enter coordinates directly below.
- +
- - + +
- + +
+
+ + +
+
+
-
+
- + + \ No newline at end of file diff --git a/src/forms/table_dynamic.php b/src/forms/table_dynamic.php index 5acb57d..b26f3e8 100644 --- a/src/forms/table_dynamic.php +++ b/src/forms/table_dynamic.php @@ -70,7 +70,11 @@ - '; ?> + + QR code for <?php echo htmlspecialchars($row['filename']); ?> + @@ -135,6 +139,32 @@ + + + + + + +