perf(web): embed static files and templates
This commit is contained in:
@@ -0,0 +1,256 @@
|
||||
const PAGE_SIZE = 10;
|
||||
var totalPages;
|
||||
var currPage = +sessionStorage.getItem("page");
|
||||
if (currPage == 0) {
|
||||
currPage = 1;
|
||||
}
|
||||
var search = sessionStorage.getItem("search");
|
||||
if (search == null) {
|
||||
search = "";
|
||||
}
|
||||
var sorting = sessionStorage.getItem("sort");
|
||||
if (sorting == null) {
|
||||
sorting = "-datetime";
|
||||
}
|
||||
var temp_quote_id;
|
||||
|
||||
function renderBlockQuote(quote) {
|
||||
return `
|
||||
<div class="border rounded-lg p-6 hover:shadow-md transition-shadow">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<p class="text-lg font-[Playfair_Display] mb-2">${escapedString(quote.text)}</p>
|
||||
<p class="text-sm text-gray-800">${escapedString(quote.author)}</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="text-gray-600 hover:text-custom" onclick="quoteEdit('${quote.id}');">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
<button class="text-gray-600 hover:text-red-500" onclick="quoteDelete('${quote.id}');">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full flex justify-between items-center flex-wrap gap-1 mt-2">
|
||||
<p class="text-xs text-gray-400">${new Date(quote.datetime).toLocaleString()}</p>
|
||||
<p class="text-xs text-gray-400">Добавил ${quote.creator.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function load() {
|
||||
var quotesCount;
|
||||
$("#input-search").val(search);
|
||||
$("#input-sorting").val(sorting);
|
||||
container = $("#block-quotes");
|
||||
$.ajax({
|
||||
async: false,
|
||||
url: `/api/quotes?filter=${encodeURIComponent(search)}&sort=${encodeURIComponent(sorting)}&limit=${PAGE_SIZE}&offset=${(currPage - 1)*PAGE_SIZE}`,
|
||||
type: "GET",
|
||||
dataType: "json",
|
||||
success: function (resp) {
|
||||
quotesCount = resp.pagination.totalCount
|
||||
if (resp.pagination.count == 0) {
|
||||
container.html("<p style='text-align: center;'><i>Чёт нету ничего...</i></p>");
|
||||
return;
|
||||
}
|
||||
resp.quotes.forEach((quote) => {
|
||||
container.append(renderBlockQuote(quote));
|
||||
});
|
||||
},
|
||||
error: function (err) {
|
||||
$("#error-message").text(err.responseJSON.error);
|
||||
$("#error").removeClass("hidden");
|
||||
},
|
||||
complete: function () {
|
||||
$("#block-quotes-loader").addClass("hidden");
|
||||
},
|
||||
});
|
||||
totalPages = Math.ceil(quotesCount / PAGE_SIZE);
|
||||
$("#btn-page-curr").text(currPage);
|
||||
if (currPage > 1) {
|
||||
$("#btn-page-first").removeClass("hidden");
|
||||
if (currPage > 2) {
|
||||
$("#btn-page-prev").text(currPage - 1);
|
||||
$("#btn-page-prev").removeClass("hidden");
|
||||
if (currPage > 3) {
|
||||
$("#pages-prev").removeClass("hidden");
|
||||
}
|
||||
}
|
||||
}
|
||||
if (currPage < totalPages) {
|
||||
$("#btn-page-last").text(totalPages);
|
||||
$("#btn-page-last").removeClass("hidden");
|
||||
if (currPage < totalPages - 1) {
|
||||
$("#btn-page-next").text(currPage + 1);
|
||||
$("#btn-page-next").removeClass("hidden");
|
||||
if (currPage < totalPages - 2) {
|
||||
$("#pages-next").removeClass("hidden");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function reload() {
|
||||
container = $("#block-quotes");
|
||||
loader = $("#block-quotes-loader");
|
||||
loader.removeClass("hidden");
|
||||
container.html(loader);
|
||||
$("#error").addClass("hidden");
|
||||
$("#btn-page-first").addClass("hidden");
|
||||
$("#pages-prev").addClass("hidden");
|
||||
$("#btn-page-prev").addClass("hidden");
|
||||
$("#btn-page-curr").text(1);
|
||||
$("#btn-page-next").addClass("hidden");
|
||||
$("#pages-next").addClass("hidden");
|
||||
$("#btn-page-last").addClass("hidden");
|
||||
load();
|
||||
}
|
||||
|
||||
function quoteEdit(quote_id) {
|
||||
$.ajax({
|
||||
url: `/api/quotes/${quote_id}`,
|
||||
type: "GET",
|
||||
dataType: "json",
|
||||
success: function (resp) {
|
||||
temp_quote_id = quote_id;
|
||||
$("#edit-quote-text").val(resp.text);
|
||||
$("#edit-quote-author").val(resp.author);
|
||||
$("#edit-quote-datetime").val(resp.datetime.slice(0,19));
|
||||
$("body").css("overflow", "hidden");
|
||||
$("#quote-editor").css("top", $(window).scrollTop());
|
||||
$("#quote-editor").removeClass("hidden");
|
||||
},
|
||||
error: function (err) {
|
||||
$("#quote-editor-error-message").text(err.responseJSON.error);
|
||||
$("#quote-editor-error").removeClass("hidden");
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function quoteDelete(quote_id) {
|
||||
$.ajax({
|
||||
url: `/api/quotes/${quote_id}`,
|
||||
type: "DELETE",
|
||||
success: function (resp) {
|
||||
reload();
|
||||
$("#error").addClass("hidden");
|
||||
},
|
||||
error: function (err) {
|
||||
$("#error-message").text(err.responseJSON.error);
|
||||
$("#error").removeClass("hidden");
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
$(document).on("click", "#btn-add-open", function (e) {
|
||||
now = new Date;
|
||||
now = new Date(now.getTime() - now.getTimezoneOffset() * 60000);
|
||||
$("#new-quote-datetime").val(now.toJSON().slice(0,19));
|
||||
$("body").css("overflow", "hidden");
|
||||
$("#quote-creator").css("top", $(window).scrollTop());
|
||||
$("#quote-creator").removeClass("hidden");
|
||||
});
|
||||
|
||||
$(document).on("click", "#btn-add-close", function (e) {
|
||||
$("#quote-creator").addClass("hidden");
|
||||
$("body").css("overflow", "");
|
||||
});
|
||||
|
||||
$(document).on("submit", "#quote-create", function (e) {
|
||||
e.preventDefault();
|
||||
data = formToJSON($("#quote-create"));
|
||||
data.datetime = datetimeToLocalISO(data.datetime);
|
||||
$.ajax({
|
||||
url: "/api/quotes",
|
||||
type: "POST",
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify(data),
|
||||
processData: false,
|
||||
dataType: "json",
|
||||
success: function (resp) {
|
||||
$("#quote-creator").addClass("hidden");
|
||||
$("body").css("overflow", "");
|
||||
reload();
|
||||
$("#new-quote-text").val("");
|
||||
$("#new-quote-author").val("");
|
||||
},
|
||||
error: function (err) {
|
||||
$("#quote-creator-error-message").text(err.responseJSON.error);
|
||||
$("#quote-creator-error").removeClass("hidden");
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on("submit", "#quote-update", function (e) {
|
||||
e.preventDefault();
|
||||
data = formToJSON($("#quote-update"));
|
||||
data.datetime = datetimeToLocalISO(data.datetime);
|
||||
$.ajax({
|
||||
url: `/api/quotes/${temp_quote_id}`,
|
||||
type: "PATCH",
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify(data),
|
||||
processData: false,
|
||||
dataType: "json",
|
||||
success: function (resp) {
|
||||
$("#quote-editor").addClass("hidden");
|
||||
$("body").css("overflow", "");
|
||||
reload();
|
||||
$("#new-quote-text").val("");
|
||||
$("#new-quote-author").val("");
|
||||
},
|
||||
error: function (err) {
|
||||
$("#quote-editor-error-message").text(err.responseJSON.error);
|
||||
$("#quote-editor-error").removeClass("hidden");
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on("click", "#btn-edit-close", function (e) {
|
||||
$("body").css("overflow", "");
|
||||
$("#quote-editor").addClass("hidden");
|
||||
$("#quote-editor textarea,input").val("");
|
||||
$("#quote-editor-error").addClass("hidden");
|
||||
});
|
||||
|
||||
$(window).on("load", function (e) {
|
||||
load();
|
||||
});
|
||||
|
||||
$(document).on("click", "#btn-refresh", function (e) {
|
||||
search = $("#input-search").val();
|
||||
if (search != "") {
|
||||
currPage = 1;
|
||||
sessionStorage.setItem("search", currPage);
|
||||
}
|
||||
sorting = $("#input-sorting option:selected").val();
|
||||
reload();
|
||||
sessionStorage.setItem("search", search);
|
||||
sessionStorage.setItem("sort", sorting);
|
||||
});
|
||||
|
||||
$(document).on("click", "#btn-page-first", function (e) {
|
||||
currPage = 1;
|
||||
reload();
|
||||
sessionStorage.setItem("page", currPage);
|
||||
});
|
||||
|
||||
$(document).on("click", "#btn-page-prev", function (e) {
|
||||
currPage--;
|
||||
reload();
|
||||
sessionStorage.setItem("page", currPage);
|
||||
});
|
||||
|
||||
$(document).on("click", "#btn-page-next", function (e) {
|
||||
currPage++;
|
||||
reload();
|
||||
sessionStorage.setItem("page", currPage);
|
||||
});
|
||||
|
||||
$(document).on("click", "#btn-page-last", function (e) {
|
||||
currPage = totalPages;
|
||||
reload();
|
||||
sessionStorage.setItem("page", currPage);
|
||||
});
|
||||
Reference in New Issue
Block a user