improve usability

open-leaderboard-server.py

@@ -12,6 +12,7 @@ PARAM_START = "start"
 PARAM_END   = "end"
 
 BASE_URL    = "http://{server}{path}?{paramStart}={start}&{paramEnd}={end}"
+MAX_ENTRY   = "http://{server}/getmaxentries"
 SEGMENT     = 100
 SEPERATOR   = ','
 
@@ -84,13 +85,16 @@ def leaderboard():
 
     end = start + SEGMENT
 
-
     # request and check if we are within range #
-    responseString = requestRange(start, end)
-    if "MAXENTRY:" in responseString:
-        maxentry = int(responseString.split(":")[1])
-        start = maxentry - SEGMENT - 1
-        end   = maxentry - 1
+    maxEntryUrl = MAX_ENTRY.format(server=SERVER)
+    maxEntry = int(requests.get(maxEntryUrl).content)
+    reachedEnd = False
+    if end > maxEntry:
+        start = maxEntry - ( maxEntry % SEGMENT ) - 1
+        end   = maxEntry - 1
+        reachedEnd = True
+
+    # do the actual request #
     responseString = requestRange(start, end)
 
     # create relevant html-lines from player
@@ -107,10 +111,15 @@ def leaderboard():
                                         playerGames="Games", \
                                         playerWinratio="Winratio"))
     
+    endOfBoardIndicator = ""
+    if reachedEnd:
+        endOfBoardHtml = "<div id='eof' class=endOfBoardIndicator> - - - End of Board - - - </div>"
+        endOfBoardIndicator = flask.Markup(endOfBoardHtml)
     
     finalResponse = flask.render_template("base.html", playerList=players, \
                                                         columNames=columContent, \
-                                                        start=start)
+                                                        start=start, \
+                                                        endOfBoardIndicator=endOfBoardIndicator)
     return finalResponse
 
 @app.route('/static/<path:path>')

static/buttons.js

@@ -1,17 +1,32 @@
+/* disable buttons if nessesary */
+var url   = new URL(window.location.href)
+var page  = url.searchParams.get("page")
+var buttonBackward = document.getElementById("button-backward")
+var buttonForward  = document.getElementById("button-forward")
+var buttonFirst    = document.getElementById("button-first")
+var isLastPage     = document.getElementById("eof")
+
+if(!page || page == "0"){
+    buttonBackward.disabled = true
+    buttonFirst.disabled   = true
+
+    buttonBackward.classList.add("disabled")
+    buttonFirst.classList.add("disabled")
+}
+
+if(isLastPage){
+    buttonForward.disabled = true;
+    buttonForward.classList.add("disabled")
+}
+
 function forward(){
 
-    var url   = new URL(window.location.href)
-    var start = url.searchParams.get("start")
-    var page  = url.searchParams.get("page")
 
     /* clean URL from unessesary parameters */
     url.searchParams.delete("goto")
-    url.searchParams.delete("start")
 
     if(page){
         page = parseInt(page) + 1
-    }else if(start){
-        page = Math.trunc(parseInt(start)/100) + 1
     }else{
         page = 1
     }
@@ -22,21 +37,14 @@ function forward(){
 }
 function backward(){
 
-    var url   = new URL(window.location.href)
-    var start = url.searchParams.get("start")
-    var page  = url.searchParams.get("page")
-   
     /* clean URL from unessesary parameters */
     url.searchParams.delete("goto")
-    url.searchParams.delete("start")
     
     if(page){
         page = parseInt(page) - 1
         if(page < 0){
             page = 0
         }
-    }else if(start){
-        page = Math.trunc(parseInt(start)/100) - 1
     }else{
         page = 0
     }
@@ -59,7 +67,6 @@ var gotoRankInputField = document.getElementById("gotoRank");
 gotoRankInputField.addEventListener("keyup", function(event) {
     if (event.key == "Enter") {
         event.preventDefault();
-        var url  = new URL(window.location.href)
         var rank = gotoRankInputField.value
         var page = Math.trunc((rank - 1)/100)
         url.searchParams.set("page", page)

static/site.css

@@ -32,6 +32,10 @@ body{
     color: #583535;
 }
 
+.disabled {
+    opacity: 0.5;
+}
+
 .input-field{
     float: left;
     margin-right: 10px;
@@ -61,6 +65,7 @@ body{
     padding-top: 2px;
     padding-bottom: 2px;
 }
+
 .line-odd{
     width: 100%;    
     background-color: lightgrey;
@@ -69,6 +74,12 @@ body{
     padding-bottom: 2px;
 }
 
+.endOfBoardIndicator{
+    background: red;
+    text-align: center;
+    font-weight: bold;
+}
+
 /* ############# PLAYER INFORMATION IN LINES ############# */ 
 .playerRank{
     float: left;
@@ -84,7 +95,6 @@ body{
     float: right;
     width: 20%;
     text-align: right;
-
 }
 
 .playerGames{

templates/base.html

@@ -5,9 +5,12 @@
     </head>
     <body>
         <div class=top-bar>
-            <button type="button" onclick=forward()   class=top-button>Forward </button>
-            <button type="button" onclick=backward()  class=top-button>Backward</button>
-            <button type="button" onclick=firstPage() class=top-button>Top 100 </button>
+            <button id="button-backward" type="button" onclick=backward() 
+                    class=top-button>Backward </button>
+            <button id="button-forward" type="button" onclick=forward()
+                    class=top-button>Forward</button>
+            <button id="button-first" type="button" onclick=firstPage()
+                    class=top-button>Top 100 </button>
 
             <input id="getPlayer" type="text"   class=input-field placeholder="search player...">
             <input id="gotoRank"  type="number" class=input-field placeholder="goto rank...">
@@ -23,6 +26,7 @@
                 {% endif %}
                 {% set count = count + 1 %}
             {% endfor %}
+            {{ endOfBoardIndicator }}
         </div>
         <div class=footer>
         	<a class="footerLink" href="https://blog.atlantishq.de/about">Impressum/Legal</a>