Update

server.js

@@ -21,13 +21,18 @@ app.set('views', __dirname + '/views')
 
 app.get("/", function(request, responce) {
 	dbRef = database.ref("/products")
-	dbRef.once('value', function(snapshot){
+	dbRef.limitToFirst(5).once('value', function(snapshot){
 		var data = snapshot.val()
 		if (!data) {
 			data = {}
 		}
 		console.log(data)
-		responce.render('home.ejs', {products: data})
+		console.log(data.length)
+		var x = "none"
+		if (request.query.itemAdded == "true") {
+			x = 'block'
+		}
+		responce.render('home.ejs', {products: data, message: x})
 	})
 
 	// responce.render("home.ejs")

views/add-item.ejs

@@ -14,22 +14,7 @@
   <script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-analytics.js"></script>
   <script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-auth.js"></script>
   <script defer src="https://www.gstatic.com/firebasejs/7.14.1/firebase-database.js"></script>
-  <script>
+  <script src="js/fInit.js"></script>
-  // Your web app's Firebase configuration
-  var firebaseConfig = {
-    apiKey: "AIzaSyCrhgibbVUCOu3Vz3pw9iutGwTXen724eU",
-    authDomain: "project-gg-3b754.firebaseapp.com",
-    databaseURL: "https://project-gg-3b754.firebaseio.com",
-    projectId: "project-gg-3b754",
-    storageBucket: "project-gg-3b754.appspot.com",
-    messagingSenderId: "338558477178",
-    appId: "1:338558477178:web:f1b9069d1da04749a26cc3",
-    measurementId: "G-Y42R9NNJXS"
-  };
-  // Initialize Firebase
-  firebase.initializeApp(firebaseConfig);
-  firebase.analytics();
-</script>
 
 </head>
 
@@ -39,7 +24,7 @@
 			<div class="navbar">
 				<div class="logon-crumbs">
 					<div id="uname-field" style="display: none;">
-						<a id="uname-dom" class="user-name" href="#">Unregistered user</a>
+						<a id="uname-dom" class="user-name" href="/">Unregistered user</a>
 						<div class="user-logout">
 							<a onclick={signout()}>Log out</a>
 						</div>
@@ -49,6 +34,7 @@
 						<input id="fpwd" type="password" placeholder="Password">
 						<button id="blogin" onclick={signinwithemail()} class="btn-login">&#x27a4;</button>
 						<button id="blogin_g" onclick={signinwithgoogle()} class="btn-g-login"><img src="media/g_logon.png" class="img-g-login" alt="img"></button>
+						<button id="blogin_g" onclick={signinwithfb()} class="btn-fb-login"><img src="media/fb_logon.png" class="img-g-login" alt="img"></button>
 					</div>
 				</div>
 				<div class="user-info">
@@ -63,9 +49,9 @@
 
 			<div class="space"></div>
 
-			<div class="user-auth-message" id="uAuthMsg" style="display: none;"><p>Please log in to continue</p></div>
+			<div class="user-auth-message" id="uAuthMsg" style="display: block;"><p>Please log in to continue</p></div>
 
-			<div class="new-product-field" style="display: block;">
+			<div class="new-product-field" id="npf" style="display: none;">
 				<p>Add product</p>
 				<div class="npf-short">
 					<input type="text" id="pName" placeholder="Product Name">
@@ -82,7 +68,7 @@
 				<div class="npf-short">
 					<input type="text" id="pPrice" placeholder="Price £">
 				</div>
-				<button id="pSend">Submit</button>
+				<button id="pSend" onclick={productSubmutEventHandler()}>Submit</button>
 			</div>
 
 			
@@ -116,5 +102,7 @@
 		</div>
 	</footer>
 	<script src="js/fAuth.js"></script>
+
+	<script src="js/fdb.js"></script>
 </body>
 </html>

views/css/style.css

@@ -49,6 +49,7 @@ footer a {
 
 ::placeholder {
 	color: #aaaaaa;
+	font-family: osl;
 }
 
 .page {
@@ -263,6 +264,12 @@ footer a {
 	margin-top: 10px;
 }
 
+.product-list-container {
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
+}
+
 .product-container {
 	width: 160px;
 }
@@ -394,3 +401,16 @@ footer a {
 .npf-short input {
 	width: 150px;
 }
+
+.user-message {
+	width: 100%;
+}
+
+.user-message p {
+	position: relative;
+	font-family: osl;
+	font-size: 20px;
+	color: green;
+	left: 50%;
+	transform: translate(-10%, 0);
+}

views/home.ejs

@@ -14,22 +14,7 @@
   <script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-analytics.js"></script>
   <script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-auth.js"></script>
   <script defer src="https://www.gstatic.com/firebasejs/7.14.1/firebase-database.js"></script>
-  <script>
+  <script src="js/fInit.js"></script>
-  // Your web app's Firebase configuration
-  var firebaseConfig = {
-    apiKey: "AIzaSyCrhgibbVUCOu3Vz3pw9iutGwTXen724eU",
-    authDomain: "project-gg-3b754.firebaseapp.com",
-    databaseURL: "https://project-gg-3b754.firebaseio.com",
-    projectId: "project-gg-3b754",
-    storageBucket: "project-gg-3b754.appspot.com",
-    messagingSenderId: "338558477178",
-    appId: "1:338558477178:web:f1b9069d1da04749a26cc3",
-    measurementId: "G-Y42R9NNJXS"
-  };
-  // Initialize Firebase
-  firebase.initializeApp(firebaseConfig);
-  firebase.analytics();
-</script>
 
 </head>
 
@@ -39,7 +24,7 @@
 			<div class="navbar">
 				<div class="logon-crumbs">
 					<div id="uname-field" style="display: none;">
-						<a id="uname-dom" class="user-name" href="#">Unregistered user</a>
+						<a id="uname-dom" class="user-name" href="/">Unregistered user</a>
 						<div class="user-logout">
 							<a onclick={signout()}>Log out</a>
 						</div>
@@ -64,57 +49,86 @@
 					</div>
 				</div>
 			</div>
+			<div class="user-message" style="display: <%= message %>;">
+				<p>Product added successfully</p>
+			</div>
 			<div class="sbar">
 				<img src="media/gg_logo.png" alt="img">
 				<input id="sfield" type="text" placeholder="I Want...">
 				<button id="sbutton">Go!</button>
 				<a href="#">Extras</a>
 			</div>
+
 			<div class="space"></div>
+
 			<div class="welcome">
 				<img src="media/welcome.png">
 			</div>
 			<div class="space"></div>
 			<div class="products">
 				<p>Popular:</p>
+				<div class="product-list-container">
+				<% var keys = Object.keys(products) %>
+				<% keys.forEach(function(key){ %>
 					<div class="product-container">
-					<img src="media/var.png" alt="img">
+						<a href="#"><img src="media/var.png" alt="img"></a>
-					<p class="l"><%= "Item name"%></p>
+						<p class="l"><%= products[key].name%></p>
-					<p class="r">£<%= "20.99"%></p>
+						<p class="r">£ <%= products[key].price%></p>
+					</div>
+				<% }) %>
 				</div>
 			</div>
 
 
 			<div class="products">
 				<p>Personalised 1:</p>
+				<div class="product-list-container">
 					<div class="product-container">
-					<img src="media/var.png" alt="img">
+						<a href="#"><img src="media/var.png" alt="img"></a>
 						<p class="l"><%= "Item name"%></p>
-					<p class="r">£<%= "20.99"%></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>
+
 			<div class="products">
 				<p>Personalised 2:</p>
+				<div class="product-list-container">
 					<div class="product-container">
-					<img src="media/var.png" alt="img">
+						<a href="#"><img src="media/var.png" alt="img"></a>
 						<p class="l"><%= "Item name"%></p>
-					<p class="r">£<%= "20.99"%></p>
+						<p class="r">£ <%= "20.99"%></p>
+					</div>
 				</div>
 			</div>
 			<div class="products">
 				<p>Personalised 3:</p>
+				<div class="product-list-container">
 					<div class="product-container">
-					<img src="media/var.png" alt="img">
+						<a href="#"><img src="media/var.png" alt="img"></a>
 						<p class="l"><%= "Item name"%></p>
-					<p class="r">£<%= "20.99"%></p>
+						<p class="r">£ <%= "20.99"%></p>
+					</div>
 				</div>
 			</div>
 			<div class="products">
 				<p>Recent:</p>
+				<div class="product-list-container">
 					<div class="product-container">
-					<img src="media/var.png" alt="img">
+						<a href="#"><img src="media/var.png" alt="img"></a>
 						<p class="l"><%= "Item name"%></p>
-					<p class="r">£<%= "20.99"%></p>
+						<p class="r">£ <%= "20.99"%></p>
+					</div>
 				</div>
 			</div>
 

views/js/fAuth.js

@@ -4,11 +4,17 @@ function checkAuth(){
 			document.getElementById('uname-field').setAttribute("style", "display: block;")
 			document.getElementById('login-field').setAttribute("style", "display: none;")
 			document.getElementById('uname-dom').innerHTML = "Hello, " + user.displayName
+			document.getElementById('uname-field').setAttribute("style", "display: block;")
+			document.getElementById('login-field').setAttribute("style", "display: none;")
+			document.getElementById('uAuthMsg').setAttribute("style", "display: none;")
+			document.getElementById('npf').setAttribute("style", "display: block;")
 		}
 		else {
 			document.getElementById('uname-field').setAttribute("style", "display: none;")
 			document.getElementById('login-field').setAttribute("style", "display: block;")
 			document.getElementById('uname-dom').innerHTML = "Unregistered"
+			document.getElementById('uAuthMsg').setAttribute("style", "display: block;")
+			document.getElementById('npf').setAttribute("style", "display: none;")
 		}
 	})
 }

views/js/fInit.js

@@ -0,0 +1,14 @@
+// Your web app's Firebase configuration
+var firebaseConfig = {
+  apiKey: "AIzaSyCrhgibbVUCOu3Vz3pw9iutGwTXen724eU",
+  authDomain: "project-gg-3b754.firebaseapp.com",
+  databaseURL: "https://project-gg-3b754.firebaseio.com",
+  projectId: "project-gg-3b754",
+  storageBucket: "project-gg-3b754.appspot.com",
+  messagingSenderId: "338558477178",
+  appId: "1:338558477178:web:f1b9069d1da04749a26cc3",
+  measurementId: "G-Y42R9NNJXS"
+};
+// Initialize Firebase
+firebase.initializeApp(firebaseConfig);
+firebase.analytics();

views/js/fdb.js

@@ -0,0 +1,51 @@
+function productSubmutEventHandler(){
+	data = {
+		id: 1,
+		name: "",
+		desc: "",
+		img: "",
+		location: "",
+		stock: 0,
+		public: true,
+		price: 0,
+		owner: "",
+		holder: ""
+	}
+
+	const nameField = document.getElementById('pName')
+	const descField = document.getElementById('pDesc')
+	const imgField = document.getElementById('pImgUrl')
+	const locField = document.getElementById('pLoc')
+	const stockField = document.getElementById('pStock')
+	const publicField = document.getElementById('pPublic')
+	const priceField = document.getElementById('pPrice')
+
+	var sessUid = firebase.auth().currentUser.uid
+
+	data.id = 999
+	data.name = nameField.value
+	data.desc = descField.value
+	data.img = imgField.value
+	data.location = locField.value
+	data.stock = stockField.value
+	data.public = publicField.value
+	data.price = priceField.value
+	data.owner = sessUid
+	data.holder = sessUid
+
+
+	addItem(data)
+}
+
+function addItem(item){
+	var database = firebase.database()
+	var itemRef = database.ref('/products')
+
+	itemRef.push(item)
+		.then(function(){
+			window.location.replace('/?itemAdded=true')
+		})
+		.catch(function(error){
+			console.log(error)
+		})
+}