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 chatBox = document.querySelector("#chatbox");
let inputBox = document.querySelector("#newmsg");

// var pictureEndpoint= document.querySelector("#profilePic");

// pictureEndpoint.setAttribute("src",localStorage.userProfilePic)






// //Display the time
// document.getElementById('clock').innerHTML = 
//   hours + " : " + minutes + " " + amPm;

// }

function makeMessage(msg) {

var stagedMessage = document.createElement("div");
var inLineContainer = document.createElement("span");
var name = document.createElement("h2");

var message = document.createElement("p");
var timeStamp = document.createElement("h4");

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


let realTime = new Date(msg.dateStamp);
let hours = realTime.getHours();
let minutes = realTime.getMinutes();

//Add AM and PM system
let amPm = (hours < 12 ) ? "AM" : "PM";
//convert the hours component to 12-hour format
hours = (hours > 12) ? hours - 12 : hours;
//pad the hours, minutes and seconds with leading zeros
hours = ("0" + hours).slice(-2);
minutes = ("0" + minutes).slice(-2);
let timeStr = hours.toString() + ":" + minutes.toString() + " " + amPm;
console.log(timeStr)

if(msg.sentBy == localStorage.userName){
stagedMessage.setAttribute("class", "Me");
}

inLineContainer.setAttribute("class", "people");
 

name.innerHTML=msg.sentBy;
timeStamp.innerHTML=timeStr + " " + dateStr;
message.innerHTML=msg.message;


inLineContainer.appendChild(name);
inLineContainer.appendChild(timeStamp);

stagedMessage.appendChild(inLineContainer);
inLineContainer.appendChild(message);
chatBox.appendChild(stagedMessage);
stagedMessage.scrollIntoView();
//allMessages.push(newMessage);


console.log(allMessages);
}






document.querySelector("#sendBtn").addEventListener('click', () => {
let msg = document.querySelector("#newmsg").value;
  let src = "notification.mp3"
  let audio = new Audio(src);
  audio.play();

document.querySelector("#newmsg").value = "";
document.querySelector("#newmsg").focus();




let userMsg = {
  sentBy: localStorage.userName,
  dateStr: month.toString() + "/" + curr_date.getDate().toString() + "/" + curr_date.getFullYear().toString(),
  // timeStr: curr_time.getHours().toString() + ":" + curr_time.getMinutes().toString(),
  timeStamp: msg.timeStr + " " + msg.dateStr,
  message: msg

  }
  if (localStorage.userName != undefined) {
     saveMessageToFirebase(userMsg);
  } else {
    alert("Set a Username");
  }


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

console.log(new_message);
window.navigator.vibrate(200);


//makeMessage("Me", date_str, msg,localStorage.userName);

});



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