Web-programming_Petrushin_E.A._PIbd-22/Lab3/PrBookfill/js/lines.js

// модуль с логикой

import {hideUpdateModal, showUpdateModal} from './lines-modal';
import {
  createLine, deleteLine, getAllItemTypes, getAllLines, getLine, updateLine,
} from './lines-rest-api';
import {
  cntrls, createItemsOption, createTableRow, imagePlaceholder,
} from './lines-ui';

// eslint-disable-next-line require-jsdoc
async function drawItemsSelect() {
  // вызов метода REST API для получения списка типов товаров
  const data = await getAllItemTypes();
  // очистка содержимого select
  // удаляется все, что находится между тегами <select></select>
  // но не атрибуты
  cntrls.itemsType.innerHTML = '';
  // пустое значение
  // eslint-disable-next-line max-len
  cntrls.itemsType.appendChild(createItemsOption('Choose category', '', true));
  // цикл по результату ответа от сервера
  // используется лямбда-выражение
  // (item) => {} аналогично function(item) {}
  data.forEach((item) => {
    cntrls.itemsType.appendChild(createItemsOption(item.name, item.id));
  });
}

// eslint-disable-next-line require-jsdoc
async function drawLinesTable() {
  console.info('Try to load data');
  if (!cntrls.table) {
    return;
  }
  // вызов метода REST API для получения всех записей
  const data = await getAllLines();
  // очистка содержимого table
  // удаляется все, что находится между тегами <table></table>
  // но не атрибуты
  cntrls.table.innerHTML = '';
  // цикл по результату ответа от сервера
  // используется лямбда-выражение
  // (item, index) => {} аналогично function(item, index) {}
  data.forEach((item, index) => {
    cntrls.table.appendChild(
        createTableRow(
            item,
            index,
            // функции передаются в качестве параметра
            // это очень удобно, так как аргументы функций доступны только
            // в данном месте кода и не передаются в сервисные модули
            () => showUpdateModal(item),
            () => location.assign(`page-edit.html?id=${item.id}`),
            () => removeLine(item.id),
        ),
    );
  });
}

// eslint-disable-next-line require-jsdoc
async function addLine(item, price, count, image) {
  console.info('Try to add item');
  // вызов метода REST API для добавления записи
  const data = await createLine(item, price, count, image);
  console.info('Added');
  console.info(data);
  // загрузка и заполнение table
  drawLinesTable();
}

// eslint-disable-next-line require-jsdoc
async function editLine(id, item, price, count, image) {
  console.info('Try to update item');
  // вызов метода REST API для обновления записи
  const data = await updateLine(id, item, price, count, image);
  console.info('Updated');
  console.info(data);
  // загрузка и заполнение table
  drawLinesTable();
}

// eslint-disable-next-line require-jsdoc
async function removeLine(id) {
  if (!confirm('Do you really want to remove this item?')) {
    console.info('Canceled');
    return;
  }
  console.info('Try to remove item');
  // вызов метода REST API для удаления записи
  const data = await deleteLine(id);
  console.info(data);
  // загрузка и заполнение table
  drawLinesTable();
}

// функция для получения содержимого файла в виде base64 строки
// https://ru.wikipedia.org/wiki/Base64
// eslint-disable-next-line require-jsdoc
async function readFile(file) {
  const reader = new FileReader();

  // создание Promise-объекта для использования функции
  // с помощью await (асинхронно) без коллбэков (callback)
  // https://learn.javascript.ru/promise
  return new Promise((resolve, reject) => {
    // 2. "Возвращаем" содержимое когда файл прочитан
    // через вызов resolve
    // Если не использовать Promise, то всю работу по взаимодействию
    // с REST API пришлось бы делать в обработчике (callback) функции
    // onloadend
    reader.onloadend = () => {
      const fileContent = reader.result;
      // Здесь могла бы быть работа с REST API
      // Чтение заканчивает выполняться здесь
      resolve(fileContent);
    };
    // 3. Возвращаем ошибку
    reader.onerror = () => {
      // Или здесь в случае ошибки
      reject(new Error('oops, something went wrong with the file reader.'));
    };
    // Шаг 1. Сначала читаем файл
    // Чтение начинает выполняться здесь
    reader.readAsDataURL(file);
  });
}

// функция для обновления блока с превью выбранного изображения
// eslint-disable-next-line require-jsdoc
async function updateImagePreview() {
  // получение выбранного файла
  // возможен выбор нескольких файлов, поэтому необходимо получить только первый
  const file = cntrls.image.files[0];
  // чтение содержимого файла в виде base64 строки
  const fileContent = await readFile(file);
  console.info('base64 ', fileContent);
  // обновление атрибута src для тега img с id image-preview
  cntrls.imagePreview.src = fileContent;
}

