init(web): add quotes page
This commit is contained in:
parent
02b848a737
commit
bddcd49d2a
@ -9,8 +9,17 @@ import (
|
||||
func root(c *gin.Context) {
|
||||
authorized := c.GetBool("authorized")
|
||||
if authorized {
|
||||
c.HTML(http.StatusOK, "quotes.html", nil)
|
||||
c.Redirect(http.StatusSeeOther, "/quotes")
|
||||
} else {
|
||||
c.HTML(http.StatusOK, "auth.html", nil)
|
||||
}
|
||||
}
|
||||
|
||||
func quotes(c *gin.Context) {
|
||||
authorized := c.GetBool("authorized")
|
||||
if authorized {
|
||||
c.HTML(http.StatusOK, "quotes.html", nil)
|
||||
} else {
|
||||
c.Redirect(http.StatusSeeOther, "/")
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,6 +20,7 @@ func Serve(addr string) {
|
||||
|
||||
r.Static("/static", "./static")
|
||||
r.GET("/", api.MiddlewareAuth, root)
|
||||
r.GET("/quotes", api.MiddlewareAuth, quotes)
|
||||
|
||||
r.Run(addr)
|
||||
}
|
||||
|
||||
5
web/static/css/skazanull.css
Normal file
5
web/static/css/skazanull.css
Normal file
@ -0,0 +1,5 @@
|
||||
.loader {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 20%;
|
||||
}
|
||||
BIN
web/static/images/loader.gif
Normal file
BIN
web/static/images/loader.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 972 KiB |
161
web/static/js/quotes.js
Normal file
161
web/static/js/quotes.js
Normal file
@ -0,0 +1,161 @@
|
||||
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";
|
||||
}
|
||||
|
||||
function escapedString(str) {
|
||||
return str
|
||||
.replace("&", "&")
|
||||
.replace("<", "<")
|
||||
.replace(">", ">")
|
||||
.replace("\n", "<br>");
|
||||
}
|
||||
|
||||
function renderBlockQuote(quote) {
|
||||
return `
|
||||
<div class="border rounded-lg p-6 hover:shadow-md transition-shadow" quote_id="${quote.id}">
|
||||
<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>
|
||||
<p class="text-xs text-gray-400 mt-2">${quote.datetime}</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="text-gray-600 hover:text-custom">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
<button class="text-gray-600 hover:text-red-500">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function load() {
|
||||
var quotesCount;
|
||||
failed = false;
|
||||
$.ajax({
|
||||
async: false,
|
||||
url: "/api/quotes/count",
|
||||
type: "GET",
|
||||
dataType: "json",
|
||||
success: function (resp) {
|
||||
quotesCount = resp.count;
|
||||
},
|
||||
error: function (err) {
|
||||
$("#error-message").text(err.responseJSON.error);
|
||||
$("#error").removeClass("hidden");
|
||||
failed = true;
|
||||
$("#block-quotes-loader").addClass("hidden");
|
||||
},
|
||||
});
|
||||
if (failed) {
|
||||
return;
|
||||
}
|
||||
totalPages = Math.ceil(quotesCount / PAGE_SIZE);
|
||||
$("#input-search").val(search);
|
||||
$("#input-sorting").val(sorting);
|
||||
$("#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");
|
||||
}
|
||||
}
|
||||
}
|
||||
container = $("#block-quotes");
|
||||
$.ajax({
|
||||
url: `/api/quotes?filter=${encodeURIComponent(search)}&sort=${encodeURIComponent(sorting)}&limit=${PAGE_SIZE}&offset=${(currPage - 1)*PAGE_SIZE}`,
|
||||
type: "GET",
|
||||
dataType: "json",
|
||||
success: function (resp) {
|
||||
resp.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");
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
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-next").addClass("hidden");
|
||||
$("#pages-next").addClass("hidden");
|
||||
$("#btn-page-last").addClass("hidden");
|
||||
load();
|
||||
}
|
||||
|
||||
$(window).on("load", function (e) {
|
||||
load();
|
||||
});
|
||||
|
||||
$(document).on("click", "#btn-refresh", function (e) {
|
||||
search = $("#input-search").val();
|
||||
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);
|
||||
});
|
||||
@ -4,6 +4,7 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
|
||||
<link href="/static/css/font-awesome.6.4.0.min.css" rel="stylesheet"/>
|
||||
<link href="/static/css/tailwind-custom.css" rel="stylesheet"/>
|
||||
<link href="/static/css/skazanull.css" rel="stylesheet"/>
|
||||
<script src="/static/js/tailwind.3.4.5.es"></script>
|
||||
<script src="/static/js/tailwind-config.min.js" data-color="#000000" data-border-radius="small"></script>
|
||||
<script src="/static/js/jquery-3.6.0.min.js"></script>
|
||||
|
||||
62
web/templates/quotes.html
Normal file
62
web/templates/quotes.html
Normal file
@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
{{ template "head" . }}
|
||||
<title>Цитаты | SkazaNull</title>
|
||||
</head>
|
||||
|
||||
<body class="min-h-screen bg-gray-50 flex flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-4xl w-full space-y-8 bg-white p-10 rounded-lg shadow-lg">
|
||||
<div class="text-center">
|
||||
<i class="fas fa-quote-left text-4xl text-custom mb-4"></i>
|
||||
<h2 class="mt-6 text-3xl font-bold font-['Playfair_Display'] text-gray-900">Пацанские цитаты</h2>
|
||||
<p class="mt-2 text-sm text-gray-600 font-['Inter']">Читайте и угорайте :)</p>
|
||||
</div>
|
||||
<div id="error" class="hidden mt-4 p-4 rounded-md bg-red-50 border border-red-200">
|
||||
<p id="error-message" class="text-sm text-red-600 font-['Inter']"></p>
|
||||
</div>
|
||||
<div class="mb-6 flex justify-between items-center">
|
||||
<div class="flex gap-4">
|
||||
<input type="text" id="input-search" placeholder="Поиск цитат..." class="px-4 py-2 border rounded-lg" />
|
||||
<select id="input-sorting" class="px-4 py-2 border rounded-lg" style="padding-right: 3.5rem;">
|
||||
<option value="-datetime">По дате ↑</option>
|
||||
<option value="+datetime">По дате ↓</option>
|
||||
<option value="+author">По автору А-Я</option>
|
||||
<option value="-author">По автору Я-А</option>
|
||||
<option value="+text">По тексту А-Я</option>
|
||||
<option value="-text">По тексту Я-А</option>
|
||||
<option value="+creator.name">По цитатору А-Я</option>
|
||||
<option value="-creator.name">По цитатору Я-А</option>
|
||||
<option value="random">Рандом Рандомыч</option>
|
||||
</select>
|
||||
<button class="text-gray-600 hover:text-blue-500" id="btn-refresh">
|
||||
<i class="fas fa-refresh"></i>
|
||||
</button>
|
||||
</div>
|
||||
<button class="bg-custom text-white px-4 py-2 rounded-lg hover:bg-custom/90" id="btn-add-open">Добавить цитату</button>
|
||||
</div>
|
||||
<div id="block-quotes" class="space-y-4">
|
||||
<img id="block-quotes-loader" src="/static/images/loader.gif" alt="Loading..." class="loader">
|
||||
</div>
|
||||
<div class="mt-6 flex justify-center gap-2">
|
||||
<button id="btn-page-first" class="hidden px-3 py-1 border rounded-lg hover:bg-gray-50">1</button>
|
||||
<div id="pages-prev" class="hidden px-3 py-1 border rounded-lg hover:bg-gray-50">...</div>
|
||||
<button id="btn-page-prev" class="hidden px-3 py-1 border rounded-lg hover:bg-gray-50">1</button>
|
||||
<button id="btn-page-curr" class="px-3 py-1 border rounded-lg bg-custom text-white">2</button>
|
||||
<button id="btn-page-next" class="hidden px-3 py-1 border rounded-lg hover:bg-gray-50">3</button>
|
||||
<div id="pages-next" class="hidden px-3 py-1 border rounded-lg hover:bg-gray-50">...</div>
|
||||
<button id="btn-page-last" class="hidden px-3 py-1 border rounded-lg hover:bg-gray-50">10</button>
|
||||
</div>
|
||||
<div class="text-center mt-8">
|
||||
<p class="text-xs text-gray-500 font-['Inter']">
|
||||
<i class="fas fa-quote-right text-custom mr-1"></i>
|
||||
© Masahiko AMANO (H1K0), 2025—present
|
||||
<i class="fas fa-quote-left text-custom ml-1"></i>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/static/js/quotes.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user