+
+
diff --git a/static/scripts/EventItem.js b/static/scripts/EventItem.js
new file mode 100644
index 0000000..a9c369e
--- /dev/null
+++ b/static/scripts/EventItem.js
@@ -0,0 +1,153 @@
+class EventItem {
+ constructor(eventObject) {
+ this.id = eventObject["id"];
+ this.name = eventObject["name"];
+ this.startTime = new Date(Date.parse(eventObject["starttime"]));
+ this.endTime = new Date(Date.parse(eventObject["endtime"]));
+ this.people = eventObject["people"];
+ this.desc = eventObject["description"];
+ this.constructElem();
+ }
+
+ editEvent() {
+ window.location.replace(`./event.html?id=${this.id}`);
+ }
+
+ /**
+ * Creates the HTML Element for this Event using the standard format
+ *
+ *
+ *
+ *
Example Event
+ *
+ *
+ *
+ *
+ *
+ *
People Involved
+ *
Description
+ *
+ */
+ constructElem() {
+ this.elem = document.createElement("div");
+ this.elem.id = `event-${this.id}`;
+ this.elem.classList.add("event");
+
+ //top line includes event name and button section
+ let topLine = document.createElement("span");
+ topLine.classList.add("event-topLine");
+
+ //event name
+ let title = document.createElement("h3");
+ title.innerText = this.name;
+ topLine.append(title);
+
+ //button section as edit button
+ let buttons = document.createElement("span");
+ buttons.classList.add("event-buttons");
+
+ //edit button
+ let editButton = document.createElement("button");
+ editButton.classList.add("event-edit");
+ editButton.innerText = "Edit";
+ buttons.append(editButton);
+ topLine.append(buttons);
+
+ this.elem.append(topLine);
+ //topLine end
+
+ //datetime includes event date and time
+ //if start and end time are less than 24h apart, only show the day for the start time
+ if ((this.endTime.getTime() - this.startTime.getTime()) / 3600000 < 24)
+ this.elem.append(this.sameDayElem());
+ else
+ this.elem.append(this.bothDaysElem());
+
+ //people involved in event
+ let eventPeople = document.createElement("li");
+ eventPeople.classList.add("event-people");
+ eventPeople.innerText = this.people;
+ this.elem.append(eventPeople);
+
+ //description of event
+ let eventDesc = document.createElement("li");
+ eventDesc.classList.add("event-desc");
+ eventDesc.innerText = this.desc;
+ this.elem.append(eventDesc);
+ //elem end
+
+ editButton.addEventListener("click", () => this.editEvent());
+ }
+
+ /**
+ * Creates the HTML Element for datetime section of the Event using the standard format
+ * When only the day is shown for the start time
+ *
+ *
+ * DayOfWeek, Month ##
+ * -
+ *
+ *
+ * @returns {HTMLElement} datetime - li that contains start date and time info
+ */
+ sameDayElem() {
+ let datetime = document.createElement("li");
+ datetime.classList.add = "event-datetime";
+
+ //Day for starting time
+ datetime.append(getDay(this.startTime));
+
+ //linebreak
+ datetime.append(document.createElement('br'));
+
+ //starting time within HTML timestamp
+ let start = document.createElement("TIME");
+ start.setAttribute("datetime", this.startTime.toISOString().slice(0, 16).replace('T', ' '));
+ start.innerText = getTime(this.startTime);
+ datetime.append(start);
+
+ //seperator
+ datetime.append(" - ");
+
+ //ending time within HTML timestamp
+ let end = document.createElement("TIME");
+ end.setAttribute("datetime", this.endTime.toISOString().slice(0, 16).replace('T', ' '));
+ end.innerText = getTime(this.endTime);
+ datetime.append(end);
+
+ return datetime;
+ }
+
+ /**
+ * Creates the HTML Element for datetime section of the Event using the standard format
+ * When the day is shown for both start and end times
+ *
+ *
+ *
+ *
+ *
+ *
+ * @returns {HTMLElement} datetime - li that contains end date and time info
+ */
+ bothDaysElem() {
+ let datetime = document.createElement("li");
+ datetime.classList.add("event-datetime");
+
+ //starting day and time within HTML timestamp
+ let start = document.createElement("TIME");
+ start.setAttribute("datetime", this.startTime.toISOString().slice(0, 16).replace('T', ' '));
+ start.innerText = `${getDay(this.startTime)} ${getTime(this.startTime)}`;
+ datetime.append(start);
+
+ //linebreak
+ datetime.append(document.createElement('br'));
+
+ //ending day and time within HTML timestamp
+ let end = document.createElement("TIME");
+ end.setAttribute("datetime", this.endTime.toISOString().slice(0, 16).replace('T', ' '));
+ end.innerText = `${getDay(this.endTime)} ${getTime(this.endTime)}`;
+ datetime.append(end);
+
+ return datetime;
+ }
+}
diff --git a/static/scripts/editEvent.js b/static/scripts/editEvent.js
new file mode 100644
index 0000000..ff2be9b
--- /dev/null
+++ b/static/scripts/editEvent.js
@@ -0,0 +1,110 @@
+let newEvent = true; //false if editing exisiting event
+let currentURL = new URL(window.location.href);
+let id = currentURL.searchParams.get("id"); //id of event being edited
+
+/** load event data **/
+
+/**
+ * Checks if we are editing event, and sets up page for it if so
+ */
+function editEvent() {
+ if (id) {
+ fetchEventData(id, populateData);
+ newEvent = false;
+ indicateEditing();
+ }
+}
+
+/**
+ * requests data from server about an event with specified id
+ * @param {number} id - id of event
+ * @param {function} callback
+ * @returns {Object} eventData - data about requested event
+ */
+function fetchEventData(id, callback) {
+ fetchFile("event.json", "json", undefined, { "id": id }).then((eventData) => {
+ //If server replies with requested data, return it. Else, alert user
+ if (eventData) {
+ callback(eventData);
+ }
+ else {
+ alert("Could not retrieve event data");
+ window.location.replace("./index.html");
+ }
+ });
+}
+
+/**
+ * populates data about the event into the form's fields
+ * @param {Object} eventData - data about requested event
+ */
+function populateData(eventData) {
+ document.getElementById("event-id").value = id;
+ for (let item in eventData) {
+ //the key for each item should equal the id of the field
+ let itemElem = document.getElementById(item);
+ if (itemElem) {
+ //map data to expected value for that field type
+ switch (itemElem.type) {
+ case "datetime-local":
+ let datetime = new Date(Date.parse(eventData[item]));
+ datetime = datetime.toISOString().slice(0, 16);
+ itemElem.defaultValue = datetime;
+ break;
+ default:
+ itemElem.defaultValue = eventData[item];
+ }
+ }
+ else console.log("Could not find field " + item);
+ }
+
+ //set section radio button in included
+ if (eventData["section"]) document.getElementById(eventData["section"]).checked = true;
+
+}
+
+/**
+ * Adds an item on the navigation bar to show the user is editing an event instead of adding one
+ */
+function indicateEditing() {
+ document.querySelector(".current-page").classList.remove('current-page');
+
+ //creates html element:
+ //