Refactored JavaScript files so that Events page sources meeting data from vrms_data.json

_includes/events-page/right-col-content-check.html

@@ -0,0 +1,32 @@
+<h3 class="event-title title4">
+    <img class="vector-img" src="../assets/images/hack-nights/meetings.svg" alt="">
+    <span><span>Online Project</span> <span>Team Meetings</span></span>
+</h3>
+<div class="mobile-dropdown">
+    <div class="meetup-steps-2">
+        <div id="img-content">
+            <img class="step-img-2" src="../assets/images/hack-nights/org-projects.png" alt="">
+        </div>
+        <div id="text-content-1">
+            <p>
+                Please review the listing of project team meeting times to find a
+                project that fits your schedule. You are welcome to attend a project
+                team meeting after you have completed
+                <a href="https://www.hackforla.org/getting-started" target="_blank">Onboarding</a>.
+            </p>
+        </div>
+    </div>
+    <div class="days-display-1">
+        <div id="userTimeZone" class="userTimeZone"></div>
+        {% assign days-of-week =
+        "Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday" | split: "," %}
+        {% for day in days-of-week %}
+        <div id="{{day}}">
+            <h4 class="day-header-1 title7">{{day}}</h4>
+            <ul id="{{day}}-List" class="schedule-list-1"></ul>
+        </div>
+        {% endfor %}
+    </div>
+</div>
+
+<script src="../../assets/js/right-col-content-check.js" type="module"></script>

assets/js/events-check.js

@@ -0,0 +1,45 @@
+const locationsDropDown = document.querySelector(".getting-started-mobile-page");
+const showingLocations = document.querySelector(".mobile-locations-dropdown");
+const showContent = document.querySelectorAll(".event-title");
+const showLocations = document.querySelector(".event-title-1");
+
+showLocations.addEventListener("click", function () {
+  this.classList.toggle("active");
+  if (showingLocations.style.display == "block") {
+    showingLocations.style.display = "none";
+  } else {
+    showingLocations.style.display = "block";
+  }
+});
+
+for (let i = 0; i < showContent.length; i++) {
+  showContent[i].addEventListener("click", showingDropDown);
+}
+
+function showingDropDown() {
+  if(document.body.clientWidth<767){
+  this.classList.toggle("active");
+    let dropDown = this.nextElementSibling;
+    if (dropDown.style.display === "block") {
+      dropDown.style.display = "none";
+    } else {
+      dropDown.style.display = "block";
+    }
+  }
+}
+document.querySelector('.flex-page-card').addEventListener('resize',handleScreenResize)
+function handleScreenResize(){
+  if(document.body.clientWidth>767){
+    const columns = document.querySelectorAll('.mobile-dropdown');
+    for(let column of columns){
+      column.style.display='block';
+      column.previousElementSibling.classList.remove('active');
+    }
+  }
+  else{
+    const columns = document.querySelectorAll('.mobile-dropdown');
+    for(let column of columns){
+      column.style.display='none';
+  }
+}
+}

assets/js/project.js

@@ -1,13 +1,14 @@
 ---
 ---
-
 /* 
-  Fetch the correct project
+Fetch the correct project
 */
 {% assign projects = site.data.external.github-data %}
 // Escapes JSON for injections. See: #2134. If this is no longer the case, perform necessary edits, and remove this comment.
 let projects = JSON.parse(decodeURIComponent("{{ projects | jsonify | uri_escape }}"));
 
