max/gg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
Max Hunt 2020-05-16 20:38:59 +01:00
parent 70c563f818
commit 771a8d46ae
4 changed files with 165 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
functions/views/add-item.ejs
View File

@ -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">
<input required autofocus type="text" id="pName" placeholder="Product Name">
</div>
<div class="npf-long">
<input required type="text" id="pDesc" placeholder="Description">
</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">
<div class="n-p-left">
<input type="text" id="pName" placeholder="Product Name">
<textarea id="pDesc" placeholder="Description" style="resize: none;"></textarea>
<input type="text" id="pLoc" placeholder="Location (eg. London)">
<input type="text" id="pStock" placeholder="Quantity in stock (default: 1)">
<input required type="text" id="pPrice" placeholder="Price £">
<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>
<button id="pSend" onclick={productSubmitEventHandler()}>Submit!</button>
</div>
<div class="space"></div>
</div>

74
functions/views/css/style.css
View File

@ -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%;
}

97
functions/views/js/fdb.js
View File

@ -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) {}
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"
}
})

7
functions/views/user-registration.ejs
View File

@ -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") %>