diff --git a/firebase-chat-functions.js b/firebase-chat-functions.js new file mode 100644 index 0000000..65a98bb --- /dev/null +++ b/firebase-chat-functions.js @@ -0,0 +1,29 @@ +function saveMessageToFirebase(msg) { + db.collection("messages").add(msg) +} + +function getAllMessagesFromFirebase() { + let allMsgs = []; + db.collection("messages").orderBy('dateStamp', 'asc').limit(200).get().then(function(querySnapshot) { + querySnapshot.forEach(function(doc) { + // doc.data() is never undefined for query doc snapshots + allMsgs.push(doc.data()) + }); + }); + + return allMsgs; +} + +function watchFirebaseForChanges(callBack) { + db.collection("messages").orderBy('dateStamp','asc').onSnapshot(function(querySnapshot) { + querySnapshot.docChanges().forEach(function(change) { + if (change.type === "added") { + callBack(change.doc); + } + }); + }); +} + + +//getAllMessagesFromFirebase(); +watchFirebaseForChanges(function(msg){displayNewMessage(msg.data())}) \ No newline at end of file diff --git a/firebase-config.js b/firebase-config.js new file mode 100644 index 0000000..ea14716 --- /dev/null +++ b/firebase-config.js @@ -0,0 +1,14 @@ + var firebaseConfig = { + apiKey: "AIzaSyAbh39Rb-F9_PO8lpAoob_qA1dYUVNYAkg", + authDomain: "dmd-3440-pwa-demo.firebaseapp.com", + databaseURL: "https://dmd-3440-pwa-demo.firebaseio.com", + projectId: "dmd-3440-pwa-demo", + storageBucket: "dmd-3440-pwa-demo.appspot.com", + messagingSenderId: "239477441112", + appId: "1:239477441112:web:0dcd3f94fe067b09ac402d" + }; + // Initialize Firebase + firebase.initializeApp(firebaseConfig); + var db = firebase.firestore(); + + \ No newline at end of file diff --git a/index.html b/index.html index 7fdbe38..d578682 100644 --- a/index.html +++ b/index.html @@ -10,12 +10,30 @@ -

Sending messages as {UserName}

+

Sending messages as {UserName} {Status}

+ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/main.css b/main.css index 0086299..298491c 100644 --- a/main.css +++ b/main.css @@ -8,6 +8,18 @@ body { font-family: Arial, Helvetica, sans-serif; } +a { + color:#fff; +} + +.small { + font-size: 14px; +} + +.smallImage { + width:20px; +} + #chatBox { width:100%; position:absolute; @@ -19,6 +31,7 @@ body { border:1px solid #333; color:#000; padding:15px; + overflow: scroll; } #chatInput { diff --git a/main.js b/main.js index a6410f8..19d7f8f 100644 --- a/main.js +++ b/main.js @@ -1,24 +1,18 @@ -// Register a service worker, this one located in serviceworker.js -// A service worker is a piece of code the browser runs behind the scenes. -if ('serviceWorker' in navigator) { - console.log('CLIENT: service worker registration in progress.'); - navigator.serviceWorker.register('sw.js').then(function() { - console.log('CLIENT: service worker registration complete.'); - }, function() { - console.log('CLIENT: service worker registration failure.'); - }); - } else { - console.log('CLIENT: service workers are not supported.'); - } - let allMessages = []; let chatBox = document.querySelector("#chatBox"); let newMsgInput = document.querySelector("#newMsg"); let userName = localStorage.getItem('userName') || "me"; + let userStatus = localStorage.getItem('userStatus') || "update your profile to display a status"; + let userProfilePic = localStorage.getItem('userProfilePic'); let notifSound = 'for-sure.mp3'; let notifSoundElement = new Audio(notifSound); - let usernameInput = document.querySelector("#usernameInput"); - usernameInput.innerHTML = userName; + let usernameDisplay = document.querySelector("#usernameDisplay"); + let userStatusDisplay = document.querySelector("#userStatusDisplay"); + let userProfilePicDisplay = document.querySelector("#userProfilePicDisplay"); + + usernameDisplay.innerHTML = userName; + userStatusDisplay.innerHTML = userStatus; + userProfilePicDisplay.src = userProfilePic; function clearChatInput() { document.querySelector("#newMsg").value = ""; @@ -30,9 +24,13 @@ if ('serviceWorker' in navigator) { newMsgP.innerHTML = "" + msg.sentBy + ": " + msg.message; chatBox.appendChild(newMsgP); - window.navigator.vibrate(200); + //window.navigator.vibrate(200); + //notifSoundElement.play(); + + + chatBox.scrollTop = chatBox.scrollHeight; + - notifSoundElement.play(); clearChatInput(); } @@ -44,10 +42,13 @@ if ('serviceWorker' in navigator) { } if(usrMsg.message !== "") { - allMessages.push(usrMsg); - // end make message - displayNewMessage(usrMsg) + // allMessages.push(usrMsg); + // // end make message + // displayNewMessage(usrMsg) + saveMessageToFirebase(usrMsg); } + + } //** All the triggers and event listener assignments down here... */ @@ -63,22 +64,4 @@ if ('serviceWorker' in navigator) { if (e.keyCode === 13) { makeNewMessageFromLocalUser(); } - }); - - // when username input is changed, update localstorage and global variable - usernameInput.addEventListener('blur', function() { - var oldUsername = localStorage.getItem("userName"); - var newUsername = this.innerHTML; - - var alertNew = { - sentBy: "system", - dateStamp: Date.now(), - message: `${oldUsername} has changed their name to ${newUsername}` - } - - displayNewMessage(alertNew); - - - localStorage.setItem("userName", newUsername); - userName = localStorage.getItem("userName"); }); \ No newline at end of file diff --git a/profile.html b/profile.html new file mode 100644 index 0000000..2f6b06e --- /dev/null +++ b/profile.html @@ -0,0 +1,36 @@ + + + + + + + Edit Profile + + + + + +
Back

Edit Profile

+ +
+

+

+

+ +
+ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/profile.js b/profile.js new file mode 100644 index 0000000..95eb2a0 --- /dev/null +++ b/profile.js @@ -0,0 +1,31 @@ +let usernameInput = document.querySelector("#usernameInput"); +let statusInput = document.querySelector("#statusInput"); +let profilePicInput = document.querySelector("#profilePicInput"); +let profileSaveInput = document.querySelector("#profileSaveInput"); + +// setting the input values default +usernameInput.value = localStorage.getItem('userName'); +statusInput.value = localStorage.getItem('userStatus'); + +function saveProfileImageLocally() { + if (profilePicInput.files && profilePicInput.files[0]) { + var reader = new FileReader(); + reader.onload = function(e) { + localStorage.setItem("userProfilePic", reader.result); + } + reader.readAsDataURL(profilePicInput.files[0]); + } +} + +profileSaveInput.addEventListener( 'click', function(e) { + e.preventDefault(); + localStorage.setItem("userName", usernameInput.value); + localStorage.setItem("userStatus", statusInput.value); + + saveProfileImageLocally(); +}); + + + + + diff --git a/register-sw.js b/register-sw.js new file mode 100644 index 0000000..2b40a14 --- /dev/null +++ b/register-sw.js @@ -0,0 +1,12 @@ +// Register a service worker, this one located in serviceworker.js +// A service worker is a piece of code the browser runs behind the scenes. +if ('serviceWorker' in navigator) { + console.log('CLIENT: service worker registration in progress.'); + navigator.serviceWorker.register('sw.js').then(function() { + console.log('CLIENT: service worker registration complete.'); + }, function() { + console.log('CLIENT: service worker registration failure.'); + }); + } else { + console.log('CLIENT: service workers are not supported.'); + } \ No newline at end of file diff --git a/sw.js b/sw.js index d2e3d44..cf11502 100644 --- a/sw.js +++ b/sw.js @@ -13,11 +13,14 @@ var version = 'v1::'; */ var offlineFiles = [ '', + 'register-sw.js', 'icon192.png', 'icon512.png', + 'profile.html', 'index.html', 'main.css', - 'main.js' + 'main.js', + 'profile.js' ]; /* The install event fires when the service worker is first installed.