kevinsivic/dawarich
1
0
Fork 0
mirror of https://github.com/Freika/dawarich.git synced 2026-01-11 09:41:40 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Respect Dawarich format

Browse source
This commit is contained in:
Xantin 2025-08-24 00:14:01 +02:00
parent f0e8c211ff
commit 2f34e6bde7
1 changed files with 88 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

214
app/javascript/controllers/add_visit_controller.js
View file

@ -5,8 +5,8 @@ import { showFlashMessage } from "../maps/helpers";
export default class extends Controller { export default class extends Controller {
static targets = [""]; static targets = [""];
static values = { static values = {
apiKey: String, apiKey: String
}; }
connect() { connect() {
console.log("Add visit controller connected"); console.log("Add visit controller connected");
@ -32,11 +32,7 @@ export default class extends Controller {
if (mapElement) { if (mapElement) {
// Try to get Stimulus controller instance // Try to get Stimulus controller instance
const stimulusController = const stimulusController = this.application.getControllerForElementAndIdentifier(mapElement, 'maps');
this.application.getControllerForElementAndIdentifier(
mapElement,
"maps"
);
if (stimulusController && stimulusController.map) { if (stimulusController && stimulusController.map) {
this.map = stimulusController.map; this.map = stimulusController.map;
this.mapsController = stimulusController; this.mapsController = stimulusController;
@ -47,12 +43,10 @@ export default class extends Controller {
} }
// Fallback: check for map container and try to find map instance // Fallback: check for map container and try to find map instance
const mapContainer = document.getElementById("map"); const mapContainer = document.getElementById('map');
if (mapContainer && mapContainer._leaflet_id) { if (mapContainer && mapContainer._leaflet_id) {
// Get map instance from Leaflet registry // Get map instance from Leaflet registry
this.map = window.L._getMap this.map = window.L._getMap ? window.L._getMap(mapContainer._leaflet_id) : null;
? window.L._getMap(mapContainer._leaflet_id)
: null;
if (!this.map) { if (!this.map) {
// Try through Leaflet internal registry // Try through Leaflet internal registry
@ -62,8 +56,7 @@ export default class extends Controller {
if (this.map) { if (this.map) {
// Get API key from map element data // Get API key from map element data
this.apiKeyValue = this.apiKeyValue = mapContainer.dataset.api_key || this.element.dataset.apiKey;
mapContainer.dataset.api_key || this.element.dataset.apiKey;
this.setupAddVisitButton(); this.setupAddVisitButton();
return; return;
} }
@ -79,55 +72,52 @@ export default class extends Controller {
// Create the Add Visit control // Create the Add Visit control
const AddVisitControl = L.Control.extend({ const AddVisitControl = L.Control.extend({
onAdd: (map) => { onAdd: (map) => {
const button = L.DomUtil.create( const button = L.DomUtil.create('button', 'leaflet-control-button add-visit-button');
"button", button.innerHTML = '➕';
"leaflet-control-button add-visit-button" button.title = 'Add a visit';
);
button.innerHTML = "➕";
button.title = "Add a visit";
// Style the button to match other map controls // Style the button to match other map controls
button.style.width = "48px"; button.style.width = '48px';
button.style.height = "48px"; button.style.height = '48px';
button.style.border = "none"; button.style.border = 'none';
button.style.cursor = "pointer"; button.style.cursor = 'pointer';
button.style.boxShadow = "0 1px 4px rgba(0,0,0,0.3)"; button.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)';
button.style.backgroundColor = "white"; button.style.backgroundColor = 'white';
button.style.borderRadius = "4px"; button.style.borderRadius = '4px';
button.style.padding = "0"; button.style.padding = '0';
button.style.lineHeight = "48px"; button.style.lineHeight = '48px';
button.style.fontSize = "18px"; button.style.fontSize = '18px';
button.style.textAlign = "center"; button.style.textAlign = 'center';
button.style.transition = "all 0.2s ease"; button.style.transition = 'all 0.2s ease';
// Disable map interactions when clicking the button // Disable map interactions when clicking the button
L.DomEvent.disableClickPropagation(button); L.DomEvent.disableClickPropagation(button);
// Add hover effects // Add hover effects
button.addEventListener("mouseenter", () => { button.addEventListener('mouseenter', () => {
if (!this.isAddingVisit) { if (!this.isAddingVisit) {
button.style.backgroundColor = "#f0f0f0"; button.style.backgroundColor = '#f0f0f0';
} }
}); });
button.addEventListener("mouseleave", () => { button.addEventListener('mouseleave', () => {
if (!this.isAddingVisit) { if (!this.isAddingVisit) {
button.style.backgroundColor = "white"; button.style.backgroundColor = 'white';
} }
}); });
// Toggle add visit mode on button click // Toggle add visit mode on button click
L.DomEvent.on(button, "click", () => { L.DomEvent.on(button, 'click', () => {
this.toggleAddVisitMode(button); this.toggleAddVisitMode(button);
}); });
this.addVisitButton = button; this.addVisitButton = button;
return button; return button;
}, }
}); });
// Add the control to the map (top right, below existing buttons) // Add the control to the map (top right, below existing buttons)
this.map.addControl(new AddVisitControl({ position: "topright" })); this.map.addControl(new AddVisitControl({ position: 'topright' }));
} }
toggleAddVisitMode(button) { toggleAddVisitMode(button) {
@ -144,32 +134,32 @@ export default class extends Controller {
this.isAddingVisit = true; this.isAddingVisit = true;
// Update button style to show active state // Update button style to show active state
button.style.backgroundColor = "#dc3545"; button.style.backgroundColor = '#dc3545';
button.style.color = "white"; button.style.color = 'white';
button.innerHTML = "✕"; button.innerHTML = '✕';
// Change cursor to crosshair // Change cursor to crosshair
this.map.getContainer().style.cursor = "crosshair"; this.map.getContainer().style.cursor = 'crosshair';
// Add map click listener // Add map click listener
this.map.on("click", this.onMapClick, this); this.map.on('click', this.onMapClick, this);
showFlashMessage("notice", "Click on the map to place a visit"); showFlashMessage('notice', 'Click on the map to place a visit');
} }
exitAddVisitMode(button) { exitAddVisitMode(button) {
this.isAddingVisit = false; this.isAddingVisit = false;
// Reset button style // Reset button style
button.style.backgroundColor = "white"; button.style.backgroundColor = 'white';
button.style.color = "black"; button.style.color = 'black';
button.innerHTML = "➕"; button.innerHTML = '➕';
// Reset cursor // Reset cursor
this.map.getContainer().style.cursor = ""; this.map.getContainer().style.cursor = '';
// Remove map click listener // Remove map click listener
this.map.off("click", this.onMapClick, this); this.map.off('click', this.onMapClick, this);
// Remove any existing marker // Remove any existing marker
if (this.addVisitMarker) { if (this.addVisitMarker) {
@ -198,11 +188,11 @@ export default class extends Controller {
this.addVisitMarker = L.marker([lat, lng], { this.addVisitMarker = L.marker([lat, lng], {
draggable: true, draggable: true,
icon: L.divIcon({ icon: L.divIcon({
className: "add-visit-marker", className: 'add-visit-marker',
html: "📍", html: '📍',
iconSize: [30, 30], iconSize: [30, 30],
iconAnchor: [15, 15], iconAnchor: [15, 15]
}), })
}).addTo(this.map); }).addTo(this.map);
// Show the visit form popup // Show the visit form popup
@ -212,11 +202,10 @@ export default class extends Controller {
showVisitForm(lat, lng) { showVisitForm(lat, lng) {
// Get current date/time for default values // Get current date/time for default values
const now = new Date(); const now = new Date();
const oneHourLater = new Date(now.getTime() + 60 * 60 * 1000); const oneHourLater = new Date(now.getTime() + (60 * 60 * 1000));
// Format dates for datetime-local input (2011-10-05T14:48) (YYYY-MM-DDTHH:mm) const pad = (n) => n.toString().padStart(2, "0");
const formatDateTime = (date) => { const formatDateTime = (date) => {
const pad = (n) => n.toString().padStart(2, "0");
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad( return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(
date.getDate() date.getDate()
)}T${pad(date.getHours())}:${pad(date.getMinutes())}`; )}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
@ -270,7 +259,7 @@ export default class extends Controller {
closeOnClick: false, closeOnClick: false,
autoClose: false, autoClose: false,
maxWidth: 300, maxWidth: 300,
className: "visit-form-popup", className: 'visit-form-popup'
}) })
.setLatLng([lat, lng]) .setLatLng([lat, lng])
.setContent(formHTML) .setContent(formHTML)
@ -278,16 +267,16 @@ export default class extends Controller {
// Add event listeners after the popup is added to DOM // Add event listeners after the popup is added to DOM
setTimeout(() => { setTimeout(() => {
const form = document.getElementById("add-visit-form"); const form = document.getElementById('add-visit-form');
const cancelButton = document.getElementById("cancel-visit"); const cancelButton = document.getElementById('cancel-visit');
const nameInput = document.getElementById("visit-name"); const nameInput = document.getElementById('visit-name');
if (form) { if (form) {
form.addEventListener("submit", (e) => this.handleFormSubmit(e)); form.addEventListener('submit', (e) => this.handleFormSubmit(e));
} }
if (cancelButton) { if (cancelButton) {
cancelButton.addEventListener("click", () => { cancelButton.addEventListener('click', () => {
this.exitAddVisitMode(this.addVisitButton); this.exitAddVisitMode(this.addVisitButton);
}); });
} }
@ -305,10 +294,9 @@ export default class extends Controller {
const form = event.target; const form = event.target;
const formData = new FormData(form); const formData = new FormData(form);
// Convert local datetime to UTC ISO string function localToUTCISOString(localDateTimeString) {
const localToUTCISOString = (localDateTimeString) => {
const local = new Date(localDateTimeString); const local = new Date(localDateTimeString);
return local.toISOString(); // always UTC return local.toISOString();
}; };
// Get form values // Get form values
@ -327,7 +315,7 @@ export default class extends Controller {
const endTime = new Date(visitData.visit.ended_at); const endTime = new Date(visitData.visit.ended_at);
if (endTime <= startTime) { if (endTime <= startTime) {
showFlashMessage("error", "End time must be after start time"); showFlashMessage('error', 'End time must be after start time');
return; return;
} }
@ -335,26 +323,23 @@ export default class extends Controller {
const submitButton = form.querySelector('button[type="submit"]'); const submitButton = form.querySelector('button[type="submit"]');
const originalText = submitButton.textContent; const originalText = submitButton.textContent;
submitButton.disabled = true; submitButton.disabled = true;
submitButton.textContent = "Creating..."; submitButton.textContent = 'Creating...';
try { try {
const response = await fetch(`/api/v1/visits`, { const response = await fetch(`/api/v1/visits`, {
method: "POST", method: 'POST',
headers: { headers: {
"Content-Type": "application/json", 'Content-Type': 'application/json',
Accept: "application/json", 'Accept': 'application/json',
Authorization: `Bearer ${this.apiKeyValue}`, 'Authorization': `Bearer ${this.apiKeyValue}`
}, },
body: JSON.stringify(visitData), body: JSON.stringify(visitData)
}); });
const data = await response.json(); const data = await response.json();
if (response.ok) { if (response.ok) {
showFlashMessage( showFlashMessage('notice', `Visit "${visitData.visit.name}" created successfully!`);
"notice",
`Visit "${visitData.visit.name}" created successfully!`
);
this.exitAddVisitMode(this.addVisitButton); this.exitAddVisitMode(this.addVisitButton);
// Refresh visits layer - this will clear and refetch data // Refresh visits layer - this will clear and refetch data
@ -365,13 +350,12 @@ export default class extends Controller {
this.ensureVisitsLayersEnabled(); this.ensureVisitsLayersEnabled();
}, 300); }, 300);
} else { } else {
const errorMessage = const errorMessage = data.error || data.message || 'Failed to create visit';
data.error || data.message || "Failed to create visit"; showFlashMessage('error', errorMessage);
showFlashMessage("error", errorMessage);
} }
} catch (error) { } catch (error) {
console.error("Error creating visit:", error); console.error('Error creating visit:', error);
showFlashMessage("error", "Network error: Failed to create visit"); showFlashMessage('error', 'Network error: Failed to create visit');
} finally { } finally {
// Re-enable form // Re-enable form
submitButton.disabled = false; submitButton.disabled = false;
@ -380,20 +364,16 @@ export default class extends Controller {
} }
refreshVisitsLayer() { refreshVisitsLayer() {
console.log("Attempting to refresh visits layer..."); console.log('Attempting to refresh visits layer...');
// Try multiple approaches to refresh the visits layer // Try multiple approaches to refresh the visits layer
const mapsController = document.querySelector('[data-controller*="maps"]'); const mapsController = document.querySelector('[data-controller*="maps"]');
if (mapsController) { if (mapsController) {
// Try to get the Stimulus controller instance // Try to get the Stimulus controller instance
const stimulusController = const stimulusController = this.application.getControllerForElementAndIdentifier(mapsController, 'maps');
this.application.getControllerForElementAndIdentifier(
mapsController,
"maps"
);
if (stimulusController && stimulusController.visitsManager) { if (stimulusController && stimulusController.visitsManager) {
console.log("Found maps controller with visits manager"); console.log('Found maps controller with visits manager');
// Clear existing visits and fetch fresh data // Clear existing visits and fetch fresh data
if (stimulusController.visitsManager.visitCircles) { if (stimulusController.visitsManager.visitCircles) {
@ -404,62 +384,48 @@ export default class extends Controller {
} }
// Refresh the visits data // Refresh the visits data
if ( if (typeof stimulusController.visitsManager.fetchAndDisplayVisits === 'function') {
typeof stimulusController.visitsManager.fetchAndDisplayVisits === console.log('Refreshing visits data...');
"function"
) {
console.log("Refreshing visits data...");
stimulusController.visitsManager.fetchAndDisplayVisits(); stimulusController.visitsManager.fetchAndDisplayVisits();
} }
} else { } else {
console.log("Could not find maps controller or visits manager"); console.log('Could not find maps controller or visits manager');
// Fallback: Try to dispatch a custom event // Fallback: Try to dispatch a custom event
const refreshEvent = new CustomEvent("visits:refresh", { const refreshEvent = new CustomEvent('visits:refresh', { bubbles: true });
bubbles: true,
});
mapsController.dispatchEvent(refreshEvent); mapsController.dispatchEvent(refreshEvent);
} }
} else { } else {
console.log("Could not find maps controller element"); console.log('Could not find maps controller element');
} }
} }
ensureVisitsLayersEnabled() { ensureVisitsLayersEnabled() {
console.log("Ensuring visits layers are enabled..."); console.log('Ensuring visits layers are enabled...');
const mapsController = document.querySelector('[data-controller*="maps"]'); const mapsController = document.querySelector('[data-controller*="maps"]');
if (mapsController) { if (mapsController) {
const stimulusController = const stimulusController = this.application.getControllerForElementAndIdentifier(mapsController, 'maps');
this.application.getControllerForElementAndIdentifier(
mapsController,
"maps"
);
if ( if (stimulusController && stimulusController.map && stimulusController.visitsManager) {
stimulusController &&
stimulusController.map &&
stimulusController.visitsManager
) {
const map = stimulusController.map; const map = stimulusController.map;
const visitsManager = stimulusController.visitsManager; const visitsManager = stimulusController.visitsManager;
// Get the confirmed visits layer (newly created visits are always confirmed) // Get the confirmed visits layer (newly created visits are always confirmed)
const confirmedVisitsLayer = const confirmedVisitsLayer = visitsManager.getConfirmedVisitCirclesLayer();
visitsManager.getConfirmedVisitCirclesLayer();
// Ensure confirmed visits layer is added to map since we create confirmed visits // Ensure confirmed visits layer is added to map since we create confirmed visits
if (confirmedVisitsLayer && !map.hasLayer(confirmedVisitsLayer)) { if (confirmedVisitsLayer && !map.hasLayer(confirmedVisitsLayer)) {
console.log("Adding confirmed visits layer to map"); console.log('Adding confirmed visits layer to map');
map.addLayer(confirmedVisitsLayer); map.addLayer(confirmedVisitsLayer);
// Update the layer control checkbox to reflect the layer is now active // Update the layer control checkbox to reflect the layer is now active
this.updateLayerControlCheckbox("Confirmed Visits", true); this.updateLayerControlCheckbox('Confirmed Visits', true);
} }
// Refresh visits data to include the new visit // Refresh visits data to include the new visit
if (typeof visitsManager.fetchAndDisplayVisits === "function") { if (typeof visitsManager.fetchAndDisplayVisits === 'function') {
console.log("Final refresh of visits to show new visit..."); console.log('Final refresh of visits to show new visit...');
visitsManager.fetchAndDisplayVisits(); visitsManager.fetchAndDisplayVisits();
} }
} }
@ -468,32 +434,28 @@ export default class extends Controller {
updateLayerControlCheckbox(layerName, isEnabled) { updateLayerControlCheckbox(layerName, isEnabled) {
// Find the layer control input for the specified layer // Find the layer control input for the specified layer
const layerControlContainer = document.querySelector( const layerControlContainer = document.querySelector('.leaflet-control-layers');
".leaflet-control-layers"
);
if (!layerControlContainer) { if (!layerControlContainer) {
console.log("Layer control container not found"); console.log('Layer control container not found');
return; return;
} }
const inputs = layerControlContainer.querySelectorAll( const inputs = layerControlContainer.querySelectorAll('input[type="checkbox"]');
'input[type="checkbox"]' inputs.forEach(input => {
);
inputs.forEach((input) => {
const label = input.nextElementSibling; const label = input.nextElementSibling;
if (label && label.textContent.trim() === layerName) { if (label && label.textContent.trim() === layerName) {
console.log(`Updating ${layerName} checkbox to ${isEnabled}`); console.log(`Updating ${layerName} checkbox to ${isEnabled}`);
input.checked = isEnabled; input.checked = isEnabled;
// Trigger change event to ensure proper state management // Trigger change event to ensure proper state management
input.dispatchEvent(new Event("change", { bubbles: true })); input.dispatchEvent(new Event('change', { bubbles: true }));
} }
}); });
} }
cleanup() { cleanup() {
if (this.map) { if (this.map) {
this.map.off("click", this.onMapClick, this); this.map.off('click', this.onMapClick, this);
if (this.addVisitMarker) { if (this.addVisitMarker) {
this.map.removeLayer(this.addVisitMarker); this.map.removeLayer(this.addVisitMarker);
@ -504,4 +466,4 @@ export default class extends Controller {
} }
} }
} }
} }