375 lines
12 KiB
Vue
375 lines
12 KiB
Vue
<script setup lang="ts">
|
|
import { ref, reactive, nextTick, onBeforeUnmount, computed } from 'vue'
|
|
import { BARI_BOUNDS, BARI_CENTER, isWithinBariBounds } from '~/utils/bari'
|
|
|
|
definePageMeta({
|
|
middleware: 'auth',
|
|
auth: { role: 'ADMIN' }
|
|
})
|
|
|
|
useHead({ title: 'Aree - Admin' })
|
|
|
|
const { getAreas, createArea, updateArea } = useAdmin()
|
|
const { data: areasRes, pending, refresh } = useAsyncData('admin-areas', () => getAreas())
|
|
|
|
const isCreating = ref(false)
|
|
const editingAreaId = ref<number | null>(null)
|
|
const formData = reactive({
|
|
name: '',
|
|
description: '',
|
|
geojson: ''
|
|
})
|
|
const jsonError = ref('')
|
|
|
|
// Map variables
|
|
let map: any = null
|
|
let polygon: any = null
|
|
const mapPoints = ref<[number, number][]>([])
|
|
|
|
const modalTitle = computed(() => editingAreaId.value ? 'Modifica Area' : 'Nuova Area')
|
|
const submitLabel = computed(() => editingAreaId.value ? 'Salva Modifiche' : 'Crea Area')
|
|
const isEditing = computed(() => editingAreaId.value !== null)
|
|
|
|
const openCreateModal = () => {
|
|
editingAreaId.value = null
|
|
formData.name = ''
|
|
formData.description = ''
|
|
formData.geojson = ''
|
|
jsonError.value = ''
|
|
mapPoints.value = []
|
|
isCreating.value = true
|
|
|
|
nextTick(async () => {
|
|
// Import leaflet solo client-side
|
|
const L = (await import('leaflet')).default
|
|
|
|
if (map) {
|
|
map.remove()
|
|
map = null
|
|
}
|
|
|
|
const bariBounds = L.latLngBounds(
|
|
[BARI_BOUNDS.south, BARI_BOUNDS.west],
|
|
[BARI_BOUNDS.north, BARI_BOUNDS.east]
|
|
)
|
|
|
|
map = L.map('areaMap', {
|
|
maxBounds: bariBounds,
|
|
maxBoundsViscosity: 1,
|
|
minZoom: 12
|
|
}).setView(BARI_CENTER, 12)
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: '© OpenStreetMap'
|
|
}).addTo(map)
|
|
|
|
polygon = L.polygon([], { color: 'red' }).addTo(map)
|
|
map.fitBounds(bariBounds)
|
|
|
|
map.on('click', (e: any) => {
|
|
if (!isWithinBariBounds(e.latlng.lat, e.latlng.lng)) {
|
|
jsonError.value = 'Puoi disegnare aree solo entro confini del Comune di Bari.'
|
|
return
|
|
}
|
|
|
|
jsonError.value = ''
|
|
mapPoints.value.push([e.latlng.lat, e.latlng.lng])
|
|
polygon.setLatLngs(mapPoints.value)
|
|
updateGeojson()
|
|
})
|
|
})
|
|
}
|
|
|
|
const loadPolygonFromGeoJson = (boundaryGeojson: any) => {
|
|
const coordinates = boundaryGeojson?.coordinates?.[0]
|
|
if (!Array.isArray(coordinates)) {
|
|
mapPoints.value = []
|
|
return
|
|
}
|
|
|
|
const normalized = coordinates
|
|
.slice(0, -1)
|
|
.map(([longitude, latitude]: [number, number]) => [latitude, longitude] as [number, number])
|
|
|
|
mapPoints.value = normalized
|
|
if (polygon) {
|
|
polygon.setLatLngs(mapPoints.value)
|
|
}
|
|
}
|
|
|
|
const openEditModal = (area: any) => {
|
|
editingAreaId.value = area.id
|
|
formData.name = area.name || ''
|
|
formData.description = area.description || ''
|
|
formData.geojson = area.boundary_geojson ? JSON.stringify(area.boundary_geojson, null, 2) : ''
|
|
jsonError.value = ''
|
|
mapPoints.value = []
|
|
isCreating.value = true
|
|
|
|
nextTick(async () => {
|
|
const L = (await import('leaflet')).default
|
|
|
|
if (map) {
|
|
map.remove()
|
|
map = null
|
|
}
|
|
|
|
const bariBounds = L.latLngBounds(
|
|
[BARI_BOUNDS.south, BARI_BOUNDS.west],
|
|
[BARI_BOUNDS.north, BARI_BOUNDS.east]
|
|
)
|
|
|
|
map = L.map('areaMap', {
|
|
maxBounds: bariBounds,
|
|
maxBoundsViscosity: 1,
|
|
minZoom: 12
|
|
}).setView(BARI_CENTER, 12)
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: '© OpenStreetMap'
|
|
}).addTo(map)
|
|
|
|
polygon = L.polygon([], { color: 'red' }).addTo(map)
|
|
map.fitBounds(bariBounds)
|
|
loadPolygonFromGeoJson(area.boundary_geojson)
|
|
|
|
map.on('click', (e: any) => {
|
|
if (!isWithinBariBounds(e.latlng.lat, e.latlng.lng)) {
|
|
jsonError.value = 'Puoi disegnare aree solo entro confini del Comune di Bari.'
|
|
return
|
|
}
|
|
|
|
jsonError.value = ''
|
|
mapPoints.value.push([e.latlng.lat, e.latlng.lng])
|
|
polygon.setLatLngs(mapPoints.value)
|
|
updateGeojson()
|
|
})
|
|
})
|
|
}
|
|
|
|
const clearMap = () => {
|
|
mapPoints.value = []
|
|
if (polygon) {
|
|
polygon.setLatLngs([])
|
|
}
|
|
formData.geojson = ''
|
|
}
|
|
|
|
const updateGeojson = () => {
|
|
if (mapPoints.value.length < 3) {
|
|
formData.geojson = ''
|
|
return
|
|
}
|
|
const coords = mapPoints.value.map(p => [p[1], p[0]] as [number, number]) // Lng, Lat
|
|
if (coords[0]) {
|
|
coords.push([...coords[0]]) // Chiudi poligono
|
|
}
|
|
|
|
formData.geojson = JSON.stringify({
|
|
type: "Polygon",
|
|
coordinates: [coords]
|
|
}, null, 2)
|
|
}
|
|
|
|
const closeCreateModal = () => {
|
|
isCreating.value = false
|
|
editingAreaId.value = null
|
|
if (map) {
|
|
map.remove()
|
|
map = null
|
|
}
|
|
}
|
|
|
|
onBeforeUnmount(() => {
|
|
if (map) map.remove()
|
|
})
|
|
|
|
const handleCreate = async () => {
|
|
jsonError.value = ''
|
|
let parsedGeojson = null
|
|
|
|
try {
|
|
parsedGeojson = JSON.parse(formData.geojson)
|
|
if (!parsedGeojson.type || !parsedGeojson.coordinates) {
|
|
throw new Error('GeoJSON non valido. Richiesto "type" e "coordinates".')
|
|
}
|
|
|
|
const coordinates = parsedGeojson.coordinates?.[0] || []
|
|
const outsideBari = coordinates.some(([longitude, latitude]: [number, number]) => !isWithinBariBounds(latitude, longitude))
|
|
if (outsideBari) {
|
|
throw new Error('Area non valida. Tutti i punti devono essere nel Comune di Bari.')
|
|
}
|
|
} catch (e: any) {
|
|
jsonError.value = e.message || 'Formato JSON non valido.'
|
|
return
|
|
}
|
|
|
|
try {
|
|
const payload = {
|
|
name: formData.name,
|
|
description: formData.description || undefined,
|
|
boundary_geojson: parsedGeojson
|
|
}
|
|
|
|
const res = editingAreaId.value
|
|
? await updateArea(editingAreaId.value, payload)
|
|
: await createArea(payload)
|
|
|
|
if (res.ok) {
|
|
await refresh()
|
|
closeCreateModal()
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to save area', err)
|
|
alert('Errore durante il salvataggio dell\'area.')
|
|
}
|
|
}
|
|
|
|
const handleToggleAreaActive = async (area: any) => {
|
|
try {
|
|
const res = await updateArea(area.id, { active: !area.active })
|
|
if (res.ok) {
|
|
await refresh()
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to update area status', err)
|
|
alert('Errore durante l\'aggiornamento dello stato area.')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container my-5">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h1 class="h3 font-weight-bold mb-0">Gestione Aree</h1>
|
|
<div>
|
|
<NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm me-2">Torna al pannello admin</NuxtLink>
|
|
<button class="btn btn-primary btn-sm" @click="openCreateModal">
|
|
<BIIcon name="it-plus" size="xs" class="me-1" />
|
|
Nuova Area
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="pending" class="text-center py-5">
|
|
<div class="spinner-border text-primary" role="status"></div>
|
|
</div>
|
|
|
|
<div v-else-if="!areasRes?.areas || areasRes.areas.length === 0" class="alert alert-info">
|
|
Nessuna area configurata.
|
|
</div>
|
|
|
|
<div v-else class="table-responsive">
|
|
<table class="table table-hover align-middle bg-white shadow-sm rounded">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Nome</th>
|
|
<th>Descrizione</th>
|
|
<th>Stato</th>
|
|
<th>GeoJSON</th>
|
|
<th class="text-end">Azioni</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="area in areasRes.areas" :key="area.id">
|
|
<td>{{ area.id }}</td>
|
|
<td><strong>{{ area.name }}</strong></td>
|
|
<td>{{ area.description || '-' }}</td>
|
|
<td>
|
|
<span v-if="area.active" class="badge bg-success">Attiva</span>
|
|
<span v-else class="badge bg-secondary">Inattiva</span>
|
|
</td>
|
|
<td>
|
|
<span v-if="area.boundary_geojson" class="badge border border-primary text-primary">Configurato</span>
|
|
<span v-else class="badge border border-danger text-danger">Mancante</span>
|
|
</td>
|
|
<td class="text-end">
|
|
<button class="btn btn-sm btn-outline-primary me-2" @click="openEditModal(area)">
|
|
Modifica
|
|
</button>
|
|
<button
|
|
class="btn btn-sm"
|
|
:class="area.active ? 'btn-outline-secondary' : 'btn-outline-success'"
|
|
@click="handleToggleAreaActive(area)"
|
|
>
|
|
{{ area.active ? 'Disattiva' : 'Attiva' }}
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Modale Creazione -->
|
|
<div v-if="isCreating" class="modal-backdrop fade show d-block" style="background: rgba(0,0,0,0.5); z-index: 1040;"></div>
|
|
<div v-if="isCreating" class="modal fade show d-block" tabindex="-1" style="z-index: 1050;">
|
|
<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">{{ modalTitle }}</h5>
|
|
<button type="button" class="btn-close" @click="closeCreateModal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form @submit.prevent="handleCreate">
|
|
<div class="row">
|
|
<div class="col-md-5">
|
|
<div class="mb-3">
|
|
<label class="form-label">Nome Area</label>
|
|
<input type="text" class="form-control" v-model="formData.name" required placeholder="Es. Centro Storico" />
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Descrizione (opzionale)</label>
|
|
<textarea class="form-control" v-model="formData.description" rows="3"></textarea>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">GeoJSON Generato</label>
|
|
<textarea
|
|
class="form-control font-monospace text-sm"
|
|
rows="6"
|
|
v-model="formData.geojson"
|
|
required
|
|
readonly
|
|
placeholder='{ "type": "Polygon", "coordinates": [...] }'
|
|
></textarea>
|
|
<div v-if="jsonError" class="form-text text-danger mt-1">{{ jsonError }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-7">
|
|
<div class="mb-2 d-flex justify-content-between align-items-center">
|
|
<label class="form-label mb-0">Disegna Poligono sulla Mappa</label>
|
|
<button type="button" class="btn btn-outline-danger btn-sm" @click="clearMap">
|
|
Pulisci Mappa
|
|
</button>
|
|
</div>
|
|
<div class="alert alert-light border small mb-2 p-2">
|
|
Clicca sulla mappa per aggiungere vertici al poligono. Sono necessari almeno 3 punti. Sono ammessi solo punti nel Comune di Bari.
|
|
</div>
|
|
<div id="areaMap" class="rounded border" style="height: 400px; width: 100%; z-index: 1;"></div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer d-flex justify-content-end gap-2">
|
|
<button type="button" class="btn btn-outline-secondary" @click="closeCreateModal">Annulla</button>
|
|
<button type="button" class="btn btn-primary" :disabled="!formData.name || !formData.geojson" @click="handleCreate">
|
|
{{ submitLabel }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
#areaMap {
|
|
background: #e9ecef;
|
|
}
|
|
|
|
.modal-dialog {
|
|
margin-block: 0!important;
|
|
}
|
|
</style>
|