changes

met18001 · Mar 12, 2020 · 14267df · 14267df
1 parent a25763b
commit 14267df
Show file tree

Hide file tree

Showing 9 changed files with 231 additions and 17 deletions.
diff --git a/firebase.html b/firebase.html
@@ -0,0 +1,55 @@
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="theme-color" content="#f00" />
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>DMD 3440 - Room of Chat</title>
+        <link rel="manifest" href="manifest.json?version=2">
+    </head>
+    <body>
+        <div id="chatLog"></div>
+<style>
+    #chatLog{
+        max-height: 80vh;
+        overflow: scroll;
+    }
+    .myMessage{
+        position: fixed;
+        width: 100%;
+        bottom: 0px;
+    }
+</style>
+
+    <div id="chatLog"></div>
+    <div>My Profile pic:
+        <input type="file" id="profilePic">
+        <button id="saveProfile"></button>
+
+    </div>
+
+    </div>
+
+
+    <div class="myMessage">
+        <input type="text" id="inputBox">
+        <button id="sendButton">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="js/firebase-config.js"></script>
+        <script src="js/register-sw.js"></script>
+        <script src="js/profile.js"></script>
+        <script src="js/firebase-chat-functions.js"></script>
+        <script src="js/demo.js"></script>
+
+    </body>
+</html>
diff --git a/index.html b/index.html
@@ -16,7 +16,7 @@
     <div class="box">
         <header><h1>Sending messages as <img class="smallImage" src="#" id="profilePicInput"/><a href="profile.html"><span id="usernameInput">{UserName}</span></a> <span class="small" id="statusInput">{Status}</span></h1></header>
         <header><h1>~Meira's Mobile App Chat Room~</h1></header>
-        <a href="https://github.uconn.edu/pages/met18001/mobile-app-chat-app/profile.html">Click!<img src="img/cat.png" alt=""></a>
+        <a href="https://github.uconn.edu/pages/met18001/mobile-app-chat-app/profile.html">Click!<img class="smallImage" src="#" id="profilePicInput"/> alt=""></a>
     </div>   
 
         <div id="chatBox">
@@ -25,6 +25,19 @@
             <button id="sendBtn">Send messege</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="js/firebase-config.js"></script>
+        <script src="js/register-sw.js"></script>
+        <script src="js/firebase-chat-functions.js"></script>
         <script src="js/main.js"></script>
     </body>
 </html>
diff --git a/js/demo.js 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();
+});
diff --git a/js/firebase-chat-functions.js 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())})
diff --git a/js/firebase-config.js 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();
diff --git 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
@@ -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
@@ -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/profile.html b/profile.html
@@ -20,5 +20,17 @@
     </p>
 </div>
 </body>
+
+<!-- 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="js/firebase-config.js"></script>
+<script src="js/register-sw.js"></script>
 <script src="js/profile.js"></script>
 </html>