beppe/little_people_firebase
1
0
Fork 0
mirror of https://github.com/bvanroll/little_people_firebase.git synced 2025-09-01 13:22:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

testing

Browse Source
This commit is contained in:
Beppe Vanrolleghem
2023-01-29 14:30:01 +01:00
parent 08b71d12c9
commit 6ca6b5aa7d
10 changed files with 238 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
ts/main.ts Normal file
View File

@@ -0,0 +1,47 @@
let peopleListDiv: HTMLElement = document.querySelector("#people")!;
var pageSize: number = 100;
var pageNum: number = (1 * pageSize) - 1;
document.addEventListener('DOMContentLoaded', function() {
try {
// @ts-ignore
let firebaseApp= firebase.app();
} catch (e) {
console.error(e);
}
// @ts-ignore
const firebaseDb = firebase.database();
var rootDatabaseReference = firebaseDb.ref('/').orderByChild("lastName").startAt(pageNum).limitToFirst(pageSize);
rootDatabaseReference.once('value', function(databaseSnapshot: any[]) {
console.debug(databaseSnapshot)
databaseSnapshot.forEach(function(snapshotEntry) {
console.debug(snapshotEntry)
var snapshotEntryValue = snapshotEntry.val();
console.debug(snapshotEntryValue)
peopleListDiv.innerHTML += `<div class="card">
<div class="pfp">
<img class="picture" alt="not yet" src="avatars/example.png"></img>
</div>
<div class="person">
<h3 class="name">${snapshotEntryValue.firstName} ${snapshotEntryValue.lastName}</h3>
<h4 class="bio-item">Gender:</h4>
<p class="item-content">${snapshotEntryValue.gender}</p>
<h4 class="bio-item">Age:</h4>
<p class="item-content">${snapshotEntryValue.age}</p>
<h4 class="bio-item">Current Country of Residence:</h4>
<p class="item-content">${snapshotEntryValue.country}</p>
<h4 class="bio-item">Job:</h4>
<p class="item-content">${snapshotEntryValue.job}</p>
</div>
<div class="bio">
<h4 class="bio-item">Bio:</h4>
<p class="item-content">${snapshotEntryValue.bio}</p>
</div>
</div>`;
})
})
})