From f88286c7201eb66f21e9260c665a857dacb83bf9 Mon Sep 17 00:00:00 2001 From: Anaru <98413596+FunnyEivske@users.noreply.github.com> Date: Mon, 24 Nov 2025 18:13:58 +0100 Subject: [PATCH] Refactor comments and structure in Script.js Refactor comments and improve code readability. --- Script.js | 75 +++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 56 insertions(+), 19 deletions(-) diff --git a/Script.js b/Script.js index c55290c..65b5c8d 100644 --- a/Script.js +++ b/Script.js @@ -3,12 +3,12 @@ import { getAuth, onAuthStateChanged, signOut } from "https://www.gstatic.com/fi import { getFirestore, collection, addDoc, updateDoc, doc, onSnapshot, query } from "https://www.gstatic.com/firebasejs/12.6.0/firebase-firestore.js"; import { firebaseConfig } from "./config.js"; -// Start +// --- INIT --- const app = initializeApp(firebaseConfig); const auth = getAuth(app); const db = getFirestore(app); -// Variabler +// --- VARIABLER --- let currentUser = null; let people = []; let focusPersonId = null; @@ -16,17 +16,19 @@ let currentScale = 1.0; let modalAction = null; let modalMode = 'new'; -// --- SIKKERHETSSJEKK --- +// --- SIKKERHETSSJEKK (Kjøres med en gang) --- onAuthStateChanged(auth, (user) => { if (user) { + // Bruker er logget inn currentUser = user; startDataListener(); } else { - // Hvis man ikke er logget inn, send tilbake til start + // Ingen bruker -> Kast tilbake til logg inn window.location.href = "index.html"; } }); +// Logg ut knapp const logoutBtn = document.getElementById('btn-logout'); if (logoutBtn) { logoutBtn.addEventListener('click', () => { @@ -36,13 +38,17 @@ if (logoutBtn) { }); } -// --- DATA --- +// --- DATABASE LYTTER --- function startDataListener() { + // Henter alle familiemedlemmer i sanntid const q = query(collection(db, 'familyMembers')); onSnapshot(q, (snapshot) => { people = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })); + + // Hvis vi ikke har valgt en person å fokusere på ennå: if (!focusPersonId && people.length > 0) { + // Prøv å finne "Eivind" eller "Meg" som startperson const me = people.find(p => p.name && (p.name.toLowerCase().includes('eivind') || p.name.toLowerCase() === 'meg')); focusPersonId = me ? me.id : people[0].id; } @@ -50,19 +56,21 @@ function startDataListener() { }); } -// --- RENDERING --- +// --- TEGNE TREET (RENDERING) --- function renderTree() { const rowParents = document.getElementById('row-parents'); const rowFocus = document.getElementById('row-focus'); const rowChildren = document.getElementById('row-children'); + // Sjekk at elementene finnes før vi prøver å bruke dem if(!rowParents || !rowFocus || !rowChildren) return; - - // Tøm + + // Tøm alt innhold først rowParents.innerHTML = ''; rowFocus.innerHTML = ''; rowChildren.innerHTML = ''; + // Hvis databasen er tom if (people.length === 0) { rowFocus.innerHTML = ``; return; @@ -71,29 +79,29 @@ function renderTree() { const focusPerson = people.find(p => p.id === focusPersonId); if (!focusPerson) return; - // A. Foreldre + // A. Foreldre (Over) const father = people.find(p => p.id === focusPerson.fatherId); const mother = people.find(p => p.id === focusPerson.motherId); rowParents.appendChild(createSlot(father, 'Far', 'add-parent-m')); rowParents.appendChild(createSlot(mother, 'Mor', 'add-parent-f')); - // B. Partner + // B. Partner (Ved siden av) const partner = people.find(p => p.id === focusPerson.partnerId); if (partner) { const pCard = createCard(partner); pCard.onclick = () => { focusPersonId = partner.id; renderTree(); }; rowFocus.appendChild(pCard); - // Hjerte + // Hjerte mellom dem const heart = document.createElement('div'); heart.innerHTML = ''; rowFocus.appendChild(heart); } - // C. Fokus Person + // C. Fokus Person (Midten) rowFocus.appendChild(createCard(focusPerson, true)); - // D. Barn + // D. Barn (Under) const children = people.filter(p => p.fatherId === focusPersonId || p.motherId === focusPersonId); children.forEach(child => { const cCard = createCard(child); @@ -102,7 +110,7 @@ function renderTree() { }); } -// Hjelper: Lag Kort +// --- HJELPER: LAG KORT --- function createCard(person, isFocus = false) { const el = document.createElement('div'); el.className = `card ${isFocus ? 'focus' : ''} ${person.gender === 'F' ? 'female' : 'male'}`; @@ -117,16 +125,19 @@ function createCard(person, isFocus = false) { ${person.description ? 'Info' : ''} `; + // Hvis dette er hovedkortet, legg til små pluss-knapper if (isFocus) { const actions = document.createElement('div'); actions.className = 'focus-actions'; + // Legg til barn (knapp nede) const btnChild = document.createElement('button'); btnChild.className = 'btn-mini-add add-child'; btnChild.innerHTML = ''; btnChild.onclick = (e) => { e.stopPropagation(); window.openModal('add-child'); }; actions.appendChild(btnChild); + // Legg til partner (knapp til høyre) hvis mangler if (!person.partnerId) { const btnPartner = document.createElement('button'); btnPartner.className = 'btn-mini-add add-partner'; @@ -139,6 +150,7 @@ function createCard(person, isFocus = false) { return el; } +// --- HJELPER: LAG SLOT (Tom plass eller kort) --- function createSlot(person, label, actionType) { const wrapper = document.createElement('div'); wrapper.className = 'slot-container'; @@ -158,22 +170,34 @@ function createSlot(person, label, actionType) { return wrapper; } -// --- MODAL & LAGRING --- +// --- MODAL & LAGRING (Popups) --- + +// Gjør funksjonen tilgjengelig i HTML (window.openModal) window.openModal = (action) => { modalAction = action; const overlay = document.getElementById('modal-overlay'); if(overlay) overlay.classList.remove('hidden'); + // Nullstill skjema const inpName = document.getElementById('inp-name'); if(inpName) inpName.value = ''; - document.getElementById('inp-birth').value = ''; - document.getElementById('inp-death').value = ''; - document.getElementById('inp-desc').value = ''; - document.getElementById('selected-existing-id').value = ''; + + const inpBirth = document.getElementById('inp-birth'); + if(inpBirth) inpBirth.value = ''; + + const inpDeath = document.getElementById('inp-death'); + if(inpDeath) inpDeath.value = ''; + + const inpDesc = document.getElementById('inp-desc'); + if(inpDesc) inpDesc.value = ''; + + const selExist = document.getElementById('selected-existing-id'); + if(selExist) selExist.value = ''; const title = document.getElementById('modal-title'); const genderRadios = document.getElementsByName('gender'); + // Hjelper for å sette kjønn const setGender = (val, disabled) => { genderRadios.forEach(r => { r.disabled = disabled; @@ -181,6 +205,7 @@ window.openModal = (action) => { }); }; + // Tilpass tittel og kjønn basert på hva vi legger til if (action === 'add-parent-m') { title.textContent = "Legg til Far"; setGender('M', true); } else if (action === 'add-parent-f') { title.textContent = "Legg til Mor"; setGender('F', true); } else if (action === 'add-child') { title.textContent = "Legg til Barn"; setGender(null, false); } @@ -191,9 +216,11 @@ window.openModal = (action) => { renderExistingList(); }; +// Lukk modal knapp const closeBtn = document.getElementById('btn-close-modal'); if(closeBtn) closeBtn.onclick = () => document.getElementById('modal-overlay').classList.add('hidden'); +// Lagre knapp const saveBtn = document.getElementById('btn-save'); if(saveBtn) { saveBtn.onclick = async () => { @@ -201,6 +228,7 @@ if(saveBtn) { const focusP = people.find(p => p.id === focusPersonId); let targetId = null; + // 1. Enten lag ny person if (modalMode === 'new') { const newPerson = { name: document.getElementById('inp-name').value, @@ -211,10 +239,12 @@ if(saveBtn) { fatherId: null, motherId: null, partnerId: null }; + // Auto-koble foreldre hvis vi legger til et barn if (modalAction === 'add-child' && focusP) { if (focusP.gender === 'M') newPerson.fatherId = focusP.id; else newPerson.motherId = focusP.id; + // Hvis fokuset har en partner, sett den som den andre forelderen if (focusP.partnerId) { const part = people.find(p=>p.id === focusP.partnerId); if(part) { if(part.gender==='M') newPerson.fatherId=part.id; else newPerson.motherId=part.id; } @@ -223,12 +253,16 @@ if(saveBtn) { const docRef = await addDoc(collection(db, 'familyMembers'), newPerson); targetId = docRef.id; + + // Hvis dette var første person i treet if(modalAction === 'create-first') focusPersonId = targetId; } else { + // 2. Eller velg eksisterende targetId = document.getElementById('selected-existing-id').value; } + // 3. Opprett relasjoner (linker) i databasen if(focusP && targetId) { const col = collection(db, 'familyMembers'); const updates = []; @@ -250,6 +284,7 @@ if(saveBtn) { }; } +// Bytt mellom "Ny" og "Eksisterende" fane i modal function setMode(mode) { modalMode = mode; document.querySelectorAll('.toggle-btn').forEach(b => b.classList.remove('active')); @@ -263,6 +298,7 @@ document.querySelectorAll('.toggle-btn').forEach(btn => { btn.onclick = () => setMode(btn.dataset.mode); }); +// Liste over eksisterende personer (for valg) function renderExistingList() { const list = document.getElementById('existing-list'); if(!list) return; @@ -281,6 +317,7 @@ function renderExistingList() { }); } +// --- ZOOM FUNKSJONALITET --- const zoomIn = document.getElementById('btn-zoom-in'); if(zoomIn) zoomIn.onclick = () => { currentScale += 0.1;