what's up

jrs06005 · Mar 5, 2020 · d5e5386 · d5e5386
1 parent 294cc33
commit d5e5386
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 1 deletion.
diff --git a/demo.html b/demo.html
@@ -0,0 +1,54 @@
+<!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>DMD 3440 - Room of Chat Demo</title>
+        <link rel="manifest" href="manifest.json?version=2">
+        <style>
+            #chatLog {
+                max-height: 80vh;
+                overflow: scroll;
+            }
+            .myMessage {
+                position: fixed;
+                width:100%;
+                bottom:0px;
+            }
+        </style>
+    </head>
+    <body>
+
+        <div id="chatLog"></div>
+        <div> My profile pic:
+            <input type="file" id="profilePic">
+            <button id="saveProfile">Save Profile Pic</button>
+            <img src="" id="profilePicDisplay" alt="Picture of me">
+        </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="firebase-config.js"></script>
+
+        <script src="register-sw.js"></script>
+
+        <script src="firebase-chat-functions.js"></script>
+        <script src="demo.js"></script>
+    </body>
+</html>
diff --git a/demo.js b/demo.js
@@ -0,0 +1,59 @@
+// var initialMessages = getAllMessagesFromFirebase();
+// console.log(initialMessages);
+var username = "Joel";
+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: "Joel"
+}
+
+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/firebase-chat-functions.js b/firebase-chat-functions.js
@@ -26,4 +26,4 @@ function watchFirebaseForChanges(callBack) {
 
 
 //getAllMessagesFromFirebase();
-watchFirebaseForChanges(function(msg){displayNewMessage(msg.data())})
+//watchFirebaseForChanges(function(msg){displayNewMessage(msg.data())})
diff --git a/joel.jfif b/joel.jfif