THE CODE FOR: SuperDog Events!

// Global var = Usually a bad idea.
const events = [{
        event: "ComicCon",
        city: "New York",
        state: "New York",
        attendance: 240000,
        date: "06/01/2020",
    },
    {
        event: "ComicCon",
        city: "New York",
        state: "New York",
        attendance: 250000,
        date: "06/01/2021",
    },
    {
        event: "ComicCon",
        city: "New York",
        state: "New York",
        attendance: 257000,
        date: "06/01/2022",
    },
    {
        event: "ComicCon",
        city: "San Diego",
        state: "California",
        attendance: 130000,
        date: "06/01/2020",
    },
    {
        event: "ComicCon",
        city: "San Diego",
        state: "California",
        attendance: 140000,
        date: "06/01/2021",
    },
    {
        event: "ComicCon",
        city: "San Diego",
        state: "California",
        attendance: 150000,
        date: "06/01/2022",
    },
    {
        event: "HeroesCon",
        city: "Charlotte",
        state: "North Carolina",
        attendance: 40000,
        date: "06/01/2020",
    },
    {
        event: "HeroesCon",
        city: "Charlotte",
        state: "North Carolina",
        attendance: 45000,
        date: "06/01/2021",
    },
    {
        event: "HeroesCon",
        city: "Charlotte",
        state: "North Carolina",
        attendance: 50000,
        date: "06/01/2022",
    },
];

// Building the dropdown menu.
function buildDropDown() {

    // First step: Get a handle on the drop down.
    let eventDD = document.getElementById("eventDropDownList");

    // Reset the list.
    eventDD.innerHTML = "";

    //
    // Get the template.
    let ddTemplate = document.getElementById("dropDown-template");

    // Get the template node.
    let ddItem = document.importNode(ddTemplate.content, true);

    let ddLink = ddItem.querySelector("a");
    ddLink.setAttribute("data-city", "All");
    ddLink.textContent = "All";
    eventDD.appendChild(ddItem);

    // Add links for the unique cities.
    let currentEvents = getEvents();
    // Get our data.

    // Get a unique or "distinct" array of city names.
    let distinctCities = [...new Set(currentEvents.map((event) => event.city))];

    // Filter the data to a unique set of cities.
    for (let index = 0; index < distinctCities.length; index++) {

        let ddItem = document.importNode(ddTemplate.content, true);

        let ddLink = ddItem.querySelector("a");
        ddLink.setAttribute("data-city", distinctCities[index]);
        ddLink.textContent = distinctCities[index];
        eventDD.appendChild(ddItem);
    }

    let statsHeader = document.getElementById("statsHeader");
    statsHeader.innerHTML = `Stats For All Events:`;

    displayStats(currentEvents);

    // Show data for all events
    displayEventData(currentEvents);

}

// Called every time a city name is clicked in the dropdown menu.
function getEventData(element) {
    let city = element.getAttribute("data-city");

    // Create the statistics for the "clicked" city.
    let currentEvents = getEvents();

    let filteredEvents = currentEvents;

    if (city != "All") {
        // Return an array with ONLY the events for the selected city.
        filteredEvents = currentEvents.filter(function (event) {

            if (event.city == city) {
                return event;
            }

        });
    }

    // Set the header
    let statsHeader = document.getElementById("statsHeader");
    statsHeader.innerHTML = `Statistics for ${city}:`;

    // Call a function to display the stats.
    displayStats(filteredEvents);

}

// Pulling events from local storage or the default array events.
function getEvents() {
    let currentEvents = JSON.parse(localStorage.getItem("eventData"));

    if (currentEvents === null) {
        currentEvents = events;
        localStorage.setItem("eventData", JSON.stringify(currentEvents));
    }

    return currentEvents;
}

// This function displays stats for the selected city.
function displayStats(filteredEvents) {

    let total = 0;
    let average = 0;
    let most = 0;
    let least = -1;
    let currentAttendance = 0;

    for (let index = 0; index < filteredEvents.length; index++) {

        currentAttendance = filteredEvents[index].attendance;
        total += currentAttendance;

        if (most < currentAttendance) {
            most = currentAttendance;
        }

        if (least > currentAttendance || least < 0) {
            least = currentAttendance;
        }

    }

    average = total / filteredEvents.length;

    // Write values to the page.
    document.getElementById("total").innerHTML = total.toLocaleString();
    document.getElementById("most").innerHTML = most.toLocaleString();
    document.getElementById("least").innerHTML = least.toLocaleString();
    document.getElementById("average").innerHTML = average.toLocaleString(
        undefined, {
            minimumFractionDigits: 0,
            maximumFractionDigits: 0
        }
    );

}

// This function displays all of the event data -
// In a grid on the bottom of the page.
function displayEventData(currentEvents) {
    let template = document.getElementById("eventData-template");
    let eventBody = document.getElementById("eventBody");

    // Clears the table of any previous data.
    eventBody.innerHTML = "";

    // Loop over all of the eventData and write a row for each event -
    // To the eventBody element.
    for (let index = 0; index < currentEvents.length; index++) {
        let eventRow = document.importNode(template.content, true)

        // Grab ONLY the columns from the template.
        // Creates an array of the columns in the template.
        let eventCols = eventRow.querySelectorAll("td");

        eventCols[0].textContent = currentEvents[index].event;
        eventCols[1].textContent = currentEvents[index].city;
        eventCols[2].textContent = currentEvents[index].state;
        eventCols[3].textContent = currentEvents[index].attendance;
        eventCols[4].textContent = new Date(currentEvents[index].date).toLocaleDateString();
        eventBody.appendChild(eventRow);

    }

}

function saveEventData() {
    // Get all of the course data from local storage
    let currentEvents = getEvents();

    let eventObj = {
        event: "name",
        city: "city",
        state: "state",
        attendance: 0,
        date: "01/01/2001",
    }

    // Get the values from the "add" form.
    eventObj.event = document.getElementById("newEventName").value;
    eventObj.city = document.getElementById("newEventCity").value;

    // Get values from the dropdown.
    let stateSel = document.getElementById("newEventState");
    eventObj.state = stateSel.options[stateSel.selectedIndex].text;

    // Turn the input into a number.
    let attendanceNmbr = parseInt(document.getElementById("newEventAttendance").value, 10);
    eventObj.attendance = attendanceNmbr;

    // Format the date.
    let eventDate = document.getElementById("newEventDate").value;
    let eventDateFormatted = `${eventDate} 00:00`;
    eventObj.date = new Date(eventDateFormatted).toLocaleDateString();

    // Save
    currentEvents.push(eventObj);
    localStorage.setItem("eventData", JSON.stringify(currentEvents));

    buildDropDown();

}