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
$markers = [];
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[] = [
'id' => $marker->id(),
'slug' => $marker->slug(),
@ -73,9 +64,7 @@ return [
'lon' => (float) $marker->longitude()->value()
],
'num' => $marker->num(),
'panelUrl' => (string) $marker->panel()->url(),
'iconUrl' => $iconUrl,
'iconSize' => $iconSize
'panelUrl' => (string) $marker->panel()->url()
];
}
@ -166,16 +155,15 @@ return [
->filterBy('intendedTemplate', 'marker');
$nextNum = $existingMarkers->count() + 1;
// Generate title and slug based on title
$title = 'Marqueur ' . $nextNum;
$slug = Str::slug($title);
// Generate unique slug
$slug = 'marker-' . time();
// Create the new marker page
$newMarker = $mapPage->createChild([
'slug' => $slug,
'template' => 'marker',
'content' => [
'title' => $title,
'title' => 'Marqueur ' . $nextNum,
'latitude' => $lat,
'longitude' => $lon
]
@ -184,28 +172,19 @@ return [
// Publish the page as listed with the correct num
$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 [
'status' => 'success',
'data' => [
'marker' => [
'id' => $newMarker->id(),
'slug' => $newMarker->slug(),
'title' => $title,
'title' => $newMarker->title()->value(),
'position' => [
'lat' => $lat,
'lon' => $lon
],
'num' => $nextNum,
'panelUrl' => (string) $newMarker->panel()->url(),
'iconUrl' => $iconUrl,
'iconSize' => $iconSize
'num' => $newMarker->num(),
'panelUrl' => '/panel/pages/' . $newMarker->id()
]
]
];
@ -288,13 +267,6 @@ return [
'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 [
'status' => 'success',
'data' => [
@ -307,9 +279,7 @@ return [
'lon' => $lon
],
'num' => $marker->num(),
'panelUrl' => (string) $marker->panel()->url(),
'iconUrl' => $iconUrl,
'iconSize' => $iconSize
'panelUrl' => '/panel/pages/' . $marker->id()
]
]
];

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>
<script>
import {
ref,
computed,
watch,
onMounted,
onBeforeUnmount,
nextTick,
} from 'vue';
import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
import MapPreview from '../map/MapPreview.vue';
import MarkerList from '../map/MarkerList.vue';
import { useMarkersApi } from '../../composables/useMarkersApi.js';
@ -127,10 +120,9 @@ export default {
});
// Initialize API composable (only for multi mode)
const markersApi =
props.mode === 'multi'
? useMarkersApi(pageId.value)
: { markers: ref([]), loading: ref(false), error: ref(null) };
const markersApi = props.mode === 'multi'
? useMarkersApi(pageId.value)
: { markers: ref([]), loading: ref(false), error: ref(null) };
const { center, zoom, loadMapData, debouncedSave } = useMapData({
defaultCenter: {
@ -149,23 +141,14 @@ export default {
const lon = singleLon.value;
// Only create marker if we have valid coordinates
if (
!isNaN(lat) &&
!isNaN(lon) &&
lat !== null &&
lon !== null &&
lat !== 0 &&
lon !== 0
) {
return [
{
id: 'single-marker',
position: { lat, lon },
title: 'Current position',
iconUrl: props.markerIconUrl,
iconSize: props.markerIconSize,
},
];
if (!isNaN(lat) && !isNaN(lon) && lat !== null && lon !== null && lat !== 0 && lon !== 0) {
return [{
id: 'single-marker',
position: { lat, lon },
title: 'Current position',
iconUrl: props.markerIconUrl,
iconSize: props.markerIconSize,
}];
}
return [];
}
@ -192,7 +175,7 @@ export default {
return {
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;
singleLon.value = coords.lon;
if (
!isNaN(coords.lat) &&
!isNaN(coords.lon) &&
coords.lat !== 0 &&
coords.lon !== 0
) {
if (!isNaN(coords.lat) && !isNaN(coords.lon) && coords.lat !== 0 && coords.lon !== 0) {
center.value = { lat: coords.lat, lon: coords.lon };
}
@ -225,11 +203,7 @@ export default {
if (form) {
// Listen to input events
form.addEventListener('input', (e) => {
if (
e.target.name &&
(e.target.name.includes('latitude') ||
e.target.name.includes('longitude'))
) {
if (e.target.name && (e.target.name.includes('latitude') || e.target.name.includes('longitude'))) {
const newCoords = getCoordinatesFromForm();
singleLat.value = newCoords.lat;
singleLon.value = newCoords.lon;
@ -243,32 +217,20 @@ export default {
if (latInput && lonInput) {
const observer = new MutationObserver(() => {
const newCoords = getCoordinatesFromForm();
if (
newCoords.lat !== singleLat.value ||
newCoords.lon !== singleLon.value
) {
if (newCoords.lat !== singleLat.value || newCoords.lon !== singleLon.value) {
singleLat.value = newCoords.lat;
singleLon.value = newCoords.lon;
}
});
// Observe attribute changes (value attribute)
observer.observe(latInput, {
attributes: true,
attributeFilter: ['value'],
});
observer.observe(lonInput, {
attributes: true,
attributeFilter: ['value'],
});
observer.observe(latInput, { attributes: true, attributeFilter: ['value'] });
observer.observe(lonInput, { attributes: true, attributeFilter: ['value'] });
// Also poll periodically as a fallback
const pollInterval = setInterval(() => {
const newCoords = getCoordinatesFromForm();
if (
newCoords.lat !== singleLat.value ||
newCoords.lon !== singleLon.value
) {
if (newCoords.lat !== singleLat.value || newCoords.lon !== singleLon.value) {
singleLat.value = newCoords.lat;
singleLon.value = newCoords.lon;
}
@ -309,14 +271,7 @@ export default {
([lat, lon]) => {
if (props.mode === 'single') {
// Center map on new position if valid
if (
!isNaN(lat) &&
!isNaN(lon) &&
lat !== null &&
lon !== null &&
lat !== 0 &&
lon !== 0
) {
if (!isNaN(lat) && !isNaN(lon) && lat !== null && lon !== null && lat !== 0 && lon !== 0) {
// Force immediate reactivity
nextTick(() => {
if (mapPreview.value && mapPreview.value.centerOnPosition) {
@ -327,14 +282,11 @@ export default {
// Coordinates are invalid/cleared - reset to default center
center.value = {
lat: props.defaultCenter[0],
lon: props.defaultCenter[1],
lon: props.defaultCenter[1]
};
nextTick(() => {
if (mapPreview.value && mapPreview.value.centerOnPosition) {
mapPreview.value.centerOnPosition(
center.value.lat,
center.value.lon
);
mapPreview.value.centerOnPosition(center.value.lat, center.value.lon);
}
});
}
@ -365,7 +317,7 @@ export default {
// Normalize position format (ensure lon, not lng)
const position = {
lat: currentCenter.lat,
lon: currentCenter.lon || currentCenter.lng,
lon: currentCenter.lon || currentCenter.lng
};
try {
@ -399,10 +351,7 @@ export default {
// Center map on marker
const marker = markers.value.find((m) => m.id === markerId);
if (marker && mapPreview.value && mapPreview.value.centerOnPosition) {
mapPreview.value.centerOnPosition(
marker.position.lat,
marker.position.lon
);
mapPreview.value.centerOnPosition(marker.position.lat, marker.position.lon);
}
}
@ -449,7 +398,7 @@ export default {
function editMarker(markerId) {
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) {
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
@ -29,8 +29,8 @@ export function useMarkersApi(pageId) {
return window.csrf;
}
console.warn("CSRF token not found");
return "";
console.warn('CSRF token not found');
return '';
};
/**
@ -42,23 +42,24 @@ export function useMarkersApi(pageId) {
try {
const response = await fetch(`/api/map-editor/pages/${pageId}/markers`, {
method: "GET",
method: 'GET',
headers: {
"Content-Type": "application/json",
},
'Content-Type': 'application/json'
}
});
const result = await response.json();
if (result.status === "error") {
throw new Error(result.message || "Failed to fetch markers");
if (result.status === 'error') {
throw new Error(result.message || 'Failed to fetch markers');
}
markers.value = result.data.markers || [];
return markers.value;
} catch (err) {
error.value = err.message;
console.error("Error fetching markers:", err);
console.error('Error fetching markers:', err);
throw err;
} finally {
loading.value = false;
@ -74,28 +75,28 @@ export function useMarkersApi(pageId) {
try {
const response = await fetch(`/api/map-editor/pages/${pageId}/markers`, {
method: "POST",
method: 'POST',
headers: {
"Content-Type": "application/json",
"X-CSRF": getCsrfToken(),
'Content-Type': 'application/json',
'X-CSRF': getCsrfToken()
},
body: JSON.stringify({ position }),
body: JSON.stringify({ position })
});
const result = await response.json();
if (result.status === "error") {
throw new Error(result.message || "Failed to create marker");
if (result.status === 'error') {
throw new Error(result.message || 'Failed to create marker');
}
const newMarker = result.data.marker;
markers.value.push(newMarker);
console.log(newMarker);
return newMarker;
} catch (err) {
error.value = err.message;
console.error("Error creating marker:", err);
console.error('Error creating marker:', err);
throw err;
} finally {
loading.value = false;
@ -110,34 +111,32 @@ export function useMarkersApi(pageId) {
error.value = null;
try {
const response = await fetch(
`/api/map-editor/pages/${pageId}/markers/${markerId}`,
{
method: "PATCH",
headers: {
"Content-Type": "application/json",
"X-CSRF": getCsrfToken(),
},
body: JSON.stringify({ position }),
const response = await fetch(`/api/map-editor/pages/${pageId}/markers/${markerId}`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
'X-CSRF': getCsrfToken()
},
);
body: JSON.stringify({ position })
});
const result = await response.json();
if (result.status === "error") {
throw new Error(result.message || "Failed to update marker position");
if (result.status === 'error') {
throw new Error(result.message || 'Failed to update marker position');
}
// Update local marker
const index = markers.value.findIndex((m) => m.id === markerId);
const index = markers.value.findIndex(m => m.id === markerId);
if (index !== -1) {
markers.value[index] = result.data.marker;
}
return result.data.marker;
} catch (err) {
error.value = err.message;
console.error("Error updating marker position:", err);
console.error('Error updating marker position:', err);
throw err;
} finally {
loading.value = false;
@ -152,33 +151,31 @@ export function useMarkersApi(pageId) {
error.value = null;
try {
const response = await fetch(
`/api/map-editor/pages/${pageId}/markers/${markerId}`,
{
method: "DELETE",
headers: {
"Content-Type": "application/json",
"X-CSRF": getCsrfToken(),
},
},
);
const response = await fetch(`/api/map-editor/pages/${pageId}/markers/${markerId}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
'X-CSRF': getCsrfToken()
}
});
const result = await response.json();
if (result.status === "error") {
throw new Error(result.message || "Failed to delete marker");
if (result.status === 'error') {
throw new Error(result.message || 'Failed to delete marker');
}
// 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) {
markers.value.splice(index, 1);
}
return true;
} catch (err) {
error.value = err.message;
console.error("Error deleting marker:", err);
console.error('Error deleting marker:', err);
throw err;
} finally {
loading.value = false;
@ -192,6 +189,6 @@ export function useMarkersApi(pageId) {
fetchMarkers,
createMarker,
updateMarkerPosition,
deleteMarker,
deleteMarker
};
}