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

WE HAVE IMAGES!!!!!

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
views/add-item.ejs
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-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-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-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 defer src="https://www.gstatic.com/firebasejs/7.14.1/firebase-database.js"></script>
<script src="js/fInit.js"></script> <script src="js/fInit.js"></script>
@ -59,7 +60,7 @@
<div class="npf-long"> <div class="npf-long">
<input type="text" id="pDesc" placeholder="Description"> <input type="text" id="pDesc" placeholder="Description">
</div> </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="pLoc" placeholder="Location (eg. London)">
<input type="text" id="pStock" placeholder="Quantity in stock (default: 1)"> <input type="text" id="pStock" placeholder="Quantity in stock (default: 1)">
<div class="npf-long"> <div class="npf-long">

12
views/css/style.css
View File

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

8
views/home.ejs
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-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-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-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 defer src="https://www.gstatic.com/firebasejs/7.14.1/firebase-database.js"></script>
<script src="js/fInit.js"></script> <script src="js/fInit.js"></script>
</head> </head>
<body> <body>
@ -65,13 +65,16 @@
<img src="media/welcome.png"> <img src="media/welcome.png">
</div> </div>
<div class="space"></div> <div class="space"></div>
<div class="products"> <div class="products">
<p>Popular:</p> <p>Popular:</p>
<div class="product-list-container"> <div class="product-list-container">
<% var keys = Object.keys(products) %> <% var keys = Object.keys(products) %>
<% keys.forEach(function(key){ %> <% keys.forEach(function(key){ %>
<div class="product-container"> <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="l"><%= products[key].name%></p>
<p class="r">£ <%= products[key].price%></p> <p class="r">£ <%= products[key].price%></p>
</div> </div>
@ -157,5 +160,6 @@
</div> </div>
</footer> </footer>
<script src="js/fAuth.js"></script> <script src="js/fAuth.js"></script>
<script src="js/fStore.js"></script>
</body> </body>
</html> </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();

11
views/js/fdb.js
View File

@ -14,18 +14,22 @@ function productSubmutEventHandler(){
const nameField = document.getElementById('pName') const nameField = document.getElementById('pName')
const descField = document.getElementById('pDesc') const descField = document.getElementById('pDesc')
const imgField = document.getElementById('pImgUrl')
const locField = document.getElementById('pLoc') const locField = document.getElementById('pLoc')
const stockField = document.getElementById('pStock') const stockField = document.getElementById('pStock')
const publicField = document.getElementById('pPublic') const publicField = document.getElementById('pPublic')
const priceField = document.getElementById('pPrice') 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 var sessUid = firebase.auth().currentUser.uid
data.id = 999 data.id = 999
data.name = nameField.value data.name = nameField.value
data.desc = descField.value data.desc = descField.value
data.img = imgField.value data.img = image.name
data.location = locField.value data.location = locField.value
data.stock = stockField.value data.stock = stockField.value
data.public = publicField.value data.public = publicField.value
@ -33,7 +37,6 @@ function productSubmutEventHandler(){
data.owner = sessUid data.owner = sessUid
data.holder = sessUid data.holder = sessUid
addItem(data) addItem(data)
} }
@ -48,4 +51,4 @@ function addItem(item){
.catch(function(error){ .catch(function(error){
console.log(error) console.log(error)
}) })
} }