Feature: added pagination for ranking page (complete)

models/models.go

@@ -135,6 +135,7 @@ type User struct {
 type RankedArtwork struct {
 	ID           int    `json:"illust_id"`
 	Title        string `json:"title"`
+	Rank         int    `json:"rank"`
 	Pages        string `json:"illust_page_count"`
 	Image        string `json:"url"`
 	ArtistID     int    `json:"user_id"`

template/rank.html

@@ -5,43 +5,121 @@
 
   <div class="switcher">
     <span class="switch-title">Content</span>
-    <a href="/ranking?content=all&mode={{ .Mode }}&p=1" class="switch-button">Overall</a>
-    <a href="/ranking?content=illust&mode={{ .Mode }}&p=1" class="switch-button">Illustrations</a>
-    <a href="/ranking?content=manga&mode={{ .Mode }}&p=1" class="switch-button">Mangas</a>
+    <a href="/ranking?content=all&mode={{ .Mode }}&page=1" class="switch-button"
+      >Overall</a
+    >
+    <a
+      href="/ranking?content=illust&mode={{ .Mode }}&page=1"
+      class="switch-button"
+      >Illustrations</a
+    >
+    <a
+      href="/ranking?content=manga&mode={{ .Mode }}&page=1"
+      class="switch-button"
+      >Mangas</a
+    >
   </div>
   <br />
 
   <div class="switcher">
     <span class="switch-title">Modes</span>
-    <a href="/ranking?content={{ .Content }}&mode=daily&p=1" class="switch-button">Daily</a>
-    <a href="/ranking?content={{ .Content }}&mode=weekly&p=1" class="switch-button">Weekly</a>
-    <a href="/ranking?content={{ .Content }}&mode=monthly&p=1" class="switch-button">Monthly</a>
-    <a href="/ranking?content={{ .Content }}&mode=rookie&p=1" class="switch-button">Rookie</a>
+    <a
+      href="/ranking?content={{ .Content }}&mode=daily&page=1"
+      class="switch-button"
+      >Daily</a
+    >
+    <a
+      href="/ranking?content={{ .Content }}&mode=weekly&page=1"
+      class="switch-button"
+      >Weekly</a
+    >
+    <a
+      href="/ranking?content={{ .Content }}&mode=monthly&page=1"
+      class="switch-button"
+      >Monthly</a
+    >
+    <a
+      href="/ranking?content={{ .Content }}&mode=rookie&page=1"
+      class="switch-button"
+      >Rookie</a
+    >
     <span class="switch-seperator"></span>
-    <a href="/ranking?content={{ .Content }}&mode=daily_r18&p=1" class="switch-button">Daily (R-18)</a>
-    <a href="/ranking?content={{ .Content }}&mode=weekly_r18&p=1" class="switch-button">Weekly (R-18)</a>
+    <a
+      href="/ranking?content={{ .Content }}&mode=daily_r18&page=1"
+      class="switch-button"
+      >Daily (R-18)</a
+    >
+    <a
+      href="/ranking?content={{ .Content }}&mode=weekly_r18&page=1"
+      class="switch-button"
+      >Weekly (R-18)</a
+    >
   </div>
   <br />
 
-  {{ range $i, $_ := .Items }}
+  {{ range .Items }}
   <div class="artwork-thumbnail-small artwork-thumbnail">
-    <div class="artwork-rank-circle">{{ $i | inc}}</div>
+    <div class="artwork-rank-circle">{{ .Rank }}</div>
     {{ if gt (toInt .Pages) 1 }}
     <div class="artwork-page-count"><span>&boxbox; {{ .Pages }}</span></div>
     {{ end }}
     <a href="/artworks/{{ .ID }}">
-      <img data-src="{{ proxyImage .Image }}" alt="{{ .Title }}" class="artwork-master-image lazy" />
+      <img
+        data-src="{{ proxyImage .Image }}"
+        alt="{{ .Title }}"
+        class="artwork-master-image lazy"
+      />
     </a>
 
     <a class="artwork-thumbnail-title" href="/artworks/{{ .ID }}">
       <h3 class="no-margin">{{ .Title }}</h3>
     </a>
-    <a href="/users/{{ .ArtistID }}" class="artwork-thumbnail-artist flex"><img
-        data-src="{{ proxyImage .ArtistAvatar }}" alt="{{ .ArtistName }}"
-        class="artwork-thumbnail-artist-avatar border-rounded lazy" />
-      {{ .ArtistName }}</a>
+    <a href="/users/{{ .ArtistID }}" class="artwork-thumbnail-artist flex"
+      ><img
+        data-src="{{ proxyImage .ArtistAvatar }}"
+        alt="{{ .ArtistName }}"
+        class="artwork-thumbnail-artist-avatar border-rounded lazy"
+      />
+      {{ .ArtistName }}</a
+    >
   </div>
   {{ end }}
+
+  <div class="pagination">
+    {{ if eq .Page 1 }}
+    <a href="#" class="pagination-button disabled">First</a>
+    <a href="#" class="pagination-button disabled">Previous</a>
+    {{ else }}
+    <a
+      href="/ranking?content={{ .Content }}&mode={{ .Mode }}&page=1"
+      class="pagination-button"
+      >First</a
+    >
+    <a
+      href="/ranking?content={{ .Content }}&mode={{ .Mode }}&page={{ dec .Page }}"
+      class="pagination-button"
+      >Previous</a
+    >
+    {{ end }}
+
+    <a href="#" class="pagination-button disabled">{{ .Page }}</a>
+
+    {{ if eq .Page 10 }}
+    <a href="#" class="pagination-button disabled">Next</a>
+    <a href="#" class="pagination-button disabled">Last</a>
+    {{ else }}
+    <a
+      href="/ranking?content={{ .Content }}&mode={{ .Mode }}&page={{ inc .Page }}"
+      class="pagination-button"
+      >Next</a
+    >
+    <a
+      href="/ranking?content={{ .Content }}&mode={{ .Mode }}&page=10"
+      class="pagination-button"
+      >Last</a
+    >
+    {{ end }}
+  </div>
 </div>
 
 {{ template "footer.html" }}

views/routes.go

@@ -82,12 +82,14 @@ func ranking_page(c *gin.Context) {
 		page = "1"
 	}
 
+	pageInt, _ := strconv.Atoi(page)
+
 	response, _ := PC.GetRanking(mode, content, page)
 
 	c.HTML(http.StatusOK, "rank.html", gin.H{"Items": response.Artworks,
 		"Mode":    mode,
 		"Content": content,
-		"Page":    page})
+		"Page":    pageInt})
 }
 
 func newestArtworksPage(c *gin.Context) {