+
diff --git a/functions/views/css/style.css b/functions/views/css/style.css
index 3dd4811..67a6b0a 100644
--- a/functions/views/css/style.css
+++ b/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 {
- position: relative;
- border: none;
- color: grey;
- left: -10px;
- top: 12px;
+.new-product-field textarea {
+ height: 100px;
+ width: 300px;
+ display: block;
+ font-size: 15px;
+ 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 {
- width: 600px;
+.n-p-left {
+ position: relative;
+ width: 50%;
+ z-index: 2;
}
-
-.npf-short input {
- width: 150px;
+.n-p-right {
+ position: absolute;
+ 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 {
- width: 100% !important;
+.u-r-i-location input {
+ 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 {
@@ -799,4 +814,33 @@ input:focus, textarea:focus, select:focus{
background-color: #11FF00;
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%;
}
\ No newline at end of file
diff --git a/functions/views/js/fdb.js b/functions/views/js/fdb.js
index 6a68124..29b7c24 100644
--- a/functions/views/js/fdb.js
+++ b/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]
- imageName = image.name
+ let image = fInput.files[0]
+
+ 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) {
- submitBtn.setAttribute("style", "background: #00FF00; width: 100%; transition: 0.5s;")
- submitBtn.innerHTML = "Success! Go Home..."
- submitBtn.disabled = false
+ 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")
@@ -439,4 +498,20 @@ try {
}
})
}
-catch(error) {}
\ No newline at end of file
+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"
+ }
+})
\ No newline at end of file
diff --git a/functions/views/user-registration.ejs b/functions/views/user-registration.ejs
index 4c69b17..8c2d0c2 100644
--- a/functions/views/user-registration.ejs
+++ b/functions/views/user-registration.ejs
@@ -63,12 +63,15 @@
+