From 17c317790a885f14bf4864f70d2f48de153d8baa Mon Sep 17 00:00:00 2001
From: Anaru <eivindrosstadskeie@gmail.com>
Date: Thu, 27 Nov 2025 12:09:22 +0100
Subject: [PATCH] feat: Enhance member details with gender, birth/death dates,
 location, and coordinates, and integrate login form directly into the history
 section.

---
 index.html | 192 +++++++++++++++++++++++++++++------------------------
 script.js  |   7 +-
 2 files changed, 112 insertions(+), 87 deletions(-)

diff --git a/index.html b/index.html
index 32d05ae..da21618 100644
--- a/index.html
+++ b/index.html
@@ -55,98 +55,120 @@
             <div class="history-container">
                 <h2>Slektshistorie</h2>
                 <ul id="history-list">
-                    <!-- History items will be injected here -->
-                </ul>
+                    <form id="login-form">
+                        <input type="email" id="email" placeholder="E-post" required>
+                        <input type="password" id="password" placeholder="Passord" required>
+                        <button type="submit" class="primary-btn">Logg inn</button>
+                    </form>
+                    <p id="login-error" class="error-msg"></p>
+            </div>
             </div>
-        </section>
-    </main>
 
-    <!-- Login Modal -->
-    <div id="login-modal" class="modal">
-        <div class="modal-content glass-panel login-box">
-            <h2>Velkommen til Røsstad</h2>
-            <p>Vennligst logg inn for å se slektstreet.</p>
-            <form id="login-form">
-                <input type="email" id="email" placeholder="E-post" required>
-                <input type="password" id="password" placeholder="Passord" required>
-                <button type="submit" class="primary-btn">Logg inn</button>
-            </form>
-            <p id="login-error" class="error-msg"></p>
-        </div>
-    </div>
+            <!-- Add/Edit Member Modal -->
+            <div id="member-modal" class="modal" style="display: none;">
+                <div class="modal-content glass-panel">
+                    <span class="close-modal">&times;</span>
+                    <h2 id="modal-title">Legg til person</h2>
+                    <form id="member-form">
+                        <input type="hidden" id="member-id">
 
-    <!-- Add/Edit Member Modal -->
-    <div id="member-modal" class="modal" style="display: none;">
-        <div class="modal-content glass-panel">
-            <span class="close-modal">&times;</span>
-            <h2 id="modal-title">Legg til person</h2>
-            <form id="member-form">
-                <input type="hidden" id="member-id">
+                        <div class="form-row">
+                            <div class="form-group">
+                                <label>Fornavn</label>
+                                <input type="text" id="firstName" required>
+                            </div>
+                            <div class="form-group">
+                                <label>Etternavn</label>
+                                <input type="text" id="lastName" required>
+                            </div>
+                        </div>
 
-                <div class="form-row">
-                    <div class="form-group">
-                        <label>Fornavn</label>
-                        <input type="text" id="firstName" required>
-                    </div>
-                    <div class="form-group">
-                        <label>Etternavn</label>
-                        <input type="text" id="lastName" required>
-                    </div>
+                        <div class="form-group">
+                            <label>Kjønn</label>
+                            <div class="radio-group">
+                                <label><input type="radio" name="gender" value="male"> Mann</label>
+                                <label><input type="radio" name="gender" value="female"> Kvinne</label>
+                                <label><input type="radio" name="gender" value="other"> Annet</label>
+                            </div>
+                        </div>
+
+                        <div class="form-row">
+                            <div class="form-group">
+                                <label>Fødselsdato</label>
+                                <input type="date" id="birthDate">
+                            </div>
+                            <div class="form-group">
+                                <label>Dødsdato</label>
+                                <input type="date" id="deathDate">
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label>Sted</label>
+                            <input type="text" id="location" placeholder="F.eks. Kristiansand">
+                        </div>
+
+                        <div class="form-row">
+                            <div class="form-group">
+                                <label>Breddegrad (Lat)</label>
+                                <input type="number" id="lat" step="any" placeholder="58.16">
+                            </div>
+                            <div class="form-group">
+                                <label>Lengdegrad (Lng)</label>
+                                <input type="number" id="lng" step="any" placeholder="8.25">
+                            </div>
+                        </div>
+
+                        <!-- Relationships -->
+                        <div class="form-section">
+                            <h3>Relasjoner</h3>
+                            <div class="form-group">
+                                <label>Mor</label>
+                                <select id="motherId">
+                                    <option value="">Ingen valgt</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label>Far</label>
+                                <select id="fatherId">
+                                    <option value="">Ingen valgt</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label>Ektefelle/Samboer</label>
+                                <select id="spouseId">
+                                    <option value="">Ingen valgt</option>
+                                </select>
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label>Notater</label>
+                            <textarea id="notes" rows="3"></textarea>
+                        </div>
+
+                        <div class="form-section">
+                            <h3>Barn</h3>
+                            <ul id="children-list" style="list-style: none; padding: 0; margin-bottom: 10px;">
+                                <!-- Populated by JS -->
+                            </ul>
+                            <button type="button" id="addChildBtn" class="text-btn"
+                                style="color: var(--color-forest); border-color: var(--color-forest); font-size: 0.9rem;">+
+                                Legg
+                                til barn</button>
+                        </div>
+
+                        <button type="submit" class="primary-btn">Lagre</button>
+                    </form>
                 </div>
