new sidebar (pagination)

server.py

@@ -12,6 +12,7 @@ from flask import request
 from flask import send_file
 from flask import send_from_directory
 from flask import url_for
+from flask_cache import Cache
 
 from config import database
 import top
@@ -23,6 +24,7 @@ db = MySQLdb.connect(database["host"],
 cur = db.cursor()
 
 app = Flask(__name__)
+cache = Cache(app, config={'CACHE_TYPE': 'simple'})
 app.config.update(
     JSONIFY_PRETTYPRINT_REGULAR=False
 )
@@ -71,12 +73,19 @@ def get_connection(connection_id):
         return jsonify(geojson)
 
 
+def make_cache_key(*args, **kwargs): return request.url
+
+
 @app.route('/api/top/', methods=["GET"])
+@cache.cached(timeout=50, key_prefix=make_cache_key)
 def get_top():
     if not request.args \
-            or 'type' not in request.args:
+            or 'type' not in request.args \
+            or 'pageSize' not in request.args \
+            or 'pageNumber' not in request.args:
+        print(request.args)
         abort(400)
-    return jsonify(top.helloworld(cur, request.args["type"]))
+    return jsonify(top.helloworld(cur, request.args))
 
 
 @app.route('/')

top.py

@@ -1,3 +1,5 @@
+cache = {}
+
 topSQL = {
     "shortestConnections": """
 SELECT
@@ -12,7 +14,7 @@ FROM connections
 
 WHERE start != goal
 ORDER BY length ASC
-LIMIT 10
+LIMIT %s OFFSET %s
 """,
     "farAway": """
 SELECT *
@@ -25,11 +27,16 @@ FROM (SELECT
       WHERE start != goal
       ORDER BY length ASC) AS x
 GROUP BY ref
-ORDER BY length DESC"""
+ORDER BY length DESC
+LIMIT %s OFFSET %s
+"""
 }
 
 
-def helloworld(cursor, top):
-    cursor.execute(topSQL[top])
+def helloworld(cursor, args):
 
+    sql = topSQL[args["type"]]
+    limit = int(args["pageSize"])
+    offset = (int(args["pageNumber"]) - 1) * limit
+    cursor.execute(sql, (limit, offset))
     return cursor.fetchall()

www/map.html

@@ -11,6 +11,8 @@
           integrity="sha256-t2/7smZfgrST4FS1DT0bs/KotCM74XlcqZN5Vu7xlrw=" crossorigin="anonymous"/>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/tables-min.css"
           integrity="sha256-4NzXOZY2l6V9ObAblwSPfn2wI5kyZbUMaMVVbMrZDXA=" crossorigin="anonymous"/>
+    <link rel="stylesheet" href="https://cdn.rawgit.com/superRaytin/paginationjs/master/dist/pagination.css"
+          integrity="sha384-SyzpxoHHs3cdQUpp7RLURB573W8ag6zDuRI4rs1ABbQijt3iRQg/RTXgX5/nFQiT" crossorigin="anonymous">
     <style>
         body {
             margin: 0;
@@ -59,7 +61,9 @@
         integrity="sha256-+mWd/G69S4qtgPowSELIeVAv7+FuL871WXaolgXnrwQ=" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/select2/4.0.3/js/i18n/de.js"
         integrity="sha256-mtjCIpmIYVw5CLf7IpjBWp6VtFzdKh/YtZFtpIeIStc=" crossorigin="anonymous"></script>
-
+<script src="https://cdn.rawgit.com/superRaytin/paginationjs/master/dist/pagination.min.js"
+        integrity="sha384-lGxAij8Xpweqxbi492MA2DByvagtSxqar4o0QzS0eMOq2gvV49F3UgqBhX8q4S1r"
+        crossorigin="anonymous"></script>
 <script>
     var map = L.map('map', {zoomSnap: 0.5}).setView([48.51579416571888, 15.6255304813385], 16);
     var layer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

www/sidebar.js

@@ -7,17 +7,45 @@ var sidebar = L.Control.extend({
         container.style.backgroundColor = "white";
         container.style.height = '600px';
         container.style.width = '400px';
+        /*
          var button = document.createElement("button");
          button.textContent = "Topliste";
          container.appendChild(button);
+         */
 
         var table = L.DomUtil.create("table", "sidebarTable pure-table pure-table-horizontal", container);
 
-        button.addEventListener("click", function () {
-            loadSidebar(table);
+        console.log($(container));
+        $(container).pagination({
+            dataSource: "/api/top/",
+            locator: 'items',
+            totalNumber: 121, //14400
+            pageSize: 10,
+            position: 'top',
+            ajax: {
+                data: {type: "farAway"},
+                cache: true,
+                beforeSend: function (a) {
+                    // dataContainer.html('Loading data from flickr.com ...');
+                }
+            },
+            callback: function (data, pagination) {
+                console.log(pagination);
+                while (table.firstChild) {
+                    table.removeChild(table.firstChild);
+                }
+                for (var i = 0; i < data.length; i++) {
+                    var line = document.createElement("tr");
+                    var single = data[i];
+                    for (var j = 0; j < single.length; j++) {
+                        var td = document.createElement("td");
+                        td.textContent = single[j];
+                        line.appendChild(td);
+                    }
+                    table.appendChild(line);
+                }
+            }
         });
-        loadSidebar(table);
-
 
         return container;
     }