Update

functions/views/add-item.ejs

@@ -69,7 +69,7 @@
 				<div class="npf-short">
 					<input required type="text" id="pPrice" placeholder="Price £">
 				</div>
-				<button id="pSend" onclick={productSubmutEventHandler()}>Submit</button>
+				<button id="pSend" onclick={productSubmitEventHandler()}>Submit</button>
 			</div>
 
 			

functions/views/css/style.css

@@ -384,7 +384,7 @@ footer a {
 
 .new-product-field button {
 	height: 40px;
-	width: 100px;
+	width: 120px;
 	display: block;
 	font-size: 19px;
 	font-family: osl;
@@ -406,6 +406,10 @@ footer a {
 	background-color: #ffaf69;
 }
 
+.new-product-field button:disabled {
+	background-color: #b9b9b9;
+}
+
 .npf-long input {
 	width: 600px;
 }
@@ -473,7 +477,9 @@ footer a {
 	transition: 0.1s;
 	background-color: #ffaf69;
 }
-
+.product-page-info button:disabled {
+	background-color: #b9b9b9;
+}
 .product-page-info h2 {
 	font-size: 30px;
 }

functions/views/home.ejs

@@ -73,7 +73,7 @@
 				<% keys.forEach(function(key){ %>
 					<div class="product-container">
 						<a href="product?productid=<%=key%>">
-							<img class="dyn-img" title="<%= products[key].img %>" alt="img">
+							<img class="dyn-img" title="<%= products[key].img %>" alt="img" src="media/var.png">
 						</a>
 						<p class="l"><%= products[key].name%></p>
 						<p class="r">£ <%= products[key].price%></p>
@@ -101,6 +101,16 @@
 						<p class="l"><%= "Item name"%></p>
 						<p class="r">£ <%= "20.99"%></p>
 					</div>
+					<div class="product-container">
+						<a href="#"><img src="media/var.png" alt="img"></a>
+						<p class="l"><%= "Item name"%></p>
+						<p class="r">£ <%= "20.99"%></p>
+					</div>
+					<div class="product-container">
+						<a href="#"><img src="media/var.png" alt="img"></a>
+						<p class="l"><%= "Item name"%></p>
+						<p class="r">£ <%= "20.99"%></p>
+					</div>
 				</div>
 			</div>
 

functions/views/js/fdb.js

@@ -7,7 +7,7 @@ function leavePage(){
 	}
 }
 
-function productSubmutEventHandler(){
+function productSubmitEventHandler(){
 	data = {
 		id: 1,
 		name: "",
@@ -49,6 +49,11 @@ function productSubmutEventHandler(){
 	var image = imgBtn.files[0]
 	var imgPath = productKey + '/' + image.name
 	var storageRef = firebase.storage().ref('/product-img/' + imgPath)
+
+	const submitBtn = document.getElementById('pSend')
+	submitBtn.innerHTML = "Uploading..."
+	submitBtn.disabled = true
+
 	updateDBImg(productKey, imgPath)
 
 	storageRef.put(image).then(function(){
@@ -87,4 +92,17 @@ function updateImgs() {
     	pathReference.getDownloadURL().then(function(url) {image.src = url})
     })
 }
-updateImgs();
+
+updateImgs();
+
+function purchaseItem() {
+	const purchaseBtn = document.getElementById('remember-to-add-auth-verificartion-to-js-handler')
+	if (purchaseBtn.innerHTML == "Buy!") {
+		purchaseBtn.innerHTML = "Functionality not yet implemented 😢"
+		purchaseBtn.setAttribute("style", "width: 500px;");
+	}
+	else {
+		purchaseBtn.disabled = true
+	}
+	
+}

functions/views/product.ejs

@@ -69,7 +69,7 @@
 						<p>Location: <%= item.location %></p>
 						<p>In stock: <%= item.stock %></p>
 						<p>Price: £<%= item.price %></p>
-						<button onclick={purchaseItem()} id="REMEMBER TO ADD AUTH VERIFICATION TO JS SCRIPT">Buy!</button>
+						<button onclick={purchaseItem()} id="remember-to-add-auth-verificartion-to-js-handler">Buy!</button>
 					</div>
 				</div>
 				<div class="product-page-description"><p><%= item.desc %></p></div>