~

yuh19027 · Mar 10, 2020 · e3253cd · e3253cd
1 parent 2e9b2ea
commit e3253cd
Show file tree

Hide file tree

Showing 10 changed files with 230 additions and 14 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git 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;
-}
+}
+
+.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
@@ -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())})
diff --git a/firebase-config.js 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
@@ -7,19 +7,42 @@
         <title>Welcome to Chatmate!</title>
         <link href="main.css?version=2" rel="stylesheet">
         <link rel="manifest" href="manifest.json?version=2">
+        <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
     </head>
     <body>
 
         <header>
             <a><img src="imgs/more.png" alt="Menu Icon" height = 20px width = 30px></a>
-            <p><strong>Welcome to Chatmate! &nbsp</strong><span id="usernameInput" contenteditable="true">{UserName}</span></p>
+            <p>
+                <strong>Welcome to Chatmate! &nbsp</strong>
+                <img class="smallImage" src="#" id="userProfilePicDisplay"/>
+                <span id="usernameDisplay" contenteditable="true">{UserName}</span>
+                <span class="small" id="userStatusDisplay">{Status}</span>
+            </p>
             <a href="profile.html"><img src="imgs/profile.png" alt="Profile Icon" height = 30px width = 25px></a>
         </header>
         <div id="chatBox"></div>
         <div id="chatInput">
             <input id="newMsg" type="text" placeholder="type a message!">
             <button id="sendBtn">Send</button>
         </div>
+
+
+
+
+        <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
+        <script src="https://www.gstatic.com/firebasejs/7.9.2/firebase-app.js"></script>
+
+        <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
+        <script src="https://www.gstatic.com/firebasejs/7.9.2/firebase-analytics.js"></script>
+
+        <!-- Add Firebase products that you want to use -->
+        <script src="https://www.gstatic.com/firebasejs/7.9.2/firebase-auth.js"></script>
+        <script src="https://www.gstatic.com/firebasejs/7.9.2/firebase-firestore.js"></script>
+        <script src="firebase-config.js"></script>
+        <script src="register-sw.js"></script>
+
+        <script src="firebase-chat-functions.js"></script>
         <script src="main.js?version=2"></script>
     </body>
 </html>
diff --git 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;;
 }
diff --git 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");
-  });
+  });
+
+
diff --git a/profile.html b/profile.html
@@ -5,13 +5,42 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="css/profile.css" rel="stylesheet">
     <link rel="manifest" href="manifest.json?version=2">
+    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
     <title>Profile</title>
 </head>
 <body>
     <header>
         <a href="index.html"><img src="imgs/back.png" alt="Back Icon" height = 40px weight = 40px></a>
-        <img class="profile" src="imgs/profile-img.png" alt="headshot" height = 100px weight = 100px>
-        <p><strong>Yucheng Hang</strong></p>
+        <div class="profile">
+            <img class="smallImage" src="#" id="userProfilePicDisplay"/>
+            <br><br>
+            <div id="usernameDisplay"></div>
+            <br>
+            <div id="userStatusDisplay"></div>
+        </div>
+
     </header>
+
+    <div class="input">
+        <p>Username: <input type="text" placeholder="Display Name" name="UserName" id="usernameInput"></p>
+        <p>Status: <input type="text" placeholder="Status Message" name="StatusMessage" id="statusInput"></p>
+        <p><input type="file" id="profilePicInput" name="profilePicInput"></p>
+        <button id="profileSaveInput">Save Profile</button>
+    </div>
+
+    <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
+    <script src="https://www.gstatic.com/firebasejs/7.9.2/firebase-app.js"></script>
+
+    <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
+    <script src="https://www.gstatic.com/firebasejs/7.9.2/firebase-analytics.js"></script>
+
+    <!-- Add Firebase products that you want to use -->
+    <script src="https://www.gstatic.com/firebasejs/7.9.2/firebase-auth.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/7.9.2/firebase-firestore.js"></script>
+    <script src="firebase-config.js"></script>
+    <script src="register-sw.js"></script>
+
+    <script src="profile.js?version=2"></script>
+    <script src="main.js?version=2"></script>
 </body>
 </html>
diff --git a/profile.js 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;
diff --git a/register-sw.js 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.');
+  }