main.js

// 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";
let chatBox = document.querySelector("#chatBox")
var chatInput = document.querySelector("#chatInput");
var sendBtn = document.querySelector("#sendBtn");
var profilePicInput = document.querySelector("#profilePic");
var saveProfileButton = document.querySelector("#saveProfile");
var profilePicDisplayElement = document.querySelector("#profilePicDisplay");
var profilePic = localStorage.getItem("userProfilePic") || "unknown.jpg";
//let arrayOfallMessages = [];
//const allMessages = arrayOfallMessages.map((obj)=> {return Object.assign({}, obj)});


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.');
  }

var sampleMessage = {
  sentBy:"Meira", 
  dateStamp:"02/20/2020 at 2:50", 
  message:"Hello,this is a message."


}

//displayMessage(sampleMessage); 

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 makeAndDisplaymMessage(sender,dateStamp,text){
  //var newMessage = {
    //sentBy: sender, 
    //dateStamp: dateStamp, 
   // text:text
  //}

  function displayMessage(message) {
    let curr_date = new Date(message.dateStamp);
    let month = curr_date.getMonth() + 1;
    let date_str = month.toString() + "/" + curr_date.getDate().toString() + "/" + curr_date.getFullYear().toString();
    var messageParagraph = document.createElement("p");
    if (message.sentBy == localStorage.userName){
      messageParagraph.style.color = "coral";
    }
    messageParagraph.innerHTML = date_str + " " + message.message + " " + message.sentBy;

    chatBox.appendChild(messageParagraph);
    messageParagraph.scrollIntoView();
    //chatBox.scrollTop = chatBox.scrollHeight;

  };

  watchFirebaseForChanges(
    function(msg){
        displayMessage(msg.data())
    }
  );
  


sendBtn.addEventListener('click', function(){
  var chatInput = document.querySelector("#newMsg"); 
  let src = 'img/soothing_flute.mp3';
  let audio = new Audio(src);
  audio.play();
  window.navigator.vibrate(200);

  var msgObj = {
    dateStamp: Date.now(),
    message: chatInput.value,
    sentBy: username
}

console.log(msgObj);

saveMessageToFirebase(msgObj);

chatInput.value = "";
chatInput.focus();
});


 // displayMessage("me","now", document.querySelector("#newMsg").value);
  //document.querySelector("#newMsg").value = "";
  //document.querySelector("#newMsg").focus();


  //let curr_date = new Date();
  //let month = curr_date.getMonth() + 1;
  //let date_str = month.toString() + "/" + curr_date.getDate().toString() + "/" + curr_date.getFullYear().toString();



  document.getElementById("usernameInput").innerHTML = localStorage.getItem("userName");
  document.getElementById("statusInput").innerHTML = localStorage.getItem("userStatus");
  document.getElementById("profilePicInput").src = localStorage.getItem("userProfilePic");