app.js

// Your web app's Firebase configuration

//Deleted the Firebase stuff.


        // Initialize Firebase
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
db.settings({ timestampsInSnapshots: true });


const promo_product_list = document.querySelector('#promo-list');
const form = document.querySelector('#add-promo-product-form');

//create element and render cafe
function renderProduct(doc){
    let li = document.createElement('li');
    let product = document.createElement('span');
    let discription = document.createElement('span');
    let discription_two = document.createElement('span');
    let size = document.createElement('span');
    let product_two = document.createElement('span')
    let price = document.createElement('span');
    let department = document.createElement('span');
    let promo_number = document.createElement('span');
    let image  = document.createElement('span');
    let cross = document.createElement('div');

    li.setAttribute('data-id', doc.id);
    product.textContent = doc.data().product;
    discription.textContent = doc.data().discription;
    discription_two.textContent = doc.data().discription_two;
    size.textContent = doc.data().size;
    product_two.textContent = doc.data().product_two;
    price.textContent = doc.data().price;
    department.textContent = doc.data().department;
    promo_number.textContent = doc.data().promo_number;
    image.textContent = doc.data().image;
    cross.textContent = 'x';

    li.appendChild(product);
    li.appendChild(discription);
    li.appendChild(discription_two);
    li.appendChild(size);
    li.appendChild(product_two);
    li.appendChild(price);
    li.appendChild(department);
    li.appendChild(promo_number);
    li.appendChild(image);
    li.appendChild(cross);

    promo_product_list.appendChild(li);

    //delete die data hier
    cross.addEventListener('click', (e) => {
        e.stopPropagation();
        let id = e.target.parentElement.getAttribute('data-id');
        db.collection('promo_one').doc(id).delete();
    })
}


//save die data
//jy kan e onder enige iets noem
form.addEventListener('submit', (e) => {
    e.preventDefault();
    db.collection('promo_one').add({
        product:form.product.value,
        discription:form.discription.value,
        discription_two:form.discription_two.value,
        size:form.size.value,
        product_two:form.product_two.value,
        price:form.price.value,
        department:form.department.value,
        promo_number:form.promo_number.value,
        image:form.image.value
    });
        form.product.value = '';
        form.discription.value = '';
        form.discription_two.value = '';
        form.size.value = '';
        form.product_two.value = '';
        form.price.value = '';
        form.department.value = '';
        form.promo_number.value = '';
        form.image.value = '';
});

//real-time listener
db.collection('promo_one').onSnapshot(snapshot => {
    let changes = snapshot.docChanges();
    changes.forEach(change => {
        if(change.type == 'added') {
            renderProduct(change.doc);
        } else if (change.type == 'removed') {
            let li = promolist.querySelector('[data-id=' + change.doc.id + ']');
            promolist.removeChild(li);
        }
    })
})

function getInputVal(id){
    return document.getElementById(id).value;
}

function getDownloadURL(url) {
    var starsRef = storageRef.child('images/'+ file.name);
    starsRef.getDownloadURL().then(function(url) {
    document.querySelector('#preview').src=url;
    var t=document.querySelector('p')
    t.innerHTML ='<b>Firebase Storage URL: </b>'+url
    }).catch(function(error) {
    console.log('Error Download File');
    });
}