+            </div>
 
-                <div class="form-group">
-                    <label>Kjønn</label>
+            <!-- Firebase SDKs -->
+            <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script>
+            <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-auth-compat.js"></script>
+            <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore-compat.js"></script>
 
-                    <!-- Relationships -->
-                    <div class="form-section">
-                        <h3>Relasjoner</h3>
-                        <div class="form-group">
-                            <label>Mor</label>
-                            <select id="motherId">
-                                <option value="">Ingen valgt</option>
-                            </select>
-                        </div>
-                        <div class="form-group">
-                            <label>Far</label>
-                            <select id="fatherId">
-                                <option value="">Ingen valgt</option>
-                            </select>
-                        </div>
-                        <div class="form-group">
-                            <label>Ektefelle/Samboer</label>
-                            <select id="spouseId">
-                                <option value="">Ingen valgt</option>
-                            </select>
-                        </div>
-                    </div>
-
-                    <div class="form-group">
-                        <label>Notater</label>
-                        <textarea id="notes" rows="3"></textarea>
-                    </div>
-
-                    <div class="form-section">
-                        <h3>Barn</h3>
-                        <ul id="children-list" style="list-style: none; padding: 0; margin-bottom: 10px;">
-                            <!-- Populated by JS -->
-                        </ul>
-                        <button type="button" id="addChildBtn" class="text-btn"
-                            style="color: var(--color-forest); border-color: var(--color-forest); font-size: 0.9rem;">+
-                            Legg
-                            til barn</button>
-                    </div>
-
-                    <button type="submit" class="primary-btn">Lagre</button>
-            </form>
-        </div>
-    </div>
-
-    <!-- Firebase SDKs -->
-    <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-auth-compat.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore-compat.js"></script>
-
-    <script src="script.js"></script>
+            <script src="script.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/script.js b/script.js
index a4ace27..21a7bd4 100644
--- a/script.js
+++ b/script.js
@@ -170,6 +170,8 @@ memberForm.addEventListener('submit', (e) => {
         birthDate: document.getElementById('birthDate')?.value,
         deathDate: document.getElementById('deathDate')?.value,
         location: document.getElementById('location')?.value,
+        lat: parseFloat(document.getElementById('lat')?.value),
+        lng: parseFloat(document.getElementById('lng')?.value),
         notes: document.getElementById('notes')?.value,
         motherId: document.getElementById('motherId').value,
         fatherId: document.getElementById('fatherId').value,
@@ -350,10 +352,11 @@ function openEditModal(member) {
     document.getElementById('member-id').value = member.id;
     document.getElementById('firstName').value = member.firstName;
     document.getElementById('lastName').value = member.lastName;
-    document.getElementById('birthDate').value = member.birthDate;
-    document.getElementById('birthYear').value = member.birthYear || (member.birthDate ? member.birthDate.split('-')[0] : '');
+    document.getElementById('birthDate').value = member.birthDate || '';
     document.getElementById('deathDate').value = member.deathDate || '';
     document.getElementById('location').value = member.location || '';
+    document.getElementById('lat').value = member.lat || '';
+    document.getElementById('lng').value = member.lng || '';
     document.getElementById('notes').value = member.notes || '';
 
     // Set Gender