Generation
/
project-work


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578
							<!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 diverso */
            font-size: 1.5rem;
            font-weight: bold;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            /* Diametro del cerchio */
            height: 50px;
            /* Diametro del cerchio */
            background-color: white;
            /* Colore di sfondo del cerchio */
            color: #0066CC;
            /* Colore del testo */
            border-radius: 50%;
            /* Rende l'elemento un cerchio */
            margin-right: 10px;
        }

        /* 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="./mappa_logout.html" 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.html" class="text-white me-3 link-underline-hover">Gestione Dati Immobiliari</a>
                    <a href="./TFO.html" class="text-white me-3 link-underline-hover">TFO</a>
                    <a href="./buildings.html" class="text-white me-3 link-underline-hover">Registrazione degli Edifici</a>
                    <a href="./mappa_login.html" 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 -->
    <div id="ai-widget-container" style="position: fixed; bottom: 20px; right: 20px;">
        <elevenlabs-convai agent-id="GlBWa9xJ6GdD7bAve6Yq"></elevenlabs-convai>
    </div>
    <!-- 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.html">Istruzioni</a>
                                    </li>
                                    <li id="menu-item-aiuto-2" class="menu-item">
                                        <a class="list-item" href="./faq.html">FAQ - Domande Frequenti</a>
                                    </li>
                                    <li id="menu-item-aiuto-3" class="menu-item">
                                        <a class="list-item" href="./techsup.html">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
                                &amp; 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>
    <!-- Includi lo script di ElevenLabs -->
    <script src="https://elevenlabs.io/convai-widget/index.js" async type="text/javascript"></script>
</body>

</html>