Auto-sync: 20260323_020000
This commit is contained in:
parent
5c878fbfa1
commit
916d401197
1 changed files with 334 additions and 0 deletions
334
public/report.html
Normal file
334
public/report.html
Normal file
|
|
@ -0,0 +1,334 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Report Statistiche CAI Facile</title>
|
||||
<style>
|
||||
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f7f6; color: #333; padding: 0; margin: 0; box-sizing: border-box; }
|
||||
|
||||
/* SCHERMATA LOGIN */
|
||||
#login-screen { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #34495e; padding: 20px; }
|
||||
.login-box { background: white; padding: 40px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); text-align: center; width: 100%; max-width: 350px; }
|
||||
.login-box h2 { color: #2c3e50; margin-top: 0; }
|
||||
.login-box input { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #bdc3c7; border-radius: 5px; box-sizing: border-box; font-size: 16px; }
|
||||
.login-box button { width: 100%; background-color: #3498db; color: white; border: none; padding: 12px; font-size: 16px; border-radius: 5px; cursor: pointer; font-weight: bold; transition: 0.2s; margin-top: 10px; }
|
||||
.login-box button:hover { background-color: #2980b9; }
|
||||
#login-error { color: #e74c3c; font-weight: bold; font-size: 14px; margin-bottom: 10px; display: none; }
|
||||
|
||||
/* DASHBOARD PRINCIPALE */
|
||||
#dashboard-screen { display: none; padding: 20px; }
|
||||
.container { max-width: 1100px; margin: 0 auto; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); box-sizing: border-box;}
|
||||
|
||||
.header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
|
||||
h1 { color: #2c3e50; margin: 0; font-size: 24px;}
|
||||
|
||||
.btn-logout { background-color: #e74c3c; color: white; padding: 8px 15px; border-radius: 5px; text-decoration: none; font-weight: bold; font-size: 14px; white-space: nowrap; cursor: pointer; border: none;}
|
||||
.btn-logout:hover { background-color: #c0392b; }
|
||||
|
||||
.filter-section { background: #eef2f5; padding: 20px; border-radius: 8px; margin-bottom: 30px; display: flex; flex-wrap: wrap; gap: 15px; align-items: flex-end; }
|
||||
.form-group { display: flex; flex-direction: column; flex: 1; min-width: 150px; }
|
||||
.form-group label { font-size: 13px; font-weight: bold; color: #34495e; margin-bottom: 5px; }
|
||||
.form-group input, .form-group select { padding: 10px; border: 1px solid #bdc3c7; border-radius: 5px; font-size: 14px; outline: none; box-sizing: border-box; width: 100%;}
|
||||
.form-group input:focus, .form-group select:focus { border-color: #3498db; }
|
||||
|
||||
.btn-filtra { background-color: #3498db; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; font-size: 14px; transition: 0.2s; height: 40px; }
|
||||
.btn-filtra:hover { background-color: #2980b9; }
|
||||
.btn-reset { background-color: #95a5a6; color: white; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; text-decoration: none; font-size: 14px; height: 40px; line-height: 20px; box-sizing: border-box; display: inline-block; text-align: center;}
|
||||
.btn-reset:hover { background-color: #7f8c8d; }
|
||||
|
||||
.dashboard { display: flex; justify-content: space-between; margin-bottom: 30px; gap: 20px; text-align: center; flex-wrap: wrap; }
|
||||
.card { flex: 1; min-width: 150px; background: #ecf0f1; padding: 20px; border-radius: 8px; border-left: 5px solid #3498db; box-sizing: border-box;}
|
||||
.card.ios { border-left-color: #e74c3c; }
|
||||
.card.android { border-left-color: #2ecc71; }
|
||||
.card h3 { margin: 0 0 10px 0; font-size: 14px; color: #7f8c8d; text-transform: uppercase; }
|
||||
.card p { margin: 0; font-size: 28px; font-weight: bold; color: #2c3e50; }
|
||||
|
||||
table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 14px; table-layout: fixed; }
|
||||
th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #ddd; word-wrap: break-word;}
|
||||
th { background-color: #34495e; color: white; }
|
||||
tr:hover { background-color: #f1f1f1; }
|
||||
|
||||
.badge { padding: 4px 8px; border-radius: 4px; color: white; font-weight: bold; font-size: 12px; }
|
||||
.badge-ios { background-color: #e74c3c; }
|
||||
.badge-android { background-color: #2ecc71; }
|
||||
.badge-desktop { background-color: #95a5a6; }
|
||||
.empty { text-align: center; padding: 30px; color: #7f8c8d; font-style: italic; background: #f9f9f9; border-radius: 5px;}
|
||||
|
||||
/* --- OTTIMIZZAZIONI MOBILE --- */
|
||||
@media (max-width: 768px) {
|
||||
#dashboard-screen { padding: 10px; }
|
||||
.container { padding: 15px; }
|
||||
.header-top { flex-direction: column; text-align: center; gap: 15px; }
|
||||
|
||||
.filter-section { flex-direction: column; align-items: stretch; gap: 10px; padding: 15px;}
|
||||
.form-group { min-width: 100%; }
|
||||
.btn-filtra, .btn-reset { width: 100%; margin-top: 5px; height: auto; padding: 12px;}
|
||||
|
||||
.dashboard { flex-direction: column; gap: 15px; }
|
||||
.card { min-width: 100%; }
|
||||
|
||||
table, thead, tbody, th, td, tr { display: block; width: 100%; box-sizing: border-box; }
|
||||
thead { display: none; }
|
||||
|
||||
tr { margin-bottom: 15px; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
|
||||
|
||||
td { display: flex; flex-direction: column; text-align: left; border-bottom: 1px solid #eee; padding: 12px 15px; position: relative; }
|
||||
|
||||
td::before { content: attr(data-label); font-weight: bold; margin-bottom: 5px; color: #34495e; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
|
||||
td:last-child { border-bottom: none; }
|
||||
td[data-label="Dispositivo"] { white-space: normal !important; word-break: break-all; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="login-screen">
|
||||
<div class="login-box">
|
||||
<h2>Area Riservata</h2>
|
||||
<div id="login-error">Credenziali errate! Riprova.</div>
|
||||
<input type="email" id="email" placeholder="Email amministratore" required>
|
||||
<input type="password" id="password" placeholder="Password" required>
|
||||
<button onclick="login()">Accedi</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="dashboard-screen">
|
||||
<div class="container">
|
||||
<div class="header-top">
|
||||
<h1>📊 Report Campagna CAI Facile</h1>
|
||||
<button onclick="logout()" class="btn-logout">Esci 🚪</button>
|
||||
</div>
|
||||
|
||||
<div class="filter-section">
|
||||
<div class="form-group">
|
||||
<label for="data_da">Data Da:</label>
|
||||
<input type="date" id="data_da">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="data_a">Data A:</label>
|
||||
<input type="date" id="data_a">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="os">Sistema Operativo:</label>
|
||||
<select id="os">
|
||||
<option value="">Tutti i sistemi</option>
|
||||
<option value="iOS">Apple iOS</option>
|
||||
<option value="Android">Google Android</option>
|
||||
<option value="Desktop_Altro">Desktop / Altro</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="loc">Località (es. Roma):</label>
|
||||
<input type="text" id="loc" placeholder="Cerca città o regione...">
|
||||
</div>
|
||||
|
||||
<button onclick="applicaFiltri()" class="btn-filtra">🔍 Applica Filtri</button>
|
||||
<button onclick="resetFiltri()" class="btn-reset">✖ Reset</button>
|
||||
</div>
|
||||
|
||||
<div class="dashboard">
|
||||
<div class="card">
|
||||
<h3>Scansioni Trovate</h3>
|
||||
<p id="totale-click">0</p>
|
||||
</div>
|
||||
<div class="card ios">
|
||||
<h3>Apple iOS</h3>
|
||||
<p id="click-ios">0</p>
|
||||
</div>
|
||||
<div class="card android">
|
||||
<h3>Google Android</h3>
|
||||
<p id="click-android">0</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Desktop / Altro</h3>
|
||||
<p id="click-desktop">0</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Dettaglio Scansioni</h2>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Data e Ora</th>
|
||||
<th>Sistema</th>
|
||||
<th>Indirizzo IP</th>
|
||||
<th>Località</th>
|
||||
<th>Dispositivo</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="table-body">
|
||||
<tr>
|
||||
<td colspan="5" class="empty">Caricamento dati in corso...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
// Importa le funzioni Firebase necessarie
|
||||
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-app.js";
|
||||
import { getAuth, signInWithEmailAndPassword, signOut, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-auth.js";
|
||||
import { getFirestore, collection, getDocs, query, orderBy } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-firestore.js";
|
||||
|
||||
// INSERISCI QUI LA TUA CONFIGURAZIONE FIREBASE
|
||||
const firebaseConfig = {
|
||||
apiKey: "AIzaSyARkiWU7jd8BKiV0Jbdgyx1PJRlRmXWaI0",
|
||||
authDomain: "cid-app-sincro.firebaseapp.com",
|
||||
databaseURL: "https://cid-app-sincro-default-rtdb.europe-west1.firebasedatabase.app",
|
||||
projectId: "cid-app-sincro",
|
||||
storageBucket: "cid-app-sincro.firebasestorage.app",
|
||||
messagingSenderId: "1060927868658",
|
||||
appId: "1:1060927868658:web:9fb37eadc23cdc9e084a6b",
|
||||
measurementId: "G-3ETJDF3ELZ"
|
||||
};
|
||||
|
||||
// Inizializza Firebase
|
||||
const app = initializeApp(firebaseConfig);
|
||||
const auth = getAuth(app);
|
||||
const db = getFirestore(app);
|
||||
|
||||
let tuttiIDati = []; // Array per conservare i dati grezzi estratti da Firestore
|
||||
|
||||
// Gestione stato autenticazione
|
||||
onAuthStateChanged(auth, (user) => {
|
||||
if (user) {
|
||||
// Utente loggato: mostra dashboard, nascondi login
|
||||
document.getElementById('login-screen').style.display = 'none';
|
||||
document.getElementById('dashboard-screen').style.display = 'block';
|
||||
caricaDatiDaFirestore();
|
||||
} else {
|
||||
// Utente non loggato: mostra login, nascondi dashboard
|
||||
document.getElementById('login-screen').style.display = 'flex';
|
||||
document.getElementById('dashboard-screen').style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Funzione di Login
|
||||
window.login = () => {
|
||||
const email = document.getElementById('email').value;
|
||||
const password = document.getElementById('password').value;
|
||||
const errorMsg = document.getElementById('login-error');
|
||||
|
||||
signInWithEmailAndPassword(auth, email, password)
|
||||
.then(() => {
|
||||
errorMsg.style.display = 'none';
|
||||
})
|
||||
.catch((error) => {
|
||||
errorMsg.style.display = 'block';
|
||||
console.error("Errore di login:", error);
|
||||
});
|
||||
};
|
||||
|
||||
// Funzione di Logout
|
||||
window.logout = () => {
|
||||
signOut(auth).then(() => {
|
||||
// Ricarica la pagina o gestisci la UI tramite onAuthStateChanged
|
||||
});
|
||||
};
|
||||
|
||||
// Carica i dati da Firestore
|
||||
async function caricaDatiDaFirestore() {
|
||||
try {
|
||||
// Sostituisci 'statistiche_scansioni' con il nome esatto della tua collection in Firestore
|
||||
const q = query(collection(db, "statistiche_scansioni"), orderBy("timestamp", "desc"));
|
||||
const querySnapshot = await getDocs(q);
|
||||
|
||||
tuttiIDati = [];
|
||||
querySnapshot.forEach((doc) => {
|
||||
tuttiIDati.push(doc.data());
|
||||
});
|
||||
|
||||
// Mostra i dati iniziali (senza filtri)
|
||||
applicaFiltri();
|
||||
} catch (e) {
|
||||
console.error("Errore durante il caricamento dei dati: ", e);
|
||||
document.getElementById('table-body').innerHTML = `<tr><td colspan="5" class="empty">Errore nel caricamento dati. Controlla la console.</td></tr>`;
|
||||
}
|
||||
}
|
||||
|
||||
// Funzione di filtraggio e rendering tabella
|
||||
window.applicaFiltri = () => {
|
||||
const fDataDa = document.getElementById('data_da').value;
|
||||
const fDataA = document.getElementById('data_a').value;
|
||||
const fOs = document.getElementById('os').value;
|
||||
const fLoc = document.getElementById('loc').value.toLowerCase();
|
||||
|
||||
let datiFiltrati = tuttiIDati.filter(row => {
|
||||
let mostra = true;
|
||||
|
||||
// Estrae la data formattata (assumendo che tu abbia un campo stringa 'dataOra' tipo "YYYY-MM-DD HH:MM:SS"
|
||||
// Se usi il timestamp di Firebase nativo, la logica di estrazione data andrà leggermente adattata.
|
||||
let soloData = "";
|
||||
if(row.dataOra) {
|
||||
soloData = row.dataOra.substring(0, 10);
|
||||
}
|
||||
|
||||
if (fDataDa && soloData < fDataDa) mostra = false;
|
||||
if (fDataA && soloData > fDataA) mostra = false;
|
||||
if (fOs && row.os !== fOs) mostra = false;
|
||||
if (fLoc && row.localita && !row.localita.toLowerCase().includes(fLoc)) mostra = false;
|
||||
|
||||
return mostra;
|
||||
});
|
||||
|
||||
aggiornaUI(datiFiltrati);
|
||||
};
|
||||
|
||||
// Reset filtri
|
||||
window.resetFiltri = () => {
|
||||
document.getElementById('data_da').value = '';
|
||||
document.getElementById('data_a').value = '';
|
||||
document.getElementById('os').value = '';
|
||||
document.getElementById('loc').value = '';
|
||||
applicaFiltri();
|
||||
};
|
||||
|
||||
// Aggiorna contatori e tabella
|
||||
function aggiornaUI(dati) {
|
||||
let tClick = 0, tIos = 0, tAnd = 0, tDesk = 0;
|
||||
let htmlTabella = '';
|
||||
|
||||
dati.forEach(row => {
|
||||
tClick++;
|
||||
if (row.os === 'iOS') tIos++;
|
||||
else if (row.os === 'Android') tAnd++;
|
||||
else tDesk++;
|
||||
|
||||
let badgeClass = 'badge-desktop';
|
||||
if (row.os === 'iOS') badgeClass = 'badge-ios';
|
||||
else if (row.os === 'Android') badgeClass = 'badge-android';
|
||||
|
||||
htmlTabella += `
|
||||
<tr>
|
||||
<td data-label="Data e Ora" style="white-space: nowrap;">${row.dataOra || '-'}</td>
|
||||
<td data-label="Sistema"><span class="badge ${badgeClass}">${row.os || '-'}</span></td>
|
||||
<td data-label="Indirizzo IP">${row.ip || '-'}</td>
|
||||
<td data-label="Località"><strong>${row.localita || '-'}</strong></td>
|
||||
<td data-label="Dispositivo" style="font-size: 12px; color: #7f8c8d; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="${row.userAgent || '-'}">
|
||||
${row.userAgent || '-'}
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
|
||||
document.getElementById('totale-click').innerText = tClick;
|
||||
document.getElementById('click-ios').innerText = tIos;
|
||||
document.getElementById('click-android').innerText = tAnd;
|
||||
document.getElementById('click-desktop').innerText = tDesk;
|
||||
|
||||
if (dati.length === 0) {
|
||||
htmlTabella = `<tr><td colspan="5" class="empty">Nessun dato corrispondente ai filtri selezionati.</td></tr>`;
|
||||
}
|
||||
|
||||
document.getElementById('table-body').innerHTML = htmlTabella;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue