studio-variable/geoproject-app
5
0
Fork 0
Code Issues 33 Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: studio-variable:8e674316225503d6fcccaac5af0a62801ec78514
Branches Tags
studio-variable:main
studio-variable:new-interface
studio-variable:styles
..
compare: studio-variable:75d3b557fe8a932b9f76b63dd4c897fa894eb45a
Branches Tags
studio-variable:main
studio-variable:new-interface
studio-variable:styles

No commits in common. "8e674316225503d6fcccaac5af0a62801ec78514" and "75d3b557fe8a932b9f76b63dd4c897fa894eb45a" have entirely different histories.
8e67431622 ... 75d3b557fe

4 changed files with 77 additions and 161 deletions
Download patch file Download diff file Expand all files Collapse all files

46
public/site/plugins/map-editor/api/routes.php
View file

@ -55,15 +55,6 @@ return [
// Format markers for response // Format markers for response
$markers = []; $markers = [];
foreach ($markerPages as $marker) { foreach ($markerPages as $marker) {
// Get custom icon if available
$iconFile = $marker->markerIcon()->toFile();
$iconUrl = $iconFile ? $iconFile->url() : null;
// Get icon size if set
$iconSize = $marker->markerIconSize()->isNotEmpty()
? (int) $marker->markerIconSize()->value()
: 40;
$markers[] = [ $markers[] = [
'id' => $marker->id(), 'id' => $marker->id(),
'slug' => $marker->slug(), 'slug' => $marker->slug(),
@ -73,9 +64,7 @@ return [
'lon' => (float) $marker->longitude()->value() 'lon' => (float) $marker->longitude()->value()
], ],
'num' => $marker->num(), 'num' => $marker->num(),
'panelUrl' => (string) $marker->panel()->url(), 'panelUrl' => (string) $marker->panel()->url()
'iconUrl' => $iconUrl,
'iconSize' => $iconSize
]; ];
} }
@ -166,16 +155,15 @@ return [
->filterBy('intendedTemplate', 'marker'); ->filterBy('intendedTemplate', 'marker');
$nextNum = $existingMarkers->count() + 1; $nextNum = $existingMarkers->count() + 1;
// Generate title and slug based on title // Generate unique slug
$title = 'Marqueur ' . $nextNum; $slug = 'marker-' . time();
$slug = Str::slug($title);
// Create the new marker page // Create the new marker page
$newMarker = $mapPage->createChild([ $newMarker = $mapPage->createChild([
'slug' => $slug, 'slug' => $slug,
'template' => 'marker', 'template' => 'marker',
'content' => [ 'content' => [
'title' => $title, 'title' => 'Marqueur ' . $nextNum,
'latitude' => $lat, 'latitude' => $lat,
'longitude' => $lon 'longitude' => $lon
] ]
@ -184,28 +172,19 @@ return [
// Publish the page as listed with the correct num // Publish the page as listed with the correct num
$newMarker->changeStatus('listed', $nextNum); $newMarker->changeStatus('listed', $nextNum);
// Get custom icon if available (new markers won't have one initially)
$iconFile = $newMarker->markerIcon()->toFile();
$iconUrl = $iconFile ? $iconFile->url() : null;
$iconSize = $newMarker->markerIconSize()->isNotEmpty()
? (int) $newMarker->markerIconSize()->value()
: 40;
return [ return [
'status' => 'success', 'status' => 'success',
'data' => [ 'data' => [
'marker' => [ 'marker' => [
'id' => $newMarker->id(), 'id' => $newMarker->id(),
'slug' => $newMarker->slug(), 'slug' => $newMarker->slug(),
'title' => $title, 'title' => $newMarker->title()->value(),
'position' => [ 'position' => [
'lat' => $lat, 'lat' => $lat,
'lon' => $lon 'lon' => $lon
], ],
'num' => $nextNum, 'num' => $newMarker->num(),
'panelUrl' => (string) $newMarker->panel()->url(), 'panelUrl' => '/panel/pages/' . $newMarker->id()
'iconUrl' => $iconUrl,
'iconSize' => $iconSize
] ]
] ]
]; ];
@ -288,13 +267,6 @@ return [
'longitude' => $lon 'longitude' => $lon
]); ]);
// Get custom icon if available
$iconFile = $marker->markerIcon()->toFile();
$iconUrl = $iconFile ? $iconFile->url() : null;
$iconSize = $marker->markerIconSize()->isNotEmpty()
? (int) $marker->markerIconSize()->value()
: 40;
return [ return [
'status' => 'success', 'status' => 'success',
'data' => [ 'data' => [
@ -307,9 +279,7 @@ return [
'lon' => $lon 'lon' => $lon
], ],
'num' => $marker->num(), 'num' => $marker->num(),
'panelUrl' => (string) $marker->panel()->url(), 'panelUrl' => '/panel/pages/' . $marker->id()
'iconUrl' => $iconUrl,
'iconSize' => $iconSize
] ]
] ]
]; ];

