Anaru/Roesstad
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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.

Browse source
This commit is contained in:
Eivind Røsstad Skeie 2025-11-27 11:57:07 +01:00
parent 501238a01e
commit dc6354cf49
2 changed files with 57 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
index.html
View file

@ -96,27 +96,6 @@
<div class="form-group"> <div class="form-group">
<label>Kjønn</label> <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">
<div class="form-group">
<label>Fødselsdato</label>
<input type="date" id="birthDate" required>
</div>
<div class="form-group">
<label>Dødsdato (valgfritt)</label>
<input type="date" id="deathDate">
</div>
</div>
<div class="form-group">
<label>Sted (for kart)</label>
<input type="text" id="location" placeholder="F.eks. Høvåg">
</div>
<!-- Relationships --> <!-- Relationships -->
<div class="form-section"> <div class="form-section">
@ -152,7 +131,8 @@
<!-- Populated by JS --> <!-- Populated by JS -->
</ul> </ul>
<button type="button" id="addChildBtn" class="text-btn" <button type="button" id="addChildBtn" class="text-btn"
style="color: var(--color-forest); border-color: var(--color-forest); font-size: 0.9rem;">+ Legg style="color: var(--color-forest); border-color: var(--color-forest); font-size: 0.9rem;">+
Legg
til barn</button> til barn</button>
</div> </div>

43
script.js
View file

@ -152,6 +152,7 @@ function populateDropdowns(excludeId = null) {
} else { } else {
// If gender undefined, maybe add to both or neither? // If gender undefined, maybe add to both or neither?
// For now, let's add to both to be safe if data is missing // For now, let's add to both to be safe if data is missing
if (motherSelect) motherSelect.appendChild(option.cloneNode(true)); if (motherSelect) motherSelect.appendChild(option.cloneNode(true));
if (fatherSelect) fatherSelect.appendChild(option.cloneNode(true)); if (fatherSelect) fatherSelect.appendChild(option.cloneNode(true));
} }
@ -162,37 +163,34 @@ memberForm.addEventListener('submit', (e) => {
e.preventDefault(); e.preventDefault();
const id = document.getElementById('member-id').value; 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 = { const memberData = {
firstName: document.getElementById('firstName').value, firstName: document.getElementById('firstName').value,
lastName: document.getElementById('lastName').value, lastName: document.getElementById('lastName').value,
gender: gender, gender: document.querySelector('input[name="gender"]:checked')?.value,
birthDate: document.getElementById('birthDate').value, birthDate: document.getElementById('birthDate')?.value,
deathDate: document.getElementById('deathDate').value || null, deathDate: document.getElementById('deathDate')?.value,
location: document.getElementById('location').value, location: document.getElementById('location')?.value,
notes: document.getElementById('notes').value, notes: document.getElementById('notes')?.value,
motherId: document.getElementById('motherId').value,
// Relationships fatherId: document.getElementById('fatherId').value,
motherId: document.getElementById('motherId').value || null, spouseId: document.getElementById('spouseId').value
fatherId: document.getElementById('fatherId').value || null,
spouseId: document.getElementById('spouseId').value || null
}; };
// Remove undefined/empty fields
Object.keys(memberData).forEach(key => {
if (memberData[key] === undefined || memberData[key] === '') {
delete memberData[key];
}
});
if (id) { if (id) {
db.collection('familyMembers').doc(id).update(memberData) 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 { } else {
db.collection('familyMembers').add(memberData) 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('firstName').value = member.firstName;
document.getElementById('lastName').value = member.lastName; document.getElementById('lastName').value = member.lastName;
document.getElementById('birthDate').value = member.birthDate; 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('deathDate').value = member.deathDate || '';
document.getElementById('location').value = member.location || ''; document.getElementById('location').value = member.location || '';
document.getElementById('notes').value = member.notes || ''; document.getElementById('notes').value = member.notes || '';