Ciao a tutti!
Sto programmando un'app. Ho fatto codice html, css e javascript. Uso Firebase Authentication e GitHub per il remoto. Uso codepen.io per l'emulatore, dove vedo l'app funzionare. Nell'emulatore di codepen.io che uso l'app funziona, ma quando apro l'url di Firebase non vedo niente, vedo solo la scritta “APP” in alto.
L'errore non riguarda i tre file, ma richiama il file "heartbeatService.ts" di Firebase.
Questi sono i codici:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>APP</title>
<style>
.attiva { display: block; }
.pagina { display: none; }
</style>
<!-- Includere Firebase con ES Modules -->
<script type="module" src="script.js"></script>
</head>
<body>
<header>
<h1>APP</h1>
</header>
<!-- Pagina Iniziale -->
<section id="pagina-iniziale" class="pagina attiva">
<h2>Benvenuto</h2>
<div class="pulsanti-iniziali">
<button id="iscriviti-button">Iscriviti</button>
<button id="login-button">Login</button>
<button id="accedi-admin-button">Accedi come Admin</button>
</div>
</section>
<!-- Pagina di Registrazione -->
<section id="registrazione" class="pagina">
<form id="registrazione-form">
<input type="text" id="nome" class="input-registrazione" placeholder="Nome" required>
<input type="text" id="cognome" class="input-registrazione" placeholder="Cognome" required>
<input type="email" id="email" class="input-registrazione" placeholder="Email" required autocomplete="email">
<input type="text" id="codice-fiscale" class="input-registrazione" placeholder="Codice Fiscale" required autocomplete="username">
<span id="error-codice-fiscale" class="error-message" style="color: red; display: none;"></span>
<div class="input-container">
<span class="icon" id="icon-password" style="display: none;">??</span>
<input type="password" id="password" class="input-registrazione" placeholder="Password" required autocomplete="new-password">
</div>
<div class="input-container">
<span class="icon" id="icon-conferma-password" style="display: none;">??</span>
<input type="password" id="conferma-password" class="input-registrazione" placeholder="Conferma Password" required autocomplete="new-password">
</div>
<select id="tipo-profilo" class="input-registrazione" required>
<option value="omega">omega</option>
<option value="alfa">alfa</option>
<option value="beta">beta</option>
</select>
<button type="submit">Registrati</button>
</form>
</section>
<!-- Pagina di Login -->
<section id="login" class="pagina">
<form id="login-form">
<input type="email" id="login-email" class="input-registrazione" placeholder="Email" required autocomplete="email">
<input type="password" id="login-password" class="input-registrazione" placeholder="Password" required autocomplete="current-password">
<button type="submit">Login</button>
</form>
</section>
<!-- Pagina Menù -->
<section id="menu" class="pagina">
<h2 style="text-align: center;">Menù</h2>
<div class="menu-container">
<button onclick="mostraPagina('profilo')"> Profilo</button>
<button onclick="mostraPagina('alfabetas')"> Alfabetas</button>
<button onclick="mostraPagina('preferenze')"> Preferenze</button>
<button onclick="mostraPagina('impostazioni')"> Impostazioni</button>
<button onclick="mostraPagina('consigliaci')"> Consigliaci</button>
<button onclick="mostraPagina('dona')"> Dona</button>
</div>
</section>
<!-- Pagina Profilo -->
<section id="profilo" class="pagina">
<button class="indietro" onclick="mostraPagina('menu')">Indietro</button>
<h2>Profilo Utente</h2>
<div class="profilo-info">
<img id="profilo-foto" src="placeholder.jpg" alt="Foto Profilo" />
<div>
<p><strong>Nome:</strong> <span id="profilo-nome"></span></p>
<p><strong>Cognome:</strong> <span id="profilo-cognome"></span></p>
<p><strong>Categoria:</strong> <span id="profilo-categoria"></span></p>
<p><strong>Data di Nascita:</strong> <span id="profilo-data-nascita"></span></p>
<p><strong>Genere:</strong> <span id="profilo-genere"></span></p>
<p><strong>Regione:</strong> <span id="profilo-regione"></span></p>
<p><strong>Provincia:</strong> <span id="profilo-provincia"></span></p>
<p><strong>Comune:</strong> <span id="profilo-comune"></span></p>
<p><strong>Membro di:</strong> <span id="profilo-gamma"></span></p>
<p><strong>Background:</strong> <span id="profilo-background"></span></p>
</div>
</div>
<button onclick="mostraPagina('modifica-profilo')">Modifica Profilo</button>
</section>
<!-- Pagina Modifica Profilo -->
<section id="modifica-profilo" class="pagina">
<button class="indietro" onclick="mostraPagina('menu')">Indietro</button>
<h2>Modifica Profilo</h2>
<form id="modifica-form">
<label for="modifica-nome">Nome:</label>
<input type="text" id="modifica-nome" required>
<label for="modifica-cognome">Cognome:</label>
<input type="text" id="modifica-cognome" required>
<label for="modifica-categoria">Categoria:</label>
<select id="modifica-categoria" required>
<option value="omega">omega</option>
<option value="alfa">alfa</option>
<option value="beta">beta</option>
</select>
<label for="modifica-data-nascita">Data di Nascita:</label>
<input type="date" id="modifica-data-nascita" required>
<label for="modifica-genere">Genere:</label>
<select id="modifica-genere" required>
<option value="Maschio">Maschio</option>
<option value="Femmina">Femmina</option>
<option value="Altro">Altro</option>
</select>
<label for="modifica-regione">Regione:</label>
<select id="modifica-regione" required>
<option value="">Seleziona una regione</option>
<option value="Lazio">Lazio</option>
<option value="Lombardia">Lombardia</option>
<option value="Campania">Campania</option>
<!-- Aggiungi le altre regioni -->
</select>
<label for="modifica-provincia">Provincia:</label>
<select id="modifica-provincia" required disabled>
<option value="">Seleziona una provincia</option>
</select>
<label for="modifica-comune">Comune:</label>
<select id="modifica-comune" required disabled>
<option value="">Seleziona un comune</option>
</select>
<label for="modifica-gamma">Membro di:</label>
<select id="modifica-gamma">
<option value="gamma1">gamma 1</option>
<option value="gamma2">gamma 2</option>
<option value="gamma3">gamma 3</option>
<!-- Aggiungi altri gammas -->
</select>
<label for="modifica-background">Background beta:</label>
<textarea id="modifica-background" rows="4"></textarea>
<button type="submit">Salva Modifiche</button>
</form>
</section>
<!-- Pagina alfabetas -->
<section id="alfabetas" class="pagina">
<button class="indietro" onclick="mostraPagina('menu')">Indietro</button>
<h2>alfabetas</h2>
<p>Scegli il livello di rappresentanza:</p>
<div id="somega-alfas-betas">
<button onclick="scegliMigliori('alfas')">Scegli alfa</button>
<button onclick="scegliMigliori('betas')">Scegli beta</button>
</div>
<div id="alfas-betas-lista">
<!-- Mostra qui i risultati dei alfas o betas -->
</div>
<button onclick="scegliLivello('555')">555</button>
<button onclick="scegliLivello('444')">444</button>
<button onclick="scegliLivello('333')">333</button>
<button onclick="scegliLivello('222')">222</button>
<button onclick="scegliLivello('111')">111</button>
<!-- Sezione per mostrare i alfas suggeriti -->
<div id="alfas-suggeriti" class="alfas-lista">
<h3>alfas suggeriti:</h3>
<div id="lista-alfas"></div>
</div>
<!-- Sezione per confermare la scelta del alfabeta -->
<div id="scelta-alfabeta" class="scelta-container">
<h3>Hai selezionato:</h3>
<p id="alfabeta-selezionato"></p>
<button id="conferma-scelta" onclick="confermaalfabeta()">Conferma</button>
</div>
</section>
<!-- Pagina Preferenze -->
<section id="preferenze" class="pagina">
<button class="indietro" onclick="mostraPagina('menu')">Indietro</button>
<h2>Preferenze</h2>
<p>Seleziona le tue preferenze:</p>
<form id="preferenze-form">
<!-- Categoria Sport -->
<div class="categoria" style="background-color: yellow;">
<h3>sport</h3>
<div class="domanda">
<!-- Mettere domande -->
</div>
</div>
<!-- Aggiungi altre 4 domande per sport -->
</div>
<!-- Categoria Natura -->
<div class="categoria" style="background-color: green;">
<h3>Natura</h3>
<!-- 5 domande simili a sport -->
</div>
<!-- Categoria Hobby -->
<div class="categoria" style="background-color: pink;">
<h3>Hobby</h3>
<!-- 5 domande simili a sport -->
</div>
<button type="submit">Salva Preferenze</button>
</form>
</section>
<!-- Pagina Impostazioni -->
<section id="impostazioni" class="pagina">
<button class="indietro" onclick="mostraPagina('menu')">Indietro</button>
<h2>Impostazioni</h2>
<p>Modifica le tue impostazioni di privacy e sicurezza.</p>
<form id="impostazioni-form">
<label>
<input type="checkbox" name="privacy" checked> Abilita privacy
</label>
<label>
<input type="checkbox" name="notifiche"> Ricevi notifiche
</label>
<button type="submit">Salva Impostazioni</button>
</form>
</section>
<!-- Pagina Consigliaci -->
<section id="consigliaci" class="pagina">
<button class="indietro" onclick="mostraPagina('menu')">Indietro</button>
<h2>Consigliaci</h2>
<form id="consigliaci-form">
<label for="feedback">Il tuo feedback:</label>
<textarea id="feedback" rows="4" required></textarea>
<button type="submit">Invia Feedback</button>
</form>
</section>
<!-- Pagina Dona -->
<section id="dona" class="pagina">
<button class="indietro" onclick="mostraPagina('menu')">Indietro</button>
<h2>Dona</h2>
<form id="dona-form">
<label for="importo">Importo:</label>
<input type="number" id="importo" required>
<button type="submit">Dona</button>
</form>
</section>
<script>
function mostraPagina(idPagina) {
var pagine = document.getElementsByClassName('pagina');
for (var i = 0; i < pagine.length; i++) {
pagine[i].classList.remove('attiva');
}
var paginaDaMostrare = document.getElementById(idPagina);
if (paginaDaMostrare) {
paginaDaMostrare.classList.add('attiva');
}
}
</script>
</body>
</html>
/* styles.css */
/* Variabili CSS per i colori */
:root {
--colore-primario: #007bff; /* Blu forte */
--colore-secondario: #1E90FF; /* Blu forte */
--colore-sfondo: #00BFFF; /* Azzurro chiaro */
--colore-testonero: #333; /* Testo principale */
--colore-bianco: #fff; /* Bianco */
--colore-rosso: #dc3545; /* Rosso */
--colore-verde: #28a745; /* Verde */
--colore-verde-scuro: #218838; /* Verde scuro */
--colore-blu-scuro: #0056b3; /* Blu scuro */
}
/* Stili generali */
body {
font-family: Arial, sans-serif;
background-color: var(--colore-sfondo);
color: var(--colore-testonero);
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
header {
background-color: var(--colore-primario);
color: var(--colore-bianco);
padding: 10px 20px;
width: 100%;
text-align: center;
position: relative; /* Posizione relativa per il pulsante Indietro */
}
.indietro {
position: absolute; /* Posizionamento assoluto */
top: 10px; /* Spazio dal bordo superiore */
left: 10px; /* Spazio dal bordo sinistro */
background-color: var(--colore-rosso);
color: var(--colore-bianco);
border: none;
border-radius: 5px;
padding: 10px 15px; /* Uniformato l'altezza */
cursor: pointer;
transition: background-color 0.3s;
font-size: 14px; /* Dimensione del font */
}
.indietro:hover {
background-color: #c82333; /* Rosso scuro al passaggio del mouse */
}
h1 {
margin: 0;
}
h2 {
margin: 20px 0;
text-align: center; /* Centra il titolo Menù */
}
.pagina {
display: none; /* Nascondi tutte le pagine di default */
}
.pagina.attiva {
display: block; /* Mostra solo la pagina attiva */
}
.pulsanti-iniziali {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
button {
background-color: var(--colore-primario);
color: var(--colore-bianco);
border: none;
border-radius: 5px;
padding: 15px 25px; /* Uniformato l'altezza dei pulsanti */
margin: 10px 5px; /* Aggiunto margine tra i pulsanti */
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
display: flex; /* Rende il contenuto del pulsante un flexbox */
align-items: center; /* Allinea verticalmente il contenuto */
justify-content: center; /* Centra il contenuto */
}
button:hover {
background-color: var(--colore-blu-scuro); /* Blu scuro al passaggio del mouse */
}
.menu-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
}
.menu-container > div {
display: flex;
flex-direction: column;
margin: 10px;
}
footer {
background-color: var(--colore-primario);
color: var(--colore-bianco);
text-align: center;
padding: 10px 0;
position: relative; /* Cambiato in relativo per adattamento */
width: 100%;
}
/* Stili per le domande di preferenza */
.domanda {
margin-bottom: 20px;
}
/* Stili per le risposte */
.risposta {
display: flex;
justify-content: space-between; /* Spazio tra le opzioni */
background-color: #e7f3ff; /* Colore di sfondo chiaro */
border-radius: 10px; /* Angoli smussati */
padding: 10px;
}
.risposta-opzione {
flex: 1; /* Ogni opzione occupa uguale spazio */
text-align: center; /* Testo centrato */
}
.risposta-opzione input {
margin-right: 5px; /* Spazio tra input e testo */
}
/* Stile per le Sezioni di Preferenze */
.categoria {
margin-bottom: 30px;
padding: 20px;
border-radius: 10px;
}
.domanda {
margin-bottom: 20px;
}
.risposta {
display: flex;
justify-content: space-between;
background-color: #e7f3ff;
border-radius: 10px;
padding: 10px;
}
.risposta-opzione {
flex: 1;
text-align: center;
}
/* Stili per il modulo di registrazione */
#registrazione-form, #modifica-form {
display: flex;
flex-direction: column;
margin: 20px 0;
padding: 20px;
background-color: var(--colore-bianco); /* Bianco per il modulo */
border-radius: 10px; /* Angoli smussati per il modulo */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Ombra per il modulo */
}
/* Nuovo stile per i campi di input di registrazione */
.input-registrazione {
padding: 15px; /* Aumenta l'imbottitura */
border: 1px solid #ccc; /* Bordo grigio chiaro */
border-radius: 10px; /* Angoli smussati */
margin-bottom: 20px; /* Spazio tra i campi */
font-size: 16px; /* Dimensione del font */
}
/* Modifiche per select */
#tipo-profilo {
padding: 15px; /* Aggiungi padding per il select */
border: 1px solid #ccc; /* Bordo grigio chiaro */
border-radius: 10px; /* Angoli smussati */
font-size: 16px; /* Dimensione del font */
}
/* Stili per il pulsante di registrazione */
#registrazione-form button {
margin-top: 20px; /* Spazio sopra il pulsante Registrati */
padding: 15px; /* Aumenta l'imbottitura del pulsante */
}
/* Scelta dei alfabetas */
#somega-alfas-betas {
margin: 20px 0;
display: flex;
justify-content: space-around;
}
#alfas-betas-lista {
margin-top: 20px;
}
/* Responsive Design */
@media (max-width: 768px) {
button {
padding: 10px 20px; /* Dimensioni più piccole sui dispositivi mobili */
}
.indietro {
padding: 8px 10px; /* Dimensioni più piccole per il pulsante Indietro */
}
.menu-container {
flex-direction: column; /* Colonne sui dispositivi mobili */
}
}
// script.js
// Importa le funzioni necessarie da Firebase
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.13.0/firebase-app.js";
import { getFirestore, doc, setDoc, getDoc, query, collection, where, getDocs } from "https://www.gstatic.com/firebasejs/10.13.0/firebase-firestore.js";
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/10.13.0/firebase-auth.js";
// Configurazione Firebase
export const firebaseConfig = {
apiKey: "****************************",
authDomain: "****************************",
projectId: "****************************",
storageBucket: "****************************",
messagingSenderId: "***********************",
appId: "****************************",
measurementId: "***********************"
};
// Inizializza Firebase, Firestore e Auth
const app = initializeApp(firebaseConfig);
const db = getFirestore(app); // Inizializza Firestore
const auth = getAuth(app); // Inizializza Auth
console.log("Firebase inizializzato:", app);
// Importa heartbeatService
import { HeartbeatService } from './heartbeatService';
const heartbeatService = new HeartbeatService();
// Funzione per inizializzare e caricare i heartbeats
function initializeHeartbeats() {
heartbeatService.loadHeartbeats(); // Supponendo che esista un metodo loadHeartbeats
}
// Chiamata per inizializzare all'avvio
initializeHeartbeats();
// Funzione per passare a un'altra pagina
function mostraPagina(pagina) {
console.log(`Mostra pagina: ${pagina}`);
const tutteLePagine = document.querySelectorAll('.pagina');
tutteLePagine.forEach(pagina => pagina.classList.remove('attiva')); // Rimuovi la classe 'attiva' da tutte le pagine
const paginaDaMostrare = document.getElementById(pagina);
paginaDaMostrare.classList.add('attiva'); // Aggiungi la classe 'attiva' alla pagina desiderata
}
// Funzione per inizializzare il caricamento della pagina iniziale
document.addEventListener('DOMContentLoaded', () => {
mostraPagina('pagina-iniziale'); // Mostra la pagina iniziale all'avvio
// Event listener per i pulsanti
// Funzione di registrazione
document.getElementById("registrazione-form").addEventListener("submit", async (e) => {
e.preventDefault();
const nome = document.getElementById("nome").value;
const cognome = document.getElementById("cognome").value;
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
const codiceFiscale = document.getElementById("codice-fiscale").value;
const tipoProfilo = document.getElementById("tipo-profilo").value;
// Verifica il codice fiscale
if (!verificaCodiceFiscale(codiceFiscale)) {
return; // Esci se il codice fiscale non è valido
}
try {
// Crea l'utente con Firebase Authentication
const userCredential = await createUserWithEmailAndPassword(auth, email, password);
const user = userCredential.user;
// Salva ulteriori dettagli utente nel Firestore
await setDoc(doc(db, "utenti", user.uid), {
nome: nome,
cognome: cognome,
email: email,
codiceFiscale: codiceFiscale,
tipoProfilo: tipoProfilo,
preferenze: []
});
// Aggiungi codice fiscale utilizzato all'array (se necessario)
codiceFiscaleUtilizzato.push(codiceFiscale);
// Reindirizza alla pagina del menu
mostraPagina('menu');
alert("Registrazione avvenuta con successo!");
} catch (error) {
console.error("Errore durante la registrazione: ", error.message);
alert("Registrazione fallita: " + error.message);
}
});
// Mostra la pagina di login
document.getElementById("login-button").addEventListener("click", () => {
mostraPagina('login');
});
// Gestire le Preferenze
document.getElementById("preferenze-form").addEventListener("submit", async (e) => {
e.preventDefault();
const user = auth.currentUser;
if (!user) {
alert("Devi essere loggato per salvare le tue preferenze.");
return;
}
const preferenze = {
sport1: document.querySelector('input[name="sport1"]:checked').value,
// Aggiungi altre domande per ogni categoria
};
try {
const docRef = await setDoc(doc(db, "preferenze", user.uid), preferenze);
alert("Preferenze salvate con successo!");
} catch (e) {
console.error("Errore nel salvataggio delle preferenze: ", e);
}
});
// Carica le preferenze salvate quando la pagina preferenze è visualizzata
async function caricaPreferenze() {
const user = auth.currentUser;
if (!user) return;
const docRef = doc(db, "preferenze", user.uid);
const docSnap = await getDoc(docRef);
if (docSnap.exists()) {
const preferenze = docSnap.data();
document.querySelector(`input[name="sport1"][value="${preferenze.sport1}"]`).checked = true;
// Carica altre domande
}
}
// Generatore di alfas e betas proposti
async function scegliMigliori(tipo) {
const user = auth.currentUser;
if (!user) return;
const preferenzeDoc = await getDoc(doc(db, "preferenze", user.uid));
if (!preferenzeDoc.exists()) {
alert("Devi prima impostare le tue preferenze.");
return;
}
const preferenze = preferenzeDoc.data();
// Logica per trovare i migliori alfas o betas in base alle preferenze
let risultati = []; // Sostituire con la logica per ottenere i risultati
const listaElement = document.getElementById("alfas-betas-lista");
listaElement.innerHTML = "";
risultati.forEach(risultato => {
const item = document.createElement("div");
item.textContent = risultato.nome; // Aggiungi più dettagli se necessario
listaElement.appendChild(item);
});
}
// Chiama questa funzione quando la pagina Preferenze viene mostrata
document.getElementById("preferenze").addEventListener("click", caricaPreferenze);
// Gestire il login
document.getElementById("login-form").addEventListener("submit", (e) => {
e.preventDefault();
const email = document.getElementById("login-email").value;
const password = document.getElementById("login-password").value;
signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Reindirizza alla pagina del Menù dopo il login
mostraPagina('menu');
})
.catch((error) => {
console.error("Errore durante il login: ", error);
});
});
// Funzione per Salvare le Preferenze
document.getElementById("preferenze-form").addEventListener("submit", (e) => {
e.preventDefault();
const user = auth.currentUser;
const preferenzeSelezionate = Array.from(document.querySelectorAll("input[name='preferenza']:checked"))
.map(input => input.value);
if (user) {
setDoc(doc(db, "utenti", user.uid), {
preferenze: preferenzeSelezionate
}, { merge: true }) // merge: true evita di sovrascrivere altri dati dell'utente
.then(() => {
alert("Preferenze salvate con successo!");
})
.catch((error) => {
console.error("Errore nel salvataggio delle preferenze: ", error);
});
} else {
alert("Devi essere autenticato per salvare le preferenze.");
}
});
function trovaalfasObetas(tipo) {
const user = auth.currentUser;
if (user) {
// Recupera le preferenze dell'utente autenticato
getDoc(doc(db, "utenti", user.uid))
.then((docSnapshot) => {
if (docSnapshot.exists()) {
const userPreferenze = docSnapshot.data().preferenze;
// Cerca i alfas/betas nel Firestore
const utentiQuery = query(collection(db, "utenti"), where("tipoProfilo", "==", tipo));
getDocs(utentiQuery)
.then((querySnapshot) => {
let risultati = [];
querySnapshot.forEach((doc) => {
const data = doc.data();
const preferenzeComune = data.preferenze.filter(preferenza => userPreferenze.includes(preferenza));
const compatibilita = (preferenzeComune.length / userPreferenze.length) * 100;
risultati.push({ id: doc.id, nome: data.nome, cognome: data.cognome, compatibilita });
});
// Ordina i risultati per compatibilità in ordine decrescente
risultati.sort((a, b) => b.compatibilita - a.compatibilita);
// Mostra i tre migliori alfas/betas
mostraalfasSuggeriti(risultati.slice(0, 3));
});
}
});
}
}
function mostraalfasSuggeriti(alfas) {
const lista = document.getElementById("lista-alfas");
lista.innerHTML = ""; // Pulisce la lista
alfas.forEach(alfa => {
const div = document.createElement("div");
div.className = "alfa";
div.innerHTML = `
<p>${alfa.nome} ${alfa.cognome}</p>
<p>Compatibilità: ${alfa.compatibilita.toFixed(2)}%</p>
<button onclick="sceglialfabeta('${alfa.id}')">Scegli questo</button>
`;
lista.appendChild(div);
});
}
function sceglialfabeta(alfaId) {
const user = auth.currentUser;
if (user) {
setDoc(doc(db, "utenti", user.uid), {
alfabetaScelto: alfaId
}, { merge: true })
.then(() => {
alert("alfabeta selezionato con successo!");
mostraPagina('alfabetas');
})
.catch((error) => {
console.error("Errore nella selezione del alfabeta: ", error);
});
}
}
function visualizzaalfabetasScelti() {
const user = auth.currentUser;
if (user) {
getDoc(doc(db, "utenti", user.uid))
.then((docSnapshot) => {
if (docSnapshot.exists()) {
const data = docSnapshot.data();
if (data.alfabetaScelto) {
getDoc(doc(db, "utenti", data.alfabetaScelto))
.then((alfabetaDoc) => {
if (alfabetaDoc.exists()) {
const alfabeta = alfabetaDoc.data();
document.getElementById("alfabeta-selezionato").textContent = `${alfabeta.nome} ${alfabeta.cognome}`;
}
});
}
}
});
}
}
// Chiama la funzione per visualizzare i alfabetas selezionati
visualizzaalfabetasScelti();
// Riferimenti agli elementi DOM
const iscrivitiButton = document.getElementById("iscriviti-button");
const registrazioneForm = document.getElementById("registrazione-form");
const codiceFiscaleInput = document.getElementById("codice-fiscale");
const passwordInput = document.getElementById("password");
const confermaPasswordInput = document.getElementById("conferma-password");
const iconPassword = document.getElementById("icon-password");
const iconConfermaPassword = document.getElementById("icon-conferma-password");
const errorMessages = {
codiceFiscale: document.getElementById("error-codice-fiscale"),
password: document.getElementById("error-password"),
confermaPassword: document.getElementById("error-conferma-password"),
};
let codiceFiscaleUtilizzato = []; // Array per simulare i codici fiscali registrati
// Funzione dei Pulsanti
// Riferimenti agli elementi DOM
const pulsantiMenu = document.querySelectorAll('.menu-container button');
// Aggiungi l'event listener per i pulsanti del menu
pulsantiMenu.forEach(pulsante => {
pulsante.addEventListener('click', () => {
const pagina = pulsante.getAttribute('onclick').split("'")[1]; // Estrai il nome della pagina dall'attributo onclick
// Mostra la pagina selezionata
mostraPagina(pagina);
// Gestisci l'attivazione del pulsante
const tuttiIButton = document.querySelectorAll('.menu-container button');
tuttiIButton.forEach(btn => btn.classList.remove('attivo')); // Rimuovi la classe 'attivo' da tutti i pulsanti
pulsante.classList.add('attivo'); // Aggiungi la classe 'attivo' al pulsante cliccato
});
});
// Event listener per il pulsante "Iscriviti"
iscrivitiButton.addEventListener("click", () => {
mostraPagina("registrazione");
});
// Validazione della password
passwordInput.addEventListener("input", () => {
iconPassword.style.display = passwordInput.value.length > 0 ? "inline" : "none"; // Mostra o nascondi l'icona
});
// Validazione della conferma password
confermaPasswordInput.addEventListener("input", () => {
iconConfermaPassword.style.display = confermaPasswordInput.value === passwordInput.value ? "inline" : "none"; // Mostra o nascondi l'icona
});
// Funzione per controllare il codice fiscale
function verificaCodiceFiscale(codiceFiscale) {
if (codiceFiscaleUtilizzato.includes(codiceFiscale)) {
errorMessages.errorCodiceFiscale.textContent = "Cittadino già registrato"; // Messaggio di errore
errorCodiceFiscale.style.display = "block"; // Mostra il messaggio
return false; // Non valido
} else if (codiceFiscale.length !== 16) {
errorCodiceFiscale.textContent = "Il codice fiscale deve avere 16 caratteri"; // Messaggio di errore
errorCodiceFiscale.style.display = "block"; // Mostra il messaggio
return false; // Non valido
} else {
errorCodiceFiscale.textContent = ""; // Nessun messaggio di errore
errorCodiceFiscale.style.display = "none"; // Nascondi il messaggio
return true; // Valido
}
}
// Array fittizio di codici fiscali già registrati (dovresti sostituirlo con una chiamata al tuo database)
const codiciFiscaliRegistrati = ["RSSMRA85M01H501Z", "VRNGNN99R01H501F"]; // Esempi di codici fiscali
// Funzione per controllare se il codice fiscale è già registrato
function isCodiceFiscaleRegistrato(codiceFiscale) {
return codiciFiscaliRegistrati.includes(codiceFiscale);
}
// Funzione per accedere come Admin
document.getElementById('accedi-admin-button').addEventListener('click', function() {
mostraPagina('menu'); // Passa al menù senza autenticazione
});
});
document.addEventListener('DOMContentLoaded', function() {
const pulsantiIndietro = document.querySelectorAll('.indietro');
pulsantiIndietro.forEach(pulsante => {
pulsante.addEventListener('click', function() {
mostraPagina('menu');
});
});
});