diff --git a/.DS_Store b/.DS_Store index 9a685a5..d3c48e5 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/css/profile.css b/css/profile.css index 0c1d389..2785a4d 100644 --- a/css/profile.css +++ b/css/profile.css @@ -1,3 +1,8 @@ +body{ + font-family: 'Josefin Sans', sans-serif; + background-color: #eee; +} + header{ background-color: #3e2fae; min-height: 40vh @@ -18,4 +23,58 @@ header p{ color: white; font-family: Arial, Helvetica, sans-serif; font-size: 20px; -} \ No newline at end of file +} + +.input{ + text-align: center; +} + +#usernameDisplay{ + text-align: center; + color: white; + font-size: 30px; + font-weight: bold; +} + +#userStatusDisplay{ + text-align: center; + color: white; + font-size: 20px; + +} + +.profile{ + display: flex; + flex-direction: column; + align-items: center; +} + +#userProfilePicDisplay{ + width: 80px; + height: 80px; + border-radius: 50px;; +} +#usernameInput{ + border-radius: 10px; + border: 2px solid #f9d861; + padding: 5px; +} +#statusInput{ + border-radius: 10px; + border: 2px solid #f9d861; + padding: 5px; +} +#profileSaveInput{ + border-radius: 10px; + font-family: 'Josefin Sans', sans-serif; + background-color: #f9d861; + padding: 10px; + + +} +#prifilePicInput{ + border-radius: 10px; + font-family: 'Josefin Sans', sans-serif; + background-color: #f9d861; + padding: 10px; +} diff --git a/firebase-chat-functions.js b/firebase-chat-functions.js new file mode 100644 index 0000000..f633293 --- /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..ac528cc --- /dev/null +++ b/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(); diff --git a/index.html b/index.html index 7abd210..fdb603b 100644 --- a/index.html +++ b/index.html @@ -7,12 +7,18 @@ Welcome to Chatmate! +
Menu Icon -

Welcome to Chatmate!  {UserName}

+

+ Welcome to Chatmate!   + + {UserName} + {Status} +

Profile Icon
@@ -20,6 +26,23 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/main.css b/main.css index cf85371..b5515aa 100644 --- a/main.css +++ b/main.css @@ -5,7 +5,7 @@ body { background-color: #3e2fae; color:#fff; - font-family: Arial, Helvetica, sans-serif; + font-family: 'Josefin Sans', sans-serif; } header{ @@ -60,11 +60,18 @@ header{ border-radius: 15px; } -p{ +header p{ background-color: #3e2fae; margin-right: 20%; border-radius: 10px; - text-align: left; + text-align: center; + margin: 0 auto; padding: 5px 20px; color: white; +} +.smallImage{ + width: 40px; + height: 40px; + border-radius: 50px; + text-align: center;; } \ No newline at end of file diff --git a/main.js b/main.js index ef8f3b1..4e1191d 100644 --- a/main.js +++ b/main.js @@ -11,14 +11,22 @@ if ('serviceWorker' in navigator) { console.log('CLIENT: service workers are not supported.'); } - let allMessages = []; + let alllMessages = []; let chatBox = document.querySelector("#chatBox"); let newMsgInput = document.querySelector("#newMsg"); let userName = localStorage.getItem('userName') || "Yucheng"; + let userStatus = localStorage.getItem('userStatus') || "update your profile to display a status"; + let userProfilePic = localStorage.getItem('userProfilePic'); let notifSound = 'notification.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 = ""; @@ -33,6 +41,9 @@ if ('serviceWorker' in navigator) { window.navigator.vibrate(200); notifSoundElement.play(); + + chatBox.scrollTop = chatBox.scrollHeight; + clearChatInput(); } @@ -44,9 +55,10 @@ if ('serviceWorker' in navigator) { } if(usrMsg.message !== "") { - allMessages.push(usrMsg); + //allMessages.push(usrMsg); // end make message - displayNewMessage(usrMsg) + displayNewMessage(usrMsg); + saveMessageToFirebase(usrMsg); } } @@ -66,7 +78,7 @@ if ('serviceWorker' in navigator) { }); // when username input is changed, update localstorage and global variable - usernameInput.addEventListener('blur', function() { + usernameDisplay.addEventListener('blur', function() { var oldUsername = localStorage.getItem("userName"); var newUsername = this.innerHTML; @@ -81,4 +93,6 @@ if ('serviceWorker' in navigator) { localStorage.setItem("userName", newUsername); userName = localStorage.getItem("userName"); - }); \ No newline at end of file + }); + + diff --git a/profile.html b/profile.html index ae7788b..0c6d27a 100644 --- a/profile.html +++ b/profile.html @@ -5,13 +5,42 @@ + Profile
Back Icon - headshot -

Yucheng Hang

+
+ +

+
+
+
+
+
+ +
+

Username:

+

Status:

+

+ +
+ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/profile.js b/profile.js new file mode 100644 index 0000000..81e2696 --- /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'); +userProfilePicDisplay.value = localStorage.getItem('profilePicInput') + +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(); +}); +usernameDisplay.innerHTML = userName; +userStatusDisplay.innerHTML = userStatus; +userProfilePicDisplay.src = userProfilePic; \ No newline at end of file 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