// eslint-disable-next-line max-len
// Функция для обработки создания и редактирования элементов таблицы через модальное окно
// Если хотите делать через страницу, то удалите эту функцию
// eslint-disable-next-line require-jsdoc
export function linesForm() {
  console.info('linesForm');

  // загрузка и заполнение select со списком товаров
  drawItemsSelect();
  // загрузка и заполнение table
  drawLinesTable();

  // Вызов функции обновления превью изображения при возникновении
  // события oncahnge в тэге input с id image
  cntrls.image.addEventListener('change', () => updateImagePreview());

  //  обработчик события нажатия на кнопку для показа модального окна
  cntrls.button.addEventListener('click', () => showUpdateModal(null));

  // обработчик события отправки формы
  // возникает при нажатии на кнопку (button) с типом submit
  // кнопка должна находится внутри тега form
  cntrls.form.addEventListener('submit', async (event) => {
    console.info('Form onSubmit');
    // отключение стандартного поведения формы при отправке
    // при отправке страница обновляется и JS перестает работать
    event.preventDefault();
    event.stopPropagation();
    // если форма не прошла валидацию, то ничего делать не нужно
    if (!cntrls.form.checkValidity()) {
      return;
    }

    let imageBase64 = '';
    // Получение выбранного пользователем изображения в виде base64 строки
    // Если пользователь ничего не выбрал, то не нужно сохранять в БД
    // дефолтное изображение
    if (cntrls.imagePreview.src !== imagePlaceholder) {
      // Загрузка содержимого атрибута src тэга img с id image-preview
      // Здесь выполняется HTTP запрос с типом GET
      const result = await fetch(cntrls.imagePreview.src);
      // Получение из HTTP-ответа бинарного содержимого
      const blob = await result.blob();
      // Получение base64 строки для файла
      // Здесь выполняется Promise из функции readFile
      // Promise позволяет писать линейный код для
      // работы с асинхронными методами
      // без использования обработчиков (callback) с помощью await
      imageBase64 = await readFile(blob);
    }

    // получение id строки для редактирования
    // это значение содержится в скрытом input
    const currentId = cntrls.lineId.value;
    // если значение id не задано,
    // то необходимо выполнить добавление записи
    // иначе обновление записи
    if (!currentId) {
      await addLine(
          cntrls.itemsType.value,
          cntrls.price.value,
          cntrls.count.value,
          imageBase64,
      );
    } else {
      await editLine(
          currentId,
          cntrls.itemsType.value,
          cntrls.price.value,
          cntrls.count.value,
          imageBase64,
      );
    }

    // после выполнения добавления/обновления модальное окно скрывается
    hideUpdateModal();
  });
}

// Функция для обработки создания и
// редактирования элементов таблицы через страницу page-edit.html
// Если хотите делать через модальное окно, то удалите эту функцию
// eslint-disable-next-line require-jsdoc
export async function linesPageForm() {
  console.info('linesPageForm');

  // загрузка и заполнение select со списком товаров
  drawItemsSelect();

  // func1 = (id) => {} аналогично function func1(id) {}
  const goBack = () => location.assign('/admin.html');

  // Вызов функции обновления превью изображения при возникновении
  // события onchange в тэге input с id image
  cntrls.image.addEventListener('change', () => updateImagePreview());

  // получение параметров GET-запроса из URL
  // параметры перечислены после символа ? (?id=1&color=black&...)
  const urlParams = new URLSearchParams(location.search);

  // получение значения конкретного параметра (id)
  // указан только при редактировании
  const currentId = urlParams.get('id');
  // если id задан
  if (currentId) {
    try {
      // вызов метода REST API для получения записи по первичному ключу(id)
      const line = await getLine(currentId);
      // заполнение формы для редактирования
      cntrls.itemsType.value = line.itemsId;
      cntrls.price.value = line.price;
      cntrls.count.value = line.count;
      // заполнение превью
      // Если пользователь выбрал изображение, то оно загружается
      // в тэг image с id image - preview
      // иначе устанавливается заглушка, адрес которой указан в imagePlaceholder
      cntrls.imagePreview.src = line.image ? line.image : imagePlaceholder;
    } catch {
      // в случае ошибки происходит возврат к page4
      goBack();
    }
  }

  // обработчик события отправки формы
  // возникает при нажатии на кнопку (button) с типом submit
  // кнопка должна находится внутри тега form
  cntrls.form.addEventListener('submit', async (event) => {
    console.info('Form onSubmit');
    // отключение стандартного поведения формы при отправке
    // при отправке страница обновляется и JS перестает работать
    event.preventDefault();
    event.stopPropagation();
    // если форма не прошла валидацию, то ничего делать не нужно
    if (!cntrls.form.checkValidity()) {
      return;
    }

    let imageBase64 = '';
    // Получение выбранного пользователем изображения в виде base64 строки
    // Если пользователь ничего не выбрал, то не нужно сохранять в БД
    // дефолтное изображение
    if (cntrls.imagePreview.src !== imagePlaceholder) {
      // Загрузка содержимого атрибута src тэга img с id image-preview
      // Здесь выполняется HTTP запрос с типом GET
      const result = await fetch(cntrls.imagePreview.src);
      // Получение из HTTP-ответа бинарного содержимого
      const blob = await result.blob();
      // Получение base64 строки для файла
      // Здесь выполняется Promise из функции readFile
      // Promise позволяет писать линейный
      // код для работы с асинхронными методами
      // без использования обработчиков (callback) с помощью await
      imageBase64 = await readFile(blob);
    }

    // если значение параметра запроса не задано,
    // то необходимо выполнить добавление записи
    // иначе обновление записи
    if (!currentId) {
      await addLine(
          cntrls.itemsType.value,
          cntrls.price.value,
          cntrls.count.value,
          imageBase64,
      );
    } else {
      await editLine(
          currentId,
          cntrls.itemsType.value,
          cntrls.price.value,
          cntrls.count.value,
          imageBase64,
      );
    }
    // возврат к странице page4
    goBack();
  });
}