project-meetings.html

---
layout: default
title: Project Meetings
---
<!-- <div class='content-section'> -->
<div class='project-meetings-banner'>
    <div class='project-meetings-header-text-container'>
        <h1 class='team-meetings-title'>Project Team Meetings</h1>
        <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'>Onboarding</a>.
            Details about a team's meeting can be obtained in each team's slack channel.
        </p>
        <!--<img src="./assets/images/project-meetings-page/project-meetings-banner-image.png" alt="project meetings banner image">-->
    </div>
</div>
<div class='covid-notification-banner'>
    <p class='meetings-message'>All meetings are currently online due to COVID19.</p>
</div>
<div class='content-section calendar-started-page'>
    <div class='calendar-page-card'>
        <div id="Monday">
            <h3 class='day-header'>Monday</h3>
            <ul id="Monday-List" class="schedule-list"></ul>
        </div>
        <div id="Tuesday">
            <h3 class='day-header'>Tuesday</h3>
            <ul id="Tuesday-List" class="schedule-list"></ul>
        </div>
        <div id="Wednesday">
            <h3 class='day-header'>Wednesday</h3>
            <ul id="Wednesday-List" class="schedule-list"></ul>
        </div>
        <div id="Thursday">
            <h3 class='day-header'>Thursday</h3>
            <ul id="Thursday-List" class="schedule-list"></ul>
        </div>
        <div id="Friday">
            <h3 class='day-header'>Friday</h3>
            <ul id="Friday-List" class="schedule-list"></ul>
        </div>
        <div id="Saturday">
            <h3 class='day-header'>Saturday</h3>
            <ul id="Saturday-List" class="schedule-list"></ul>
        </div>
        <div id="Sunday">
            <h3 class='day-header'>Sunday</h3>
            <ul id="Sunday-List" class="schedule-list"></ul>
        </div>
    </div>
    <!-- </div> -->
</div>