+import { vrmsDataFetch, localeTimeIn12Format } from './utility/vrms-events.js';
+
 /*
   Passing script attributes from html script tag to JS file
   https://www.gun.io/blog/pass-arguments-to-embedded-javascript-tutorial-example
@@ -18,6 +19,7 @@ const project = findProjectById(projectId);
 
 function findProjectById(identification){
     // Starts at 1 now since the first element is a time stamp
+
     for (let i = 1; i < projects.length; i++){
         let itemId = projects[i].id.toString();
         if(itemId == identification){
@@ -135,101 +137,31 @@ let meetingsHeader = document.querySelector('.meetingsHeader');
 let projectTitle = scriptTag.getAttribute("projectTitle");
 let meetingsFound = [];
 
-// Grab the meeting time data from the vrms_data.json file
-{% assign vrmsData = site.data.external.vrms_data %}
-// Escapes JSON for injections. See: #2134. If this is no longer the case, perform necessary edits, and remove this comment.
-const vrmsData = JSON.parse(decodeURIComponent("{{ vrmsData | jsonify | uri_escape }}"));
-
-// Helper function to sort VRMS data by day of the week from "date" key and meeting time from "startTime" key
-function sortByDate(scheduleData) {
-    const map = {
-        'Mon': 1,
-        'Tue': 2,
-        'Wed': 3,
-        'Thu': 4,
-        'Fri': 5,
-        'Sat': 6,
-        'Sun': 7
-     };
-
-     scheduleData.sort(function(a, b) {
-        const day1 = new Date(a.date).toString().substring(0, 3);
-        const day2 = new Date(b.date).toString().substring(0, 3);
-
-        return map[day1] - map[day2];
-     });
-
-     scheduleData.sort(function(a, b) {
-        const day1 = new Date(a.date).toString().substring(0, 3);
-        const day2 = new Date(b.date).toString().substring(0, 3);
-        const time1 = new Date(a.startTime).toString().substring(16, 21);
-        const time2 = new Date(b.startTime).toString().substring(16, 21);
-
-        if (day1 === day2) {
-            if (time1 > time2) {
-                return 1;
-            } else {
-                return -1;
-            }
-        } else {
-            return 1;
-        }
-     });
-}
-
 // Loops through the VRMS data and inserts each meeting time into the HTML of the correct project page
 function appendMeetingTimes(scheduleData) {
-
-    sortByDate(scheduleData);
-
     for (const event of scheduleData) {
         try {
-            const startTime = timeFormat(new Date(event.startTime));
-            const endTime = timeFormat(new Date(event.endTime));
+            const startTime = localeTimeIn12Format(event.startTime);
+            const endTime = localeTimeIn12Format(event.endTime);
             const projectName = event.project.name;
             const name = event.name;
             const day = new Date(event.date).toString().substring(0,3);
+
             // only append the meeting times to the correct project page
             if (projectTitle.toLowerCase() === projectName.toLowerCase()) {
                 meetingsList.insertAdjacentHTML("beforeend", `<li class="meetingTime">${day} ${startTime} - ${endTime} <br>${name}</li>`);
                 meetingsFound.push(day);
             }
-
         } catch (e) {
             console.error(e);
         }
     } 
 }
 
-appendMeetingTimes(vrmsData);
-
+vrmsDataFetch("project", appendMeetingTimes)
 
 if (meetingsFound.length >= 1) {
     meetingsHeader.insertAdjacentHTML("beforeend", '<strong class="meetings">Meetings</strong>');
     document.querySelector('#userTimeZone').insertAdjacentHTML('afterbegin', timeZoneText());
 
-}
-
-// Formats time to be readable
-function timeFormat(time) {
-    let hours = time.getHours();
-    let minutes = time.getMinutes();
-
-    if (minutes == 0) {
-        minutes = minutes + "0";
-    }
-
-    if (hours < 12) {
-        return `${hours}:${minutes} am`;
-    }
-    else if (hours > 12){
-        hours = hours - 12;
-        return `${hours}:${minutes} pm`;
-    }
-    else if (hours = 12){
-        return `${hours}:${minutes} pm`;
-    } else {
-        return `${hours}:${minutes} am`;
-    }
-
 }

assets/js/right-col-content-check.js

@@ -0,0 +1,25 @@
+import { getEventData, insertEventSchedule } from "./utility/api-events.js";
+
+/**
+ * This type of function is called an IIFE function. The main function is the primarily controller that loads the recurring events on this page.
+ * Refer: https://developer.mozilla.org/en-US/docs/Glossary/IIFE
+ */
+(async function main() {
+  const eventData = await getEventData();
+
+  //Displays/Inserts event schedule to DOM
+  if (document.readyState === "loading") {
+    document.addEventListener(
+      "DOMContentLoaded",
+      () => { insertEventSchedule(eventData, "events"); }
+    );
+  }
+  else {
+    insertEventSchedule(eventData, "events");
+  }
+
+  //Displays/Inserts the user's time zone in the DOM
+  document
+    .querySelector("#userTimeZone")
+    .insertAdjacentHTML("afterbegin", timeZoneText());
+})();

assets/js/right-col-content.js

