firebase and stuff

jrs06005 · Mar 3, 2020 · 8cd0e6c · 8cd0e6c
1 parent 5275a9f
commit 8cd0e6c
Show file tree

Hide file tree

Showing 9 changed files with 179 additions and 40 deletions.
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,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();
+
+
diff --git a/index.html b/index.html
@@ -10,12 +10,30 @@
     </head>
     <body>
 
-        <header><h1>Sending messages as <span id="usernameInput" contenteditable="true">{UserName}</span></h1></header>
+        <header><h1>Sending messages as <img class="smallImage" src="#" id="userProfilePicDisplay"/><a href="profile.html"><span id="usernameDisplay">{UserName}</span></a> <span class="small" id="userStatusDisplay">{Status}</span></h1></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
@@ -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
@@ -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 = "<strong>" + msg.sentBy + "</strong>: " + 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");
   });
diff --git a/profile.html b/profile.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="theme-color" content="#f00" />
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Edit Profile</title>
+        <link href="main.css?version=2" rel="stylesheet">
+        <link rel="manifest" href="manifest.json?version=2">
+    </head>
+    <body>
+
+        <header><a href="index.html">Back</a><h1>Edit Profile</h1></header>
+
+        <div>
+            <p><input type="text" placeholder="Display Name" name="UserName" id="usernameInput"></p>
+            <p><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>
+    </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');
+
+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
@@ -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.');
+  }
diff --git 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.