198 lines
7.5 KiB
Vue
198 lines
7.5 KiB
Vue
<script setup lang="ts">
|
|
import BIIcon from "~/components/BIIcon.vue";
|
|
|
|
const { getOpenDataReports } = usePublic()
|
|
|
|
const { user } = useAuth();
|
|
|
|
const stats = {
|
|
total_reports: 14523,
|
|
resolved_reports: 13890,
|
|
avg_resolution_time: 24
|
|
}
|
|
|
|
const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
|
|
getOpenDataReports({ page: 1, per_page: 3 })
|
|
)
|
|
|
|
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' }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="it-hero-wrapper bg-light">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12 col-lg-8 mx-auto text-center">
|
|
<div class="it-hero-text-wrapper p-4">
|
|
<h1 class="no_toc font-weight-bold">Miglioriamo insieme la città</h1>
|
|
<p class="d-none d-lg-block mt-3 mb-4 text-muted">
|
|
Il portale ufficiale nazionale per segnalare disservizi urbani. Scatta una foto, invia la segnalazione
|
|
e monitora l'intervento in totale trasparenza.
|
|
</p>
|
|
<div class="it-btn-container d-flex justify-content-center gap-3">
|
|
<NuxtLink v-if="!user || isCitizen(user.role)" class="btn btn-primary" to="/auth/login">
|
|
Fai una segnalazione
|
|
</NuxtLink>
|
|
<NuxtLink class="btn btn-outline-primary" to="/open-data">
|
|
Esplora i dati
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container my-5 py-5">
|
|
<h2 class="text-center mb-5 font-weight-bold">Come funziona</h2>
|
|
<div class="row text-center">
|
|
<div class="col-12 col-md-4 mb-4">
|
|
<div class="mb-3">
|
|
<BIIcon color="primary" name="it-camera" size="xl"/>
|
|
</div>
|
|
<h3 class="h5 font-weight-semibold">1. Segnala</h3>
|
|
<p class="text-muted">Usa lo smartphone per fotografare il problema stradale e inviare la posizione
|
|
esatta.</p>
|
|
</div>
|
|
<div class="col-12 col-md-4 mb-4">
|
|
<div class="mb-3">
|
|
<BIIcon color="primary" name="it-tool" size="xl"/>
|
|
</div>
|
|
<h3 class="h5 font-weight-semibold">2. Intervento</h3>
|
|
<p class="text-muted">Le squadre comunali prendono in carico la tua segnalazione e avviano i lavori.</p>
|
|
</div>
|
|
<div class="col-12 col-md-4 mb-4">
|
|
<div class="mb-3">
|
|
<BIIcon color="primary" name="it-star-outline" size="xl"/>
|
|
</div>
|
|
<h3 class="h5 font-weight-semibold">3. Punti e Feedback</h3>
|
|
<p class="text-muted">Problema risolto! Ottieni Punti Cittadino e lascia un feedback sull'intervento.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-light py-5">
|
|
<div class="container my-4">
|
|
<h2 class="text-center mb-5 font-weight-bold">I numeri del nostro Comune</h2>
|
|
<div class="row text-center">
|
|
<div class="col-12 col-md-4 mb-4 mb-md-0">
|
|
<div class="display-1 font-weight-bold text-primary">{{ stats.total_reports.toLocaleString('it-IT') }}</div>
|
|
<p class="text-muted text-uppercase fw-bold mt-2">Segnalazioni Ricevute</p>
|
|
</div>
|
|
<div class="col-12 col-md-4 mb-4 mb-md-0">
|
|
<div class="display-1 font-weight-bold text-success">{{
|
|
stats.resolved_reports.toLocaleString('it-IT')
|
|
}}
|
|
</div>
|
|
<p class="text-muted text-uppercase fw-bold mt-2">Interventi Risolti</p>
|
|
</div>
|
|
<div class="col-12 col-md-4">
|
|
<div class="display-1 font-weight-bold text-info">{{ stats.avg_resolution_time }}h</div>
|
|
<p class="text-muted text-uppercase fw-bold mt-2">Tempo medio di risoluzione</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container my-5 py-5">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2 class="font-weight-bold">Ultimi interventi risolti</h2>
|
|
<NuxtLink to="/open-data" class="read-more">
|
|
<span class="text">Vedi tutti</span>
|
|
<BIIcon name="it-arrow-right"/>
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<div class="row" v-if="openDataResponse?.reports && openDataResponse.reports.length > 0">
|
|
<div class="col-12 col-md-4 mb-4" v-for="report in openDataResponse.reports" :key="report.id">
|
|
<div class="card-wrapper card-space h-100">
|
|
<div class="card card-bg h-100 shadow-sm">
|
|
<div class="card-body d-flex flex-column">
|
|
|
|
<div class="d-flex justify-content-between align-items-start mb-3">
|
|
<div class="category-top m-0">
|
|
<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>
|
|
<span class="text-muted small">ID: #{{ report.id }}</span>
|
|
</div>
|
|
|
|
<h3 class="card-title h5 font-weight-bold">{{ report.category_name }}</h3>
|
|
|
|
<p class="card-text text-muted mb-4">
|
|
<BIIcon class="me-1" name="it-map-marker-circle" size="sm"/>
|
|
{{ report.area_name || 'Area comunale non specificata' }}
|
|
</p>
|
|
|
|
<div class="mt-auto pt-3 border-top">
|
|
<div class="row text-muted small">
|
|
<div class="col-6">
|
|
<div class="fw-bold text-uppercase">Segnalato</div>
|
|
<div>{{ new Date(report.created_at).toLocaleDateString('it-IT') }}</div>
|
|
</div>
|
|
<div class="col-6 text-end">
|
|
<div class="fw-bold text-uppercase">Risolto</div>
|
|
<div>{{ new Date(report.updated_at).toLocaleDateString('it-IT') }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="alert alert-info text-center" role="alert">
|
|
I dati sugli ultimi interventi sono in fase di elaborazione.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container my-5 pb-5">
|
|
<div class="callout callout-highlight callout-primary">
|
|
<div class="callout-title">
|
|
<BIIcon name="it-info-circle"/>
|
|
Partecipa alla cura della tua città
|
|
</div>
|
|
<p>
|
|
La piattaforma è aperta a tutti i cittadini residenti. Registrandoti, non solo potrai segnalare i problemi del
|
|
tuo quartiere, ma accumulerai <strong>Punti Cittadino</strong> per ogni intervento risolto, sbloccando
|
|
riconoscimenti speciali.
|
|
</p>
|
|
<NuxtLink to="/auth/register" class="btn btn-primary mt-3">
|
|
Crea il tuo profilo
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.card-wrapper {
|
|
height: 100%;
|
|
}
|
|
|
|
.card-bg {
|
|
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;
|
|
}
|
|
</style>
|