Update

functions/views/add-item.ejs

@@ -50,32 +50,26 @@
 
 			<div class="space"></div>
 
-			<div class="user-auth-message" id="uAuthMsg" style="display: block;"><p>Please log in to continue</p></div>
+			<div class="user-auth-message" id="uAuthMsg" style="display: none;"><p>Please log in to continue</p></div>
 			<div id="api-response" class="error-message" style="display: none;"></div>
-			<div class="new-product-field" id="authField" style="display: none;">
+			<div class="new-product-field" id="authField" style="display: block;">
 				<p>Add product</p>
-				<div class="npf-short">
+				<div class="n-p-left">
-					<input required autofocus type="text" id="pName" placeholder="Product Name">
+					<input type="text" id="pName" placeholder="Product Name">
-				</div>
+					<textarea id="pDesc" placeholder="Description" style="resize: none;"></textarea>
-				<div class="npf-long">
+					<input type="text" id="pLoc" placeholder="Location (eg. London)">
-					<input required type="text" id="pDesc" placeholder="Description">
+					<input type="text" id="pStock" placeholder="Quantity in stock (default: 1)">
-				</div>
-				<input required type="file" id="pImg" value="upload" accept="image/jpeg, image/png, image/gif">
-				<input required type="text" id="pLoc" placeholder="Location (eg. London)">
-				<input required type="text" id="pStock" placeholder="Quantity in stock (default: 1)">
-				<div class="npf-short">
 					<input required type="text" id="pPrice" placeholder="Price £">
-				</div>
 					<button id="pSend" onclick={productSubmitEventHandler()}>Submit!</button>
 				</div>
-
+				<div class="n-p-right">
-			
+					<div class="dropzone" id="dropzone">
-			
+						<input required type="file" id="imgInput" accept="image/jpeg, image/png, image/gif" style="display: none;">
-
+						<svg id="svgElement" class="box__icon" width="50" height="43" viewBox="0 0 50 43"><path d="M48.4 26.5c-.9 0-1.7.7-1.7 1.7v11.6h-43.3v-11.6c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v13.2c0 .9.7 1.7 1.7 1.7h46.7c.9 0 1.7-.7 1.7-1.7v-13.2c0-1-.7-1.7-1.7-1.7zm-24.5 6.1c.3.3.8.5 1.2.5.4 0 .9-.2 1.2-.5l10-11.6c.7-.7.7-1.7 0-2.4s-1.7-.7-2.4 0l-7.1 8.3v-25.3c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v25.3l-7.1-8.3c-.7-.7-1.7-.7-2.4 0s-.7 1.7 0 2.4l10 11.6z"></path></svg>
-
+						<img src="" id="imgPreview" alt="preview" style="display: none;">
-
+					</div>
-
+				</div>
-
+			</div>
 			<div class="space"></div>
 		</div>
 

functions/views/css/style.css

