feat: Enhance member details with gender, birth/death dates, location, and coordinates, and integrate login form directly into the history section.
This commit is contained in:
parent
dc6354cf49
commit
17c317790a
2 changed files with 112 additions and 87 deletions
192
index.html
192
index.html
|
|
@ -55,98 +55,120 @@
|
||||||
<div class="history-container">
|
<div class="history-container">
|
||||||
<h2>Slektshistorie</h2>
|
<h2>Slektshistorie</h2>
|
||||||
<ul id="history-list">
|
<ul id="history-list">
|
||||||
<!-- History items will be injected here -->
|
<form id="login-form">
|
||||||
</ul>
|
<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>
|
</div>
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<!-- Login Modal -->
|
<!-- Add/Edit Member Modal -->
|
||||||
<div id="login-modal" class="modal">
|
<div id="member-modal" class="modal" style="display: none;">
|
||||||
<div class="modal-content glass-panel login-box">
|
<div class="modal-content glass-panel">
|
||||||
<h2>Velkommen til Røsstad</h2>
|
<span class="close-modal">×</span>
|
||||||
<p>Vennligst logg inn for å se slektstreet.</p>
|
<h2 id="modal-title">Legg til person</h2>
|
||||||
<form id="login-form">
|
<form id="member-form">
|
||||||
<input type="email" id="email" placeholder="E-post" required>
|
<input type="hidden" id="member-id">
|
||||||
<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 class="form-row">
|
||||||
<div id="member-modal" class="modal" style="display: none;">
|
<div class="form-group">
|
||||||
<div class="modal-content glass-panel">
|
<label>Fornavn</label>
|
||||||
<span class="close-modal">×</span>
|
<input type="text" id="firstName" required>
|
||||||
<h2 id="modal-title">Legg til person</h2>
|
</div>
|
||||||
<form id="member-form">
|
<div class="form-group">
|
||||||
<input type="hidden" id="member-id">
|
<label>Etternavn</label>
|
||||||
|
<input type="text" id="lastName" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="form-row">
|
<div class="form-group">
|
||||||
<div class="form-group">
|
<label>Kjønn</label>
|
||||||
<label>Fornavn</label>
|
<div class="radio-group">
|
||||||
<input type="text" id="firstName" required>
|
<label><input type="radio" name="gender" value="male"> Mann</label>
|
||||||
</div>
|
<label><input type="radio" name="gender" value="female"> Kvinne</label>
|
||||||
<div class="form-group">
|
<label><input type="radio" name="gender" value="other"> Annet</label>
|
||||||
<label>Etternavn</label>
|
</div>
|
||||||
<input type="text" id="lastName" required>
|
</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>
|
||||||
|
|
||||||
<div class="form-group">
|
<!-- Firebase SDKs -->
|
||||||
<label>Kjønn</label>
|
<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 -->
|
<script src="script.js"></script>
|
||||||
<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>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -170,6 +170,8 @@ memberForm.addEventListener('submit', (e) => {
|
||||||
birthDate: document.getElementById('birthDate')?.value,
|
birthDate: document.getElementById('birthDate')?.value,
|
||||||
deathDate: document.getElementById('deathDate')?.value,
|
deathDate: document.getElementById('deathDate')?.value,
|
||||||
location: document.getElementById('location')?.value,
|
location: document.getElementById('location')?.value,
|
||||||
|
lat: parseFloat(document.getElementById('lat')?.value),
|
||||||
|
lng: parseFloat(document.getElementById('lng')?.value),
|
||||||
notes: document.getElementById('notes')?.value,
|
notes: document.getElementById('notes')?.value,
|
||||||
motherId: document.getElementById('motherId').value,
|
motherId: document.getElementById('motherId').value,
|
||||||
fatherId: document.getElementById('fatherId').value,
|
fatherId: document.getElementById('fatherId').value,
|
||||||
|
|
@ -350,10 +352,11 @@ function openEditModal(member) {
|
||||||
document.getElementById('member-id').value = member.id;
|
document.getElementById('member-id').value = member.id;
|
||||||
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('lat').value = member.lat || '';
|
||||||
|
document.getElementById('lng').value = member.lng || '';
|
||||||
document.getElementById('notes').value = member.notes || '';
|
document.getElementById('notes').value = member.notes || '';
|
||||||
|
|
||||||
// Set Gender
|
// Set Gender
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue