Source: scripts/summary.js

  1. /**
  2.  * Initializes the page by loading the necessary components and rendering
  3.  * the contact list.
  4.  *
  5.  * @returns {Promise<void>} A promise that resolves when the page has been
  6.  * initialized.
  7.  */
  8. async function init() {
  9.   showGreeting();
  10.   loadComponents();
  11.   await getTodosFromData("guest");
  12.   populateCounters(globalTodos);
  13.   updateGreeting();
  14. }
  16. /**
  17.  * Loads all necessary components into the page.
  18.  *
  19.  * Currently, this function only loads the header and navbar components.
  20.  * @returns {void}
  21.  */
  22. function loadComponents() {
  23.   loadHeader();
  24.   loadNavbar();
  25. }
  27. /**
  28.  * Loads the header component into the element with the id "header".
  29.  * If no element with that id exists, this function does nothing.
  30.  * @returns {void}
  31.  */
  32. function loadHeader() {
  33.   const header = document.getElementById("header");
  34.   if (!header) return;
  36.   header.innerHTML = getHeaderTemplate();
  37. }
  39. /**
  40.  * Loads the navbar component into the element with the id "navbar".
  41.  * If no element with that id exists, this function does nothing.
  42.  *
  43.  * @returns {void}
  44.  */
  45. function loadNavbar() {
  46.   const navbar = document.getElementById("navbar");
  47.   if (!navbar) return;
  48.   navbar.innerHTML = getNavbarTemplate("summary");
  49. }
  51. /**
  52.  * Populates the DOM elements with counts of different types of todos and user information.
  53.  *
  54.  * @param {Array} todos - An array of todo objects, each containing state, priority, and other properties.
  55.  */
  56. function populateCounters(todos) {
  57.   updateTodoCounts(todos);
  58.   updateUserInfo();
  59.   updateDueDate(todos);
  60. }
  62. /**
  63.  * Updates the count of todos in different states.
  64.  *
  65.  * @param {Array} todos - An array of todo objects.
  66.  */
  67. function updateTodoCounts(todos) {
  68.   document.getElementById("todo-count").textContent = countTodos(todos, "todo");
  69.   document.getElementById("done-count").textContent = countTodos(todos, "done");
  70.   document.getElementById("progress-count").textContent = countTodos(todos, "progress");
  71.   document.getElementById("feedback-count").textContent = countTodos(todos, "feedback");
  72.   document.getElementById("urgent-count").textContent = countUrgentTodos(todos);
  73.   document.getElementById("total-count").textContent = todos.length;
  74. }
  76. /**
  77.  * Updates the user information displayed on the page.
  78.  */
  79. function updateUserInfo() {
  80.   var nameElement = document.getElementById("name");
  81.   if (currentUser.name.toLowerCase() !== "guest") {
  82.     nameElement.textContent = currentUser.name;
  83.   } else {
  84.     nameElement.textContent = "";
  85.   }
  86. }
  88. /**
  89.  * Updates the due date display and its label based on the earliest deadline of urgent todos.
  90.  *
  91.  * @param {Array} todos - An array of todo objects.
  92.  */
  93. function updateDueDate(todos) {
  94.   const { date } = findEarliestDeadline(todos);
  95.   const dueDateElement = document.getElementById("due-date");
  96.   const deadlineTextElement = document.getElementById("deadline-text");
  98.   if (date !== "No urgent tasks") {
  99.     updateDueDateText(dueDateElement, date);
  100.   } else {
  101.     clearDueDate(dueDateElement, deadlineTextElement);
  102.   }
  103. }
  105. /**
  106.  * Updates the text and color of the due date element and the label text.
  107.  *
  108.  * @param {HTMLElement} dueDateElement - The DOM element for displaying the due date.
  109.  * @param {Date} date - The date of the earliest deadline.
  110.  */
  111. function updateDueDateText(dueDateElement, date) {
  112.   dueDateElement.textContent = date.toLocaleDateString("en-US", {
  113.     year: "numeric",
  114.     month: "long",
  115.     day: "numeric",
  116.   });
  117.   const today = new Date();
  118.   today.setHours(0, 0, 0, 0);
  119.   const isPastDue = date < today;
  120.   dueDateElement.classList.toggle("overdue", isPastDue);
  121.   dueDateElement.classList.toggle("upcoming", !isPastDue);
  122.   const deadlineTextElement = document.getElementById("deadline-text");
  123.   deadlineTextElement.textContent = isPastDue ? "Overdue Deadline" : "Upcoming Deadline";
  124. }
  126. /**
  127.  * Clears the due date display and resets the label text.
  128.  *
  129.  * @param {HTMLElement} dueDateElement - The DOM element for displaying the due date.
  130.  * @param {HTMLElement} deadlineTextElement - The DOM element for displaying the label text.
  131.  */
  132. function clearDueDate(dueDateElement, deadlineTextElement) {
  133.   dueDateElement.textContent = "No urgent Deadline";
  134.   dueDateElement.classList.remove("overdue", "upcoming");
  135.   deadlineTextElement.textContent = "";
  136. }
  138. /**
  139.  * Finds the earliest deadline among urgent todos that are not marked as done.
  140.  *
  141.  * @param {Array} todos - An array of todo objects.
  142.  * @returns {Object} An object containing the earliest deadline as a Date object.
  143.  */
  144. function findEarliestDeadline(todos) {
  145.   const urgentTasks = todos.filter((todo) => todo.priority === "high" && todo.state !== "done");
  146.   if (urgentTasks.length > 0) {
  147.     const earliest = urgentTasks.reduce((earliest, todo) => {
  148.       const todoDate = new Date(todo.date);
  149.       return todoDate < earliest ? todoDate : earliest;
  150.     }, new Date(urgentTasks[0].date));
  151.     return {
  152.       date: earliest,
  153.     };
  154.   }
  155.   return { date: "No urgent tasks" };
  156. }
  158. /**
  159.  * Counts the number of todos in a specific state.
  160.  *
  161.  * @param {Array} todos - An array of todo objects.
  162.  * @param {string} state - The state of the todos to count (e.g., "todo", "done").
  163.  * @returns {number} The count of todos in the specified state.
  164.  */
  165. function countTodos(todos, state) {
  166.   return todos.filter((todo) => todo.state === state).length;
  167. }
  169. /**
  170.  * Counts the number of urgent todos that are not marked as done.
  171.  *
  172.  * @param {Array} todos - An array of todo objects.
  173.  * @returns {number} The count of urgent todos (high priority) that are not done.
  174.  */
  175. function countUrgentTodos(todos) {
  176.   return todos.filter((todo) => todo.priority === "high" && todo.state !== "done").length;
  177. }
  179. /**
  180.  * Updates the greeting message based on the current time of day.
  181.  */
  182. function updateGreeting() {
  183.   const greetingElement = document.getElementById("greeting");
  184.   const currentTime = new Date();
  185.   const currentHour = currentTime.getHours();
  186.   let greeting;
  187.   if (currentHour < 12) {
  188.     greeting = "Good morning";
  189.   } else if (currentHour < 18) {
  190.     greeting = "Good afternoon";
  191.   } else {
  192.     greeting = "Good evening";
  193.   }
  194.   if (currentUser.name.toLowerCase() !== "guest") {
  195.     greeting += ",";
  196.   }
  197.   greetingElement.textContent = greeting;
  198. }
  200. /**
  201.  * Displays the greeting container if the screen width is less than 1080 pixels.
  202.  * The container is visible for 2 seconds, and then fades out.
  203.  * During the animation, body scrolling is disabled.
  204.  *
  205.  * @function showGreeting
  206.  */
  207. function showGreeting() {
  208.   const greetingContainer = document.getElementById("greeting-container");
  209.   if (window.innerWidth < 1080) {
  210.     greetingContainer.classList.add("show");
  211.     setTimeout(() => {
  212.       greetingContainer.classList.add("fade-out");
  213.       setTimeout(() => {
  214.         greetingContainer.style.display = "none";
  215.         document.body.style.overflow = "";
  216.       }, 600);
  217.     }, 2000);
  218.     document.body.style.overflow = "hidden";
  219.   }
  220. }