[Server] build 0010

Paginator

server.py

@@ -43,7 +43,7 @@ def get_frame(file_path):
 @app.route("/")
 def index():
     value = Markup('<strong>The HTML String</strong>')
-    response = render_template("app3.html")
+    response = render_template("app.html")
     return response
 
 @app.route("/autoc/<cut_tag>")
@@ -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

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;
 }

static/js/my.js

@@ -1,5 +1,4 @@
-function httpGet(theUrl)
+function httpGet(theUrl) {
-{
     var xmlHttp = new XMLHttpRequest();
     xmlHttp.open("GET", theUrl, false);
     xmlHttp.send(null);
@@ -37,11 +36,28 @@ function search(e){
         }
         type = document.getElementById("selected-r").value;
         url_req = location.origin + "/search/" + type + "/" + val;
-            resp_res = httpGet(url_req)["list"];
+        window.resp_res_main = httpGet(url_req);
-            console.log(resp_res);
+        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);
+        }
         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"]);
@@ -53,11 +69,48 @@ 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);
+            }
         });
     }
 }
 
 
+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("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);
+        }
+    });
+    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) {
     close_full();
     var add_elem_br = document.createElement("br");
@@ -68,7 +121,7 @@ function see_full(url, id_button, type){
     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);
@@ -84,9 +137,17 @@ 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();

templates/app.html

@@ -15,6 +15,7 @@
       <option value="questionable">Questionable</option>
       <option value="explicit">Explicit</option>
     </select>
+  <div id="paginator" class="horizscroll"></div>
   </div>
   <datalist id="tagnameac"></datalist>
   <div id="aniimated-thumbnials" class="mainsearchdata"></div>