From 12d4ffad2b81af6c3cdcc1b6293f354e0be7e402 Mon Sep 17 00:00:00 2001
From: Dessa Simpson <dxs@k7dxs.net>
Date: Sun, 5 Jul 2020 15:20:22 -0700
Subject: [PATCH] Add 'Add Request' Modal

---
 public/main.js   |  8 ++++++++
 public/style.css | 37 +++++++++++++++++++++++++++++++++++++
 views/main.eta   | 10 ++++++++++
 3 files changed, 55 insertions(+)

diff --git a/public/main.js b/public/main.js
index 308ce92..e6c99ec 100644
--- a/public/main.js
+++ b/public/main.js
@@ -34,4 +34,12 @@ function updateTable() {
 	getRequests(count,allRequests);
 }
 
+function openAddRequestModal() {
+	document.getElementById("addRequestModalBackground").style.display = "flex";
+}
+
+function closeAddRequestModal() {
+	document.getElementById("addRequestModalBackground").style.display = "none";
+}
+
 updateTable();
diff --git a/public/style.css b/public/style.css
index 74ab80a..be0cb12 100644
--- a/public/style.css
+++ b/public/style.css
@@ -83,3 +83,40 @@ div#nav-userpic {
 #requests .request-score {
 	text-align: right;
 }
+
+#addRequestModalBackground {
+	display: none;
+	position: fixed;
+	z-index: 1;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: #444;
+	background-color: #444a;
+	align-items: center;
+	justify-content: center;
+}
+
+#addRequestModal {
+	position: relative;
+	padding: 1em;
+	display: inline-block;
+	background-color: #444;
+	box-shadow: 0px 5px 20px black;
+}
+
+#addRequestModal h1 {
+	margin-top: 0;
+}
+
+#addRequestModalClose {
+	position: absolute;
+	top: 0;
+	right: 0.5em;
+	font-size: 150%;
+}
+
+#addRequestModalClose a {
+	text-decoration: none;
+}
diff --git a/views/main.eta b/views/main.eta
index 9e92915..4356620 100644
--- a/views/main.eta
+++ b/views/main.eta
@@ -10,6 +10,7 @@
 			<div id="logo">Learn Request Queue</div>
 			<div id="nav-requests"><a href="/">Requests</a></div>
 			<%- if (it.userName) { // Logged in -%>
+			<div id="nav-addrequest"><a href="#" onclick="openAddRequestModal()">Add Request</a></div>
 			<div id="nav-userpic"><img src="<%= it.userProfilePicture %>" /></div>
 			<div id="nav-username"><%= it.userName %></div>
 			<div id="nav-logout"><a href="/logout">Logout</a></div>
@@ -29,6 +30,15 @@
 			</select>
 			<input type="checkbox" id="allRequests" onchange="updateTable()">View requests in any state</input>
 		</div>
+		<div id="addRequestModalBackground">
+			<div id="addRequestModal">
+				<div id="addRequestModalClose"><a href="#" onclick="closeAddRequestModal()">&times;</a></div>
+				<h1>Add Request</h1>
+				URL: <input id="addRequestUrl"></input>
+				<button onclick="validateAndSubmitRequest()">Request</button><br>
+				Currently, only Youtube links are accepted.
+			</div>
+		</div>
 	</body>
 </html>