WE HAVE IMAGES!!!!!

This commit is contained in:
Max Hunt 2020-04-23 00:39:29 +01:00
parent e154e882d1
commit 880d8c1f1f
5 changed files with 39 additions and 7 deletions

View File

@ -13,6 +13,7 @@
<script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-app.js"></script>
<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 src="https://www.gstatic.com/firebasejs/7.14.1/firebase-storage.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/7.14.1/firebase-database.js"></script>
<script src="js/fInit.js"></script>
@ -59,7 +60,7 @@
<div class="npf-long">
<input type="text" id="pDesc" placeholder="Description">
</div>
<input type="text" id="pImgUrl" placeholder="TODO: image (url)">
<input type="file" id="pImg" value="upload">
<input type="text" id="pLoc" placeholder="Location (eg. London)">
<input type="text" id="pStock" placeholder="Quantity in stock (default: 1)">
<div class="npf-long">

View File

@ -28,6 +28,7 @@ body {
}
main {
min-height: 79.7vh;
/*padding-bottom: 200px;*/
}
@ -272,10 +273,12 @@ footer a {
.product-container {
width: 160px;
height: 100%;
}
.product-container img {
width: 100%;
max-height: 90%;
}
.product-container p {
@ -283,6 +286,7 @@ footer a {
color: #CA5555;
font-size: 17px;
}
.r {float: right;}
.l {float: left;}
@ -370,6 +374,14 @@ footer a {
border: 0.5px solid grey;
}
#pImg {
position: relative;
border: none;
color: grey;
left: -10px;
top: 12px;
}
.new-product-field button {
height: 40px;
width: 100px;

View File

@ -13,9 +13,9 @@
<script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-app.js"></script>
<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 src="https://www.gstatic.com/firebasejs/7.14.1/firebase-storage.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/7.14.1/firebase-database.js"></script>
<script src="js/fInit.js"></script>
</head>
<body>
@ -65,13 +65,16 @@
<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">
<a href="#"><img src="media/var.png" alt="img"></a>
<a href="#">
<img class="dyn-img" title="<%= products[key].img %>" alt="img">
</a>
<p class="l"><%= products[key].name%></p>
<p class="r">£ <%= products[key].price%></p>
</div>
@ -157,5 +160,6 @@
</div>
</footer>
<script src="js/fAuth.js"></script>
<script src="js/fStore.js"></script>
</body>
</html>

12
views/js/fStore.js Normal file
View File

@ -0,0 +1,12 @@
function updateImgs() {
const storage = firebase.storage()
const rootReference = storage.ref('/product-img')
var images = document.getElementsByClassName('dyn-img')
// console.log(images)
Array.from(images).forEach((image) => {
var pathReference = rootReference.child(image.title)
pathReference.getDownloadURL().then(function(url) {image.src = url})
})
}
updateImgs();

View File

@ -14,18 +14,22 @@ function productSubmutEventHandler(){
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')
const imgBtn = document.getElementById('pImg')
var image = imgBtn.files[0]
var storageRef = firebase.storage().ref('/product-img/' + image.name)
storageRef.put(image)
var sessUid = firebase.auth().currentUser.uid
data.id = 999
data.name = nameField.value
data.desc = descField.value
data.img = imgField.value
data.img = image.name
data.location = locField.value
data.stock = stockField.value
data.public = publicField.value
@ -33,7 +37,6 @@ function productSubmutEventHandler(){
data.owner = sessUid
data.holder = sessUid
addItem(data)
}