<script>
    // Assigns local JSON Data to localData variable
    {% assign localData = site.data.project-meetings-from-vrms | jsonify %}
    let localData = {{ localData }};

    const API_URL = 'https://www.vrms.io/api/recurringevents';

    // Assigns variable to each header by ID
    const mondayList = document.querySelector("#Monday-List");
    const tuesdayList = document.querySelector("#Tuesday-List");
    const wednesdayList = document.querySelector("#Wednesday-List");
    const thursdayList = document.querySelector("#Thursday-List");
    const fridayList = document.querySelector("#Friday-List");
    const saturdayList = document.querySelector("#Saturday-List");
    const sundayList = document.querySelector("#Sunday-List");

    // GET request 
    let calendarFetch = fetch(API_URL, {
        method: 'GET'
    });

    // Function schedules data that is passed in
    function schedule(scheduleData) {
        let daysReceived = [];
        let days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
        let daysMatched = [];

        // Loops through data and assigns information to variables in a readable format
        for (let i = 0; i <= scheduleData.length - 1; i++) {
            let startTime = timeFormat(new Date(scheduleData[i].startTime));
            let endTime = timeFormat(new Date(scheduleData[i].endTime));
            let webURL = scheduleData[i].project.hflaWebsiteUrl;
            let projectName = scheduleData[i].project.name;
            let description = scheduleData[i].description;
            let day = new Date(scheduleData[i].date).toString().substring(0, 3);
            let scheduleClass;

            // Fills up array of days received to later check if any days are missing
            daysReceived.push(day);

            // Checks if days received matches days of the week
            for (let j = 0; j <= daysReceived.length - 1; j++) {
                for (let k = 0; k <= days.length - 1; k++) {
                    if (daysReceived[j] == days[k]) {
                        daysMatched.push(days[k]);
                    }
                }
            }

            // Function that adds data to proper header
            function scheduleDay() {
                let dayList;
                // Assigns different class to data depending if it utilized local JSON file or the VRMS fetch data
                if (scheduleData == localData) {
                    scheduleClass = "localData";
                } else {
                    scheduleClass = "updated";
                }
                if ((day === "Mon")) {
                    dayList = mondayList;
                } else if ((day === "Tue")) {
                    dayList = tuesdayList;
                } else if ((day === "Wed")) {
                    dayList = wednesdayList;
                } else if ((day === "Thu")) {
                    dayList = thursdayList;
                } else if ((day === "Fri")) {
                    dayList = fridayList;
                } else if ((day === "Sat")) {
                    dayList = saturdayList;
                } else if ((day === "Sun")) {
                    dayList = sundayList;
                }

                dayList.insertAdjacentHTML("beforeend",
                    `<li class="${scheduleClass}">${startTime} - ${endTime} <a href="${webURL}">${projectName}</a> ${description}</li>`
                );
            }

            scheduleDay(day);
        }

        // Removes duplicate days from days matched
        let cleanArray = removeDuplicates(daysMatched);

        // Fills up array with days that have nothing scheduled
        let emptyDays = arr_diff(days, cleanArray);

        // Passes in array of days with nothing scheduled
        if (emptyDays) {
            // Function passes in array of days that outputs an li element w/ "There are no meeting scheduled" to days without meetings scheduled
            function scheduleEmpty(emptyDays) {
                for (let a = 0; a <= emptyDays.length - 1; a++) {
                    let emptyDayList;
                    let day = emptyDays[a].toString();
                    // Assigns different class to data depending if it utilized local JSON file or the VRMS fetch data
                    if (scheduleData == localData) {
                        scheduleClass = "localData";
                    } else {
                        scheduleClass = "updated";
                    }
                    if ((day === "Mon")) {
                        emptyDayList = mondayList;
                    } else if ((day === "Tue")) {
                        emptyDayList = tuesdayList;
                    } else if ((day === "Wed")) {
                        emptyDayList = wednesdayList;
                    } else if ((day === "Thu")) {
                        emptyDayList = thursdayList;
                    } else if ((day === "Fri")) {
                        emptyDayList = fridayList;
                    } else if ((day === "Sat")) {
                        emptyDayList = saturdayList;
                    } else if ((day === "Sun")) {
                        emptyDayList = sundayList;
                    }

                    emptyDayList.insertAdjacentHTML("beforeend",
                        `<li class="${scheduleClass}">There are no meetings scheduled.</li>`);
                }
            }
            // Executes empty schedule
            scheduleEmpty(emptyDays)
        }
    }

    // Function removes duplicates in an array
    function removeDuplicates(array) {
        return array.filter((a, b) => array.indexOf(a) === b)
    };

    // Function checks for differences between two arrays
    function arr_diff(a1, a2) {

        let a = [],
            diff = [];

        for (let i = 0; i < a1.length; i++) {
            a[a1[i]] = true;
        }

        for (let i = 0; i < a2.length; i++) {
            if (a[a2[i]]) {
                delete a[a2[i]];
            } else {
                a[a2[i]] = true;
            }
        }

        for (let k in a) {
            diff.push(k);
        }

        return diff;
        // console.log(diff)
    }

    // Function clears the schedule
    function clearSchedule() {
        let prevMonList = mondayList.getElementsByClassName("localData");
        let prevTueList = tuesdayList.getElementsByClassName("localData");
        let prevWedList = wednesdayList.getElementsByClassName("localData");
        let prevThuList = thursdayList.getElementsByClassName("localData");
        let prevFriList = fridayList.getElementsByClassName("localData");
        let prevSatList = saturdayList.getElementsByClassName("localData");
        let prevSunList = sundayList.getElementsByClassName("localData");

        while (prevMonList[0]) {
            prevMonList[0].parentNode.removeChild(prevMonList[0]);
        }
        while (prevTueList[0]) {
            prevTueList[0].parentNode.removeChild(prevTueList[0]);
        }
        while (prevWedList[0]) {
            prevWedList[0].parentNode.removeChild(prevWedList[0]);
        }
        while (prevThuList[0]) {
            prevThuList[0].parentNode.removeChild(prevThuList[0]);
        }
        while (prevFriList[0]) {
            prevFriList[0].parentNode.removeChild(prevFriList[0]);
        }
        while (prevSatList[0]) {
            prevSatList[0].parentNode.removeChild(prevSatList[0]);
        }
        while (prevSunList[0]) {
            prevSunList[0].parentNode.removeChild(prevSunList[0]);
        }
    }

    // Executes schedule with localData
    schedule(localData);

    // Fetchs JSON file from VRMS_API
    calendarFetch
        .then(response => response.json())
        .then((data) => {
            // Checks for differences between localData and VRMS data
            if (arr_diff(data, localData)) {
                clearSchedule();
                schedule(data);
            }
        })
        .catch(err => {
            console.log(err);
        })

    // Formats time to be readable
    function timeFormat(time) {
        hours = time.getHours();
        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`;
        }

    }
</script>