version 1.0.0 commit

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
+	 *
+	 *	<div id='event-#' class='event'>
+	 *		<span class='event-topLine'>
+	 *		<h3>Example Event</h3>
+	 *			<span class='event-buttons'>
+	 *				<button class='event-edit'>Edit</button>
+	 *			</span>
+	 *		</span>
+	 *		<this.sameDayElem() or this.bothDaysElem()>
+	 *		<li class='event-people'>People Involved</li>
+	 *		<li class='event-desc'>Description</li>
+	 *	</div>
+	 */
+	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
+	 *
+	 *	<li class='event-datetime'>
+	 *		DayOfWeek, Month ##<br/>
+	 *		<time datetime='YYYY-MM-DD HH:MM'>HH:MM AM/PM</time> - <time datetime='YYYY-MM-DD HH:MM'>HH:MM AM/PM</time>
+	 *	</li>
+	 *
+	 *	@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
+	 *
+	 *	<li class='event-datetime'>
+	 *		<time datetime='2023-04-28 21:30'>Friday, April 28 9:30 PM</time><br/>
+	 *		<time datetime='2023-04-29 22:30'>Saturday, April 28 10:30 PM</time>
+	 *	</li>
+	 *
+	 *	@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;
+	}
+}