Создание онлайн -инструмента бюджета 4/5

Следующим шагом в создании онлайн -бюджетного инструмента является добавление возможности сохранения данных между сеансами. В этом случае я использую локальное хранилище в браузере. Это не самое безопасное решение, но оно продемонстрирует методы, которые вам необходимы для создания формы, которая сэкономит ваш бюджет.

Ключом к возможности создать глобальный обработчик щелчка для таблицы бюджета, который будет отображать кнопки с действиями на основе имени класса каждой кнопки.

document.getElementById('budgetTable').addEventListener('click', function($ev) {
  const idx = $ev.target.dataset.idx;
  if ($ev.target.className.indexOf('edit-button') > -1) {
    editBudgetItem(idx);
  } else if ($ev.target.className.indexOf('delete-button') > -1) {
    deleteItem(idx);
  } else if ($ev.target.className.indexOf('save-button') > -1) {
    save(idx);
  } else if ($ev.target.className.indexOf('cancel-button') > -1) {
    cancelEdit();
  }
});

Конечная цель этого – форма, которая выглядит так: она, очевидно, пока не стилизована, но демонстрирует возможность добавлять элементы, редактировать и удалять элементы. Данные на данный момент хранятся в LocalStorage, и в будущем я рассмотрю настройку задней части, чтобы данные можно было безопасно храниться в базе данных, но сейчас подойдет LocalStorage. Код нижнего уровня для сохранения и загрузки бюджета использует объект Window.LocalStorage, чтобы получить и установить элементы. Элементы в локальном хранилище хранятся с использованием пар имен/значения, и вы обычно используете json.stringify для подготовки элементов для сохранения и json.parse для чтения элементов обратно. Логика заключается в том, что если в локальном хранилище нет моего бюджета, я создам бюджет по умолчанию с примерными данными.

let budgetItems = [{
  item: 'Car',
  amount: 1.00
}]

const loadBudget = (storageKey) => {
  const budget = window.localStorage.getItem(storageKey);
  if (budget) {
    budgetItems = JSON.parse(budget);  
  }
}

const saveBudget = (storageKey) => {
  const budget = JSON.stringify(budgetItems);
  window.localStorage.setItem(storageKey, budget);
}

Я добавил две новые функции рендеринга и рендеритоу. Renderactions будет отображать кнопку «Редактировать и удалить», а рендеритоу будет отображать строку бюджета в виде формы с кнопкой сохранения и отмены. Обратите внимание на использование конкретного класса на обоих, который будет использоваться в обработчике щелчка.

const renderActions = (idx) => {
  return `
  
  `
}


const renderEditRow = (data, idx) => {

  return `
            
            
            
              
              
            
          `
}

Я сделал небольшое изменение в renderrrow, чтобы добавить дополнительный столбец для действий (редактировать/удалить). Поскольку reenderrow также используется для строки итоги, я также настраиваю функцию на рендеринги только при IDX не является нулевым.

const renderRow = (data, idx) => {
  return `
            ${data.item}
            $${data.amount}
            ${idx != null ? renderActions(idx) : '' }
          `
};

Функция renderrows становится немного сложнее:

const renderRows = (data, idx) => {
  const html = [];
  for (let i=0; i

Это изменение состоит в том, чтобы отобрать строку редактирования, если пользователь хочет отредактировать определенную строку.

Затем я добавляю несколько функций утилиты для редактирования, сохранения, удаления и отмены.

const addBudgetItem = () => {
  const budgetItem = {
    item: document.getElementById('newItem').value,
    amount: document.getElementById('newAmount').value
  }
  budgetItems.push(budgetItem);
  document.getElementById('newItem').value = null;
  document.getElementById('newAmount').value = null;
}

const editBudgetItem = (idx) => {
  id = 'budgetTable';

  document.getElementById('newItem').setAttribute('disabled', true);
  document.getElementById('newAmount').setAttribute('disabled', true);
  document.getElementById('addButton').setAttribute('disabled', true);

  document.getElementById(id).tBodies[0].innerHTML = renderRows(budgetItems, idx);
}

const cancelEdit = () => {
  id = 'budgetTable';

  document.getElementById('newItem').setAttribute('disabled', false);
  document.getElementById('newAmount').setAttribute('disabled', false);
  document.getElementById('addButton').setAttribute('disabled', false);

  document.getElementById(id).tBodies[0].innerHTML = renderRows(budgetItems);
}

const save = (idx) => {

  budgetItems[idx].item = document.getElementById('editItem').value;
  budgetItems[idx].amount = parseFloat(document.getElementById('editAmount').value);

  saveBudget('my-budget');
  renderPage('budgetTable');

  document.getElementById('newItem').setAttribute('disabled', false);
  document.getElementById('newAmount').setAttribute('disabled', false);
  document.getElementById('addButton').setAttribute('disabled', false);
}

const deleteItem = (idx) => {
  const temp = [];
  for (let i=0; i < budgetItems.length; i++) {
    if (i != idx) {
      temp.push(budgetItems[i]);
    }
  }
  budgetItems = temp;

  saveBudget('my-budget');
  renderPage('budgetTable');
}

В конце каждой функции, если я изменяю данные в бюджет, я называю SaveBudget, а затем RenderPage.

Таким образом, это дает мне функциональную форму, которая может быть использована для личного использования. В моей следующей статье я планирую обсудить, как стилизовать форму, чтобы она выглядела великолепно и готова к тому, чтобы запустить CMS (WordPress, Wix, Joomla) по вашему выбору.

Я сохранил изменения в отделении локального хранилища.

https://github.com/muncey/MyBudgetFrontEnd/tree/local-storage

Оригинал: “https://dev.to/muncey/creating-an-online-budget-tool-4-x-19gg”

Читайте ещё по теме: