|
|
@@ -1,587 +1,602 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html lang="it">
|
|
|
-
|
|
|
-<head>
|
|
|
- <meta charset="UTF-8">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
- <title>Gestione Dati Immobiliari</title>
|
|
|
- <link href="https://cdn.jsdelivr.net/npm/bootstrap-italia@2.13.4/dist/css/bootstrap-italia.min.css"
|
|
|
- rel="stylesheet">
|
|
|
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
|
- <style>
|
|
|
- /* Stile per la riga blu scuro */
|
|
|
- .top-bar {
|
|
|
- background-color: #004080;
|
|
|
- /* Blu scuro */
|
|
|
- color: white;
|
|
|
- padding: 0.5rem 0;
|
|
|
- text-align: left;
|
|
|
- /* Allineamento a sinistra */
|
|
|
- font-size: 0.9rem;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- /* Stile per l'header */
|
|
|
- .header {
|
|
|
- background-color: #0066CC;
|
|
|
- /* Blu chiaro */
|
|
|
- color: white;
|
|
|
- padding: 1rem 0;
|
|
|
- }
|
|
|
-
|
|
|
- /* Stile per il logo "PW" dentro un cerchio */
|
|
|
- .logo {
|
|
|
- font-family: 'Georgia', serif;
|
|
|
- font-size: 1.5rem;
|
|
|
- width: 50px; height: 50px;
|
|
|
- background-color: white;
|
|
|
- color: #0066CC;
|
|
|
- border-radius: 50%;
|
|
|
- margin-right: 10px;
|
|
|
- display: inline-flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- /* Stile per il titolo "Segnalazioni e Supporto Tecnico" */
|
|
|
- .header-title {
|
|
|
- color: white;
|
|
|
- font-size: 1.5rem;
|
|
|
- /* Stessa grandezza di "Segnalazioni e Supporto Tecnico" */
|
|
|
- font-weight: bold;
|
|
|
- display: inline-block;
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
-
|
|
|
- /* Stile per il contenuto principale */
|
|
|
- .main-content {
|
|
|
- background-color: #f8f9fa;
|
|
|
- /* Grigio chiaro */
|
|
|
- padding: 2rem 0;
|
|
|
- }
|
|
|
-
|
|
|
- /* Stile per il banner di conferma */
|
|
|
- .banner-confirm {
|
|
|
- display: none;
|
|
|
- /* Nascondi il banner inizialmente */
|
|
|
- background-color: #28a745;
|
|
|
- color: white;
|
|
|
- padding: 1rem;
|
|
|
- margin-top: 1rem;
|
|
|
- border-radius: 4px;
|
|
|
- text-align: center;
|
|
|
- transition: opacity 0.5s ease-in-out;
|
|
|
- /* Transizione per la dissolvenza */
|
|
|
- opacity: 1;
|
|
|
- /* Inizialmente visibile */
|
|
|
- }
|
|
|
-
|
|
|
- /* Aggiungi margine ai lati del contenitore principale */
|
|
|
- .container {
|
|
|
- padding-left: 2rem;
|
|
|
- padding-right: 2rem;
|
|
|
- }
|
|
|
- .it-footer-main {
|
|
|
- background-color: #004D99;
|
|
|
- padding-left: 2rem;
|
|
|
- padding-right: 2rem;
|
|
|
- }
|
|
|
- /* Aggiungi margine ai lati del footer */
|
|
|
- .it-footer-main .container {
|
|
|
- background-color: #004D99;
|
|
|
- padding-left: 2rem;
|
|
|
- padding-right: 2rem;
|
|
|
- }
|
|
|
-
|
|
|
- /* Stile per i link con sottolineatura solo al passaggio del mouse */
|
|
|
- .link-underline-hover {
|
|
|
- text-decoration: none;
|
|
|
- /* Rimuove la sottolineatura di base */
|
|
|
- }
|
|
|
-
|
|
|
- .link-underline-hover:hover {
|
|
|
- text-decoration: underline;
|
|
|
- /* Aggiunge la sottolineatura solo al passaggio del mouse */
|
|
|
- }
|
|
|
-
|
|
|
- /* Stile per il footer */
|
|
|
- .data-table {
|
|
|
- margin-top: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .filter-section {
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .pagination {
|
|
|
- margin-top: 20px;
|
|
|
- }
|
|
|
- .form-modifica * {
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- </style>
|
|
|
-</head>
|
|
|
-
|
|
|
-<body>
|
|
|
- <!-- Riga blu scuro con scritto "Project Work" allineata a sinistra -->
|
|
|
- <div class="top-bar">
|
|
|
- <div class="container">
|
|
|
- Project Work
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- Header è troppo stretto segue la linea della pagina -->
|
|
|
- <header class="header">
|
|
|
- <div class="container">
|
|
|
- <div class="row align-items-center">
|
|
|
- <div class="col d-flex">
|
|
|
- <!-- Logo "PW" dentro un cerchio, ora cliccabile -->
|
|
|
- <a href="/callback" class="logo-link">
|
|
|
- <div class="logo">PW</div>
|
|
|
- </a>
|
|
|
- <h1 class="header-title">Gestione Dati Immobiliari</h1>
|
|
|
- <!-- Titolo "Mappa" con la stessa grandezza -->
|
|
|
- </div>
|
|
|
- <div class="col-auto d-flex align-items-center">
|
|
|
- <a href="/admin" class="text-white me-3 link-underline-hover">Gestione Dati Immobiliari</a>
|
|
|
- <a href="/tfo" class="text-white me-3 link-underline-hover">TFO</a>
|
|
|
- <a href="/buildings" class="text-white me-3 link-underline-hover">Registrazione degli Edifici</a>
|
|
|
- <a href="/mappa_login" class="btn btn-light">Logout</a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </header>
|
|
|
- <div class="container mt-4">
|
|
|
- <div class="filter-section">
|
|
|
- <div class="row mt-3 mb-3">
|
|
|
- <!-- Filtro per codice utente (solo per amministratore) -->
|
|
|
- <div class="col-md-4 flex-column gap-4" id="userFilterSection" style="display: none;">
|
|
|
- <label for="userFilter">Filtra per Codice Utente</label>
|
|
|
- <input type="text" class="form-control" id="userFilter" placeholder="Inserisci codice utente">
|
|
|
- </div>
|
|
|
- <!-- Filtro per indirizzo -->
|
|
|
- <div class="col-md-4 d-flex flex-column gap-4">
|
|
|
- <label for="addressFilter">Filtra per Indirizzo</label>
|
|
|
- <input type="text" class="form-control" id="addressFilter" placeholder="Inserisci indirizzo">
|
|
|
- </div>
|
|
|
- <!-- Filtro per data -->
|
|
|
- <div class="col-md-4 d-flex flex-column gap-4">
|
|
|
- <label for="dateFilter">Filtra per Data</label>
|
|
|
- <input type="date" class="form-control" id="dateFilter">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="container mt-4">
|
|
|
- <div class="filter-section">
|
|
|
- <div class="row mt-3 mb-3">
|
|
|
- </div>
|
|
|
- <button class="btn btn-primary" onclick="filtraDati()">Applica Filtri</button>
|
|
|
- <button class="btn btn-secondary" onclick="azzeraFiltri()">Azzera Filtri</button> </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <table class="table data-table">
|
|
|
- <thead>
|
|
|
- <tr>
|
|
|
- <th>ID Utente</th>
|
|
|
- <th>Indirizzo</th>
|
|
|
- <th>Latitudine</th>
|
|
|
- <th>Longitudine</th>
|
|
|
- <th>Codice Catastale</th>
|
|
|
- <th>Data Predisposizione</th>
|
|
|
- <th>Azioni</th>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody id="dataTableBody">
|
|
|
- <!-- Dati verranno caricati qui dinamicamente -->
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
-
|
|
|
- <!-- Paginazione -->
|
|
|
- <nav aria-label="Paginazione">
|
|
|
- <ul class="pagination" id="pagination">
|
|
|
- <!-- Pulsanti di paginazione verranno aggiunti qui dinamicamente -->
|
|
|
- </ul>
|
|
|
- </nav>
|
|
|
- </div>
|
|
|
- <!-- Widget ElevenLabs ConvAI -->
|
|
|
- <elevenlabs-convai agent-id="GlBWa9xJ6GdD7bAve6Yq"></elevenlabs-convai>
|
|
|
- <script src="https://elevenlabs.io/convai-widget/index.js" async type="text/javascript"></script>
|
|
|
- <script>
|
|
|
- document.addEventListener('DOMContentLoaded', function() {
|
|
|
- // Ottieni l'URL corrente
|
|
|
- const urlParams = new URLSearchParams(window.location.search);
|
|
|
- // Estrai il token dal parametro di query "token"
|
|
|
- const ruolo = urlParams.get('ruolo');
|
|
|
- const codice_fiscale = urlParams.get('codice_fiscale');
|
|
|
- // Salva il token in localStorage
|
|
|
- if (ruolo && codice_fiscale) {
|
|
|
- localStorage.setItem('ruolo', ruolo);
|
|
|
- localStorage.setItem('codice_fiscale', codice_fiscale);
|
|
|
- // Rimuovi il token dall'URL per sicurezza (opzionale)
|
|
|
- window.history.replaceState({}, document.title, window.location.pathname);
|
|
|
- //window.location.href = window.location.pathname;
|
|
|
- //Puoi anche reindirizzare ad una pagina pulita.
|
|
|
- //window.location.href = '/altra-pagina';
|
|
|
- }
|
|
|
-
|
|
|
- });
|
|
|
- </script>
|
|
|
- <!-- Footer -->
|
|
|
- <footer id="footer" class="it-footer bg-black" role="contentinfo">
|
|
|
- <div class="it-footer-main py-3">
|
|
|
- <div class="container">
|
|
|
- <section class="py-4">
|
|
|
- <div class="row">
|
|
|
- <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
|
|
|
- <div class="link-list-wrapper">
|
|
|
- <h2 class="h5">Esplora SINFI</h2>
|
|
|
- <ul id="footer-menu-col-1" class="link-list">
|
|
|
- <li id="menu-item-sinfi-1" class="menu-item">
|
|
|
- <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/che-cose/">Cos'è
|
|
|
- SINFI</a>
|
|
|
- </li>
|
|
|
- <li id="menu-item-sinfi-2" class="menu-item">
|
|
|
- <a class="list-item" href="https://sinfi.it/realms/master/protocol/openid-connect/auth?client_id=sinfi_user_service&response_type=code&redirect_uri=https://sinfi.it/sinfi_gateway/labs_keycloak/post_login/&scope=email&state=">Infrastrutture Registrate</a>
|
|
|
- </li>
|
|
|
- <li id="menu-item-sinfi-3" class="menu-item">
|
|
|
- <a class="list-item"
|
|
|
- href="https://sinfi.it/portal/sinfi-menu/riferimenti-normativi/">Normative
|
|
|
- di Riferimento</a>
|
|
|
- </li>
|
|
|
- <li id="menu-item-sinfi-4" class="menu-item">
|
|
|
- <a class="list-item" href="https://sinfi.it/realms/master/protocol/openid-connect/auth?client_id=sinfi_user_service&response_type=code&redirect_uri=https://sinfi.it/sinfi_gateway/labs_keycloak/post_login/&scope=email&state=">Open Data SINFI</a>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
|
|
|
- <div class="link-list-wrapper">
|
|
|
- <h2 class="h5">Aiuto e Supporto</h2>
|
|
|
- <ul id="footer-menu-col-2" class="link-list">
|
|
|
- <li id="menu-item-aiuto-1" class="menu-item">
|
|
|
- <a class="list-item" href="/instructions">Istruzioni</a>
|
|
|
- </li>
|
|
|
- <li id="menu-item-aiuto-2" class="menu-item">
|
|
|
- <a class="list-item" href="/faq">FAQ - Domande Frequenti</a>
|
|
|
- </li>
|
|
|
- <li id="menu-item-aiuto-3" class="menu-item">
|
|
|
- <a class="list-item" href="/techsup">Segnalazioni e Supporto Tecnico</a>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- Colonna "Community" con i loghi dei social -->
|
|
|
- <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
|
|
|
- <div class="link-list-wrapper">
|
|
|
- <h2 class="h5">Community</h2>
|
|
|
- <div class="social-icons">
|
|
|
- <a href="https://www.linkedin.com" target="_blank" class="me-3"><i
|
|
|
- class="fab fa-linkedin"></i></a>
|
|
|
- <a href="https://www.youtube.com" target="_blank" class="me-3"><i
|
|
|
- class="fab fa-youtube"></i></a>
|
|
|
- <a href="https://www.facebook.com" target="_blank" class="me-3"><i
|
|
|
- class="fab fa-facebook"></i></a>
|
|
|
- <a href="https://www.instagram.com" target="_blank" class="me-3"><i
|
|
|
- class="fab fa-instagram"></i></a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
|
|
|
- <div class="link-list-wrapper">
|
|
|
- <h2 class="h5">SINFI</h2>
|
|
|
- <ul id="footer-menu-col-4" class="link-list">
|
|
|
- <li id="menu-item-377" class="menu-item">
|
|
|
- <a target="_blank" href="https://sinfi.it/portal/">Vai al sito ufficiale
|
|
|
- SINFI</a>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="it-footer-small-prints clearfix">
|
|
|
- <div class="container">
|
|
|
- <nav class="menu-footer-menu-ita-container" aria-label="link utili">
|
|
|
- <ul id="menu-footer-menu-ita"
|
|
|
- class="it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row">
|
|
|
- <li id="menu-item-413" class="menu-item list-inline-item"><a href="/media-policy/">Media
|
|
|
- Policy</a></li>
|
|
|
- <li id="menu-item-453" class="menu-item list-inline-item"><a href="/note-legali/">Privacy Policy
|
|
|
- & Note Legali</a></li>
|
|
|
- <li id="menu-item-1310" class="menu-item list-inline-item"><a target="_blank"
|
|
|
- href="https://form.agid.gov.it/view/9df3de50-7a42-11ef-8989-9dcab5eaa914">Dichiarazione
|
|
|
- di accessibilità</a></li>
|
|
|
- <li id="menu-item-411" class="menu-item list-inline-item"><a href="/mappa-del-sito/">Mappa del
|
|
|
- sito</a></li>
|
|
|
- <li id="menu-item-1277" class="menu-item list-inline-item"><a href="/open-data-spid/">Open Data
|
|
|
- SPID</a></li>
|
|
|
- </ul>
|
|
|
- </nav>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </footer>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- <script>
|
|
|
- // Dati di esempio (simulazione di un database)
|
|
|
- const dati = [
|
|
|
- { idUtente: 1, indirizzo: "Via Roma 1", latitudine: "41.9028", longitudine: "12.4964", codiceCatastale: "A123", dataPredisposizione: "2023-10-01" },
|
|
|
- { idUtente: 2, indirizzo: "Via Milano 2", latitudine: "45.4642", longitudine: "9.1900", codiceCatastale: "B456", dataPredisposizione: "2023-10-02" },
|
|
|
- { idUtente: 1, indirizzo: "Via Napoli 3", latitudine: "40.8522", longitudine: "14.2681", codiceCatastale: "C789", dataPredisposizione: "2023-10-03" },
|
|
|
- { idUtente: 3, indirizzo: "Via Torino 4", latitudine: "45.0703", longitudine: "7.6869", codiceCatastale: "D012", dataPredisposizione: "2023-10-04" },
|
|
|
- { idUtente: 2, indirizzo: "Via Firenze 5", latitudine: "43.7696", longitudine: "11.2558", codiceCatastale: "E345", dataPredisposizione: "2023-10-05" },
|
|
|
- { idUtente: 1, indirizzo: "Via Venezia 6", latitudine: "45.4408", longitudine: "12.3155", codiceCatastale: "F678", dataPredisposizione: "2023-10-06" },
|
|
|
- ];
|
|
|
-
|
|
|
- // Simulazione del ruolo utente (1 = operatore, 2 = amministratore)
|
|
|
- const ruoloUtente = 2; // Cambia questo valore per testare
|
|
|
- const idUtenteCorrente = 1; // ID dell'utente corrente (solo per operatori)
|
|
|
-
|
|
|
- // Mostra/nascondi il filtro per codice utente in base al ruolo
|
|
|
- if (ruoloUtente === 2) {
|
|
|
- document.getElementById('userFilterSection').style.display = 'flex';
|
|
|
- }
|
|
|
-
|
|
|
- // Variabili per la paginazione
|
|
|
- const righePerPagina = 3; // Numero di righe da visualizzare per pagina
|
|
|
- let paginaCorrente = 1;
|
|
|
-
|
|
|
- // Funzione per filtrare i dati
|
|
|
- function filtraDati() {
|
|
|
- const userFilter = document.getElementById('userFilter').value.toLowerCase();
|
|
|
- const addressFilter = document.getElementById('addressFilter').value.toLowerCase();
|
|
|
- const dateFilter = document.getElementById('dateFilter').value;
|
|
|
-
|
|
|
- const datiFiltrati = dati.filter(item => {
|
|
|
- const matchUser = ruoloUtente === 2 ? item.idUtente.toString().includes(userFilter) : item.idUtente === idUtenteCorrente;
|
|
|
- const matchAddress = item.indirizzo.toLowerCase().includes(addressFilter);
|
|
|
- const matchDate = dateFilter ? item.dataPredisposizione === dateFilter : true;
|
|
|
-
|
|
|
- return matchUser && matchAddress && matchDate;
|
|
|
- });
|
|
|
-
|
|
|
- caricaDatiInTabella(datiFiltrati);
|
|
|
- aggiornaPaginazione(datiFiltrati);
|
|
|
- }
|
|
|
-
|
|
|
- // Funzione per caricare i dati nella tabella
|
|
|
- function caricaDatiInTabella(dati) {
|
|
|
- const tbody = document.getElementById('dataTableBody');
|
|
|
- tbody.innerHTML = ''; // Svuota la tabella
|
|
|
-
|
|
|
- const inizio = (paginaCorrente - 1) * righePerPagina;
|
|
|
- const fine = inizio + righePerPagina;
|
|
|
- const datiPagina = dati.slice(inizio, fine);
|
|
|
-
|
|
|
- datiPagina.forEach(item => {
|
|
|
- const row = `
|
|
|
- <tr>
|
|
|
- <td>${item.idUtente}</td>
|
|
|
- <td>${item.indirizzo}</td>
|
|
|
- <td>${item.latitudine}</td>
|
|
|
- <td>${item.longitudine}</td>
|
|
|
- <td>${item.codiceCatastale}</td>
|
|
|
- <td>${item.dataPredisposizione}</td>
|
|
|
- <td>
|
|
|
- <button class="btn btn-sm btn-primary" onclick="modificaDato(${item.idUtente})"><i class="fas fa-edit"></i></button>
|
|
|
- <button class="btn btn-sm btn-danger" onclick="cancellaDato(${item.idUtente})"><i class="fas fa-trash"></i></button>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- `;
|
|
|
- tbody.innerHTML += row;
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- // Funzione per aggiornare la paginazione
|
|
|
- function aggiornaPaginazione(dati) {
|
|
|
- const pagination = document.getElementById('pagination');
|
|
|
- pagination.innerHTML = ''; // Svuota la paginazione
|
|
|
-
|
|
|
- const totalePagine = Math.ceil(dati.length / righePerPagina);
|
|
|
-
|
|
|
- // Pulsante "Precedente"
|
|
|
- pagination.innerHTML += `
|
|
|
- <li class="page-item ${paginaCorrente === 1 ? 'disabled' : ''}">
|
|
|
- <a class="page-link" href="#" onclick="cambiaPagina(${paginaCorrente - 1})">Precedente</a>
|
|
|
- </li>
|
|
|
- `;
|
|
|
-
|
|
|
- // Numeri di pagina
|
|
|
- for (let i = 1; i <= totalePagine; i++) {
|
|
|
- pagination.innerHTML += `
|
|
|
- <li class="page-item ${i === paginaCorrente ? 'active' : ''}">
|
|
|
- <a class="page-link" href="#" onclick="cambiaPagina(${i})">${i}</a>
|
|
|
- </li>
|
|
|
- `;
|
|
|
- }
|
|
|
-
|
|
|
- // Pulsante "Successivo"
|
|
|
- pagination.innerHTML += `
|
|
|
- <li class="page-item ${paginaCorrente === totalePagine ? 'disabled' : ''}">
|
|
|
- <a class="page-link" href="#" onclick="cambiaPagina(${paginaCorrente + 1})">Successivo</a>
|
|
|
- </li>
|
|
|
- `;
|
|
|
- }
|
|
|
-
|
|
|
- // Funzione per cambiare pagina
|
|
|
- function cambiaPagina(nuovaPagina) {
|
|
|
- paginaCorrente = nuovaPagina;
|
|
|
- filtraDati();
|
|
|
- }
|
|
|
-
|
|
|
- // Funzioni di esempio per modifica e cancellazione
|
|
|
- function modificaDato(idUtente) {
|
|
|
- const riga = document.querySelector(`tr[data-id="${idUtente}"]`);
|
|
|
- if (!riga) return;
|
|
|
-
|
|
|
- const celle = riga.cells;
|
|
|
- const dati = {
|
|
|
- idUtente: celle[0].textContent,
|
|
|
- indirizzo: celle[1].textContent,
|
|
|
- latitudine: celle[2].textContent,
|
|
|
- longitudine: celle[3].textContent,
|
|
|
- codiceCatastale: celle[4].textContent,
|
|
|
- dataPredisposizione: celle[5].textContent,
|
|
|
- };
|
|
|
-
|
|
|
- const formModifica = `
|
|
|
- <td colspan="6">
|
|
|
- <form class="form-modifica d-flex">
|
|
|
- <div class="row flex-nowrap">
|
|
|
- <div class="col-md-2 d-flex flex-column gap-1">
|
|
|
- <label for="modificaIdUtente">Id</label>
|
|
|
- <input type="text" class="form-control" id="modificaIdUtente" ${ruoloUtente === 2 ? '' : 'disabled'} value="${dati.idUtente}">
|
|
|
- </div>
|
|
|
- <div class="col-md-2 d-flex flex-column gap-1">
|
|
|
- <label for="modificaIndirizzo">Indirizzo</label>
|
|
|
- <input type="text" class="form-control" id="modificaIndirizzo" value="${dati.indirizzo}">
|
|
|
- </div>
|
|
|
- <div class="col-md-2 d-flex flex-column gap-1">
|
|
|
- <label for="modificaLatitudine">Latitudine</label>
|
|
|
- <input type="text" class="form-control" id="modificaLatitudine" value="${dati.latitudine}">
|
|
|
- </div>
|
|
|
- <div class="col-md-2 d-flex flex-column gap-1">
|
|
|
- <label for="modificaLongitudine">Longitudine</label>
|
|
|
- <input type="text" class="form-control" id="modificaLongitudine" value="${dati.longitudine}">
|
|
|
- </div>
|
|
|
- <div class="col-md-2 d-flex flex-column gap-1">
|
|
|
- <label for="modificaCodiceCatastale">Codice Catastale</label>
|
|
|
- <input type="text" class="form-control" id="modificaCodiceCatastale" value="${dati.codiceCatastale}">
|
|
|
- </div>
|
|
|
- <div class="col-md-2 d-flex flex-column gap-1">
|
|
|
- <label for="modificaData">Data Predisposizione</label>
|
|
|
- <input type="date" class="form-control" id="modificaData" value="${dati.dataPredisposizione}">
|
|
|
- </div>
|
|
|
- <div class="text-right col-md-1">
|
|
|
- <button type="button" class="btn btn-success btn-sm" onclick="confermaModifica(${idUtente})">Conferma</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </form>
|
|
|
- </td>
|
|
|
- `;
|
|
|
-
|
|
|
- riga.innerHTML = formModifica;
|
|
|
-}
|
|
|
- // Funzione per confermare la modifica
|
|
|
- function confermaModifica(idUtente) {
|
|
|
- // Trova la riga della tabella corrispondente all'ID utente
|
|
|
- const riga = document.querySelector(`tr[data-id="${idUtente}"]`);
|
|
|
- if (!riga) return;
|
|
|
-
|
|
|
- let NewidUtente = idUtente;
|
|
|
- // Recupera i valori modificati dal form
|
|
|
- if (ruoloUtente === 2) {
|
|
|
- NewidUtente = document.getElementById('modificaIdUtente').value;
|
|
|
- }
|
|
|
-
|
|
|
- const indirizzo = document.getElementById('modificaIndirizzo').value;
|
|
|
- const latitudine = document.getElementById('modificaLatitudine').value;
|
|
|
- const longitudine = document.getElementById('modificaLongitudine').value;
|
|
|
- const codiceCatastale = document.getElementById('modificaCodiceCatastale').value;
|
|
|
- const dataPredisposizione = document.getElementById('modificaData').value;
|
|
|
-
|
|
|
- // Aggiorna l'array `dati` con i nuovi valori
|
|
|
- const indice = dati.findIndex(item => item.idUtente === idUtente);
|
|
|
- if (indice !== -1) {
|
|
|
- dati[indice] = {
|
|
|
- idUtente: parseInt(NewidUtente),
|
|
|
- indirizzo,
|
|
|
- latitudine,
|
|
|
- longitudine,
|
|
|
- codiceCatastale,
|
|
|
- dataPredisposizione
|
|
|
- };
|
|
|
- }
|
|
|
-
|
|
|
- // Ricarica la tabella per riflettere le modifiche
|
|
|
- filtraDati();
|
|
|
-}
|
|
|
-// Funzione per azzerare i filtri
|
|
|
-function azzeraFiltri() {
|
|
|
- document.getElementById('userFilter').value = '';
|
|
|
- document.getElementById('addressFilter').value = '';
|
|
|
- document.getElementById('dateFilter').value = '';
|
|
|
- paginaCorrente = 1; // Resetta la pagina corrente
|
|
|
- filtraDati(); // Ricarica i dati senza filtri
|
|
|
-}
|
|
|
-function caricaDatiInTabella(dati) {
|
|
|
- const tbody = document.getElementById('dataTableBody');
|
|
|
- tbody.innerHTML = ''; // Svuota la tabella
|
|
|
-
|
|
|
- const inizio = (paginaCorrente - 1) * righePerPagina;
|
|
|
- const fine = inizio + righePerPagina;
|
|
|
- const datiPagina = dati.slice(inizio, fine);
|
|
|
-
|
|
|
- datiPagina.forEach(item => {
|
|
|
- const row = `
|
|
|
- <tr data-id="${item.idUtente}">
|
|
|
- <td>${item.idUtente}</td>
|
|
|
- <td>${item.indirizzo}</td>
|
|
|
- <td>${item.latitudine}</td>
|
|
|
- <td>${item.longitudine}</td>
|
|
|
- <td>${item.codiceCatastale}</td>
|
|
|
- <td>${item.dataPredisposizione}</td>
|
|
|
- <td>
|
|
|
- <button class="btn btn-sm btn-primary" onclick="modificaDato(${item.idUtente})"><i class="fas fa-edit"></i></button>
|
|
|
- <button class="btn btn-sm btn-danger" onclick="cancellaDato(${item.idUtente})"><i class="fas fa-trash"></i></button>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- `;
|
|
|
- tbody.innerHTML += row;
|
|
|
- });
|
|
|
-}
|
|
|
- // Funzione per cancellare un dato
|
|
|
- function cancellaDato(idUtente) {
|
|
|
- if (confirm("Sei sicuro di voler eliminare questo dato?")) {
|
|
|
- // L'utente ha confermato l'eliminazione
|
|
|
- // 1. Rimuovi la riga dalla tabella
|
|
|
- const riga = document.querySelector(`tr[data-id="${idUtente}"]`);
|
|
|
- if (riga) {
|
|
|
- riga.remove();
|
|
|
- }
|
|
|
-
|
|
|
- // 2. Aggiorna l'array 'dati' rimuovendo l'elemento corrispondente
|
|
|
- const indice = dati.findIndex(item => item.idUtente === idUtente);
|
|
|
- if (indice !== -1) {
|
|
|
- dati.splice(indice, 1);
|
|
|
- }
|
|
|
-
|
|
|
- // 3. Aggiorna la paginazione e la visualizzazione della tabella
|
|
|
- aggiornaPaginazione(dati);
|
|
|
- caricaDatiInTabella(dati);
|
|
|
- alert(`Cancella dato per utente ${idUtente}`);
|
|
|
- } else {
|
|
|
- // L'utente ha annullato l'eliminazione
|
|
|
- alert("Eliminazione annullata.");
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // Carica i dati iniziali
|
|
|
- filtraDati();
|
|
|
- </script>
|
|
|
-
|
|
|
-</body>
|
|
|
-
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="it">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Gestione Dati Immobiliari</title>
|
|
|
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap-italia@2.13.4/dist/css/bootstrap-italia.min.css"
|
|
|
+ rel="stylesheet">
|
|
|
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
|
+ <style>
|
|
|
+ /* Aggiungi questo stile per il body e l'html */
|
|
|
+ html, body {
|
|
|
+ height: 100%;
|
|
|
+ margin: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ /* Aggiungi questo stile per il contenitore principale */
|
|
|
+ .container {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ /* Aggiungi questo stile per il footer */
|
|
|
+ .it-footer {
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ /* Stile per la riga blu scuro */
|
|
|
+ .top-bar {
|
|
|
+ background-color: #004080;
|
|
|
+ /* Blu scuro */
|
|
|
+ color: white;
|
|
|
+ padding: 0.5rem 0;
|
|
|
+ text-align: left;
|
|
|
+ /* Allineamento a sinistra */
|
|
|
+ font-size: 0.9rem;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ /* Stile per l'header */
|
|
|
+ .header {
|
|
|
+ background-color: #0066CC;
|
|
|
+ /* Blu chiaro */
|
|
|
+ color: white;
|
|
|
+ padding: 1rem 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Stile per il logo "PW" dentro un cerchio */
|
|
|
+ .logo {
|
|
|
+ font-family: 'Georgia', serif;
|
|
|
+ font-size: 1.5rem;
|
|
|
+ width: 50px; height: 50px;
|
|
|
+ background-color: white;
|
|
|
+ color: #0066CC;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 10px;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ /* Stile per il titolo "Segnalazioni e Supporto Tecnico" */
|
|
|
+ .header-title {
|
|
|
+ color: white;
|
|
|
+ font-size: 1.5rem;
|
|
|
+ /* Stessa grandezza di "Segnalazioni e Supporto Tecnico" */
|
|
|
+ font-weight: bold;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Stile per il contenuto principale */
|
|
|
+ .main-content {
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ /* Grigio chiaro */
|
|
|
+ padding: 2rem 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Stile per il banner di conferma */
|
|
|
+ .banner-confirm {
|
|
|
+ display: none;
|
|
|
+ /* Nascondi il banner inizialmente */
|
|
|
+ background-color: #28a745;
|
|
|
+ color: white;
|
|
|
+ padding: 1rem;
|
|
|
+ margin-top: 1rem;
|
|
|
+ border-radius: 4px;
|
|
|
+ text-align: center;
|
|
|
+ transition: opacity 0.5s ease-in-out;
|
|
|
+ /* Transizione per la dissolvenza */
|
|
|
+ opacity: 1;
|
|
|
+ /* Inizialmente visibile */
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Aggiungi margine ai lati del contenitore principale */
|
|
|
+ .container {
|
|
|
+ padding-left: 2rem;
|
|
|
+ padding-right: 2rem;
|
|
|
+ }
|
|
|
+ .it-footer-main {
|
|
|
+ background-color: #004D99;
|
|
|
+ padding-left: 2rem;
|
|
|
+ padding-right: 2rem;
|
|
|
+ }
|
|
|
+ /* Aggiungi margine ai lati del footer */
|
|
|
+ .it-footer-main .container {
|
|
|
+ background-color: #004D99;
|
|
|
+ padding-left: 2rem;
|
|
|
+ padding-right: 2rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Stile per i link con sottolineatura solo al passaggio del mouse */
|
|
|
+ .link-underline-hover {
|
|
|
+ text-decoration: none;
|
|
|
+ /* Rimuove la sottolineatura di base */
|
|
|
+ }
|
|
|
+
|
|
|
+ .link-underline-hover:hover {
|
|
|
+ text-decoration: underline;
|
|
|
+ /* Aggiunge la sottolineatura solo al passaggio del mouse */
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Stile per il footer */
|
|
|
+ .data-table {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-section {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pagination {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .form-modifica * {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <!-- Riga blu scuro con scritto "Project Work" allineata a sinistra -->
|
|
|
+ <div class="top-bar">
|
|
|
+ <div class="container">
|
|
|
+ Project Work
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- Header è troppo stretto segue la linea della pagina -->
|
|
|
+ <header class="header">
|
|
|
+ <div class="container">
|
|
|
+ <div class="row align-items-center">
|
|
|
+ <div class="col d-flex">
|
|
|
+ <!-- Logo "PW" dentro un cerchio, ora cliccabile -->
|
|
|
+ <a href="/callback" class="logo-link">
|
|
|
+ <div class="logo">PW</div>
|
|
|
+ </a>
|
|
|
+ <h1 class="header-title">Gestione Dati Immobiliari</h1>
|
|
|
+ <!-- Titolo "Mappa" con la stessa grandezza -->
|
|
|
+ </div>
|
|
|
+ <div class="col-auto d-flex align-items-center">
|
|
|
+ <a href="/admin" class="text-white me-3 link-underline-hover">Gestione Dati Immobiliari</a>
|
|
|
+ <a href="/tfo" class="text-white me-3 link-underline-hover">TFO</a>
|
|
|
+ <a href="/buildings" class="text-white me-3 link-underline-hover">Registrazione degli Edifici</a>
|
|
|
+ <a href="/mappa_login" class="btn btn-light">Logout</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+ <div class="container mt-4">
|
|
|
+ <div class="filter-section">
|
|
|
+ <div class="row mt-3 mb-3">
|
|
|
+ <!-- Filtro per codice utente (solo per amministratore) -->
|
|
|
+ <div class="col-md-4 flex-column gap-4" id="userFilterSection" style="display: none;">
|
|
|
+ <label for="userFilter">Filtra per Codice Utente</label>
|
|
|
+ <input type="text" class="form-control" id="userFilter" placeholder="Inserisci codice utente">
|
|
|
+ </div>
|
|
|
+ <!-- Filtro per indirizzo -->
|
|
|
+ <div class="col-md-4 d-flex flex-column gap-4">
|
|
|
+ <label for="addressFilter">Filtra per Indirizzo</label>
|
|
|
+ <input type="text" class="form-control" id="addressFilter" placeholder="Inserisci indirizzo">
|
|
|
+ </div>
|
|
|
+ <!-- Filtro per data -->
|
|
|
+ <div class="col-md-4 d-flex flex-column gap-4">
|
|
|
+ <label for="dateFilter">Filtra per Data</label>
|
|
|
+ <input type="date" class="form-control" id="dateFilter">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="container mt-4">
|
|
|
+ <div class="filter-section">
|
|
|
+ <div class="row mt-3 mb-3">
|
|
|
+ </div>
|
|
|
+ <button class="btn btn-primary" onclick="filtraDati()">Applica Filtri</button>
|
|
|
+ <button class="btn btn-secondary" onclick="azzeraFiltri()">Azzera Filtri</button> </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <table class="table data-table">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th>ID Utente</th>
|
|
|
+ <th>Indirizzo</th>
|
|
|
+ <th>Latitudine</th>
|
|
|
+ <th>Longitudine</th>
|
|
|
+ <th>Codice Catastale</th>
|
|
|
+ <th>Data Predisposizione</th>
|
|
|
+ <th>Azioni</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody id="dataTableBody">
|
|
|
+ <!-- Dati verranno caricati qui dinamicamente -->
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+
|
|
|
+ <!-- Paginazione -->
|
|
|
+ <nav aria-label="Paginazione">
|
|
|
+ <ul class="pagination" id="pagination">
|
|
|
+ <!-- Pulsanti di paginazione verranno aggiunti qui dinamicamente -->
|
|
|
+ </ul>
|
|
|
+ </nav>
|
|
|
+ </div>
|
|
|
+ <!-- Widget ElevenLabs ConvAI -->
|
|
|
+ <elevenlabs-convai agent-id="GlBWa9xJ6GdD7bAve6Yq"></elevenlabs-convai>
|
|
|
+ <script src="https://elevenlabs.io/convai-widget/index.js" async type="text/javascript"></script>
|
|
|
+ <script>
|
|
|
+ document.addEventListener('DOMContentLoaded', function() {
|
|
|
+ // Ottieni l'URL corrente
|
|
|
+ const urlParams = new URLSearchParams(window.location.search);
|
|
|
+ // Estrai il token dal parametro di query "token"
|
|
|
+ const ruolo = urlParams.get('ruolo');
|
|
|
+ const codice_fiscale = urlParams.get('codice_fiscale');
|
|
|
+ // Salva il token in localStorage
|
|
|
+ if (ruolo && codice_fiscale) {
|
|
|
+ localStorage.setItem('ruolo', ruolo);
|
|
|
+ localStorage.setItem('codice_fiscale', codice_fiscale);
|
|
|
+ // Rimuovi il token dall'URL per sicurezza (opzionale)
|
|
|
+ window.history.replaceState({}, document.title, window.location.pathname);
|
|
|
+ //window.location.href = window.location.pathname;
|
|
|
+ //Puoi anche reindirizzare ad una pagina pulita.
|
|
|
+ //window.location.href = '/altra-pagina';
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+ <!-- Footer -->
|
|
|
+ <footer id="footer" class="it-footer bg-black" role="contentinfo">
|
|
|
+ <div class="it-footer-main py-3">
|
|
|
+ <div class="container">
|
|
|
+ <section class="py-4">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
|
|
|
+ <div class="link-list-wrapper">
|
|
|
+ <h2 class="h5">Esplora SINFI</h2>
|
|
|
+ <ul id="footer-menu-col-1" class="link-list">
|
|
|
+ <li id="menu-item-sinfi-1" class="menu-item">
|
|
|
+ <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/che-cose/">Cos'è
|
|
|
+ SINFI</a>
|
|
|
+ </li>
|
|
|
+ <li id="menu-item-sinfi-2" class="menu-item">
|
|
|
+ <a class="list-item" href="https://sinfi.it/realms/master/protocol/openid-connect/auth?client_id=sinfi_user_service&response_type=code&redirect_uri=https://sinfi.it/sinfi_gateway/labs_keycloak/post_login/&scope=email&state=">Infrastrutture Registrate</a>
|
|
|
+ </li>
|
|
|
+ <li id="menu-item-sinfi-3" class="menu-item">
|
|
|
+ <a class="list-item"
|
|
|
+ href="https://sinfi.it/portal/sinfi-menu/riferimenti-normativi/">Normative
|
|
|
+ di Riferimento</a>
|
|
|
+ </li>
|
|
|
+ <li id="menu-item-sinfi-4" class="menu-item">
|
|
|
+ <a class="list-item" href="https://sinfi.it/realms/master/protocol/openid-connect/auth?client_id=sinfi_user_service&response_type=code&redirect_uri=https://sinfi.it/sinfi_gateway/labs_keycloak/post_login/&scope=email&state=">Open Data SINFI</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
|
|
|
+ <div class="link-list-wrapper">
|
|
|
+ <h2 class="h5">Aiuto e Supporto</h2>
|
|
|
+ <ul id="footer-menu-col-2" class="link-list">
|
|
|
+ <li id="menu-item-aiuto-1" class="menu-item">
|
|
|
+ <a class="list-item" href="/instructions">Istruzioni</a>
|
|
|
+ </li>
|
|
|
+ <li id="menu-item-aiuto-2" class="menu-item">
|
|
|
+ <a class="list-item" href="/faq">FAQ - Domande Frequenti</a>
|
|
|
+ </li>
|
|
|
+ <li id="menu-item-aiuto-3" class="menu-item">
|
|
|
+ <a class="list-item" href="/techsup">Segnalazioni e Supporto Tecnico</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- Colonna "Community" con i loghi dei social -->
|
|
|
+ <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
|
|
|
+ <div class="link-list-wrapper">
|
|
|
+ <h2 class="h5">Community</h2>
|
|
|
+ <div class="social-icons">
|
|
|
+ <a href="https://www.linkedin.com" target="_blank" class="me-3"><i
|
|
|
+ class="fab fa-linkedin"></i></a>
|
|
|
+ <a href="https://www.youtube.com" target="_blank" class="me-3"><i
|
|
|
+ class="fab fa-youtube"></i></a>
|
|
|
+ <a href="https://www.facebook.com" target="_blank" class="me-3"><i
|
|
|
+ class="fab fa-facebook"></i></a>
|
|
|
+ <a href="https://www.instagram.com" target="_blank" class="me-3"><i
|
|
|
+ class="fab fa-instagram"></i></a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
|
|
|
+ <div class="link-list-wrapper">
|
|
|
+ <h2 class="h5">SINFI</h2>
|
|
|
+ <ul id="footer-menu-col-4" class="link-list">
|
|
|
+ <li id="menu-item-377" class="menu-item">
|
|
|
+ <a target="_blank" href="https://sinfi.it/portal/">Vai al sito ufficiale
|
|
|
+ SINFI</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="it-footer-small-prints clearfix">
|
|
|
+ <div class="container">
|
|
|
+ <nav class="menu-footer-menu-ita-container" aria-label="link utili">
|
|
|
+ <ul id="menu-footer-menu-ita"
|
|
|
+ class="it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row">
|
|
|
+ <li id="menu-item-413" class="menu-item list-inline-item"><a href="/media-policy/">Media
|
|
|
+ Policy</a></li>
|
|
|
+ <li id="menu-item-453" class="menu-item list-inline-item"><a href="/note-legali/">Privacy Policy
|
|
|
+ & Note Legali</a></li>
|
|
|
+ <li id="menu-item-1310" class="menu-item list-inline-item"><a target="_blank"
|
|
|
+ href="https://form.agid.gov.it/view/9df3de50-7a42-11ef-8989-9dcab5eaa914">Dichiarazione
|
|
|
+ di accessibilità</a></li>
|
|
|
+ <li id="menu-item-411" class="menu-item list-inline-item"><a href="/mappa-del-sito/">Mappa del
|
|
|
+ sito</a></li>
|
|
|
+ <li id="menu-item-1277" class="menu-item list-inline-item"><a href="/open-data-spid/">Open Data
|
|
|
+ SPID</a></li>
|
|
|
+ </ul>
|
|
|
+ </nav>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </footer>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <script>
|
|
|
+ // Dati di esempio (simulazione di un database)
|
|
|
+ const dati = [
|
|
|
+ { idUtente: 1, indirizzo: "Via Roma 1", latitudine: "41.9028", longitudine: "12.4964", codiceCatastale: "A123", dataPredisposizione: "2023-10-01" },
|
|
|
+ { idUtente: 2, indirizzo: "Via Milano 2", latitudine: "45.4642", longitudine: "9.1900", codiceCatastale: "B456", dataPredisposizione: "2023-10-02" },
|
|
|
+ { idUtente: 1, indirizzo: "Via Napoli 3", latitudine: "40.8522", longitudine: "14.2681", codiceCatastale: "C789", dataPredisposizione: "2023-10-03" },
|
|
|
+ { idUtente: 3, indirizzo: "Via Torino 4", latitudine: "45.0703", longitudine: "7.6869", codiceCatastale: "D012", dataPredisposizione: "2023-10-04" },
|
|
|
+ { idUtente: 2, indirizzo: "Via Firenze 5", latitudine: "43.7696", longitudine: "11.2558", codiceCatastale: "E345", dataPredisposizione: "2023-10-05" },
|
|
|
+ { idUtente: 1, indirizzo: "Via Venezia 6", latitudine: "45.4408", longitudine: "12.3155", codiceCatastale: "F678", dataPredisposizione: "2023-10-06" },
|
|
|
+ ];
|
|
|
+
|
|
|
+ // Simulazione del ruolo utente (1 = operatore, 2 = amministratore)
|
|
|
+ const ruoloUtente = 2; // Cambia questo valore per testare
|
|
|
+ const idUtenteCorrente = 1; // ID dell'utente corrente (solo per operatori)
|
|
|
+
|
|
|
+ // Mostra/nascondi il filtro per codice utente in base al ruolo
|
|
|
+ if (ruoloUtente === 2) {
|
|
|
+ document.getElementById('userFilterSection').style.display = 'flex';
|
|
|
+ }
|
|
|
+
|
|
|
+ // Variabili per la paginazione
|
|
|
+ const righePerPagina = 3; // Numero di righe da visualizzare per pagina
|
|
|
+ let paginaCorrente = 1;
|
|
|
+
|
|
|
+ // Funzione per filtrare i dati
|
|
|
+ function filtraDati() {
|
|
|
+ const userFilter = document.getElementById('userFilter').value.toLowerCase();
|
|
|
+ const addressFilter = document.getElementById('addressFilter').value.toLowerCase();
|
|
|
+ const dateFilter = document.getElementById('dateFilter').value;
|
|
|
+
|
|
|
+ const datiFiltrati = dati.filter(item => {
|
|
|
+ const matchUser = ruoloUtente === 2 ? item.idUtente.toString().includes(userFilter) : item.idUtente === idUtenteCorrente;
|
|
|
+ const matchAddress = item.indirizzo.toLowerCase().includes(addressFilter);
|
|
|
+ const matchDate = dateFilter ? item.dataPredisposizione === dateFilter : true;
|
|
|
+
|
|
|
+ return matchUser && matchAddress && matchDate;
|
|
|
+ });
|
|
|
+
|
|
|
+ caricaDatiInTabella(datiFiltrati);
|
|
|
+ aggiornaPaginazione(datiFiltrati);
|
|
|
+ }
|
|
|
+
|
|
|
+ // Funzione per caricare i dati nella tabella
|
|
|
+ function caricaDatiInTabella(dati) {
|
|
|
+ const tbody = document.getElementById('dataTableBody');
|
|
|
+ tbody.innerHTML = ''; // Svuota la tabella
|
|
|
+
|
|
|
+ const inizio = (paginaCorrente - 1) * righePerPagina;
|
|
|
+ const fine = inizio + righePerPagina;
|
|
|
+ const datiPagina = dati.slice(inizio, fine);
|
|
|
+
|
|
|
+ datiPagina.forEach(item => {
|
|
|
+ const row = `
|
|
|
+ <tr>
|
|
|
+ <td>${item.idUtente}</td>
|
|
|
+ <td>${item.indirizzo}</td>
|
|
|
+ <td>${item.latitudine}</td>
|
|
|
+ <td>${item.longitudine}</td>
|
|
|
+ <td>${item.codiceCatastale}</td>
|
|
|
+ <td>${item.dataPredisposizione}</td>
|
|
|
+ <td>
|
|
|
+ <button class="btn btn-sm btn-primary" onclick="modificaDato(${item.idUtente})"><i class="fas fa-edit"></i></button>
|
|
|
+ <button class="btn btn-sm btn-danger" onclick="cancellaDato(${item.idUtente})"><i class="fas fa-trash"></i></button>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ `;
|
|
|
+ tbody.innerHTML += row;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // Funzione per aggiornare la paginazione
|
|
|
+ function aggiornaPaginazione(dati) {
|
|
|
+ const pagination = document.getElementById('pagination');
|
|
|
+ pagination.innerHTML = ''; // Svuota la paginazione
|
|
|
+
|
|
|
+ const totalePagine = Math.ceil(dati.length / righePerPagina);
|
|
|
+
|
|
|
+ // Pulsante "Precedente"
|
|
|
+ pagination.innerHTML += `
|
|
|
+ <li class="page-item ${paginaCorrente === 1 ? 'disabled' : ''}">
|
|
|
+ <a class="page-link" href="#" onclick="cambiaPagina(${paginaCorrente - 1})">Precedente</a>
|
|
|
+ </li>
|
|
|
+ `;
|
|
|
+
|
|
|
+ // Numeri di pagina
|
|
|
+ for (let i = 1; i <= totalePagine; i++) {
|
|
|
+ pagination.innerHTML += `
|
|
|
+ <li class="page-item ${i === paginaCorrente ? 'active' : ''}">
|
|
|
+ <a class="page-link" href="#" onclick="cambiaPagina(${i})">${i}</a>
|
|
|
+ </li>
|
|
|
+ `;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Pulsante "Successivo"
|
|
|
+ pagination.innerHTML += `
|
|
|
+ <li class="page-item ${paginaCorrente === totalePagine ? 'disabled' : ''}">
|
|
|
+ <a class="page-link" href="#" onclick="cambiaPagina(${paginaCorrente + 1})">Successivo</a>
|
|
|
+ </li>
|
|
|
+ `;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Funzione per cambiare pagina
|
|
|
+ function cambiaPagina(nuovaPagina) {
|
|
|
+ paginaCorrente = nuovaPagina;
|
|
|
+ filtraDati();
|
|
|
+ }
|
|
|
+
|
|
|
+ // Funzioni di esempio per modifica e cancellazione
|
|
|
+ function modificaDato(idUtente) {
|
|
|
+ const riga = document.querySelector(`tr[data-id="${idUtente}"]`);
|
|
|
+ if (!riga) return;
|
|
|
+
|
|
|
+ const celle = riga.cells;
|
|
|
+ const dati = {
|
|
|
+ idUtente: celle[0].textContent,
|
|
|
+ indirizzo: celle[1].textContent,
|
|
|
+ latitudine: celle[2].textContent,
|
|
|
+ longitudine: celle[3].textContent,
|
|
|
+ codiceCatastale: celle[4].textContent,
|
|
|
+ dataPredisposizione: celle[5].textContent,
|
|
|
+ };
|
|
|
+
|
|
|
+ const formModifica = `
|
|
|
+ <td colspan="6">
|
|
|
+ <form class="form-modifica d-flex">
|
|
|
+ <div class="row flex-nowrap">
|
|
|
+ <div class="col-md-2 d-flex flex-column gap-1">
|
|
|
+ <label for="modificaIdUtente">Id</label>
|
|
|
+ <input type="text" class="form-control" id="modificaIdUtente" ${ruoloUtente === 2 ? '' : 'disabled'} value="${dati.idUtente}">
|
|
|
+ </div>
|
|
|
+ <div class="col-md-2 d-flex flex-column gap-1">
|
|
|
+ <label for="modificaIndirizzo">Indirizzo</label>
|
|
|
+ <input type="text" class="form-control" id="modificaIndirizzo" value="${dati.indirizzo}">
|
|
|
+ </div>
|
|
|
+ <div class="col-md-2 d-flex flex-column gap-1">
|
|
|
+ <label for="modificaLatitudine">Latitudine</label>
|
|
|
+ <input type="text" class="form-control" id="modificaLatitudine" value="${dati.latitudine}">
|
|
|
+ </div>
|
|
|
+ <div class="col-md-2 d-flex flex-column gap-1">
|
|
|
+ <label for="modificaLongitudine">Longitudine</label>
|
|
|
+ <input type="text" class="form-control" id="modificaLongitudine" value="${dati.longitudine}">
|
|
|
+ </div>
|
|
|
+ <div class="col-md-2 d-flex flex-column gap-1">
|
|
|
+ <label for="modificaCodiceCatastale">Codice Catastale</label>
|
|
|
+ <input type="text" class="form-control" id="modificaCodiceCatastale" value="${dati.codiceCatastale}">
|
|
|
+ </div>
|
|
|
+ <div class="col-md-2 d-flex flex-column gap-1">
|
|
|
+ <label for="modificaData">Data Predisposizione</label>
|
|
|
+ <input type="date" class="form-control" id="modificaData" value="${dati.dataPredisposizione}">
|
|
|
+ </div>
|
|
|
+ <div class="text-right col-md-1">
|
|
|
+ <button type="button" class="btn btn-success btn-sm" onclick="confermaModifica(${idUtente})">Conferma</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </td>
|
|
|
+ `;
|
|
|
+
|
|
|
+ riga.innerHTML = formModifica;
|
|
|
+}
|
|
|
+ // Funzione per confermare la modifica
|
|
|
+ function confermaModifica(idUtente) {
|
|
|
+ // Trova la riga della tabella corrispondente all'ID utente
|
|
|
+ const riga = document.querySelector(`tr[data-id="${idUtente}"]`);
|
|
|
+ if (!riga) return;
|
|
|
+
|
|
|
+ let NewidUtente = idUtente;
|
|
|
+ // Recupera i valori modificati dal form
|
|
|
+ if (ruoloUtente === 2) {
|
|
|
+ NewidUtente = document.getElementById('modificaIdUtente').value;
|
|
|
+ }
|
|
|
+
|
|
|
+ const indirizzo = document.getElementById('modificaIndirizzo').value;
|
|
|
+ const latitudine = document.getElementById('modificaLatitudine').value;
|
|
|
+ const longitudine = document.getElementById('modificaLongitudine').value;
|
|
|
+ const codiceCatastale = document.getElementById('modificaCodiceCatastale').value;
|
|
|
+ const dataPredisposizione = document.getElementById('modificaData').value;
|
|
|
+
|
|
|
+ // Aggiorna l'array `dati` con i nuovi valori
|
|
|
+ const indice = dati.findIndex(item => item.idUtente === idUtente);
|
|
|
+ if (indice !== -1) {
|
|
|
+ dati[indice] = {
|
|
|
+ idUtente: parseInt(NewidUtente),
|
|
|
+ indirizzo,
|
|
|
+ latitudine,
|
|
|
+ longitudine,
|
|
|
+ codiceCatastale,
|
|
|
+ dataPredisposizione
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ // Ricarica la tabella per riflettere le modifiche
|
|
|
+ filtraDati();
|
|
|
+}
|
|
|
+// Funzione per azzerare i filtri
|
|
|
+function azzeraFiltri() {
|
|
|
+ document.getElementById('userFilter').value = '';
|
|
|
+ document.getElementById('addressFilter').value = '';
|
|
|
+ document.getElementById('dateFilter').value = '';
|
|
|
+ paginaCorrente = 1; // Resetta la pagina corrente
|
|
|
+ filtraDati(); // Ricarica i dati senza filtri
|
|
|
+}
|
|
|
+function caricaDatiInTabella(dati) {
|
|
|
+ const tbody = document.getElementById('dataTableBody');
|
|
|
+ tbody.innerHTML = ''; // Svuota la tabella
|
|
|
+
|
|
|
+ const inizio = (paginaCorrente - 1) * righePerPagina;
|
|
|
+ const fine = inizio + righePerPagina;
|
|
|
+ const datiPagina = dati.slice(inizio, fine);
|
|
|
+
|
|
|
+ datiPagina.forEach(item => {
|
|
|
+ const row = `
|
|
|
+ <tr data-id="${item.idUtente}">
|
|
|
+ <td>${item.idUtente}</td>
|
|
|
+ <td>${item.indirizzo}</td>
|
|
|
+ <td>${item.latitudine}</td>
|
|
|
+ <td>${item.longitudine}</td>
|
|
|
+ <td>${item.codiceCatastale}</td>
|
|
|
+ <td>${item.dataPredisposizione}</td>
|
|
|
+ <td>
|
|
|
+ <button class="btn btn-sm btn-primary" onclick="modificaDato(${item.idUtente})"><i class="fas fa-edit"></i></button>
|
|
|
+ <button class="btn btn-sm btn-danger" onclick="cancellaDato(${item.idUtente})"><i class="fas fa-trash"></i></button>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ `;
|
|
|
+ tbody.innerHTML += row;
|
|
|
+ });
|
|
|
+}
|
|
|
+ // Funzione per cancellare un dato
|
|
|
+ function cancellaDato(idUtente) {
|
|
|
+ if (confirm("Sei sicuro di voler eliminare questo dato?")) {
|
|
|
+ // L'utente ha confermato l'eliminazione
|
|
|
+ // 1. Rimuovi la riga dalla tabella
|
|
|
+ const riga = document.querySelector(`tr[data-id="${idUtente}"]`);
|
|
|
+ if (riga) {
|
|
|
+ riga.remove();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 2. Aggiorna l'array 'dati' rimuovendo l'elemento corrispondente
|
|
|
+ const indice = dati.findIndex(item => item.idUtente === idUtente);
|
|
|
+ if (indice !== -1) {
|
|
|
+ dati.splice(indice, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 3. Aggiorna la paginazione e la visualizzazione della tabella
|
|
|
+ aggiornaPaginazione(dati);
|
|
|
+ caricaDatiInTabella(dati);
|
|
|
+ alert(`Cancella dato per utente ${idUtente}`);
|
|
|
+ } else {
|
|
|
+ // L'utente ha annullato l'eliminazione
|
|
|
+ alert("Eliminazione annullata.");
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // Carica i dati iniziali
|
|
|
+ filtraDati();
|
|
|
+ </script>
|
|
|
+
|
|
|
+</body>
|
|
|
+
|
|
|
</html>
|
