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.

let allMessages = [];

let chatbox = document.querySelector("#chatbox");
let newMsgInput = document.querySelector("#newmsg");
let userName = localStorage.getItem('userName') || "user";
let usernameInput = document.querySelector("#usernameInput");
let userStatus = localStorage.getItem('userStatus') || "update your profile to display a status";
let userStatusDisplay = document.querySelector("#userStatusDisplay");
let notification_sound = new Audio('insight.mp3');
let userProfilePic = localStorage.getItem('userProfilePic');
let sendButton = document.querySelector("#sendBtn");
let userProfilePicDisplay = document.querySelector("#userProfilePicDisplay");
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;

userStatusDisplay.innerHTML = userStatus;
userProfilePicDisplay.src = userProfilePic;
usernameInput.innerHTML = userName;
//console.log(userProfilePic)

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


function clearChatInput() {
  document.querySelector("#newmsg").value = "";
  document.querySelector("#newmsg").focus();
}




// var testMessage = {
//   dateStamp:"983459835498345",
//   message: "Hello test!",
//   sentBy: "Eva"
// }

function displayMessage(msg) {
  let curr_date = new Date(msg.dateStamp);
  let month = curr_date.getMonth() + 1;
  let date_str = month.toString() + "/" + curr_date.getDate().toString() + "/" + curr_date.getFullYear().toString();

  let curr_time = new Date(msg.dateStamp);
  let time_str = curr_time.getHours().toString() + ":" + curr_time.getMinutes().toString();
  
  
    var newMsgP = document.createElement('p');
    var user_name = document.createElement('h4');
    var mydate = document.createElement('h6');
    var proimg = document.createElement('img');
    //proimg.src = userProfilePic;
    mydate.innerHTML =time_str + " " + date_str;
    
    newMsgP.innerHTML = msg.message;
    
    user_name.innerHTML = msg.sentBy;
    
    //console.log(user_name);
    chatbox.append(user_name,mydate,newMsgP);
    //clearChatInput();
    
    chatbox.scrollTop = chatbox.scrollHeight;
    
}

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

        clearChatInput();
    }
);



sendButton.addEventListener("click", function () {
    var msgObj = {
        dateStamp:Date.now(),
        //date_str: month.toString() + "/" + curr_date.getDate().toString() + "/" + curr_date.getFullYear().toString(),
        message: newMsgInput.value,
        sentBy: userName
    }
    if(msgObj.message !== "") {
      allMessages.push(msgObj);
      saveMessageToFirebase(msgObj)
      window.navigator.vibrate(200);
      notification_sound.play();
      clearChatInput();
    }
    
    

    newMsgInput.value = "";
    newMsgInput.focus();

    
});

newMsgInput.addEventListener('keyup', function(e) {
  if (e.keyCode === 13) {
    var msgObj = {
      dateStamp:Date.now(),
      //date_str: month.toString() + "/" + curr_date.getDate().toString() + "/" + curr_date.getFullYear().toString(),
      message: newMsgInput.value,
      sentBy: userName
  }
  if(msgObj.message !== "") {
    allMessages.push(msgObj);
    saveMessageToFirebase(msgObj);
    window.navigator.vibrate(200);
    notification_sound.play();
    clearChatInput();
  }
}
});

usernameInput.addEventListener('blur', function() {
  var newUsername = this.innerHTML;

  localStorage.setItem("userName", newUsername);
  userName = localStorage.getItem("userName");
  

});




//////////////////////////////////////////

// function displayNewMessage(msg) {
//   var newMsgP = document.createElement("p");
//   newMsgP.innerHTML = "<strong>" + msg.sentBy + "</strong>: " + msg.message;
//   chatbox.appendChild(newMsgP);
  
//   window.navigator.vibrate(200);

//   notification_sound.play();
//   clearChatInput();
// }

// function makeNewMessageFromLocalUser() {
//   let usrMsg = {
//     sentBy: userName,
//     //dateStamp: date_str,
//     message: newMsgInput.value
//   }




///////////////////////////////////////////




// sendButton.addEventListener('click', function(){
//   makeNewMessageFromLocalUser()


// });