diff --git a/firebase.html b/firebase.html new file mode 100644 index 0000000..1c333b2 --- /dev/null +++ b/firebase.html @@ -0,0 +1,55 @@ + + + + + + DMD 3440 - Room of Chat + + + +
+ + +
+
My Profile pic: + + + +
+ + + + +
+ + +
+ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 686bb51..48476eb 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@

Sending messages as {UserName} {Status}

~Meira's Mobile App Chat Room~

- Click! + Click! alt="">
@@ -25,6 +25,19 @@
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/js/demo.js b/js/demo.js new file mode 100644 index 0000000..5d8a44c --- /dev/null +++ b/js/demo.js @@ -0,0 +1,59 @@ +// var initialMessages = getAllMessagesFromFirebase(); +// console.log(initialMessages); +var username = "Meira"; +var chatLog = document.querySelector("#chatLog"); +var inputBox = document.querySelector("#inputBox"); +var sendButton = document.querySelector("#sendButton"); +var profilePicInput = document.querySelector("#profilePic"); +var saveProfileButton = document.querySelector("#saveProfile"); +var profilePicDisplayElement = document.querySelector("#profilePicDisplay"); +var profilePic = localStorage.getItem("userProfilePic") || "unknown.jpg"; + +var testMessage = { + dateStamp:"983459835498345", + message: "Hello test!", + sentBy: "Meira" +} + +profilePicDisplayElement.src = profilePic; + +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]); + } +} + +function displayMessage(message) { + var messageParagraph = document.createElement("p"); + messageParagraph.innerHTML = message.dateStamp + " " + message.message + " " + message.sentBy; + + chatLog.appendChild(messageParagraph); + chatLog.scrollTop = chatLog.scrollHeight; +} + +watchFirebaseForChanges( + function(msg){ + displayMessage(msg.data()) + } +); + +sendButton.addEventListener("click", function () { + var msgObj = { + dateStamp:Date.now(), + message: inputBox.value, + sentBy: username + } + + saveMessageToFirebase(msgObj); + + inputBox.value = ""; + inputBox.focus(); +}); + +saveProfileButton.addEventListener("click", function() { + saveProfileImageLocally(); +}); \ No newline at end of file diff --git a/js/firebase-chat-functions.js b/js/firebase-chat-functions.js new file mode 100644 index 0000000..f633293 --- /dev/null +++ b/js/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/js/firebase-config.js b/js/firebase-config.js new file mode 100644 index 0000000..166ed82 --- /dev/null +++ b/js/firebase-config.js @@ -0,0 +1,12 @@ +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/js/main.js b/js/main.js index 78e8312..661cc6b 100644 --- a/js/main.js +++ b/js/main.js @@ -1,6 +1,10 @@ // Register a service worker, this one located in serviceworker.js // A service worker is a piece of code the browser runs behind the scenes. + +var username = "Meira"; + + if ('serviceWorker' in navigator) { console.log('CLIENT: service worker registration in progress.'); navigator.serviceWorker.register('sw.js').then(function() { @@ -31,29 +35,46 @@ console.log(allMessages); -function makeAndDisplaymMessage(sender,dateStamp,text){ - var newMessage = { - sentBy: sender, - dateStamp: dateStamp, - text:text - } +//function makeAndDisplaymMessage(sender,dateStamp,text){ + //var newMessage = { + //sentBy: sender, + //dateStamp: dateStamp, + // text:text + //} - //display message + function displayMessage(message) { + var messageParagraph = document.createElement("p"); + messageParagraph.innerHTML = message.dateStamp + " " + message.message + " " + message.sentBy; - var newMsgP = document.createElement("p"); - newMsgP.innerText = sender + ": " + text; + chatBox.appendChild(messageParagraph); + chatBox.scrollTop = chatBox.scrollHeight; - chatBox.appendChild(newMsgP); + }; + + watchFirebaseForChanges( + function(msg){ + displayMessage(msg.data()) + } + ); + - allMessages.push(newMessage); - console.log(allMessages); -} document.querySelector("#sendBtn").addEventListener('click', function(){ - makeAndDisplaymMessage("me","now", document.querySelector("#newMsg").value); - document.querySelector("#newMsg").value = ""; - document.querySelector("#newMsg").focus(); + var msgObj = { + dateStamp:Date.now(), + message: chatInput.value, + sentBy: username +} + +saveMessageToFirebase(msgObj); + +chatInput.value = ""; +chatInput.focus(); + + displayMessage("me","now", document.querySelector("#newMsg").value); + //document.querySelector("#newMsg").value = ""; + //document.querySelector("#newMsg").focus(); let src = 'img/soothing_flute.mp3'; let audio = new Audio(src); audio.play(); diff --git a/js/profile.js b/js/profile.js index 567fe38..ece4497 100644 --- a/js/profile.js +++ b/js/profile.js @@ -4,6 +4,7 @@ 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'); diff --git a/js/register-sw.js b/js/register-sw.js new file mode 100644 index 0000000..2b40a14 --- /dev/null +++ b/js/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/profile.html b/profile.html index 3c9f182..b7c6a5a 100644 --- a/profile.html +++ b/profile.html @@ -20,5 +20,17 @@

+ + + + + + + + + + + + \ No newline at end of file