Gainsight/NP_Root_Startpage/app.js

/*****************/
/* EDITABLE INFO */
/*****************/

/* -------------------------------------------------------- */

const NAME = "Norm";

const CARDS = [
  {
    name: "Northpass AWS",
    icon: "ri-admin-line",
    link: "https://app.northpass.com/admin",
  },
  {
    name: "Northpass Azure",
    icon: "ri-takeaway-line",
    link: "https://app2.northpass.com/admin",
  },
  {
    name: "Gmail",
    icon: "ri-mail-line",
    link: "https://gmail.com",
  },
  {
    name: "Calendar",
    icon: "ri-calendar-line",
    link: "https://calendar.google.com",
  },
  {
    name: "Hubspot",
    icon: "ri-space-ship-line",
    link: "https://app.hubspot.com/reports-dashboard/392014/view/8969543",
  },
  {
    name: "Jira - SE Board",
    icon: "ri-open-arm-fill",
    link: "https://northpass.atlassian.net/jira/software/c/projects/ES/boards/1",
  },
  {
    name: "Confluence",
    icon: "ri-stack-fill",
    link: "https://northpass.atlassian.net/wiki/home",
  },
  {
    name: "Chili Piper - 30 Min",
    icon: "ri-calendar-2-line",
    link: "https://northpass.na.chilipiper.com/book/me/norm-rasmussen",
    clipboard: true,
  },
  {
    name: "Looker - External",
    icon: "ri-bubble-chart-line",
    link: "https://northpass.looker.com/folders/4976",
  },
  {
    name: "Looker - Internal",
    icon: "ri-bubble-chart-fill",
    link: "https://northpasshq.looker.com/dashboards/21",
  },
];
/* -------------------------------------------------------- */

/******************/
/* CLOCK FUNCTION */
/******************/

const DAYS = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
];

const MONTHS = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
];

const updateDate = () => {
  // Create a new Date object and get the complete Date/Time information
  const completeDate = new Date();

  // Time Variables
  let currentHour = formatDigit(completeDate.getHours());
  let currentMinute = formatDigit(completeDate.getMinutes());

  // Date Variables
  let currentDay = completeDate.getDay();
  let currentNumber = completeDate.getDate();
  let currentMonth = completeDate.getMonth();
  let currentYear = completeDate.getFullYear();

  // Update the Time
  currentTime.innerHTML = `${
    currentHour % 12 == 0 ? "12" : currentHour % 12
  }:${currentMinute} ${currentHour > 11 ? "PM" : "AM"}`;

  // Update the Date
  currentDate.innerHTML = `${DAYS[currentDay]} ${currentNumber}, ${MONTHS[currentMonth]} ${currentYear}`;

  // Create a Loop
  setTimeout(() => {
    updateDate();
  }, 1000);
};

const formatDigit = (digit) => {
  return digit > 9 ? `${digit}` : `0${digit}`;
};

/******************/
/* CARDS FUNCTION */
/******************/

const printCards = () => {
  for (const card of CARDS) {
    let currentCard = document.createElement("a");
    let currentCardText = document.createElement("p");
    currentCardText.appendChild(document.createTextNode(card.name));
    let currentCardIcon = document.createElement("i");
    currentCardIcon.classList.add(card.icon);

    // Style the Card Element
    currentCard.classList.add("card");
    currentCard.href = card.link;

    // Handle the click event
    currentCard.addEventListener("click", async (event) => {
      // If the card doesn't have `clipboard: true` don't do anything
      if (!card.clipboard) return;

      // Prevent the page from opening
      event.preventDefault();
      // Copy the href to the clipboard
      try {
        await navigator.clipboard.writeText(card.link);
        currentCard.blur();
        currentCardText.innerText = "Saved to clipboard!";
        setTimeout(() => {
          currentCardText.innerText = card.name;
        }, 1500);
      } catch {
        currentCardText.innerText = "Unable to copy";
        setTimeout(() => {
          currentCardText.innerText = card.name;
        }, 1500);
      }
    });

    // Style the Icon
    currentCardIcon.classList.add("card__icon");

    // Style the Text
    currentCardText.classList.add("card__name");

    currentCard.append(currentCardIcon);
    currentCard.append(currentCardText);
    cardContainer.appendChild(currentCard);
  }
};

/****************/
/* STARTER CODE */
/****************/

userName.innerHTML = NAME;
printCards();
updateDate();