From 246849ff93763711f64f96bb0dcf4fc0bb6afc26 Mon Sep 17 00:00:00 2001 From: Hell13Cat <46496367+Hell13Cat@users.noreply.github.com> Date: Sun, 19 Mar 2023 00:52:14 +0300 Subject: [PATCH] [Server] build 0010 Paginator --- server.py | 8 +- static/css/my.css | 38 +++++++++- static/js/my.js | 119 ++++++++++++++++++++++-------- templates/{app3.html => app.html} | 1 + 4 files changed, 132 insertions(+), 34 deletions(-) rename templates/{app3.html => app.html} (93%) diff --git a/server.py b/server.py index 30ceb8f..5b8d601 100644 --- a/server.py +++ b/server.py @@ -43,7 +43,7 @@ def get_frame(file_path): @app.route("/") def index(): value = Markup('The HTML String') - response = render_template("app3.html") + response = render_template("app.html") return response @app.route("/autoc/") @@ -122,7 +122,11 @@ def hentai_search(types, tags): res_post = {"tags":" ".join(ii["tags"]), "id":ii["id"], "type":typef, "rating":ii["rating"], "url_full":"/file/full/"+ii["file"], "url_thumb":url_thumb} list_res.append(res_post) count += 1 - json_resp = {"count":count,"list":list_res} + if len(list_res) < 25: + pages_count = 1 + else: + pages_count = len(list_res) // 25 + json_resp = {"pages":pages_count, "count":count,"list":list_res} response = jsonify(json_resp) response.headers.add('Access-Control-Allow-Origin', '*') return response diff --git a/static/css/my.css b/static/css/my.css index 69323d0..920b4d6 100644 --- a/static/css/my.css +++ b/static/css/my.css @@ -22,7 +22,7 @@ body { margin: auto; } -.buttonclose { +.buttonfullsee { width: 100%; height: 30px; color: white; @@ -64,7 +64,7 @@ body { position: fixed; top: 0; width: 100%; - height: 40px; + height: 80px; background-color: rgb(53, 53, 53); vertical-align: bottom; display: inline; @@ -90,5 +90,37 @@ body { } .mainsearchdata { - padding-top: 50px; + padding-top: 100px; +} + +.horizscroll { + float: left; + width: 100%; + background-color: rgb(53, 53, 53); + overflow: hidden; + overflow-x: scroll; + white-space:nowrap; +} + +.buttpage { + text-align: center; + margin: 4px; + vertical-align: bottom; + border-radius: 4px; +} + +.buttpageinactive { + background-color: rgb(53, 53, 53); + border: 1px solid white; + color: white; +} + +.buttpageactive { + background-color: white; + border: 1px solid white; + color: black; +} + +.imgdisable { + display: none; } \ No newline at end of file diff --git a/static/js/my.js b/static/js/my.js index bf15052..4476a4d 100644 --- a/static/js/my.js +++ b/static/js/my.js @@ -1,49 +1,88 @@ -function httpGet(theUrl) -{ +function httpGet(theUrl) { var xmlHttp = new XMLHttpRequest(); - xmlHttp.open( "GET", theUrl, false ); - xmlHttp.send( null ); + xmlHttp.open("GET", theUrl, false); + xmlHttp.send(null); return JSON.parse(xmlHttp.responseText); } -function onchange(e){ +function onchange(e) { var val = e.target.value; console.log(val); val_pars = val.split(" "); val_end = val_pars[val_pars.length - 1]; - url_req = location.origin + "/autoc/" + val_end; + url_req = location.origin + "/autoc/" + val_end; resp_res = httpGet(url_req)["list"]; var tagsac = document.getElementById("tagnameac"); tagsac.innerHTML = ''; - resp_res.forEach(function(item, i, resp_res) { + resp_res.forEach(function (item, i, resp_res) { var add_elem = document.createElement("option"); - add_elem.value = val.replace(val_end, item+" "); + add_elem.value = val.replace(val_end, item + " "); tagsac.appendChild(add_elem); }); } -function search(e){ +function search(e) { if (e.keyCode === 13) { var tagsac = document.getElementById("myInput"); var val = tagsac.value; replacec = 1 while (replacec == 1) { - val = val.replace(" ", "+"); - if(val.includes(" ")==false) { - replacec = 0 + val = val.replace(" ", "+"); + if (val.includes(" ") == false) { + replacec = 0 + } } + type = document.getElementById("selected-r").value; + url_req = location.origin + "/search/" + type + "/" + val; + window.resp_res_main = httpGet(url_req); + window.resp_res = resp_res_main["list"]; + var imgc = document.getElementById("aniimated-thumbnials"); + imgc.innerHTML = ''; + var paginator = document.getElementById("paginator"); + paginator.innerHTML = ''; + for (var i = 1; i <= resp_res_main["pages"]+1; i++) { + var add_elem_paginator = document.createElement("button"); + add_elem_paginator.textContent = i; + add_elem_paginator.setAttribute("onclick", "select_page('" + i + "')"); + add_elem_paginator.setAttribute("id", i); + if (i==1){ + add_elem_paginator.setAttribute("class", "buttpage buttpageactive"); + } else { + add_elem_paginator.setAttribute("class", "buttpage buttpageinactive"); + } + paginator.appendChild(add_elem_paginator); + console.log(i); } - type = document.getElementById("selected-r").value; - url_req = location.origin + "/search/" + type + "/" + val; - resp_res = httpGet(url_req)["list"]; - console.log(resp_res); - var imgc = document.getElementById("aniimated-thumbnials"); - imgc.innerHTML = ''; - resp_res.forEach(function(item, i, resp_res) { + resp_res.forEach(function (item, i, resp_res) { + elem_pagenum = Math.floor(i / 25) + 1 + if (elem_pagenum == 1) { + var add_elem_a = document.createElement("button"); + add_elem_a.setAttribute("onclick", "see_full('" + item["url_full"] + "', '" + item["id"] + "', '" + item["type"] + "')"); + add_elem_a.setAttribute("id", item["id"]); + add_elem_a.setAttribute("class", "buttimg"); + var add_elem_img = document.createElement("img"); + add_elem_img.setAttribute("src", item["url_thumb"]); + add_elem_img.setAttribute("loading", "lazy"); + add_elem_img.setAttribute("title", item["tags"]); + add_elem_img.setAttribute("data-src", "/static/gif/loading.gif"); + add_elem_a.appendChild(add_elem_img); + imgc.appendChild(add_elem_a); + } + }); + } +} + + +function select_page(num) { + var imgc = document.getElementById("aniimated-thumbnials"); + imgc.innerHTML = ''; + resp_res.forEach(function (item, i, resp_res) { + elem_pagenum = Math.floor(i / 25) + 1 + if (elem_pagenum == num) { var add_elem_a = document.createElement("button"); - add_elem_a.setAttribute("onclick", "see_full('"+item["url_full"]+"', '"+item["id"]+"', '"+item["type"]+"')"); + add_elem_a.setAttribute("onclick", "see_full('" + item["url_full"] + "', '" + item["id"] + "', '" + item["type"] + "')"); add_elem_a.setAttribute("id", item["id"]); add_elem_a.setAttribute("class", "buttimg"); var add_elem_img = document.createElement("img"); @@ -53,27 +92,41 @@ function search(e){ add_elem_img.setAttribute("data-src", "/static/gif/loading.gif"); add_elem_a.appendChild(add_elem_img); imgc.appendChild(add_elem_a); - }); + } + }); + var paginator = document.getElementById("paginator"); + paginator.innerHTML = ''; + for (var i = 1; i <= resp_res_main["pages"]+1; i++) { + var add_elem_paginator = document.createElement("button"); + add_elem_paginator.textContent = i; + add_elem_paginator.setAttribute("onclick", "select_page('" + i + "')"); + add_elem_paginator.setAttribute("id", i); + if (i==num){ + add_elem_paginator.setAttribute("class", "buttpage buttpageactive"); + } else { + add_elem_paginator.setAttribute("class", "buttpage buttpageinactive"); + } + paginator.appendChild(add_elem_paginator); + console.log(i); } } - -function see_full(url, id_button, type){ +function see_full(url, id_button, type) { close_full(); var add_elem_br = document.createElement("br"); var add_elem_p = document.createElement("p"); add_elem_p.setAttribute("class", "fullimagep"); add_elem_p.setAttribute("id", "fulldata"); var add_elem_a = document.createElement("a"); - add_elem_a.setAttribute("href", "#"+id_button); + add_elem_a.setAttribute("href", "#" + id_button); var add_elem_button = document.createElement("button"); add_elem_button.textContent = 'CLOSE'; - add_elem_button.setAttribute("class", "buttonclose"); + add_elem_button.setAttribute("class", "buttonfullsee"); add_elem_button.setAttribute("onclick", "close_full()"); var add_elem_ai = document.createElement("a"); add_elem_ai.setAttribute("href", url); add_elem_ai.setAttribute("target", "_blank"); - if (type == "v"){ + if (type == "v") { var add_elem_data = document.createElement("video"); add_elem_data.setAttribute("src", url); add_elem_data.setAttribute("class", "fullimage"); @@ -84,24 +137,32 @@ function see_full(url, id_button, type){ add_elem_data.setAttribute("class", "fullimage"); } add_elem_ai.append(add_elem_data) + var add_elem_ag = document.createElement("a"); + add_elem_ag.setAttribute("href", 'https://gelbooru.com/index.php?page=post&s=view&id='+id_button); + add_elem_ag.setAttribute("target", "_blank"); + var add_elem_buttong = document.createElement("button"); + add_elem_buttong.textContent = 'GELBOORU'; + add_elem_buttong.setAttribute("class", "buttonfullsee"); + add_elem_ag.append(add_elem_buttong) add_elem_p.appendChild(add_elem_button); add_elem_p.appendChild(add_elem_br); add_elem_p.appendChild(add_elem_ai); + add_elem_p.appendChild(add_elem_ag); var targetdata = document.getElementById(id_button); targetdata.after(add_elem_p) add_elem_a.click(); } -function close_full(){ +function close_full() { var fulldata = document.getElementById("fulldata"); - if (fulldata != null){ + if (fulldata != null) { fulldata.remove(); } } -function main_my(){ +function main_my() { var tagBox = document.getElementById("myInput"); tagBox.addEventListener("input", onchange); tagBox.addEventListener("keydown", search); diff --git a/templates/app3.html b/templates/app.html similarity index 93% rename from templates/app3.html rename to templates/app.html index 03af336..b0c4ce8 100644 --- a/templates/app3.html +++ b/templates/app.html @@ -15,6 +15,7 @@ +