diff --git a/src/BukiVedi.App/web/js/components/tags/index.js b/src/BukiVedi.App/web/js/components/tags/index.js
new file mode 100644
index 0000000..83d7ad5
--- /dev/null
+++ b/src/BukiVedi.App/web/js/components/tags/index.js
@@ -0,0 +1,106 @@
+import { waitForElement, changeTags } from "../../requests/index.js";
+
+export default class TagsComponent {
+ element;
+ constructor({ tags = [], bookid = null, article }) {
+ this.tags = tags;
+ this.article = article;
+ this.bookid = bookid;
+ this.isTextareaMode = false;
+ this.render();
+ }
+
+ get template() {
+ return `
+
+
@@ -118,8 +149,12 @@ export default class BookSection {
+ ${series || "Серия "} +
++ ${subseries || "Подсерия"} +
${year || "Год неизвестен"}
@@ -128,24 +163,27 @@ export default class BookSection {
-
- ${title || "Название неизвестно"}
-
- ${series || ""}
-
- ${subseries || ""}
+
- + ${title || "Название неизвестно"}
++ ${this.getAuthors(authors)} +
+
-
+
+
`;
}
)
@@ -170,10 +208,11 @@ export default class BookSection {
.join("");
}
- getTags(tags) {
- return (tags || [])
+ getAuthors(authors) {
+ return (authors || [DEFAULT_AUTHOR])
.map(({ id, name }) => {
- return `#${name}`;
+ return `
+ ${name || ""} `;
})
.join("");
}
@@ -201,42 +240,105 @@ export default class BookSection {
}
}
- async makeAction({ id, authorid, bookid }) {
+ toggleDetails(element) {
+ const isOpened = element.classList.contains("opened");
+ const article = element.parentNode.parentNode;
+ const article_body = article.querySelector(".main-book__body");
+
+ if (isOpened) {
+ element.classList.remove("opened");
+ article.classList.add("card_closed");
+ article_body.classList.remove("body_opened");
+ article_body.classList.add("body_closed");
+ } else {
+ element.classList.add("opened");
+ article.classList.remove("card_closed");
+ article_body.classList.remove("body_closed");
+ article_body.classList.add("body_opened");
+ }
+ }
+
+ async countHeight() {
+ await waitForElement(".last");
+
+ const articles = document.querySelectorAll("[data-card]");
+ articles.forEach((article, i) => {
+ const tagWrapper = article.querySelector(".main-book__tags_wrapper");
+ const bookid = article.dataset.bookid;
+ const { tags } = this.data[i] || [];
+ const tagsComponent = new TagsComponent({ tags, article, bookid });
+
+ tagWrapper.append(tagsComponent.element);
+
+ if (article.scrollHeight > 502) {
+ const arrow = article.querySelector(".main-book__arrow_wrapper");
+ arrow.classList.remove("hidden");
+ }
+ });
+ }
+
+ async makeAction({ id, bookid }) {
this.element.classList.add("blur", "spinner");
if (menuEnum[id].action) {
- const data = await menuEnum[id].action({ id, authorid, bookid });
+ const data = await menuEnum[id].action({ id, bookid });
} else {
alert("Напиши меня");
}
this.element.classList.remove("spinner");
- this.closeMenu()
+ this.closeMenu();
}
- makeLike(element) {
- const { bookid: likedBookId } = element.dataset || {};
- this.makeAction({ id: 0, authorid: "", bookid: likedBookId });
- element.classList.add("liked");
+ async makeLike(element) {
+ this.element.classList.add("blur", "spinner");
+
+ const { bookid: likedBookId, like } = element.dataset || {};
+ const isLiked = like === "true";
+ if (!isLiked) {
+ await likeEnum[0].action({ bookid: likedBookId });
+ element.classList.remove("not-liked");
+ element.classList.add("liked");
+ } else {
+ await likeEnum[1].action({ bookid: likedBookId });
+ element.classList.remove("liked");
+ element.classList.add("not-liked");
+ }
+
+ element.dataset.like = !isLiked;
+ this.data = this.data.map(({ isFavorite, id, ...rest }) =>
+ likedBookId === id
+ ? { id, isFavorite: !isFavorite, ...rest }
+ : {
+ id,
+ isFavorite,
+ ...rest,
+ }
+ );
+ console.log("new data", this.data);
+ this.element.classList.remove("spinner");
}
async update(params) {
this.element.classList.add("blur", "spinner");
- let data = [];
if (params?.isByAuthor) {
- data = await searchByAuthor({ id: params.id });
+ this.data = await searchByAuthor({ id: params.id });
+ } else if (params?.isByTag) {
+ this.data = await searchByTag({ id: params.id });
} else {
const query = params;
- data = await fetchData({ query, url: this.url });
+ this.data = await fetchData({ query, url: this.url });
}
- console.log("data", data);
- if (data && Object.values(data).length) {
- this.subElements.body.innerHTML = this.getBookBody(data);
+ console.log("data", this.data);
+
+ if (this.data && Object.values(this.data).length) {
+ this.subElements.body.innerHTML = this.getBookBody(this.data);
this.initialize();
} else {
this.subElements.body.innerHTML = this.getEmptyBody();
}
+ await this.countHeight();
this.element.classList.remove("spinner");
}
@@ -246,7 +348,6 @@ export default class BookSection {
for (const subElement of elements) {
const name = subElement.dataset.element;
-
result[name] = subElement;
}
return result;
@@ -273,3 +374,49 @@ export default class BookSection {
this.element = null;
}
}
+
+// this.data = [
+// {
+// id: "2",
+// authors: [{ id: "1", name: "123" }],
+// description:
+// "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+// format: "123",
+// genres: [],
+// imageUrl: "",
+// title: "What is Lorem Ipsum?",
+// series: [],
+// subseries: [],
+// year: 1992,
+// tags: [
+// { id: 1, name: "Интересно" },
+// { id: 22, name: "Почитать" },
+// { id: 155, name: "Рекомендовали" },
+// { id: 166, name: "завтра" },
+// { id: 11, name: "наверное" },
+// { id: 221, name: "Почитданетать" },
+// { id: 1515, name: "раздватри" },
+// { id: 1661, name: "возможно" },
+// ],
+// isFavorite: true,
+// },
+// {
+// id: "22",
+// authors: [{ id: "1", name: "123" }],
+// description:
+// "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+// format: "123",
+// genres: [],
+// imageUrl: "",
+// title: "dsfwqedwqefrwef",
+// series: [],
+// subseries: [],
+// year: 1992,
+// tags: [
+// { id: 1, name: "Интересно" },
+// { id: 22, name: "Почитать" },
+// { id: 155, name: "Рекомендовали" },
+// ],
+// isFavorite: true,
+// },
+// ];
diff --git a/src/BukiVedi.App/web/js/requests/index.js b/src/BukiVedi.App/web/js/requests/index.js
index 3b75058..36fb7f3 100644
--- a/src/BukiVedi.App/web/js/requests/index.js
+++ b/src/BukiVedi.App/web/js/requests/index.js
@@ -1,7 +1,7 @@
import { SUCCESS } from "../constants/index.js";
export const fetchData = ({ query, url }) => {
- console.log('query, url', query, url);
+ console.log("query, url", query, url);
return $.ajax({
contentType: "application/json; charset=utf-8",
dataType: "json",
@@ -35,6 +35,21 @@ export const addBookToFavourites = ({ bookid }) => {
});
};
+export const removeBookToFavourites = ({ bookid }) => {
+ return $.ajax({
+ type: "DELETE",
+ url: `../api/books/${bookid}/favorite`,
+ success: function (data, textStatus, jqXHR) {
+ if (textStatus === SUCCESS) {
+ return data;
+ }
+ },
+ error: function (jqXHR, textStatus, errorThrown) {
+ console.log(jqXHR.statusText);
+ },
+ });
+};
+
export const addAuthorToFavourites = ({ bookid }) => {
return $.ajax({
type: "POST",
@@ -65,6 +80,21 @@ export const readLater = ({ bookid }) => {
});
};
+export const removeFromReadLater = ({ bookid }) => {
+ return $.ajax({
+ type: "DELETE",
+ url: `../api/books/${bookid}/read`,
+ success: function (data, textStatus, jqXHR) {
+ if (textStatus === SUCCESS) {
+ return data;
+ }
+ },
+ error: function (jqXHR, textStatus, errorThrown) {
+ console.log(jqXHR.statusText);
+ },
+ });
+};
+
export const ignoreBook = ({ bookid }) => {
return $.ajax({
type: "POST",
@@ -80,7 +110,22 @@ export const ignoreBook = ({ bookid }) => {
});
};
-export const ignoreAuthor = ({ bookid }) => {
+export const stopIgnoreBook = ({ bookid }) => {
+ return $.ajax({
+ type: "DELETE",
+ url: `../api/books/${bookid}/block`,
+ success: function (data, textStatus, jqXHR) {
+ if (textStatus === SUCCESS) {
+ return data;
+ }
+ },
+ error: function (jqXHR, textStatus, errorThrown) {
+ console.log(jqXHR.statusText);
+ },
+ });
+};
+
+export const ignoreAuthors = ({ bookid }) => {
return $.ajax({
type: "POST",
url: `../api/books/${bookid}/author/block`,
@@ -99,28 +144,28 @@ export const downloadBook = ({ id, title, format }) => {
$.ajax({
type: "GET",
url: `../api/books/download/${id}`,
- responseType: 'blob',
+ responseType: "blob",
success: function (data, textStatus, jqXHR) {
if (textStatus === SUCCESS) {
- const name = title.replace(' ', '_')
+ const name = title.replace(" ", "_");
const url = window.URL.createObjectURL(new Blob([data]));
- const link = document.createElement('a');
+ const link = document.createElement("a");
link.href = url;
- link.setAttribute('download', `${name}.${format}`);
+ link.setAttribute("download", `${name}.${format}`);
document.body.appendChild(link);
- link.click();
+ link.click();
}
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(jqXHR.statusText);
},
});
-}
+};
export const searchByAuthor = ({ id }) => {
return $.ajax({
@@ -139,3 +184,63 @@ export const searchByAuthor = ({ id }) => {
},
});
};
+
+export const waitForElement = (selector) => {
+ return new Promise((resolve) => {
+ if (document.querySelector(selector)) {
+ return resolve(document.querySelector(selector));
+ }
+
+ const observer = new MutationObserver((mutations) => {
+ if (document.querySelector(selector)) {
+ observer.disconnect();
+ resolve(document.querySelector(selector));
+ }
+ });
+
+ observer.observe(document.body, {
+ childList: true,
+ subtree: true,
+ });
+ });
+};
+
+export const changeTags = ({ bookid, tags }) => {
+ return $.ajax({
+ contentType: "application/json; charset=utf-8",
+ dataType: "json",
+ type: "POST",
+ url: "/api/tags",
+ data: JSON.stringify({ bookid, names: tags }),
+ success: function (data, textStatus, jqXHR) {
+ if (textStatus === SUCCESS) {
+ return data;
+ }
+ },
+ error: function (jqXHR, textStatus, errorThrown) {
+ console.log(jqXHR.statusText);
+ },
+ });
+
+ // return [
+ // {id: "6611598e1468849d1b00570d", name: "шиза"}
+ // ];
+};
+
+export const searchByTag = ({ id }) => {
+ return $.ajax({
+ contentType: "application/json; charset=utf-8",
+ dataType: "json",
+ type: "POST",
+ url: `../api/tags/${id}/books`,
+ success: function (data, textStatus, jqXHR) {
+ if (textStatus === SUCCESS) {
+ return data;
+ }
+ return [];
+ },
+ error: function (jqXHR, textStatus, errorThrown) {
+ console.log(jqXHR.statusText);
+ },
+ });
+};
diff --git a/src/BukiVedi.App/web/js/utils/index.js b/src/BukiVedi.App/web/js/utils/index.js
new file mode 100644
index 0000000..9b8387a
--- /dev/null
+++ b/src/BukiVedi.App/web/js/utils/index.js
@@ -0,0 +1,4 @@
+export const stopPropagation = event => {
+ event.stopImmediatePropagation();
+ event.stopPropagation();
+}
\ No newline at end of file
diff --git a/src/BukiVedi.App/web/login.html b/src/BukiVedi.App/web/login.html
index c27a51c..b42b1f7 100644
--- a/src/BukiVedi.App/web/login.html
+++ b/src/BukiVedi.App/web/login.html
@@ -23,21 +23,21 @@
+
-
${description || "Нет описания"}
+ required>
+ placeholder="Password" required>