@@ -321,7 +321,7 @@ input:focus, textarea:focus, select:focus{
 
 .product-container img {
 	width: 100%;
-	max-height: 100%;
+	height: 100%;
 }
 
 .product-container p {
@@ -392,6 +392,8 @@ input:focus, textarea:focus, select:focus{
 .new-product-field {
 	position: relative;
 	width: 100%;
+	display: inline-flex;
+	margin-left: 5%;
 }
 
 .new-product-field p {
@@ -415,14 +417,20 @@ input:focus, textarea:focus, select:focus{
 	margin-bottom: 15px;
 	border-radius: 0;
 	border: 0.5px solid grey;
+	cursor: text;
 }
 
-#pImg {
+.new-product-field textarea {
-	position: relative;
+	height: 100px;
-	border: none;
+	width: 300px;
-	color: grey;
+	display: block;
-	left: -10px;
+	font-size: 15px;
-	top: 12px;
+	padding-left: 10px;
+	padding-top: 10px;
+	margin-bottom: 15px;
+	border-radius: 0;
+	border: 0.5px solid grey;
+	cursor: text;
 }
 
 .new-product-field button {
@@ -453,12 +461,18 @@ input:focus, textarea:focus, select:focus{
 	background-color: #b9b9b9;
 }
 
-.npf-long input {
+.n-p-left {
-	width: 600px;
+	position: relative;
+	width: 50%;
+	z-index: 2;
 }
-
+.n-p-right {
-.npf-short input {
+	position: absolute;
-	width: 150px;
+	width: 70%;
+	height: 470px;
+	margin-left: 100px;
+	margin-top: -400px;
+	z-index: 0;
 }
 
 .user-message {
@@ -736,6 +750,7 @@ input:focus, textarea:focus, select:focus{
 
 .u-r-cols {
 	display: inline-flex;
+	width: 100%;
 }
 
 .u-r-left {
@@ -757,14 +772,13 @@ input:focus, textarea:focus, select:focus{
 	border-radius: 0;
 	border: 0.5px solid grey;
 }
-.u-r-left .u-r-i-location input {
+.u-r-i-location input {
-	width: 100% !important;
+	width: 90%;
 }
 
 .u-r-right {
 	float: right;
 	width: 50%;
-	text-align: end;
 }
 .u-r-right img{
 	width: 57%;
@@ -774,6 +788,7 @@ input:focus, textarea:focus, select:focus{
 	font-size: 25px;
 	margin-top: 10px;
 	margin-bottom: 10px;
+	text-align: end;
 }
 
 .u-r-btn button {
@@ -800,3 +815,32 @@ input:focus, textarea:focus, select:focus{
 	color: white;
 	transition: 0.1s;
 }
+
+.dropzone {
+	width: 55%;
+	height: 70%;
+	margin-left: auto;
+	margin-right: 0;
+	border: 2px dashed #CCCCCC;
+	background: #F5F5F5;
+	transition: 0.2s;
+}
+.dropzone svg{
+	position: relative;
+	left: 50%;
+	top: 40%;
+	transform: translate(-50%);
+	fill: #AAAAAA;
+}
+.dropzone.dragover {
+	border: 2px dashed #737373;
+	background-color: #AAAAAA;
+}
+.dropzone.dragover svg{
+	fill: whitesmoke;
+}
+.dropzone img {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}

functions/views/js/fdb.js

@@ -1,7 +1,7 @@
 function checkFields() {
 	if (document.getElementById('pName').value && document.getElementById('pDesc').value 
 	&& document.getElementById('pLoc').value && document.getElementById('pPrice').value 
-	&& document.getElementById('pImg').files[0].name) {
+	&& document.getElementById('imgInput').files[0]) {
 		return true
 	}
 	return false
@@ -21,7 +21,7 @@ async function productSubmitEventHandler(){
 			const locField = document.getElementById('pLoc')
 			const stockField = document.getElementById('pStock')
 			const priceField = document.getElementById('pPrice')
-			const imgBtn = document.getElementById('pImg')
+			let fInput = document.getElementById('imgInput')
 
 			let uid = firebase.auth().currentUser.uid
 
@@ -34,8 +34,9 @@ async function productSubmitEventHandler(){
 			newProduct.owner = uid
 			newProduct.holder = uid
 
-			let image = imgBtn.files[0]
+			let image = fInput.files[0]
-			imageName = image.name
+
+			let imageName = fInput.files[0].name
 			let imagePackage = {name:imageName, b64:null}
 
 			firebase.auth().currentUser.getIdToken().then(function(idToken){
@@ -50,7 +51,7 @@ async function productSubmitEventHandler(){
 						imageRef.put(image).then(function(){
 							submitBtn.innerHTML = "Done! Go Home..."
 							submitBtn.disabled = false
-							submitBtn.setAttribute('style', 'background:#00FF55; transition:0.5s; width:500px;')
+							submitBtn.setAttribute('style', 'background:#00FF55; transition:0.5s; width:162%;')
 						})
 						.catch(e=>{
 							submitBtn.innerHTML = "Error..."
@@ -344,7 +345,9 @@ function u_r_submit(){
 				let fName = firstNameField.value
 				let lName = lastNameField.value
 				let address = addressField.value
-				let picName = "todo.png"
+				let fInput = document.getElementById('imgInput')
+				let picName = fInput.files[0].name
+				let image = fInput.files[0]
 				let userData = {fName:fName, lName:lName, address:address, pPic:picName}
 				let url = 'register-new-user-api'
 				let data = {authToken: idToken, data: userData}
@@ -353,9 +356,21 @@ function u_r_submit(){
 				.then(response => response.json())
 				.then(function(result){
 					if (result.success) {
+						let imageRef = firebase.storage().ref(result.imgRef)
+						submitBtn.innerHTML = "Uploading..."
+						submitBtn.disabled = true
+						imageRef.put(image).then(function(){
 							submitBtn.setAttribute("style", "background: #00FF00; width: 100%; transition: 0.5s;")
 							submitBtn.innerHTML = "Success! Go Home..."
 							submitBtn.disabled = false
+						})
+						.catch(e=>{
+							submitBtn.setAttribute("style", "background: red;")
+							submitBtn.innerHTML = "ERROR"
+							submitBtn.disabled = false
+							document.getElementById("api-response").innerHTML = "Error: " + e
+							document.getElementById("api-response").setAttribute("style", "display: block")
+						})
 					}
 					else {
 						submitBtn.setAttribute("style", "background: red;")
@@ -384,6 +399,50 @@ function u_r_submit(){
 	}
 }
 
+function initFileDropListner() {
+	let dropZone = document.getElementById("dropzone")
+	if (dropZone) {
+		let fInput = document.getElementById('imgInput')
+		dropZone.ondragover = function(){this.className = "dropzone dragover";return false}
+		dropZone.ondragleave = function(){this.className = "dropzone";return false}
+		dropZone.onclick = function(){
+			fInput.click()
+		}
+		fInput.onchange = function(event) {
+			let addedFile = event.target.files[0]
+			fileAddSequence(addedFile)
+		}
+		dropZone.ondrop = function(event) {
+			event.preventDefault()
+			this.className = "dropzone"
+			let droppedFile = event.dataTransfer.files[0]
+			fileAddSequence(droppedFile)
+		}
+	}
+}
+
+initFileDropListner()
+
+function fileAddSequence(file){
+	let fInput = document.getElementById('imgInput')
+	if (["image/jpeg", "image/png", "image/gif"].includes(file.type)) {
+		let fileSize = file.size / 1024 / 1024
+		if (fileSize < 10){
+			fInput.files[0] = file
+			let imgPreview = document.getElementById('imgPreview')
+			let svgElement = document.getElementById('svgElement')
+			imgPreview.src = URL.createObjectURL(file)
+			imgPreview.setAttribute('style', 'display: block;')
+			svgElement.setAttribute('style', 'display: none;')
+		} else {
+			document.getElementById("api-response").innerHTML = "Files under 10MB please..."
+			document.getElementById("api-response").setAttribute("style", "display: block")
+		}
+	} else {
+		document.getElementById("api-response").innerHTML = "Accepted formats: jpeg/jpg, png, gif"
+		document.getElementById("api-response").setAttribute("style", "display: block")
+	}
+}
 
 try {
 	var addressField = document.getElementById("shippingaddressinput")
@@ -401,7 +460,7 @@ try {
 		}
 	})
 }
-catch(error) {console.log(error)}
+catch(error) {}
 
 function bSearch(){
 	let searchField = document.getElementById("sfield")
@@ -440,3 +499,19 @@ try {
 	})
 }
 catch(error) {}
+
+window.addEventListener("dragover", function(e) {
+	if (e.target.id != "dropzone") {
+		e.preventDefault()
+		e.dataTransfer.effectAllowed = "none"
+		e.dataTransfer.dropEffect = "none"
+	}
+})
+  
+window.addEventListener("drop", function(e) {
+	if (e.target.id != "dropzone") {
+		e.preventDefault()
+		e.dataTransfer.effectAllowed = "none"
+		e.dataTransfer.dropEffect = "none"
+	}
+})

functions/views/user-registration.ejs

@@ -63,12 +63,15 @@
                     </div>
                     <div class="u-r-right">
                         <div class="u-r-subtitle">Add a Profile Photo</div>
-                        <img src="media/profile.png" alt="profile Pic">
+                        <div class="dropzone" id="dropzone">
+                            <input required type="file" id="imgInput" accept="image/jpeg, image/png, image/gif" style="display: none;">
+                            <svg id="svgElement" class="box__icon" width="50" height="43" viewBox="0 0 50 43"><path d="M48.4 26.5c-.9 0-1.7.7-1.7 1.7v11.6h-43.3v-11.6c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v13.2c0 .9.7 1.7 1.7 1.7h46.7c.9 0 1.7-.7 1.7-1.7v-13.2c0-1-.7-1.7-1.7-1.7zm-24.5 6.1c.3.3.8.5 1.2.5.4 0 .9-.2 1.2-.5l10-11.6c.7-.7.7-1.7 0-2.4s-1.7-.7-2.4 0l-7.1 8.3v-25.3c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v25.3l-7.1-8.3c-.7-.7-1.7-.7-2.4 0s-.7 1.7 0 2.4l10 11.6z"></path></svg>
+                            <img src="" id="imgPreview" alt="preview" style="display: none;">
+                        </div>
                     </div>
                 </div>
                 <div class="u-r-btn"><button id="u-r-btn" onclick={u_r_submit()}>Submit!</button></div>
             </div>
-
 		</div>
     </main>
 <%- include("partials/footer") %>