SnitchItaly/frontend
3
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat: implement Bari bounds validation and update UI components for admin panel

Browse Source
This commit is contained in:
gabdevele
2026-06-15 13:00:22 +02:00 Unverified
parent 8bf6f29561
commit d6eb7d3e9b
13 changed files with 108 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Header.vue
+2 -1
View File
@@ -18,6 +18,7 @@ const navLinks = [
]
const { isAuthenticated, user, logout } = useAuth()
const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ? 'Pannello admin' : 'Dashboard')
</script>
<template>
@@ -49,7 +50,7 @@ const { isAuthenticated, user, logout } = useAuth()
<span class="rounded-icon" aria-hidden="true">
<BIIcon name="it-list" color="black" />
</span>
<span class="d-none d-lg-block">Dashboard</span>
<span class="d-none d-lg-block">{{ panelLabel }}</span>
</NuxtLink>
<NuxtLink class="btn btn-primary btn-icon btn-full" to="/profile"
app/components/ReportForm.vue
+28 -10
View File
@@ -2,6 +2,7 @@
import type { Category, CreateReportRequest } from '~/types/api'
import type { LeafletMouseEvent, Map as LeafletMap, Marker as LeafletMarker } from 'leaflet'
import { onMounted, onUnmounted, ref, watch } from 'vue'
import { BARI_BOUNDS, BARI_CENTER, isWithinBariBounds } from '~/utils/bari'
interface Props {
isLoading?: boolean
@@ -65,18 +66,28 @@ const initMap = async () => {
const L = await loadLeaflet()
if (!mapContainer.value || map) return
// Centro Italia default
const defaultLat = 41.8719
const defaultLng = 12.5674
const zoom = 5
const bariBounds = L.latLngBounds(
[BARI_BOUNDS.south, BARI_BOUNDS.west],
[BARI_BOUNDS.north, BARI_BOUNDS.east]
)
map = L.map(mapContainer.value).setView([defaultLat, defaultLng], zoom)
map = L.map(mapContainer.value, {
maxBounds: bariBounds,
maxBoundsViscosity: 1,
minZoom: 12
}).setView(BARI_CENTER, 12)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; OpenStreetMap contributors'
}).addTo(map)
map.fitBounds(bariBounds)
map.on('click', (e: LeafletMouseEvent) => {
if (!isWithinBariBounds(e.latlng.lat, e.latlng.lng)) {
errors.value.location = 'Puoi inserire segnalazioni solo nel Comune di Bari.'
return
}
updateLocation(e.latlng.lat, e.latlng.lng)
})
@@ -87,6 +98,11 @@ const initMap = async () => {
}
const updateLocation = (lat: number, lng: number, zoomTo = false) => {
if (!isWithinBariBounds(lat, lng)) {
errors.value.location = 'Puoi inserire segnalazioni solo nel Comune di Bari.'
return
}
form.value.latitude = Number(lat.toFixed(6))
form.value.longitude = Number(lng.toFixed(6))
@@ -125,6 +141,8 @@ const validateForm = (): boolean => {
}
if (!form.value.latitude || !form.value.longitude) {
errors.value.location = 'Imposta la posizione sulla mappa'
} else if (!isWithinBariBounds(form.value.latitude, form.value.longitude)) {
errors.value.location = 'La posizione deve essere nel Comune di Bari'
}
if (!form.value.address?.trim()) {
errors.value.address = 'Inserisci l\'indirizzo'
@@ -186,7 +204,7 @@ const resetForm = () => {
if (marker && map) {
map.removeLayer(marker)
marker = null
map.setView([41.8719, 12.5674], 5)
map.setView(BARI_CENTER, 12)
}
}
@@ -246,6 +264,7 @@ watch([() => form.value.latitude, () => form.value.longitude], ([newLat, newLng]
<BIIcon name="it-map-marker-circle" size="sm" color="primary" class="me-2" />
Posizione *
</label>
<p class="small text-muted mb-2">Le segnalazioni sono abilitate solo entro confini del Comune di Bari.</p>
<button
type="button"
@@ -275,7 +294,7 @@ watch([() => form.value.latitude, () => form.value.longitude], ([newLat, newLng]
step="0.000001"
class="form-control form-control-sm"
:class="{ 'is-invalid': errors.location }"
placeholder="Latitudine (es. 45.5)"
placeholder="Latitudine (Bari)"
required
/>
</div>
@@ -286,7 +305,7 @@ watch([() => form.value.latitude, () => form.value.longitude], ([newLat, newLng]
step="0.000001"
class="form-control form-control-sm"
:class="{ 'is-invalid': errors.location }"
placeholder="Longitudine (es. 10.2)"
placeholder="Longitudine (Bari)"
required
/>
</div>
@@ -307,7 +326,7 @@ watch([() => form.value.latitude, () => form.value.longitude], ([newLat, newLng]
type="text"
class="form-control"
:class="{ 'is-invalid': errors.address }"
placeholder="Es. Via Roma 123, Milano"
placeholder="Es. Via Sparano 12, Bari"
required
/>
<div v-if="errors.address" class="invalid-feedback">
@@ -393,4 +412,3 @@ textarea {
</style>
app/components/dashboard/AdminDashboard.vue
+2 -8
View File
@@ -7,7 +7,7 @@ const { data: statsRes, pending } = useAsyncData('admin-stats', () => getOvervie
<template>
<div>
<div class="callout callout-highlight callout-danger mb-4">
<div class="callout-title">Pannello di Amministrazione</div>
<div class="callout-title">Pannello Admin</div>
<p>Accesso di livello 1. Da qui puoi gestire le configurazioni di sistema, le categorie e moderare le segnalazioni.</p>
</div>
@@ -48,7 +48,7 @@ const { data: statsRes, pending } = useAsyncData('admin-stats', () => getOvervie
<div class="col-12 col-md-4 mb-3">
<NuxtLink to="/admin/areas" class="btn btn-outline-primary w-100 py-3 d-flex flex-column align-items-center">
<BIIcon name="it-map-marker" size="sm" color="primary" class="mb-2" />
Aree GeoJSON
Aree
</NuxtLink>
</div>
<div class="col-12 col-md-4 mb-3">
@@ -63,12 +63,6 @@ const { data: statsRes, pending } = useAsyncData('admin-stats', () => getOvervie
Moderazione Abusi
</NuxtLink>
</div>
<div class="col-12 col-md-6 mb-3">
<NuxtLink to="/open-data" class="btn btn-outline-secondary w-100 py-3 d-flex flex-column align-items-center">
<BIIcon name="it-chart-line" size="sm" class="mb-2" />
Vista Open Data
</NuxtLink>
</div>
</div>
</div>
</template>