Как посчитать в Firebase Firestore во внешнем интерфейсе - PullRequest
Новая
       1

Как посчитать в Firebase Firestore во внешнем интерфейсе

0 голосов
/ 25 мая 2020

Я создаю приложение, которое позволяет пользователям отслеживать новые привычки, используя Firestore для сохранения данных пользователей. В базе данных хранятся следующие данные:

  • Title (название привычки)
  • Count (сколько раз я выполнял эту привычку)
  • Цель (сколько раз я хочу проверять эту привычку ежедневно / еженедельно / ежемесячно)
  • Полоса (сколько дней / недель / месяцев / подряд я проверял эту привычку)

Моя цель - щелкнуть объект (в данном случае пламя в #container) и добавить count в базу данных.

Это то, что я прямо сейчас: 

// Real-time listener
db.collection('habits').onSnapshot((snapshot) => {
    snapshot.docChanges().forEach(change => {
        if(change.type === 'added'){
            renderHabit(change.doc.data(), change.doc.id);
        }
    });
})

// Add new habit
const form = document.querySelector('form');
form.addEventListener('submit', evt => {
    evt.preventDefault();
    const habit = {
        title: form.habitTitle.value,
        count: 0,
        goal: form.habitGoal.value,
        streak: 0
    };

    db.collection('habits').add(habit)
        .catch(err => console.log(err));
    form.habitTitle.value = '';
    form.habitGoal.value = '';
})

// Update counter
const habitContainer = document.querySelector('.newHabit');
habitContainer.addEventListener('click', evt => {
    //console.log(evt);
    if(evt.target.tagName === 'I'){
        const id = evt.target.getAttribute('data-id');
        db.collection('habits').doc(id).update({
            count: 1
        });
    }
});

const habits = document.querySelector('.newHabit');

// Render habit data
const renderHabit = (data, id) => {
    const html = `
        <div id="wrapper" data-id="${id}">
            <div id="container">
                <span id="title">${data.title}</span>
                <div class="streakContainer">
                    <span id="streak">${data.streak}</span>
                    <i data-id="${id}">?</i>
                </div>

                <div class="countContainer">
                    <span id="count">${data.count}</span>
                    <span>/</span>
                    <span id="goal">${data.goal}</span>
                </div>

                <div id="progressbar">
                    <div id="timer"></div>
                    <div id="progressbaroverlay"></div> 
                </div>
            </div>
        </div>
    `;

    habits.innerHTML += html;
};

Я попытался объявить var countNumber = 0;, чтобы в конечном итоге использовать countNumber = countNumber++ в clickevent внутри // Update counter, это не работает, потому что countNumber снова устанавливается на 0 при refre sh (я верю).

Надеюсь, я достаточно ясен :)

Спасибо!

1 Ответ

1 голос
/ 25 мая 2020

Самый простой способ увеличить число в базе данных - использовать оператор increment: 

habitContainer.addEventListener('click', evt => {
    if(evt.target.tagName === 'I'){
        const id = evt.target.getAttribute('data-id');
        db.collection('habits').doc(id).update({
            count: firebase.firestore.FieldValue.increment(1)
        });
    }
});

Каждый раз, когда вы вызываете это, ваш onSnapshot слушатель будет вызываться снова с обновленным документом. Вы захотите обработать if(change.type === 'modified'){ там, чтобы показать обновленное значение / документ в пользовательском интерфейсе.

...