@@ -1,11 +1,10 @@
-import { getEventData, insertEventSchedule } from "./utility/api-events.js";
-
+import { vrmsDataFetch, localeTimeIn12Format } from "./utility/vrms-events.js"
 /**
  * This type of function is called an IIFE function. The main function is the primarily controller that loads the recurring events on this page.
  * Refer: https://developer.mozilla.org/en-US/docs/Glossary/IIFE
  */
-(async function main() {
-  const eventData = await getEventData();
+(function main() {
+  const eventData = vrmsDataFetch("events")
 
   //Displays/Inserts event schedule to DOM
   if (document.readyState === "loading") {
@@ -22,4 +21,105 @@
   document
     .querySelector("#userTimeZone")
     .insertAdjacentHTML("afterbegin", timeZoneText());
-})();
+})();
+
+/**
+ * Inserts the recurring events into the html
+ * @param {Object} eventData - An array objects of the type returned by displayObject()
+ * @param {String} page - page that is using eventData ("events" or "project-meetings")
+ */
+function insertEventSchedule(eventData, page) {
+
+    const formatedEvents = formatEventData(eventData)
+
+    for (const [key, value] of Object.entries(formatedEvents)) {
+      let placeToInsert = document.querySelector(`#${key}-List`);
+      placeToInsert.innerHTML = "";
+      // check if the day has any events
+      if (!value.length) {
+        placeToInsert.insertAdjacentHTML(
+          "beforeend",
+          `<li>There are no meetings scheduled.</li>`
+        );
+      } else {
+        value.forEach((event) => {
+          if (event) {
+            // If a project doesn't have an hflaWebsiteUrl, redirect to the project's Github page
+            if (event.hflaWebsiteUrl == "") {
+                event.hflaWebsiteUrl = event.githubUrl
+            }
+            let eventHtml;
+            // insert the correct html for the current page
+            if (page === "events") {
+                eventHtml = `<li>${event.start} - ${event.end} </li><li><a href="${event.hflaWebsiteUrl}">${event.name}</a> ${event.meetingName}</li>`;
+            } else {
+              if(event.dsc != "") event.meetingName += ", ";
+                eventHtml = `<li>${event.start} - ${event.end} <a href="${event.hflaWebsiteUrl}">${event.name}</a> ${event.meetingName} ${event.dsc}</li>`;
+            }
+            placeToInsert.insertAdjacentHTML("beforeend", eventHtml);
+          }
+        });
+      }
+    }
+  }
+
+  /**
+   * Formats event data
+   * @param  {Object} data - array of event objects
+   * @return {Object} filtered and sorted data
+   */
+  function formatEventData(data) {
+    const filteredData = filterVrmsData(data);
+    return filteredData
+
+  }
+
+  /**
+   * Filters out the needed data from the vrmsData returned from vrmsDataFetch
+   */
+  function filterVrmsData(responseData) {
+    const return_obj = {
+      Monday: [],
+      Tuesday: [],
+      Wednesday: [],
+      Thursday: [],
+      Friday: [],
+      Saturday: [],
+      Sunday: [],
+    };
+    responseData.forEach((item) => {
+      let day_of_week = getDayString(item.date);
+      return_obj[day_of_week].push(display_object(item));
+    });
+    return return_obj;
+  }
+
+  /**
+   * @param {Date} date - A valid javscript time string. Example:  "2020-05-13T02:00:00.000Z"
+   * @return {String} - The name of the day represented by the time string. Example 2020-05-13 was a wednesday. I.e rv = 'Wednesday'
+   */
+  function getDayString(date) {
+    let new_date = new Date(date); 
+    let weekday = new_date.getDay();
+    let options = { weekday: "long" };
+    return new Intl.DateTimeFormat("en-US", options).format(new_date);
+  }
+
+  /**
+   * Function that represent the individual object extracted from the api
+   */
+  function display_object(item) {
+    if (item?.project?.name !== "Hack4LA" && !/^Test\b/i.test(item?.project?.name)) { 
+      const rv_object = {
+        meetingName: item.name,
+        name: item.project.name,
+        dsc: item.description,
+        start: localeTimeIn12Format(item.startTime),
+        end: localeTimeIn12Format(item.endTime),
+        hflaWebsiteUrl: item.project.hflaWebsiteUrl,
+          githubUrl: item.project.githubUrl,
+        };
+        return rv_object;
+    }
+  }
+