diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..ed1aa97 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..aebfc7d --- /dev/null +++ b/package-lock.json @@ -0,0 +1,24 @@ +{ + "name": "little_people_firebase", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "dependencies": { + "typescript": "^4.9.4" + } + }, + "node_modules/typescript": { + "version": "4.9.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz", + "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==", + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..5e26d6b --- /dev/null +++ b/package.json @@ -0,0 +1,8 @@ +{ + "dependencies": { + "typescript": "^4.9.4" + }, + "scripts": { + "build": "tsc --build" + } +} diff --git a/public/avatars/example.png b/public/avatars/example.png new file mode 100644 index 0000000..2b83185 Binary files /dev/null and b/public/avatars/example.png differ diff --git a/public/css/main.css b/public/css/main.css new file mode 100644 index 0000000..9149d3c --- /dev/null +++ b/public/css/main.css @@ -0,0 +1,54 @@ +body { + padding: 2em; +} +.header { + font-size: 4em; +} +.card {margin-bottom: 7em; + width: 80%; + overflow: hidden; /* will contain if #first is longer than #second */ + border: 1px; + border-style: outset; + padding: .3em; +} +.pfp {width: 40%; max-width: 45%; float:left; height: 20em;margin: 2em;} +.person {max-width: 45%;overflow: hidden; max-height: 29em;margin: 2em;} +.bio {padding: .3em; margin: .5em} +.name { + font-size: 2em; +} +.picture { + max-width: 80%; +} +.bio-item { + font-size: 1.3em; +} +.item-content { + font-size: 1em; +} +@media only screen and (max-width: 600px) { + .header { + text-align: center; + } + .card { + padding: 0em; + width: 90%; + } + .pfp { + width: 100%; + max-width: 100%; + margin: 0; + height: auto; + float: none; + } + .picture { + max-width: 100%; + } + .person { + max-width: 90%; + width: 90%; + margin: 0; + padding: 1em; + float: none; + } +} \ No newline at end of file diff --git a/public/index.html b/public/index.html index bb0b59f..4b85afd 100644 --- a/public/index.html +++ b/public/index.html @@ -17,56 +17,20 @@ - + -

Fake People

+ + + +

Fake People

- diff --git a/ts/main.js b/ts/main.js new file mode 100644 index 0000000..1b2738b --- /dev/null +++ b/ts/main.js @@ -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 += `
+
+ not yet +
+
+

${v.firstName} ${v.lastName}

+

Gender:

+

${v.gender}

+

Age:

+

${v.age}

+

Current Country of Residence:

+

${v.country}

+

Job:

+

${v.job}

+
+
+

Bio:

+

${v.bio}

+
+
`; + }) + }); + //console.log(people) +}); +//console.log(people) + // snapshot.forEach(function(d) { + // var v = d.val(); + // peopleList.innerHTML += `
+ //

${v.firstName} ${v.lastName}

+ //

Gender:

+ //

${v.gender}

+ //

Age:

+ //

${v.age}

+ //

Current Country of Residence:

+ //

${v.country}

+ //

Job:

+ //

${v.job}

+ //

Bio:

+ //

${v.bio}

+ //
`; + // console.log(d.val()); + // }); \ No newline at end of file diff --git a/ts/main.ts b/ts/main.ts new file mode 100644 index 0000000..d672e4f --- /dev/null +++ b/ts/main.ts @@ -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 += `
+
+ not yet +
+
+

${snapshotEntryValue.firstName} ${snapshotEntryValue.lastName}

+

Gender:

+

${snapshotEntryValue.gender}

+

Age:

+

${snapshotEntryValue.age}

+

Current Country of Residence:

+

${snapshotEntryValue.country}

+

Job:

+

${snapshotEntryValue.job}

+
+
+

Bio:

+

${snapshotEntryValue.bio}

+
+
`; + }) + }) +}) + diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..5b1b1f2 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,16 @@ +{ + "compilerOptions": { + "module": "commonjs", + "noImplicitReturns": true, + "noUnusedLocals": true, + "outDir": "public/js", + "sourceMap": true, + "strict": true, + "target": "esnext", + "watch": true + }, + "compileOnSave": true, + "include": [ + "ts" + ] +} \ No newline at end of file