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 allMessages = [];
let firstName = localStorage.getItem('firstName') || "Me";
let lastName = localStorage.getItem('lastName') ;
let status = localStorage.getItem('status') || "Enter a status";
let profilePicInput = document.querySelector("#profilePicInput");
let profilePic = localStorage.getItem("userProfilePic") || "circle.png";
let userProfilePicDisplay = document.querySelector("#userProfilePicDisplay");
let newMsgInput = document.querySelector("#newMsg");
let chatBox = document.querySelector("#box");
let notifSound = 'bleep.mp3';
let notifSoundElement = new Audio(notifSound);
let meBox = document.querySelector("#me");
let sendBtn = document.querySelector("#btn-send");
let today = new Date();


//clears chat input after send button is hit
function clearChatInput(){
  newMsgInput.value = "";
  newMsgInput.focus();
}

//displays message to viewer
function displayNewMessage(msg){
  let actualTimestamp = new Date(msg.dateStamp);
  let month = actualTimestamp.getMonth() + 1;
  var minsWithZero = actualTimestamp.getMinutes().toString().padStart(2, '0');
    
  let shortTimestamp = month.toString() + "/" + actualTimestamp.getDate().toString().padStart(2, '0') + " at " + actualTimestamp.getHours().toString() + ":" + minsWithZero;
  if(msg.sentBy == firstName){
    var newMsgP = document.createElement('p');
    newMsgP.classList.add("me-box");
    newMsgP.innerHTML = "<strong>" + msg.sentBy + "</strong> " + "<br>" + msg.message;
    var timeP = document.createElement('span');
    timeP.innerHTML = shortTimestamp;
    chatBox.appendChild(newMsgP);
    chatBox.appendChild(timeP);
    newMsgP.scrollIntoView();
  }
  else{
    var newMsgP = document.createElement('p');
    newMsgP.classList.add("people-box");
    newMsgP.innerHTML = "<strong>" + msg.sentBy + "</strong> " + "<br>" + msg.message;
    var timeP = document.createElement('span');
    timeP.innerHTML = shortTimestamp;
    chatBox.appendChild(newMsgP);
    chatBox.appendChild(timeP);
    newMsgP.scrollIntoView();
  }
}


//when send button click 
  sendBtn.addEventListener("click", function() {
    var msgObj = {
      dateStamp: Date.now(),
      message: newMsgInput.value,
      sentBy: firstName
    }
  
    saveMessageToFirebase(msgObj);
    notifSoundElement.play();
    clearChatInput();
  })


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


// saves profile picture locally
function saveProfileImageLocally() {
  if (profilePicInput.files && profilePicInput.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) {
          localStorage.setItem("userProfilePic", reader.result);
          newProfilePic();
      }
      reader.readAsDataURL(profilePicInput.files[0]); 
  }
}

 
// Updates profile information
function update(){
  var status_input = document.getElementById("status").value;
  localStorage.setItem("status", status_input);
  status = localStorage.getItem("status");

  var firstName_input = document.getElementById("fname").value;
  localStorage.setItem("firstName", firstName_input);
  firstName = localStorage.getItem("firstName");

  var lastName_input = document.getElementById("lname").value;
  localStorage.setItem("lastName", lastName_input);
  lastName = localStorage.getItem("lastName");

  saveProfileImageLocally();
  
}

// Updates name "Hello, (your name)"
function proName(){
  document.getElementById("profileName").innerHTML = firstName;
  document.getElementById("status").innerHTML = status;

}

function newProfilePic(){
  document.getElementById("userProfilePicDisplay").src = profilePic;
}

function homeName(){
  document.getElementById("profileName").innerHTML = firstName;
  document.getElementById("userProfilePicDisplay").src = profilePic;
}

function inputFill(){
  document.getElementById("fname").value = firstName;
  document.getElementById("lname").value = lastName;
  document.getElementById("status").value = status;
}