IP_PIbd-21_Potapov_Frontend/static/js/feed.js

import { ApiEndpoint, createPostObject } from "./apiendpoint";
import { generatePostHtml } from "./posts";

const postApiEndpoint = new ApiEndpoint("posts");
const userApiEndpoint = new ApiEndpoint("users");

document.addEventListener("DOMContentLoaded", loadPosts);

// функция для получения содержимого файла в виде base64 строки
// https://ru.wikipedia.org/wiki/Base64
async function readImageFileToBase64(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);
    });
}

let currentEditPostId = null;

async function buttonPostPublicationClicked() {
  let text = document.getElementById("post-editor").value.trim();
  const img = document.getElementById("input-title-image").files[0];

  if (text == "" && img == null) {
    return;
  }

let imgBase64 = null;
  if (img != null) {
    imgBase64 = await readImageFileToBase64(img);
  }

  if (text == "")
  {
    text = null;
  }
    var post = createPostObject(1, new Date(), text, imgBase64);

  await postApiEndpoint.createObject(post);
  location.reload();
}

async function postObjectEdit(e) {
  let text = document.getElementById("post-editor").value.trim();
  const img = document.getElementById("input-title-image").files[0];
  var check = document.getElementById("check-title-image").checked;

  if (text == "" && img == null && check) {
    return;
  }

  let imgBase64 = null;
  if (img != null) {
    imgBase64 = await readImageFileToBase64(img);
  }

  if (text == "") {
    text = null;
  }
  var post = await postApiEndpoint.getObject(currentEditPostId);
  post.text = text;
  
  if (check)
  {
    post.img = imgBase64;
  }

  await postApiEndpoint.updateObject(post);
  location.reload();
}

async function editPost(e) {
  const btnId = e.target.id;
  const postId = parseInt(btnId.split("-")[2]);
  let postObj = await postApiEndpoint.getObject(postId);
  document.getElementById("post-editor").value = postObj.text == null ? "" : postObj.text;
  var textElement = document.getElementById("post-editor");
  textElement.style.height = "auto";
  textElement.style.height = textElement.scrollHeight + 2 + "px";
  showImage(postObj.img);
  scrollTo(0, 0);
  document.getElementById("edit-block").style.display = 'flex';
  document.getElementById("post-publication-button").style.display = 'none';
  currentEditPostId = postId;
}

async function loadPosts() {
  document.getElementById("edit-block").style.display = "none";
  document.getElementById("edit-post-button-cancel").addEventListener('click', () => {location.reload();});
  document.getElementById("edit-post-button-accept").addEventListener('click', postObjectEdit);
    const posts = await postApiEndpoint.getObjects();
    const center = document.getElementsByClassName("posts-wrapper")[0];
    center.innerHTML = "";
    for (let i = 0; i < posts.length; i++) {
        const post = posts[i];
        const postOwner = await userApiEndpoint.getObject(post.userId);
        center.innerHTML += generatePostHtml(post, postOwner);
    }

    const postDeleteButtons =
      document.getElementsByClassName("post-delete-button");
    for (let i = 0; i < postDeleteButtons.length; i++) {
      const btn = postDeleteButtons[i];
      btn.addEventListener('click', (e) => {
        const btnId = e.target.id;
        const postId = parseInt(btnId.split("-")[2]);
        postApiEndpoint.deleteObject(postId);
        var postDiv = document.getElementById("post-" + postId);
        postDiv.parentNode.removeChild(postDiv);
      });
    }

    const postEditButtons =
      document.getElementsByClassName("post-edit-button");
    for (let i = 0; i < postEditButtons.length; i++) {
      const btn = postEditButtons[i];
      btn.addEventListener("click", editPost);
    }

    var text = document.getElementById("post-editor");
    function resize() {
      if (text.value == "") {
        text.style.height = "calc(1em + 26px)";
        return;
      }
      text.style.height = "auto";
      text.style.height = text.scrollHeight + 2 + "px";
    }
    /* 0-timeout to get the already changed text */
    function delayedResize() {
      window.setTimeout(resize, 0);
    }
    observe(text, "change", resize);
    observe(text, "cut", delayedResize);
    observe(text, "paste", delayedResize);
    observe(text, "drop", delayedResize);
    observe(text, "keydown", delayedResize);

    text.focus();
    text.select();
    resize();

    document.getElementById("post-publication-button").addEventListener('click', buttonPostPublicationClicked);
}
var observe;
if (window.attachEvent) {
  observe = function (element, event, handler) {
    element.attachEvent("on" + event, handler);
  };
} else {
  observe = function (element, event, handler) {
    element.addEventListener(event, handler, false);
  };
}

function showImage(img) {
  var previewEmpty = document.getElementById("empty-title-image");
  var previewSelected = document.getElementById("selected-title-image");
  var check = document.getElementById("check-title-image");
  var preview = document.getElementById("title-image-preview");

  // if (check != null) check.checked = true;
  if (img != null) {
    var src = img;
    previewEmpty.style.display = "none";
    previewSelected.style.display = "block";
    previewSelected.style.opacity = "1.0";
    previewSelected.src = src;
    preview.title = "Редактировать изображение";
  } else {
    previewEmpty.style.display = "block";
    previewSelected.style.display = "none";
    previewSelected.style.opacity = "1.0";
    previewSelected.src = "";
    preview.title = "Добавить изображение";
  }
}