2
public/site/plugins/map-editor/index.js
View file

File diff suppressed because one or more lines are too long

101
public/site/plugins/map-editor/src/components/field/MapEditor.vue
View file

@ -36,14 +36,7 @@
</template> </template>
<script> <script>
import { import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
ref,
computed,
watch,
onMounted,
onBeforeUnmount,
nextTick,
} from 'vue';
import MapPreview from '../map/MapPreview.vue'; import MapPreview from '../map/MapPreview.vue';
import MarkerList from '../map/MarkerList.vue'; import MarkerList from '../map/MarkerList.vue';
import { useMarkersApi } from '../../composables/useMarkersApi.js'; import { useMarkersApi } from '../../composables/useMarkersApi.js';
@ -127,10 +120,9 @@ export default {
}); });
// Initialize API composable (only for multi mode) // Initialize API composable (only for multi mode)
const markersApi = const markersApi = props.mode === 'multi'
props.mode === 'multi' ? useMarkersApi(pageId.value)
? useMarkersApi(pageId.value) : { markers: ref([]), loading: ref(false), error: ref(null) };
: { markers: ref([]), loading: ref(false), error: ref(null) };
const { center, zoom, loadMapData, debouncedSave } = useMapData({ const { center, zoom, loadMapData, debouncedSave } = useMapData({
defaultCenter: { defaultCenter: {
@ -149,23 +141,14 @@ export default {
const lon = singleLon.value; const lon = singleLon.value;
// Only create marker if we have valid coordinates // Only create marker if we have valid coordinates
if ( if (!isNaN(lat) && !isNaN(lon) && lat !== null && lon !== null && lat !== 0 && lon !== 0) {
!isNaN(lat) && return [{
!isNaN(lon) && id: 'single-marker',
lat !== null && position: { lat, lon },
lon !== null && title: 'Current position',
lat !== 0 && iconUrl: props.markerIconUrl,
lon !== 0 iconSize: props.markerIconSize,
) { }];
return [
{
id: 'single-marker',
position: { lat, lon },
title: 'Current position',
iconUrl: props.markerIconUrl,
iconSize: props.markerIconSize,
},
];
} }
return []; return [];
} }
@ -192,7 +175,7 @@ export default {
return { return {
lat: latInput ? parseFloat(latInput.value) : null, lat: latInput ? parseFloat(latInput.value) : null,
lon: lonInput ? parseFloat(lonInput.value) : null, lon: lonInput ? parseFloat(lonInput.value) : null
}; };
} }
@ -211,12 +194,7 @@ export default {
singleLat.value = coords.lat; singleLat.value = coords.lat;
singleLon.value = coords.lon; singleLon.value = coords.lon;
if ( if (!isNaN(coords.lat) && !isNaN(coords.lon) && coords.lat !== 0 && coords.lon !== 0) {
!isNaN(coords.lat) &&
!isNaN(coords.lon) &&
coords.lat !== 0 &&
coords.lon !== 0
) {
center.value = { lat: coords.lat, lon: coords.lon }; center.value = { lat: coords.lat, lon: coords.lon };
} }
@ -225,11 +203,7 @@ export default {
if (form) { if (form) {
// Listen to input events // Listen to input events
form.addEventListener('input', (e) => { form.addEventListener('input', (e) => {
if ( if (e.target.name && (e.target.name.includes('latitude') || e.target.name.includes('longitude'))) {
e.target.name &&
(e.target.name.includes('latitude') ||
e.target.name.includes('longitude'))
) {
const newCoords = getCoordinatesFromForm(); const newCoords = getCoordinatesFromForm();
singleLat.value = newCoords.lat; singleLat.value = newCoords.lat;
singleLon.value = newCoords.lon; singleLon.value = newCoords.lon;
@ -243,32 +217,20 @@ export default {
if (latInput && lonInput) { if (latInput && lonInput) {
const observer = new MutationObserver(() => { const observer = new MutationObserver(() => {
const newCoords = getCoordinatesFromForm(); const newCoords = getCoordinatesFromForm();
if ( if (newCoords.lat !== singleLat.value || newCoords.lon !== singleLon.value) {
newCoords.lat !== singleLat.value ||
newCoords.lon !== singleLon.value
) {
singleLat.value = newCoords.lat; singleLat.value = newCoords.lat;
singleLon.value = newCoords.lon; singleLon.value = newCoords.lon;
} }
}); });
// Observe attribute changes (value attribute) // Observe attribute changes (value attribute)
observer.observe(latInput, { observer.observe(latInput, { attributes: true, attributeFilter: ['value'] });
attributes: true, observer.observe(lonInput, { attributes: true, attributeFilter: ['value'] });
attributeFilter: ['value'],
});
observer.observe(lonInput, {
attributes: true,
attributeFilter: ['value'],
});
// Also poll periodically as a fallback // Also poll periodically as a fallback
const pollInterval = setInterval(() => { const pollInterval = setInterval(() => {
const newCoords = getCoordinatesFromForm(); const newCoords = getCoordinatesFromForm();
if ( if (newCoords.lat !== singleLat.value || newCoords.lon !== singleLon.value) {
newCoords.lat !== singleLat.value ||
newCoords.lon !== singleLon.value
) {
singleLat.value = newCoords.lat; singleLat.value = newCoords.lat;
singleLon.value = newCoords.lon; singleLon.value = newCoords.lon;
} }
@ -309,14 +271,7 @@ export default {
([lat, lon]) => { ([lat, lon]) => {
if (props.mode === 'single') { if (props.mode === 'single') {
// Center map on new position if valid // Center map on new position if valid
if ( if (!isNaN(lat) && !isNaN(lon) && lat !== null && lon !== null && lat !== 0 && lon !== 0) {
!isNaN(lat) &&
!isNaN(lon) &&
lat !== null &&
lon !== null &&
lat !== 0 &&
lon !== 0
) {
// Force immediate reactivity // Force immediate reactivity
nextTick(() => { nextTick(() => {
if (mapPreview.value && mapPreview.value.centerOnPosition) { if (mapPreview.value && mapPreview.value.centerOnPosition) {
@ -327,14 +282,11 @@ export default {
// Coordinates are invalid/cleared - reset to default center // Coordinates are invalid/cleared - reset to default center
center.value = { center.value = {
lat: props.defaultCenter[0], lat: props.defaultCenter[0],
lon: props.defaultCenter[1], lon: props.defaultCenter[1]
}; };
nextTick(() => { nextTick(() => {
if (mapPreview.value && mapPreview.value.centerOnPosition) { if (mapPreview.value && mapPreview.value.centerOnPosition) {
mapPreview.value.centerOnPosition( mapPreview.value.centerOnPosition(center.value.lat, center.value.lon);
center.value.lat,
center.value.lon
);
} }
}); });
} }
@ -365,7 +317,7 @@ export default {
// Normalize position format (ensure lon, not lng) // Normalize position format (ensure lon, not lng)
const position = { const position = {
lat: currentCenter.lat, lat: currentCenter.lat,
lon: currentCenter.lon || currentCenter.lng, lon: currentCenter.lon || currentCenter.lng
}; };
try { try {
@ -399,10 +351,7 @@ export default {
// Center map on marker // Center map on marker
const marker = markers.value.find((m) => m.id === markerId); const marker = markers.value.find((m) => m.id === markerId);
if (marker && mapPreview.value && mapPreview.value.centerOnPosition) { if (marker && mapPreview.value && mapPreview.value.centerOnPosition) {
mapPreview.value.centerOnPosition( mapPreview.value.centerOnPosition(marker.position.lat, marker.position.lon);
marker.position.lat,
marker.position.lon
);
} }
} }
@ -449,7 +398,7 @@ export default {
function editMarker(markerId) { function editMarker(markerId) {
if (props.mode === 'single') return; if (props.mode === 'single') return;
const marker = markers.value.find((m) => m.id === markerId); const marker = markers.value.find(m => m.id === markerId);
if (marker && marker.panelUrl) { if (marker && marker.panelUrl) {
window.top.location.href = marker.panelUrl; window.top.location.href = marker.panelUrl;
} }

89
public/site/plugins/map-editor/src/composables/useMarkersApi.js
View file

@ -1,4 +1,4 @@
import { ref } from "vue"; import { ref } from 'vue';
/** /**
* Composable for managing markers via Kirby API * Composable for managing markers via Kirby API
@ -29,8 +29,8 @@ export function useMarkersApi(pageId) {
return window.csrf; return window.csrf;
} }
console.warn("CSRF token not found"); console.warn('CSRF token not found');
return ""; return '';
}; };
/** /**
@ -42,23 +42,24 @@ export function useMarkersApi(pageId) {
try { try {
const response = await fetch(`/api/map-editor/pages/${pageId}/markers`, { const response = await fetch(`/api/map-editor/pages/${pageId}/markers`, {
method: "GET", method: 'GET',
headers: { headers: {
"Content-Type": "application/json", 'Content-Type': 'application/json'
}, }
}); });
const result = await response.json(); const result = await response.json();
if (result.status === "error") { if (result.status === 'error') {
throw new Error(result.message || "Failed to fetch markers"); throw new Error(result.message || 'Failed to fetch markers');
} }
markers.value = result.data.markers || []; markers.value = result.data.markers || [];
return markers.value; return markers.value;
} catch (err) { } catch (err) {
error.value = err.message; error.value = err.message;
console.error("Error fetching markers:", err); console.error('Error fetching markers:', err);
throw err; throw err;
} finally { } finally {
loading.value = false; loading.value = false;
@ -74,28 +75,28 @@ export function useMarkersApi(pageId) {
try { try {
const response = await fetch(`/api/map-editor/pages/${pageId}/markers`, { const response = await fetch(`/api/map-editor/pages/${pageId}/markers`, {
method: "POST", method: 'POST',
headers: { headers: {
"Content-Type": "application/json", 'Content-Type': 'application/json',
"X-CSRF": getCsrfToken(), 'X-CSRF': getCsrfToken()
}, },
body: JSON.stringify({ position }), body: JSON.stringify({ position })
}); });
const result = await response.json(); const result = await response.json();
if (result.status === "error") { if (result.status === 'error') {
throw new Error(result.message || "Failed to create marker"); throw new Error(result.message || 'Failed to create marker');
} }
const newMarker = result.data.marker; const newMarker = result.data.marker;
markers.value.push(newMarker); markers.value.push(newMarker);
console.log(newMarker);
return newMarker; return newMarker;
} catch (err) { } catch (err) {
error.value = err.message; error.value = err.message;
console.error("Error creating marker:", err); console.error('Error creating marker:', err);
throw err; throw err;
} finally { } finally {
loading.value = false; loading.value = false;
@ -110,34 +111,32 @@ export function useMarkersApi(pageId) {
error.value = null; error.value = null;
try { try {
const response = await fetch( const response = await fetch(`/api/map-editor/pages/${pageId}/markers/${markerId}`, {
`/api/map-editor/pages/${pageId}/markers/${markerId}`, method: 'PATCH',
{ headers: {
method: "PATCH", 'Content-Type': 'application/json',
headers: { 'X-CSRF': getCsrfToken()
"Content-Type": "application/json",
"X-CSRF": getCsrfToken(),
},
body: JSON.stringify({ position }),
}, },
); body: JSON.stringify({ position })
});
const result = await response.json(); const result = await response.json();
if (result.status === "error") { if (result.status === 'error') {
throw new Error(result.message || "Failed to update marker position"); throw new Error(result.message || 'Failed to update marker position');
} }
// Update local marker // Update local marker
const index = markers.value.findIndex((m) => m.id === markerId); const index = markers.value.findIndex(m => m.id === markerId);
if (index !== -1) { if (index !== -1) {
markers.value[index] = result.data.marker; markers.value[index] = result.data.marker;
} }
return result.data.marker; return result.data.marker;
} catch (err) { } catch (err) {
error.value = err.message; error.value = err.message;
console.error("Error updating marker position:", err); console.error('Error updating marker position:', err);
throw err; throw err;
} finally { } finally {
loading.value = false; loading.value = false;
@ -152,33 +151,31 @@ export function useMarkersApi(pageId) {
error.value = null; error.value = null;
try { try {
const response = await fetch( const response = await fetch(`/api/map-editor/pages/${pageId}/markers/${markerId}`, {
`/api/map-editor/pages/${pageId}/markers/${markerId}`, method: 'DELETE',
{ headers: {
method: "DELETE", 'Content-Type': 'application/json',
headers: { 'X-CSRF': getCsrfToken()
"Content-Type": "application/json", }
"X-CSRF": getCsrfToken(), });
},
},
);
const result = await response.json(); const result = await response.json();
if (result.status === "error") { if (result.status === 'error') {
throw new Error(result.message || "Failed to delete marker"); throw new Error(result.message || 'Failed to delete marker');
} }
// Remove from local markers array // Remove from local markers array
const index = markers.value.findIndex((m) => m.id === markerId); const index = markers.value.findIndex(m => m.id === markerId);
if (index !== -1) { if (index !== -1) {
markers.value.splice(index, 1); markers.value.splice(index, 1);
} }
return true; return true;
} catch (err) { } catch (err) {
error.value = err.message; error.value = err.message;
console.error("Error deleting marker:", err); console.error('Error deleting marker:', err);
throw err; throw err;
} finally { } finally {
loading.value = false; loading.value = false;
@ -192,6 +189,6 @@ export function useMarkersApi(pageId) {
fetchMarkers, fetchMarkers,
createMarker, createMarker,
updateMarkerPosition, updateMarkerPosition,
deleteMarker, deleteMarker
}; };
} }