From dc6354cf496c7133ca73ecfa9d6c16e34520aa99 Mon Sep 17 00:00:00 2001
From: Anaru <eivindrosstadskeie@gmail.com>
Date: Thu, 27 Nov 2025 11:57:07 +0100
Subject: [PATCH] feat: Refactor member form by removing several input fields
 from HTML and updating JavaScript to handle dynamic field presence, clean
 data, and add error handling.

---
 index.html | 92 +++++++++++++++++++++---------------------------------
 script.js  | 43 +++++++++++++------------
 2 files changed, 57 insertions(+), 78 deletions(-)

diff --git a/index.html b/index.html
index fad12a8..32d05ae 100644
--- a/index.html
+++ b/index.html
@@ -96,67 +96,47 @@
 
                 <div class="form-group">
                     <label>Kjønn</label>
-                    <div class="radio-group">
-                        <label class="radio-label"><input type="radio" name="gender" value="male" required> Mann</label>
-                        <label class="radio-label"><input type="radio" name="gender" value="female"> Kvinne</label>
-                    </div>
-                </div>
 
-                <div class="form-row">
+                    <!-- 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>Fødselsdato</label>
-                        <input type="date" id="birthDate" required>
+                        <label>Notater</label>
+                        <textarea id="notes" rows="3"></textarea>
                     </div>
-                    <div class="form-group">
-                        <label>Dødsdato (valgfritt)</label>
-                        <input type="date" id="deathDate">
+
+                    <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>
-                </div>
 
-                <div class="form-group">
-                    <label>Sted (for kart)</label>
-                    <input type="text" id="location" placeholder="F.eks. Høvåg">
-                </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>
+                    <button type="submit" class="primary-btn">Lagre</button>
             </form>
         </div>
     </div>
diff --git a/script.js b/script.js
index 2249332..a4ace27 100644
--- a/script.js
+++ b/script.js
@@ -152,6 +152,7 @@ function populateDropdowns(excludeId = null) {
         } else {
             // If gender undefined, maybe add to both or neither? 
             // For now, let's add to both to be safe if data is missing
+
             if (motherSelect) motherSelect.appendChild(option.cloneNode(true));
             if (fatherSelect) fatherSelect.appendChild(option.cloneNode(true));
         }
@@ -162,37 +163,34 @@ memberForm.addEventListener('submit', (e) => {
     e.preventDefault();
     const id = document.getElementById('member-id').value;
 
-    // Get gender value
-    const genderInputs = document.getElementsByName('gender');
-    let gender = null;
-    for (const input of genderInputs) {
-        if (input.checked) {
-            gender = input.value;
-            break;
-        }
-    }
-
     const memberData = {
         firstName: document.getElementById('firstName').value,
         lastName: document.getElementById('lastName').value,
-        gender: gender,
-        birthDate: document.getElementById('birthDate').value,
-        deathDate: document.getElementById('deathDate').value || null,
-        location: document.getElementById('location').value,
-        notes: document.getElementById('notes').value,
-
-        // Relationships
-        motherId: document.getElementById('motherId').value || null,
-        fatherId: document.getElementById('fatherId').value || null,
-        spouseId: document.getElementById('spouseId').value || null
+        gender: document.querySelector('input[name="gender"]:checked')?.value,
+        birthDate: document.getElementById('birthDate')?.value,
+        deathDate: document.getElementById('deathDate')?.value,
+        location: document.getElementById('location')?.value,
+        notes: document.getElementById('notes')?.value,
+        motherId: document.getElementById('motherId').value,
+        fatherId: document.getElementById('fatherId').value,
+        spouseId: document.getElementById('spouseId').value
     };
 
+    // Remove undefined/empty fields
+    Object.keys(memberData).forEach(key => {
+        if (memberData[key] === undefined || memberData[key] === '') {
+            delete memberData[key];
+        }
+    });
+
     if (id) {
         db.collection('familyMembers').doc(id).update(memberData)
-            .then(() => memberModal.style.display = 'none');
+            .then(() => memberModal.style.display = 'none')
+            .catch(error => console.error("Error updating member:", error));
     } else {
         db.collection('familyMembers').add(memberData)
-            .then(() => memberModal.style.display = 'none');
+            .then(() => memberModal.style.display = 'none')
+            .catch(error => console.error("Error adding member:", error));
     }
 });
 
@@ -353,6 +351,7 @@ function openEditModal(member) {
     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('deathDate').value = member.deathDate || '';
     document.getElementById('location').value = member.location || '';
     document.getElementById('notes').value = member.notes || '';