-
-
-
-
+
+
+
+
+
+
-
-
+
+
+
+
+
+
+
-
-
-
-
+
+
-
+
+
+
+
-
+
-
- Legg til Person
- +Legg til Person
+
-
-
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
-
-
+
+
+
+
-
-
-
-
-
${p.location}`); } } - } + }); } -// --- TIDSLINJE FUNKSJONALITET --- +// --- TIMELINE RENDERER --- function renderTimeline() { - const container = document.getElementById('timeline-content'); + const container = document.getElementById('timeline-list'); 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 }); - } + + state.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 div = document.createElement('div'); + div.className = 'timeline-event'; const dateStr = new Date(ev.date).toLocaleDateString('no-NO', { year: 'numeric', month: 'long', day: 'numeric' }); - item.innerHTML = ` -
Brukes til å - plassere personen på kartet.
+
+
-
+
-
+
diff --git a/Script.js b/Script.js
index 42d7f02..3fee2ed 100644
--- a/Script.js
+++ b/Script.js
@@ -3,156 +3,176 @@ import { getAuth, onAuthStateChanged, signOut } from "https://www.gstatic.com/fi
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 ---
+// --- INITIALIZATION ---
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
+// --- STATE ---
+const state = {
+ user: null,
+ people: [],
+ focusId: null,
+ scale: 1.0,
+ modal: {
+ action: null, // 'add-child', 'add-parent-m', etc.
+ mode: 'new' // 'new' or 'existing'
+ },
+ map: null
+};
-// --- SIKKERHETSSJEKK (Kjøres med en gang) ---
+// --- AUTHENTICATION ---
onAuthStateChanged(auth, (user) => {
if (user) {
- currentUser = user;
- startDataListener();
+ state.user = user;
+ initApp();
} 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";
+document.getElementById('btn-logout')?.addEventListener('click', () => {
+ signOut(auth).then(() => window.location.href = "index.html");
+});
+
+// --- APP LOGIC ---
+function initApp() {
+ // Start Data Listener
+ const q = query(collection(db, 'familyMembers'));
+ onSnapshot(q, (snapshot) => {
+ state.people = snapshot.docs.map(d => ({ id: d.id, ...d.data() }));
+
+ // Set initial focus if needed
+ if (!state.focusId && state.people.length > 0) {
+ const me = state.people.find(p => p.name && (p.name.toLowerCase().includes('eivind') || p.name.toLowerCase() === 'meg'));
+ state.focusId = me ? me.id : state.people[0].id;
+ }
+
+ renderAll();
+ });
+
+ // Setup Navigation
+ setupTabs();
+ setupZoom();
+ setupModal();
+}
+
+function renderAll() {
+ renderTree();
+ renderMap();
+ renderTimeline();
+}
+
+// --- TAB NAVIGATION ---
+function setupTabs() {
+ document.querySelectorAll('.nav-tab[data-view]').forEach(btn => {
+ btn.addEventListener('click', () => {
+ // Update Active Tab
+ document.querySelectorAll('.nav-tab[data-view]').forEach(b => b.classList.remove('active'));
+ btn.classList.add('active');
+
+ // Show View
+ document.querySelectorAll('.view-section').forEach(v => v.classList.add('hidden'));
+ const viewId = `view-${btn.dataset.view}`;
+ document.getElementById(viewId).classList.remove('hidden');
+
+ // Special handling for Map resize
+ if (btn.dataset.view === 'map' && state.map) {
+ setTimeout(() => state.map.invalidateSize(), 100);
+ }
});
});
}
-// --- 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) ---
+// --- TREE RENDERER ---
function renderTree() {
- const rowParents = document.getElementById('row-parents');
- const rowFocus = document.getElementById('row-focus');
- const rowChildren = document.getElementById('row-children');
+ const parentsRow = document.getElementById('row-parents');
+ const focusRow = document.getElementById('row-focus');
+ const childrenRow = document.getElementById('row-children');
- if (!rowParents || !rowFocus || !rowChildren) return;
+ if (!parentsRow || !focusRow || !childrenRow) return;
- rowParents.innerHTML = '';
- rowFocus.innerHTML = '';
- rowChildren.innerHTML = '';
+ parentsRow.innerHTML = '';
+ focusRow.innerHTML = '';
+ childrenRow.innerHTML = '';
- if (people.length === 0) {
- rowFocus.innerHTML = ``;
+ if (state.people.length === 0) {
+ focusRow.innerHTML = ``;
return;
}
- const focusPerson = people.find(p => p.id === focusPersonId);
+ const focusPerson = state.people.find(p => p.id === state.focusId);
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'));
+ // 1. Parents
+ const father = state.people.find(p => p.id === focusPerson.fatherId);
+ const mother = state.people.find(p => p.id === focusPerson.motherId);
+ parentsRow.appendChild(createSlot(father, 'Far', 'add-parent-m'));
+ parentsRow.appendChild(createSlot(mother, 'Mor', 'add-parent-f'));
- // B. Partner
- const partner = people.find(p => p.id === focusPerson.partnerId);
+ // 2. Partner (Left of Focus)
+ const partner = state.people.find(p => p.id === focusPerson.partnerId);
if (partner) {
const pCard = createCard(partner);
- pCard.onclick = () => { focusPersonId = partner.id; renderTree(); };
- rowFocus.appendChild(pCard);
+ pCard.onclick = () => setFocus(partner.id);
+ focusRow.appendChild(pCard);
+ // Heart Icon
const heart = document.createElement('div');
- heart.innerHTML = '';
- rowFocus.appendChild(heart);
+ heart.innerHTML = '';
+ focusRow.appendChild(heart);
}
- // C. Fokus Person
- rowFocus.appendChild(createCard(focusPerson, true));
+ // 3. Focus Person
+ focusRow.appendChild(createCard(focusPerson, true));
- // D. Barn
- const children = people.filter(p => p.fatherId === focusPersonId || p.motherId === focusPersonId);
+ // 4. Children
+ const children = state.people.filter(p => p.fatherId === state.focusId || p.motherId === state.focusId);
children.forEach(child => {
const cCard = createCard(child);
- cCard.onclick = () => { focusPersonId = child.id; renderTree(); };
- rowChildren.appendChild(cCard);
+ cCard.onclick = () => setFocus(child.id);
+ childrenRow.appendChild(cCard);
});
}
+function setFocus(id) {
+ state.focusId = id;
+ renderTree();
+}
+
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 year = person.birthDate ? new Date(person.birthDate).getFullYear() : '';
const dead = person.deathDate ? '✝ ' : '';
+ const loc = person.location ? person.location.split(',')[0] : '';
el.innerHTML = `
-
-
+
+
-
-
-
-
+
-
+
+
-
-
-
+
+
+
-
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
${person.name}
-${dead}${year}
- ${person.location ? ' ' + person.location.split(',')[0] + '' : ''} + +${person.name}
+ ${dead}${year}
+ ${loc ? ` ${loc}
` : ''}
`;
if (isFocus) {
const actions = document.createElement('div');
- actions.className = 'focus-actions';
+ actions.className = 'mini-actions';
+ // Add Child Button
const btnChild = document.createElement('button');
- btnChild.className = 'btn-mini-add add-child';
+ btnChild.className = 'btn-mini btn-add-child';
btnChild.innerHTML = '';
+ btnChild.title = "Legg til barn";
btnChild.onclick = (e) => { e.stopPropagation(); window.openModal('add-child'); };
actions.appendChild(btnChild);
+ // Add Partner Button (if none)
if (!person.partnerId) {
const btnPartner = document.createElement('button');
- btnPartner.className = 'btn-mini-add add-partner';
+ btnPartner.className = 'btn-mini btn-add-partner';
btnPartner.innerHTML = '';
+ btnPartner.title = "Legg til partner";
btnPartner.onclick = (e) => { e.stopPropagation(); window.openModal('add-partner'); };
actions.appendChild(btnPartner);
}
@@ -161,257 +181,221 @@ function createCard(person, isFocus = false) {
return el;
}
-function createSlot(person, label, actionType) {
+function createSlot(person, label, action) {
const wrapper = document.createElement('div');
- wrapper.className = 'slot-container';
+ wrapper.className = 'slot';
wrapper.innerHTML = `${label}`;
if (person) {
const card = createCard(person);
- card.onclick = () => { focusPersonId = person.id; renderTree(); };
+ card.onclick = () => setFocus(person.id);
wrapper.appendChild(card);
} else {
const btn = document.createElement('div');
- btn.className = 'btn-add-slot';
+ btn.className = 'btn-slot';
btn.innerHTML = '';
- btn.onclick = () => window.openModal(actionType);
+ btn.onclick = () => window.openModal(action);
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;
+// --- MAP RENDERER ---
+function renderMap() {
+ if (!state.map) {
+ state.map = 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: '© OpenStreetMap © CARTO',
+ subdomains: 'abcd',
+ maxZoom: 19
+ }).addTo(state.map);
}
- // 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: '© OpenStreetMap contributors © CARTO',
- 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);
- }
+ // Clear existing markers
+ state.map.eachLayer(layer => {
+ if (layer instanceof L.Marker) state.map.removeLayer(layer);
});
- for (const p of people) {
+ // Add markers
+ state.people.forEach(p => {
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"
-
+ // Simple geocoding simulation for demo
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]);
- }
+ 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);
+ lat = 58.34 + (Math.random() * 0.02); lng = 8.59 + (Math.random() * 0.02);
} else if (p.location.toLowerCase().includes('oslo')) {
lat = 59.91; lng = 10.75;
}
- if (lat !== 0) {
- L.marker([lat, lng])
- .addTo(mapInstance)
+ if (lat && lng) {
+ L.marker([lat, lng]).addTo(state.map)
.bindPopup(`${p.name}${p.location}`); } } - } + }); } -// --- TIDSLINJE FUNKSJONALITET --- +// --- TIMELINE RENDERER --- function renderTimeline() { - const container = document.getElementById('timeline-content'); + const container = document.getElementById('timeline-list'); 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 }); - } + + state.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 div = document.createElement('div'); + div.className = 'timeline-event'; const dateStr = new Date(ev.date).toLocaleDateString('no-NO', { year: 'numeric', month: 'long', day: 'numeric' }); - item.innerHTML = ` -
${dateStr}
-
+ div.innerHTML = `
+ Logg Inn - Røsstad Arkivet
+
+
+
-
${dateStr}
+
${ev.person} ${ev.type.toLowerCase()}
- ${ev.desc ? `
`;
- container.appendChild(item);
+ container.appendChild(div);
});
}
+// --- MODAL LOGIC ---
+function setupModal() {
+ window.openModal = (action) => {
+ state.modal.action = action;
+ document.getElementById('modal-overlay').classList.remove('hidden');
-// --- MODAL & LAGRING ---
-window.openModal = (action) => {
- modalAction = action;
- const overlay = document.getElementById('modal-overlay');
- if (overlay) overlay.classList.remove('hidden');
+ // Reset Form
+ document.querySelectorAll('.input-field').forEach(i => i.value = '');
- // 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 = '';
- });
+ // Set Title
+ const title = document.getElementById('modal-title');
+ if (action === 'add-parent-m') title.textContent = "Legg til Far";
+ else if (action === 'add-parent-f') title.textContent = "Legg til Mor";
+ else if (action === 'add-child') title.textContent = "Legg til Barn";
+ else if (action === 'add-partner') title.textContent = "Legg til Partner";
+ else title.textContent = "Start Tre";
- 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;
- });
+ // Default Mode
+ window.setModalMode('new');
+ renderExistingList();
};
- 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); }
+ window.setModalMode = (mode) => {
+ state.modal.mode = mode;
+ document.getElementById('tab-new').classList.toggle('active', mode === 'new');
+ document.getElementById('tab-existing').classList.toggle('active', mode === 'existing');
+ document.getElementById('form-new').classList.toggle('hidden', mode !== 'new');
+ document.getElementById('form-existing').classList.toggle('hidden', mode !== 'existing');
+ };
- setMode('new');
- renderExistingList();
-};
+ document.getElementById('btn-close-modal').onclick = () => {
+ document.getElementById('modal-overlay').classList.add('hidden');
+ };
-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);
+ document.getElementById('btn-save').onclick = async () => {
+ const focusP = state.people.find(p => p.id === state.focusId);
let targetId = null;
- if (modalMode === 'new') {
+ if (state.modal.mode === 'new') {
const newPerson = {
name: document.getElementById('inp-name').value,
birthDate: document.getElementById('inp-birth').value,
deathDate: document.getElementById('inp-death').value,
+ location: document.getElementById('inp-location').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) {
+ // Auto-link logic
+ if (state.modal.action === '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 part = state.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;
+ if (state.modal.action === 'create-first') state.focusId = targetId;
} else {
targetId = document.getElementById('selected-existing-id').value;
}
+ // Link Relations
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') {
+ if (state.modal.action === 'add-parent-m') updates.push(updateDoc(doc(col, state.focusId), { fatherId: targetId }));
+ else if (state.modal.action === 'add-parent-f') updates.push(updateDoc(doc(col, state.focusId), { motherId: targetId }));
+ else if (state.modal.action === 'add-partner') {
+ updates.push(updateDoc(doc(col, state.focusId), { partnerId: targetId }));
+ updates.push(updateDoc(doc(col, targetId), { partnerId: state.focusId }));
+ } else if (state.modal.action === 'add-child' && state.modal.mode === '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 = `${p.name}`;
- d.onclick = () => {
- document.querySelectorAll('.person-option').forEach(x => x.classList.remove('selected'));
- d.classList.add('selected');
+ state.people.filter(p => p.id !== state.focusId).forEach(p => {
+ const div = document.createElement('div');
+ div.style.padding = '0.5rem';
+ div.style.borderBottom = '1px solid #f1f5f9';
+ div.style.cursor = 'pointer';
+ div.textContent = p.name;
+ div.onclick = () => {
document.getElementById('selected-existing-id').value = p.id;
+ div.style.background = '#f0fdf4';
};
- list.appendChild(d);
+ list.appendChild(div);
});
}
// --- 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) + '%';
-};
+function setupZoom() {
+ const grid = document.getElementById('tree-grid');
+ const display = document.getElementById('zoom-display');
-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) + '%';
-};
+ document.getElementById('btn-zoom-in').onclick = () => {
+ state.scale += 0.1;
+ updateZoom();
+ };
+ document.getElementById('btn-zoom-out').onclick = () => {
+ if (state.scale > 0.4) state.scale -= 0.1;
+ updateZoom();
+ };
+
+ function updateZoom() {
+ grid.style.transform = `scale(${state.scale})`;
+ display.textContent = Math.round(state.scale * 100) + '%';
+ }
+}
diff --git a/config.js b/config.js
index 1f8bec7..bf7e3d6 100644
--- a/config.js
+++ b/config.js
@@ -1,5 +1,4 @@
-// --- FIREBASE CONFIG ---
-// Prosjekt: roesstad-9fd48
+// --- FIREBASE CONFIGURATION ---
export const firebaseConfig = {
apiKey: "AIzaSyD-E58BdRwFCHDmsgRG9-PEWzMaQoheJ-0",
authDomain: "roesstad-9fd48.firebaseapp.com",
@@ -8,5 +7,3 @@ export const firebaseConfig = {
messagingSenderId: "704119736902",
appId: "1:704119736902:web:bc47f2b6a1383de0479847"
};
-
-
diff --git a/index.html b/index.html
index e1a518b..dc1705d 100644
--- a/index.html
+++ b/index.html
@@ -1,33 +1,37 @@
+
${ev.desc}
` : ''} + ${ev.desc ? `${ev.desc}
` : ''}
-
-
-
Røsstad Arkivet
-Logg inn for å se familiens historie
- -
-
-
+
+
-
-
+
+
-
-
-
-
-
-
+ Røsstad Arkivet
+Logg inn for å utforske familiens historie
+ + + +