417 lines
16 KiB
JavaScript
417 lines
16 KiB
JavaScript
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-app.js";
|
|
import { getAuth, onAuthStateChanged, signOut } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-auth.js";
|
|
import { getFirestore, collection, addDoc, updateDoc, doc, onSnapshot, query } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-firestore.js";
|
|
import { firebaseConfig } from "./config.js";
|
|
|
|
// --- INIT ---
|
|
const app = initializeApp(firebaseConfig);
|
|
const auth = getAuth(app);
|
|
const db = getFirestore(app);
|
|
|
|
// --- VARIABLER ---
|
|
let currentUser = null;
|
|
let people = [];
|
|
let focusPersonId = null;
|
|
let currentScale = 1.0;
|
|
let modalAction = null;
|
|
let modalMode = 'new';
|
|
let mapInstance = null; // Leaflet map
|
|
|
|
// --- SIKKERHETSSJEKK (Kjøres med en gang) ---
|
|
onAuthStateChanged(auth, (user) => {
|
|
if (user) {
|
|
currentUser = user;
|
|
startDataListener();
|
|
} else {
|
|
window.location.href = "index.html";
|
|
}
|
|
});
|
|
|
|
// Logg ut knapp
|
|
const logoutBtn = document.getElementById('btn-logout');
|
|
if (logoutBtn) {
|
|
logoutBtn.addEventListener('click', () => {
|
|
signOut(auth).then(() => {
|
|
window.location.href = "index.html";
|
|
});
|
|
});
|
|
}
|
|
|
|
// --- DATABASE LYTTER ---
|
|
function startDataListener() {
|
|
const q = query(collection(db, 'familyMembers'));
|
|
|
|
onSnapshot(q, (snapshot) => {
|
|
people = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
|
|
|
|
if (!focusPersonId && people.length > 0) {
|
|
const me = people.find(p => p.name && (p.name.toLowerCase().includes('eivind') || p.name.toLowerCase() === 'meg'));
|
|
focusPersonId = me ? me.id : people[0].id;
|
|
}
|
|
|
|
// Oppdater alle visninger
|
|
renderTree();
|
|
updateMapMarkers();
|
|
renderTimeline();
|
|
});
|
|
}
|
|
|
|
// --- NAVIGASJON (TABS) ---
|
|
document.querySelectorAll('.nav-tab').forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
// 1. Visuell tab state
|
|
document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
|
|
tab.classList.add('active');
|
|
|
|
// 2. Skjul/vis seksjoner
|
|
document.querySelectorAll('.view-section').forEach(s => s.classList.add('hidden'));
|
|
const targetId = tab.dataset.tab + '-view';
|
|
document.getElementById(targetId).classList.remove('hidden');
|
|
|
|
// 3. Spesialhåndtering
|
|
if (tab.dataset.tab === 'map') {
|
|
initMap(); // Sørg for at kartet tegnes riktig når det blir synlig
|
|
}
|
|
});
|
|
});
|
|
|
|
// --- TEGNE TREET (RENDERING) ---
|
|
function renderTree() {
|
|
const rowParents = document.getElementById('row-parents');
|
|
const rowFocus = document.getElementById('row-focus');
|
|
const rowChildren = document.getElementById('row-children');
|
|
|
|
if (!rowParents || !rowFocus || !rowChildren) return;
|
|
|
|
rowParents.innerHTML = '';
|
|
rowFocus.innerHTML = '';
|
|
rowChildren.innerHTML = '';
|
|
|
|
if (people.length === 0) {
|
|
rowFocus.innerHTML = `<button class="btn-primary" onclick="window.openModal('create-first')">Start familietreet</button>`;
|
|
return;
|
|
}
|
|
|
|
const focusPerson = people.find(p => p.id === focusPersonId);
|
|
if (!focusPerson) return;
|
|
|
|
// A. Foreldre
|
|
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
|
|
const partner = people.find(p => p.id === focusPerson.partnerId);
|
|
if (partner) {
|
|
const pCard = createCard(partner);
|
|
pCard.onclick = () => { focusPersonId = partner.id; renderTree(); };
|
|
rowFocus.appendChild(pCard);
|
|
|
|
const heart = document.createElement('div');
|
|
heart.innerHTML = '<i class="ph-fill ph-heart" style="color:var(--female-color); font-size:1.5rem;"></i>';
|
|
rowFocus.appendChild(heart);
|
|
}
|
|
|
|
// C. Fokus Person
|
|
rowFocus.appendChild(createCard(focusPerson, true));
|
|
|
|
// D. Barn
|
|
const children = people.filter(p => p.fatherId === focusPersonId || p.motherId === focusPersonId);
|
|
children.forEach(child => {
|
|
const cCard = createCard(child);
|
|
cCard.onclick = () => { focusPersonId = child.id; renderTree(); };
|
|
rowChildren.appendChild(cCard);
|
|
});
|
|
}
|
|
|
|
function createCard(person, isFocus = false) {
|
|
const el = document.createElement('div');
|
|
el.className = `card ${isFocus ? 'focus' : ''} ${person.gender === 'F' ? 'female' : 'male'}`;
|
|
|
|
const year = person.birthDate ? new Date(person.birthDate).getFullYear() : '????';
|
|
const dead = person.deathDate ? '✝ ' : '';
|
|
|
|
el.innerHTML = `
|
|
<i class="card-icon ph ${person.gender === 'F' ? 'ph-user' : 'ph-user'}"></i>
|
|
<h3>${person.name}</h3>
|
|
<p>${dead}${year}</p>
|
|
${person.location ? '<span class="info-badge"><i class="ph-bold ph-map-pin"></i> ' + person.location.split(',')[0] + '</span>' : ''}
|
|
`;
|
|
|
|
if (isFocus) {
|
|
const actions = document.createElement('div');
|
|
actions.className = 'focus-actions';
|
|
|
|
const btnChild = document.createElement('button');
|
|
btnChild.className = 'btn-mini-add add-child';
|
|
btnChild.innerHTML = '<i class="ph-bold ph-plus"></i>';
|
|
btnChild.onclick = (e) => { e.stopPropagation(); window.openModal('add-child'); };
|
|
actions.appendChild(btnChild);
|
|
|
|
if (!person.partnerId) {
|
|
const btnPartner = document.createElement('button');
|
|
btnPartner.className = 'btn-mini-add add-partner';
|
|
btnPartner.innerHTML = '<i class="ph-bold ph-heart"></i>';
|
|
btnPartner.onclick = (e) => { e.stopPropagation(); window.openModal('add-partner'); };
|
|
actions.appendChild(btnPartner);
|
|
}
|
|
el.appendChild(actions);
|
|
}
|
|
return el;
|
|
}
|
|
|
|
function createSlot(person, label, actionType) {
|
|
const wrapper = document.createElement('div');
|
|
wrapper.className = 'slot-container';
|
|
wrapper.innerHTML = `<span class="slot-label">${label}</span>`;
|
|
|
|
if (person) {
|
|
const card = createCard(person);
|
|
card.onclick = () => { focusPersonId = person.id; renderTree(); };
|
|
wrapper.appendChild(card);
|
|
} else {
|
|
const btn = document.createElement('div');
|
|
btn.className = 'btn-add-slot';
|
|
btn.innerHTML = '<i class="ph-bold ph-plus"></i>';
|
|
btn.onclick = () => window.openModal(actionType);
|
|
wrapper.appendChild(btn);
|
|
}
|
|
return wrapper;
|
|
}
|
|
|
|
// --- KART FUNKSJONALITET (Leaflet) ---
|
|
function initMap() {
|
|
if (mapInstance) {
|
|
mapInstance.invalidateSize(); // Viktig når kartet vises etter å ha vært skjult
|
|
return;
|
|
}
|
|
|
|
// Startposisjon: Norge (omtrentlig)
|
|
mapInstance = L.map('map-container').setView([65.0, 13.0], 5);
|
|
|
|
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
|
|
subdomains: 'abcd',
|
|
maxZoom: 19
|
|
}).addTo(mapInstance);
|
|
|
|
updateMapMarkers();
|
|
}
|
|
|
|
async function updateMapMarkers() {
|
|
if (!mapInstance) return;
|
|
|
|
// Fjern gamle markører (enklest å tømme og tegne på nytt for nå)
|
|
mapInstance.eachLayer((layer) => {
|
|
if (layer instanceof L.Marker) {
|
|
mapInstance.removeLayer(layer);
|
|
}
|
|
});
|
|
|
|
for (const p of people) {
|
|
if (p.location) {
|
|
// Prøv å finne koordinater. For nå, antar vi at input KAN være "lat,lng"
|
|
// I en ekte app ville vi brukt en geocoding service her.
|
|
// For demo: Hvis location inneholder komma og tall, bruk det.
|
|
// Ellers, randomiser litt rundt Grimstad for demo-formål hvis det står "Grimstad"
|
|
|
|
let lat = 0, lng = 0;
|
|
|
|
if (p.location.includes(',')) {
|
|
const parts = p.location.split(',');
|
|
if (!isNaN(parseFloat(parts[0]))) {
|
|
lat = parseFloat(parts[0]);
|
|
lng = parseFloat(parts[1]);
|
|
}
|
|
} else if (p.location.toLowerCase().includes('grimstad')) {
|
|
lat = 58.34 + (Math.random() * 0.05 - 0.025);
|
|
lng = 8.59 + (Math.random() * 0.05 - 0.025);
|
|
} else if (p.location.toLowerCase().includes('oslo')) {
|
|
lat = 59.91; lng = 10.75;
|
|
}
|
|
|
|
if (lat !== 0) {
|
|
L.marker([lat, lng])
|
|
.addTo(mapInstance)
|
|
.bindPopup(`<b>${p.name}</b><br>${p.location}`);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// --- TIDSLINJE FUNKSJONALITET ---
|
|
function renderTimeline() {
|
|
const container = document.getElementById('timeline-content');
|
|
if (!container) return;
|
|
|
|
container.innerHTML = '';
|
|
|
|
// Lag en liste av hendelser (Fødsel og Død)
|
|
const events = [];
|
|
people.forEach(p => {
|
|
if (p.birthDate) {
|
|
events.push({ date: p.birthDate, type: 'Født', person: p.name, desc: p.description });
|
|
}
|
|
if (p.deathDate) {
|
|
events.push({ date: p.deathDate, type: 'Død', person: p.name });
|
|
}
|
|
});
|
|
|
|
// Sorter kronologisk
|
|
events.sort((a, b) => new Date(a.date) - new Date(b.date));
|
|
|
|
events.forEach(ev => {
|
|
const item = document.createElement('div');
|
|
item.className = 'timeline-item';
|
|
|
|
const dateStr = new Date(ev.date).toLocaleDateString('no-NO', { year: 'numeric', month: 'long', day: 'numeric' });
|
|
|
|
item.innerHTML = `
|
|
<div class="timeline-date">${dateStr}</div>
|
|
<div class="timeline-content">
|
|
<strong>${ev.person}</strong> ${ev.type.toLowerCase()}
|
|
${ev.desc ? `<p style="font-size:0.8rem; color:var(--text-muted); margin-top:0.3rem;">${ev.desc}</p>` : ''}
|
|
</div>
|
|
`;
|
|
container.appendChild(item);
|
|
});
|
|
}
|
|
|
|
|
|
// --- MODAL & LAGRING ---
|
|
window.openModal = (action) => {
|
|
modalAction = action;
|
|
const overlay = document.getElementById('modal-overlay');
|
|
if (overlay) overlay.classList.remove('hidden');
|
|
|
|
// Nullstill skjema
|
|
['inp-name', 'inp-birth', 'inp-death', 'inp-desc', 'inp-location', 'selected-existing-id'].forEach(id => {
|
|
const el = document.getElementById(id);
|
|
if (el) el.value = '';
|
|
});
|
|
|
|
const title = document.getElementById('modal-title');
|
|
const genderRadios = document.getElementsByName('gender');
|
|
|
|
const setGender = (val, disabled) => {
|
|
genderRadios.forEach(r => {
|
|
r.disabled = disabled;
|
|
if (val && r.value === val) r.checked = true;
|
|
});
|
|
};
|
|
|
|
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); }
|
|
else if (action === 'add-partner') { title.textContent = "Legg til Partner"; setGender(null, false); }
|
|
else { title.textContent = "Start Tre"; setGender(null, false); }
|
|
|
|
setMode('new');
|
|
renderExistingList();
|
|
};
|
|
|
|
const closeBtn = document.getElementById('btn-close-modal');
|
|
if (closeBtn) closeBtn.onclick = () => document.getElementById('modal-overlay').classList.add('hidden');
|
|
|
|
const saveBtn = document.getElementById('btn-save');
|
|
if (saveBtn) {
|
|
saveBtn.onclick = async () => {
|
|
if (!currentUser) return;
|
|
const focusP = people.find(p => p.id === focusPersonId);
|
|
let targetId = null;
|
|
|
|
if (modalMode === 'new') {
|
|
const newPerson = {
|
|
name: document.getElementById('inp-name').value,
|
|
birthDate: document.getElementById('inp-birth').value,
|
|
deathDate: document.getElementById('inp-death').value,
|
|
description: document.getElementById('inp-desc').value,
|
|
location: document.getElementById('inp-location').value, // NYTT
|
|
gender: document.querySelector('input[name="gender"]:checked').value,
|
|
fatherId: null, motherId: null, partnerId: null
|
|
};
|
|
|
|
if (modalAction === 'add-child' && focusP) {
|
|
if (focusP.gender === 'M') newPerson.fatherId = focusP.id;
|
|
else newPerson.motherId = focusP.id;
|
|
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; }
|
|
}
|
|
}
|
|
|
|
const docRef = await addDoc(collection(db, 'familyMembers'), newPerson);
|
|
targetId = docRef.id;
|
|
if (modalAction === 'create-first') focusPersonId = targetId;
|
|
|
|
} else {
|
|
targetId = document.getElementById('selected-existing-id').value;
|
|
}
|
|
|
|
if (focusP && targetId) {
|
|
const col = collection(db, 'familyMembers');
|
|
const updates = [];
|
|
|
|
if (modalAction === 'add-parent-m') updates.push(updateDoc(doc(col, focusPersonId), { fatherId: targetId }));
|
|
else if (modalAction === 'add-parent-f') updates.push(updateDoc(doc(col, focusPersonId), { motherId: targetId }));
|
|
else if (modalAction === 'add-partner') {
|
|
updates.push(updateDoc(doc(col, focusPersonId), { partnerId: targetId }));
|
|
updates.push(updateDoc(doc(col, targetId), { partnerId: focusPersonId }));
|
|
}
|
|
else if (modalAction === 'add-child' && modalMode === 'existing') {
|
|
const upd = {};
|
|
if (focusP.gender === 'M') upd.fatherId = focusP.id; else upd.motherId = focusP.id;
|
|
updates.push(updateDoc(doc(col, targetId), upd));
|
|
}
|
|
await Promise.all(updates);
|
|
}
|
|
document.getElementById('modal-overlay').classList.add('hidden');
|
|
};
|
|
}
|
|
|
|
function setMode(mode) {
|
|
modalMode = mode;
|
|
document.querySelectorAll('.toggle-btn').forEach(b => b.classList.remove('active'));
|
|
const btn = document.querySelector(`.toggle-btn[data-mode="${mode}"]`);
|
|
if (btn) btn.classList.add('active');
|
|
document.getElementById('form-new').className = mode === 'new' ? '' : 'hidden';
|
|
document.getElementById('form-existing').className = mode === 'existing' ? '' : 'hidden';
|
|
}
|
|
|
|
document.querySelectorAll('.toggle-btn').forEach(btn => {
|
|
btn.onclick = () => setMode(btn.dataset.mode);
|
|
});
|
|
|
|
function renderExistingList() {
|
|
const list = document.getElementById('existing-list');
|
|
if (!list) return;
|
|
list.innerHTML = '';
|
|
const candidates = people.filter(p => p.id !== focusPersonId);
|
|
candidates.forEach(p => {
|
|
const d = document.createElement('div');
|
|
d.className = 'person-option';
|
|
d.innerHTML = `<span>${p.name}</span>`;
|
|
d.onclick = () => {
|
|
document.querySelectorAll('.person-option').forEach(x => x.classList.remove('selected'));
|
|
d.classList.add('selected');
|
|
document.getElementById('selected-existing-id').value = p.id;
|
|
};
|
|
list.appendChild(d);
|
|
});
|
|
}
|
|
|
|
// --- ZOOM ---
|
|
const zoomIn = document.getElementById('btn-zoom-in');
|
|
if (zoomIn) zoomIn.onclick = () => {
|
|
currentScale += 0.1;
|
|
document.getElementById('tree-grid').style.transform = `scale(${currentScale})`;
|
|
document.getElementById('zoom-level').textContent = Math.round(currentScale * 100) + '%';
|
|
};
|
|
|
|
const zoomOut = document.getElementById('btn-zoom-out');
|
|
if (zoomOut) zoomOut.onclick = () => {
|
|
if (currentScale > 0.4) currentScale -= 0.1;
|
|
document.getElementById('tree-grid').style.transform = `scale(${currentScale})`;
|
|
document.getElementById('zoom-level').textContent = Math.round(currentScale * 100) + '%';
|
|
};
|