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

92
index.html
View file

@ -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>

43
script.js
View file

@ -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 || '';