beppe/little_people_firebase
1
0
Fork 0
mirror of https://github.com/bvanroll/little_people_firebase.git synced 2025-09-01 21:32: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

69
ts/main.js Normal file
View File

@@ -0,0 +1,69 @@
var statusItem = document.querySelector("p#status");
var peopleList = document.querySelector("#people");
var pageSize = 100
var pageNum = (1 *pageSize) -1;
document.addEventListener('DOMContentLoaded', function() {
try {
let app = firebase.app();
let features = [
'database',
'storage'
].filter(feature => typeof app[feature] === 'function');
} catch (e) {
console.error(e);
}
var database = firebase.database();
var rootRef = database.ref('/').orderByChild("lastName").startAt(pageNum).limitToFirst(pageSize);
//const people = []
//console.log(peopleList)
rootRef.once('value', function(snapshot){
console.log(snapshot)
snapshot.forEach(function(d) {
console.log(d)
var v = d.val();
console.log(v)
peopleList.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">${v.firstName} ${v.lastName}</h3>
<h4 class="bio-item">Gender:</h4>
<p class="item-content">${v.gender}</p>
<h4 class="bio-item">Age:</h4>
<p class="item-content">${v.age}</p>
<h4 class="bio-item">Current Country of Residence:</h4>
<p class="item-content">${v.country}</p>
<h4 class="bio-item">Job:</h4>
<p class="item-content">${v.job}</p>
</div>
<div class="bio">
<h4 class="bio-item">Bio:</h4>
<p class="item-content">${v.bio}</p>
</div>
</div>`;
})
});
//console.log(people)
});
//console.log(people)
// snapshot.forEach(function(d) {
// var v = d.val();
// peopleList.innerHTML += `<div style="margin-bottom: 7em">
// <h3 class="card-header">${v.firstName} ${v.lastName}</h3>
// <h4>Gender:</h4>
// <p>${v.gender}</p>
// <h4>Age:</h4>
// <p>${v.age}</p>
// <h4>Current Country of Residence:</h4>
// <p>${v.country}</p>
// <h4>Job:</h4>
// <p>${v.job}</p>
// <h4>Bio:</h4>
// <p>${v.bio}</p>
// </div>`;
// console.log(d.val());
// });

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>`;
})
})
})