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.
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 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 usernameDisplay = document.querySelector("#usernameDisplay");
let userStatusDisplay = document.querySelector("#userStatusDisplay");
let userProfilePicDisplay = document.querySelector("#userProfilePicDisplay");
let sendButton = document.querySelector("#sendBtn");
let notifSound = 'notification.mp3';
let notifSoundElement = new Audio(notifSound);
    

usernameDisplay.innerHTML = userName;
userStatusDisplay.innerHTML = userStatus;
userProfilePicDisplay.src = userProfilePic;

function clearChatInput() {
  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();

let curr_time = new Date();
let time_str = curr_time.getHours().toString() + ":" + curr_time.getMinutes().toString();


//display message
function displayNewMessage(msg) {
  var newMsgUsername = document.createElement('h4');
  var newMsgP = document.createElement("p");

  // user's message on the right while others' message on the left
  if(msg.sentBy == localStorage.userName){
    newMsgUsername.classList.add("user-name");
    newMsgP.classList.add("user-message");
  }else{
    newMsgUsername.classList.add("other-name");
    newMsgP.classList.add("other-message");
  }


  

  newMsgUsername.innerHTML ="<strong>" + msg.sentBy + "</strong>" + "<br>" +  "<span class=\"time-date\">" + msg.time_str + "</span>"+ " " + "<span class=\"time-date\">" + msg.date_str + "</span>";
  newMsgP.innerHTML = msg.message;
  chatBox.appendChild(newMsgUsername);
  chatBox.appendChild(newMsgP);
  
  window.navigator.vibrate(200);

  notifSoundElement.play();

  chatBox.scrollTop = chatBox.scrollHeight;

  clearChatInput();
}


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




function makeNewMessageFromLocalUser() {
  let usrMsg = {
    sentBy: userName,
    date_str: month.toString() + "/" + curr_date.getDate().toString() + "/" + curr_date.getFullYear().toString(),
    //dateStamp: Date.now(),
    message: newMsgInput.value
  }

  if(usrMsg.message !== "") {
    //allMessages.push(usrMsg);
    // end make message
    displayNewMessage(usrMsg);
    saveMessageToFirebase(usrMsg);
  }
}
watchFirebaseForChanges(
  function(msg){
      displayNewMessage(msg.data())
  }
);
/** All the triggers and event listener assignments down here... */

// assign the "Make New Message" function to the button click
document.querySelector("#sendBtn").addEventListener('click', function(){
  makeNewMessageFromLocalUser()
});

// since we're not using a real form, assign it to the "keyup return" of the message input too

document.querySelector("#newMsg").addEventListener('keyup', function(e) {
  if (e.keyCode === 13) {
      makeNewMessageFromLocalUser();
  }
});

// when username input is changed, update localstorage and global variable
// usernameDisplay.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");
// });

sendButton.addEventListener("click", function () {
  var msgObj = {
      dateStamp:Date.now(),
      message: inputBox.value,
      sentBy: username
  }

  saveMessageToFirebase(msgObj);

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