diff --git a/app/javascript/controllers/base_controller.js b/app/javascript/controllers/base_controller.js index f9cd6faa..ab6f12f7 100644 --- a/app/javascript/controllers/base_controller.js +++ b/app/javascript/controllers/base_controller.js @@ -19,7 +19,5 @@ export default class extends Controller { const selfHosted = document.documentElement.dataset.selfHosted === 'true' this.selfHostedValue = selfHosted } - - console.log(`Self-hosted mode in base controller: ${this.selfHostedValue}`) } } diff --git a/app/javascript/controllers/maps_controller.js b/app/javascript/controllers/maps_controller.js index 1ebacde0..bc3bb93f 100644 --- a/app/javascript/controllers/maps_controller.js +++ b/app/javascript/controllers/maps_controller.js @@ -14,18 +14,6 @@ import { import { fetchAndDrawAreas, handleAreaCreated } from "../maps/areas"; import { showFlashMessage, fetchAndDisplayPhotos } from "../maps/helpers"; - -import { - osmMapLayer, - osmHotMapLayer, - OPNVMapLayer, - openTopoMapLayer, - cyclOsmMapLayer, - esriWorldStreetMapLayer, - esriWorldTopoMapLayer, - esriWorldImageryMapLayer, - esriWorldGrayCanvasMapLayer -} from "../maps/layers"; import { countryCodesMap } from "../maps/country_codes"; import "leaflet-draw"; diff --git a/app/javascript/maps/helpers.js b/app/javascript/maps/helpers.js index 7c850f03..59234a98 100644 --- a/app/javascript/maps/helpers.js +++ b/app/javascript/maps/helpers.js @@ -87,10 +87,19 @@ export function haversineDistance(lat1, lon1, lat2, lon2, unit = 'km') { } export function showFlashMessage(type, message) { - // Create the outer flash container div + // Get or create the flash container + let flashContainer = document.getElementById('flash-messages'); + if (!flashContainer) { + flashContainer = document.createElement('div'); + flashContainer.id = 'flash-messages'; + flashContainer.className = 'fixed top-5 right-5 flex flex-col-reverse gap-2 z-40'; + document.body.appendChild(flashContainer); + } + + // Create the flash message div const flashDiv = document.createElement('div'); flashDiv.setAttribute('data-controller', 'removals'); - flashDiv.className = `flex items-center fixed top-5 right-5 ${classesForFlash(type)} py-3 px-5 rounded-lg`; + flashDiv.className = `flex items-center justify-between ${classesForFlash(type)} py-3 px-5 rounded-lg z-40`; // Create the message div const messageDiv = document.createElement('div'); @@ -101,6 +110,7 @@ export function showFlashMessage(type, message) { const closeButton = document.createElement('button'); closeButton.setAttribute('type', 'button'); closeButton.setAttribute('data-action', 'click->removals#remove'); + closeButton.className = 'ml-auto'; // Ensures button stays on the right // Create the SVG icon for the close button const closeIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); @@ -116,21 +126,22 @@ export function showFlashMessage(type, message) { closeIconPath.setAttribute('stroke-width', '2'); closeIconPath.setAttribute('d', 'M6 18L18 6M6 6l12 12'); - // Append the path to the SVG + // Append all elements closeIcon.appendChild(closeIconPath); - // Append the SVG to the close button closeButton.appendChild(closeIcon); - - // Append the message and close button to the flash div flashDiv.appendChild(messageDiv); flashDiv.appendChild(closeButton); + flashContainer.appendChild(flashDiv); - // Append the flash message to the body or a specific flash container - document.body.appendChild(flashDiv); - - // Optional: Automatically remove the flash message after 5 seconds + // Automatically remove after 5 seconds setTimeout(() => { - flashDiv.remove(); + if (flashDiv && flashDiv.parentNode) { + flashDiv.remove(); + // Remove container if empty + if (flashContainer && !flashContainer.hasChildNodes()) { + flashContainer.remove(); + } + } }, 5000); } diff --git a/app/views/visits/index.html.erb b/app/views/visits/index.html.erb index 3fd03b64..e27dbac2 100644 --- a/app/views/visits/index.html.erb +++ b/app/views/visits/index.html.erb @@ -27,7 +27,7 @@ -