From e3253cd2a841f07dbeb036b29114bb53e52bb635 Mon Sep 17 00:00:00 2001 From: Yucheng Hang Date: Tue, 10 Mar 2020 14:04:45 -0400 Subject: [PATCH] ~ --- .DS_Store | Bin 8196 -> 6148 bytes css/profile.css | 61 ++++++++++++++++++++++++++++++++++++- firebase-chat-functions.js | 29 ++++++++++++++++++ firebase-config.js | 12 ++++++++ index.html | 25 ++++++++++++++- main.css | 13 ++++++-- main.js | 28 ++++++++++++----- profile.html | 33 ++++++++++++++++++-- profile.js | 31 +++++++++++++++++++ register-sw.js | 12 ++++++++ 10 files changed, 230 insertions(+), 14 deletions(-) create mode 100644 firebase-chat-functions.js create mode 100644 firebase-config.js create mode 100644 profile.js create mode 100644 register-sw.js diff --git a/.DS_Store b/.DS_Store index 9a685a547568c0d4425cc2e4f7e220983144e383..d3c48e565cb2d411d08ab18003e2124bc1f94227 100644 GIT binary patch delta 107 zcmZp1XfcprU|?W$DortDU=RQ@Ie-{Mvv5r;6q~50$SAZiU^g?P&}JTieCEj;h07*3 th%IL4;1Fa6DgpulZXn?bQophAJM(0I8BdUI1}2C}Aj26p$Mei#1_0ZK5p)0m delta 151 zcmZoMXmOBWU|?W$DortDU;r^WfEYvza8E20o2aMAD7-OXH}hr%jz7$c**Q2SHn1=X zZ{}giXV&IsC}1dJ$Y)4n$YjW2NM+DtNMWelcome 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