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

fix: map disappearing in open data page

Browse Source
This commit is contained in:
reloia
2026-06-17 00:11:12 +02:00 Unverified
parent 71de3589e6
commit 43ea5a1d97
1 changed files with 33 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/pages/open-data.vue
+27 -16
View File
@@ -37,9 +37,12 @@ let markers: CircleMarker[] = []
const getStatusBadge = (status: string) => {
switch (status) {
case 'RESOLVED': return { class: 'bg-success', text: 'Risolto', icon: 'it-check-circle' }
case 'CLOSED': return { class: 'bg-secondary', text: 'Chiuso', icon: 'it-lock' }
default: return { class: 'bg-info', text: status, icon: 'it-info-circle' }
case 'RESOLVED':
return { class: 'bg-success', text: 'Risolto', icon: 'it-check-circle' }
case 'CLOSED':
return { class: 'bg-secondary', text: 'Chiuso', icon: 'it-lock' }
default:
return { class: 'bg-info', text: status, icon: 'it-info-circle' }
}
}
@@ -119,9 +122,13 @@ const initMap = async () => {
watch(currentView, async (view) => {
if (view !== 'map') return
await nextTick()
// Inizializza la mappa se non esiste, altrimenti aggiornane solo dimensioni e dati
if (!map) {
await initMap()
map?.invalidateSize()
} else {
map.invalidateSize()
await renderMapMarkers()
}
})
watch(visibleReports, async () => {
@@ -162,7 +169,7 @@ onBeforeUnmount(() => {
:class="currentView === 'grid' ? 'btn-primary' : 'btn-outline-primary'"
@click="currentView = 'grid'"
>
<BIIcon name="it-grid" size="sm" class="me-1" :color="currentView === 'grid' ? 'white' : 'primary'" />
<BIIcon :color="currentView === 'grid' ? 'white' : 'primary'" class="me-1" name="it-grid" size="sm"/>
Griglia Dati
</button>
<button
@@ -170,25 +177,26 @@ onBeforeUnmount(() => {
:class="currentView === 'map' ? 'btn-primary' : 'btn-outline-primary'"
@click="currentView = 'map'"
>
<BIIcon name="it-map-marker" size="sm" class="me-1" :color="currentView === 'map' ? 'white' : 'primary'" />
<BIIcon :color="currentView === 'map' ? 'white' : 'primary'" class="me-1" name="it-map-marker" size="sm"/>
Mappa
</button>
</div>
<div class="col-12 col-md-6 text-md-end">
<button class="btn btn-sm btn-outline-secondary" title="Scarica dataset in formato JSON">
<BIIcon name="it-download" size="sm" class="me-1" />
<BIIcon class="me-1" name="it-download" size="sm"/>
Scarica JSON
</button>
</div>
</div>
<!-- Sostituito v-else-if con v-show -->
<div v-if="pending" class="d-flex justify-content-center my-5 py-5">
<div class="progress-spinner progress-spinner-active" role="status">
<span class="visually-hidden">Caricamento in corso...</span>
</div>
</div>
<div v-else-if="currentView === 'grid'">
<div v-show="!pending && currentView === 'grid'">
<div class="row" v-if="openDataResponse?.reports && openDataResponse.reports.length > 0">
<div class="col-12 col-md-6 col-lg-4 mb-4" v-for="report in visibleReports" :key="report.id">
<div class="card-wrapper card-space h-100">
@@ -197,8 +205,9 @@ onBeforeUnmount(() => {
<div class="d-flex justify-content-between align-items-start mb-3">
<div class="category-top m-0">
<span class="badge rounded-pill text-white px-3 py-1" :class="getStatusBadge(report.status).class">
<BIIcon :name="getStatusBadge(report.status).icon" size="xs" color="white" class="me-1" />
<span :class="getStatusBadge(report.status).class"
class="badge rounded-pill text-white px-3 py-1">
<BIIcon :name="getStatusBadge(report.status).icon" class="me-1" color="white" size="xs"/>
{{ getStatusBadge(report.status).text }}
</span>
</div>
@@ -208,7 +217,7 @@ onBeforeUnmount(() => {
<h3 class="card-title h5 font-weight-bold">{{ report.category_name }}</h3>
<p class="card-text text-muted mb-4">
<BIIcon name="it-map-marker-circle" size="sm" class="me-1" />
<BIIcon class="me-1" name="it-map-marker-circle" size="sm"/>
{{ report.area_name || 'Area comunale non specificata' }}
</p>
@@ -239,7 +248,7 @@ onBeforeUnmount(() => {
<ul class="pagination">
<li class="page-item" :class="{ disabled: currentPage === 1 }">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true" @click.prevent="prevPage">
<BIIcon name="it-chevron-left" size="sm" />
<BIIcon name="it-chevron-left" size="sm"/>
<span class="visually-hidden">Pagina precedente</span>
</a>
</li>
@@ -249,14 +258,14 @@ onBeforeUnmount(() => {
<li class="page-item" :class="{ disabled: isLastPage }">
<a class="page-link" href="#" @click.prevent="nextPage">
<span class="visually-hidden">Pagina successiva</span>
<BIIcon name="it-chevron-right" size="sm" />
<BIIcon name="it-chevron-right" size="sm"/>
</a>
</li>
</ul>
</nav>
</div>
<div v-else-if="currentView === 'map'" class="map-view-wrapper">
<div v-show="!pending && currentView === 'map'" class="map-view-wrapper">
<div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
<p class="text-muted mb-0">Mappa pubblica delle segnalazioni nell'area di Bari.</p>
<span class="badge bg-light text-dark border">{{ visibleReports.length }} punti</span>
@@ -274,13 +283,15 @@ onBeforeUnmount(() => {
.card-wrapper {
height: 100%;
}
.card-bg {
border: 1px solid rgba(0,0,0,0.05);
border: 1px solid rgba(0, 0, 0, 0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-bg:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}
.open-data-map {