From a64d00a5e58134843311dee6f226914d3cfd666e Mon Sep 17 00:00:00 2001
From: perennial <mail@perennialte.ch>
Date: Sun, 6 Oct 2024 13:56:29 +1100
Subject: [PATCH] ranking: implement more modes

---
 assets/views/rank.jet.html | 320 ++++++++++++++++++++-----------------
 1 file changed, 177 insertions(+), 143 deletions(-)

diff --git a/assets/views/rank.jet.html b/assets/views/rank.jet.html
index d1386ff..0a74830 100644
--- a/assets/views/rank.jet.html
+++ b/assets/views/rank.jet.html
@@ -6,111 +6,8 @@
 <div class="row justify-content-center g-4">
   <h1 class="text-center"><i class="bi bi-bar-chart-line-fill me-2"></i>{{ .Title }}</h1>
 
-  <!-- Ranking options modal -->
-  <div class="modal fade" id="RankingOptionsModal" tabindex="-1" aria-labelledby="RankingOptionsModalLabel" aria-hidden="true" hx-boost="false">
-    <div class="modal-dialog modal-lg">
-      <div class="modal-content bg-charcoal-surface1 rounded-5 border-0 p-4">
-        <div class="modal-header border-0 p-0 mb-3">
-          <h2 class="modal-title" id="RankingOptionsModalLabel"><i class="bi bi-gear-fill me-2"></i>Ranking options</h2>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-        </div>
-        <div class="modal-body p-0">
-          <!--
-          TODO: figure out how to import this a block or fragment to avoid duplication in the noscript element
-                see also rankingoptions.jet.html
-
-          TODO: add additional checks to these UnderlineNav buttons to ensure only valid URLs can be generated
-                e.g. selecting the "Ugoira" button hides the buttons under
-                    "Specialized rankings" as well as the "Monthly" and "Rookie"
-                    options under "Time frame", but this doesn't occur vice versa
-                    with the "Ugoira" button still visible if either of the latter
-                    buttons are selected, thus allowing the user to generate an invalid
-                    URL even when there is no UX indication that this is the case
-          -->
-          {{- Mode := isset(Queries.mode) ? Queries.mode : "daily" }}
-          {{- Content := isset(Queries.content) ? Queries.content : "all" }}
-          {{- url := "" }}
-          {{- if Mode == "original" || Mode == "male" || Mode == "female" || Mode == ""}}
-            {{ url = "/ranking?date=" + .Data.CurrentDate + "&page=1&content=" }}
-          {{- else }}
-            {{- url = "/ranking?mode=" + Mode + "&date=" + .Data.CurrentDate + "&page=1&content=" }}
-          {{- end }}
-          <div class="row border-bottom border-2 mb-4">
-            <div class="col-12">
-              <h3><i class="bi bi-collection-fill me-2"></i>Content type</h3>
-              <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="Content types">
-                {{- path := slice("all", "illust", "manga", "ugoira") }}
-                {{- name := slice("Overall", "Illustrations", "Manga", "Ugoira")}}
-                {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Content)}}
-              </div>
-              <p class="small text-body-secondary mb-4">Select the type of content you want to see in the rankings.</p>
-            </div>
-          </div>
-
-          <div class="row mb-4">
-            <div class="col-12 col-md-6">
-              <h3><i class="bi bi-calendar3 me-2"></i>Time frame</h3>
-              {{ url := "/ranking?content=" + Content +"&date=" + .Data.CurrentDate + "&page=1&mode=" }}
-              {{- if Content != "ugoira" }}
-              <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3">
-                {{- path := slice("daily", "weekly", "monthly", "rookie") }}
-                {{- name := slice("Daily", "Weekly", "Monthly", "Rookie")}}
-                {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
-              </div>
-              <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3">
-                {{- path := slice("daily_r18", "weekly_r18") }}
-                {{- name := slice("Daily (R-18)", "Weekly (R-18)")}}
-                {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
-              </div>
-              {{- else }}
-              <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3">
-                {{- path := slice("daily", "weekly") }}
-                {{- name := slice("Daily", "Weekly")}}
-                {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
-              </div>
-              <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3">
-                {{- path := slice("daily_r18", "weekly_r18") }}
-                {{- name := slice("Daily (R-18)", "Weekly (R-18)")}}
-                {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
-              </div>
-              {{- end }}
-              <p class="small text-body-secondary">Choose the time frame for the rankings.</p>
-              <p class="small text-body-secondary mb-4 mb-md-0">
-                <span class="fw-bold">Monthly</span> and <span class="fw-bold">Rookie</span> are unavailable when filtering for <span class="fw-bold">Ugoira</span>.
-              </p>
-            </div>
-
-            <div class="col-12 col-md-6">
-              {{- if Content == "all" }}
-              <h3><i class="bi bi-star-fill me-2"></i>Specialized rankings</h3>
-              <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="Specialized ranking modes">
-                {{ specUrl := "/ranking?content=all&date=" + .Data.CurrentDate + "&page=1&mode=" }}
-                {{- path := slice("original") }}
-                {{- name := slice("Original")}}
-                {{- yield UnderlineNav(baseURL=specUrl, paths=path, names=name, activeState=Mode)}}
-              </div>
-              <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="Specialized ranking modes">
-                {{ specUrl := "/ranking?content=all&date=" + .Data.CurrentDate + "&page=1&mode=" }}
-                {{- path := slice("male", "female") }}
-                {{- name := slice("Popular among males", "Popular among females")}}
-                {{- yield UnderlineNav(baseURL=specUrl, paths=path, names=name, activeState=Mode)}}
-              </div>
-              <p class="small text-muted">Specialized ranking categories.</p>
-              <p class="small text-muted mb-0">These options are only available when filtering for <span class="fw-bold">Overall</span>.</p>
-              {{- end }}
-              </div>
-            </div>
-
-          <div class="row">
-            <div class="col-12 d-flex justify-content-between">
-              <a href="/ranking" type="button" class="btn btn-danger fw-bold rounded-pill">Reset filters</a>
-              <button type="button" class="custom-btn-secondary bg-charcoal-surface2" data-bs-dismiss="modal">Close</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+  {*
+  <!-- TODO: noscript version causing issues with the underlinenav (blank page on Content switch), disabling it for now -->
 
   <noscript>
     <div class="custom-card bg-charcoal-surface1 p-4">
@@ -124,20 +21,8 @@
         {{- else }}
           {{- url = "/ranking?mode=" + Mode + "&date=" + .Data.CurrentDate + "&page=1&content=" }}
         {{- end }}
-        <div class="row border-bottom border-2 mb-4">
-          <div class="col-12">
-            <h3><i class="bi bi-collection-fill me-2"></i>Content type</h3>
-            <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="Content types">
-              {{- path := slice("all", "illust", "manga", "ugoira") }}
-              {{- name := slice("Overall", "Illustrations", "Manga", "Ugoira")}}
-              {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Content)}}
-            </div>
-            <p class="small text-body-secondary mb-4">Select the type of content you want to see in the rankings.</p>
-          </div>
-        </div>
-
         <div class="row mb-4">
-          <div class="col-12 col-md-6">
+          <div class="col-12">
             <h3><i class="bi bi-calendar3 me-2"></i>Time frame</h3>
             {{ url := "/ranking?content=" + Content +"&date=" + .Data.CurrentDate + "&page=1&mode=" }}
             {{- if Content != "ugoira" }}
@@ -147,8 +32,8 @@
               {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
             </div>
             <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3">
-              {{- path := slice("daily_r18", "weekly_r18") }}
-              {{- name := slice("Daily (R-18)", "Weekly (R-18)")}}
+              {{- path := slice("daily_r18", "weekly_r18", "r18g") }}
+              {{- name := slice("Daily (R-18)", "Weekly (R-18)", "Weekly (R-18G)")}}
               {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
             </div>
             {{- else }}
@@ -158,36 +43,52 @@
               {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
             </div>
             <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3">
-              {{- path := slice("daily_r18", "weekly_r18") }}
-              {{- name := slice("Daily (R-18)", "Weekly (R-18)")}}
+              {{- path := slice("daily_r18", "weekly_r18", "r18g") }}
+              {{- name := slice("Daily (R-18)", "Weekly (R-18)", "Weekly (R-18G)")}}
               {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
             </div>
             {{- end }}
-            <p class="small text-body-secondary">Choose the time frame for the rankings.</p>
-            <p class="small text-body-secondary mb-4 mb-md-0">
-              <span class="fw-bold">Monthly</span> and <span class="fw-bold">Rookie</span> are unavailable when filtering for <span class="fw-bold">Ugoira</span>.
+            {{- if Content == "all" || Content == "illust" || Content == "manga" }}
+            <p class="small text-body-secondary mb-4">
+            {{- else }}
+            <p class="small text-body-secondary mb-0">
+            {{- end }}
+              Choose the time frame for the rankings.
             </p>
           </div>
 
-          <div class="col-12 col-md-6">
-            {{- if Content == "all" }}
+        <div class="row mb-4">
+          <!-- NOTE: still rendering the row element when Content == ugoira to keep things simple for margin -->
+          {{- if Content != "ugoira" }}
+          <div class="col-12">
             <h3><i class="bi bi-star-fill me-2"></i>Specialized rankings</h3>
-            <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="Specialized ranking modes">
-              {{ specUrl := "/ranking?content=all&date=" + .Data.CurrentDate + "&page=1&mode=" }}
-              {{- path := slice("original") }}
-              {{- name := slice("Original")}}
-              {{- yield UnderlineNav(baseURL=specUrl, paths=path, names=name, activeState=Mode)}}
-            </div>
-            <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="Specialized ranking modes">
-              {{ specUrl := "/ranking?content=all&date=" + .Data.CurrentDate + "&page=1&mode=" }}
-              {{- path := slice("male", "female") }}
-              {{- name := slice("Popular among males", "Popular among females")}}
-              {{- yield UnderlineNav(baseURL=specUrl, paths=path, names=name, activeState=Mode)}}
-            </div>
-            <p class="small text-muted">Specialized ranking categories.</p>
-            <p class="small text-muted mb-0">These options are only available when filtering for <span class="fw-bold">Overall</span>.</p>
+            <!-- Options for Overall -->
+            {{- if Content == "all" }}
+              <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="Specialized ranking modes">
+                {{ specUrl := "/ranking?content=all&date=" + .Data.CurrentDate + "&page=1&mode=" }}
+                {{- path := slice("original", "daily_ai", "male", "female") }}
+                {{- name := slice("Original", "AI-generated", "Popular among males", "Popular among females")}}
+                {{- yield UnderlineNav(baseURL=specUrl, paths=path, names=name, activeState=Mode)}}
+              </div>
+              <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="Specialized ranking modes">
+                {{ specUrl := "/ranking?content=all&date=" + .Data.CurrentDate + "&page=1&mode=" }}
+                {{- path := slice("daily_r18_ai", "male_r18", "female_r18") }}
+                {{- name := slice("AI-generated (R-18)", "Popular among males (R-18)", "Popular among females (R-18)")}}
+                {{- yield UnderlineNav(baseURL=specUrl, paths=path, names=name, activeState=Mode)}}
+              </div>
             {{- end }}
+            <!-- Options for Illustrations -->
+            {{- if Content == "illust" || Content == "manga" }}
+              <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="Specialized ranking modes">
+                {{ specUrl := "/ranking?content=all&date=" + .Data.CurrentDate + "&page=1&mode=" }}
+                {{- path := slice("male_r18", "female_r18") }}
+                {{- name := slice("Popular among males (R-18)", "Popular among females (R-18)")}}
+                {{- yield UnderlineNav(baseURL=specUrl, paths=path, names=name, activeState=Mode)}}
+              </div>
+            {{- end }}
+            <p class="small text-body-secondary mb-0">Specialized ranking categories.</p>
             </div>
+            {{- end }}
           </div>
 
         <div class="row">
@@ -199,12 +100,27 @@
       </div>
     </div>
   </noscript>
+  *}
 
   <div class="col-12">
+    <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="Content types">
+      {{- Mode := isset(Queries.mode) ? Queries.mode : "daily" }}
+      {{- Content := isset(Queries.content) ? Queries.content : "all" }}
+      {{- url := "" }}
+      {{- if Mode == "original" || Mode == "male" || Mode == "female" || Mode == ""}}
+        {{ url = "/ranking?date=" + .Data.CurrentDate + "&page=1&content=" }}
+      {{- else }}
+        {{- url = "/ranking?mode=" + Mode + "&date=" + .Data.CurrentDate + "&page=1&content=" }}
+      {{- end }}
+      {{- path := slice("all", "illust", "ugoira", "manga") }}
+      {{- name := slice("Overall", "Illustrations", "Ugoira", "Manga")}}
+      {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Content)}}
+    </div>
     <div class="d-flex flex-row align-items-center justify-content-between mb-4" aria-label="Ranking options">
-      <h2 class="mb-0"><i class="bi bi-bar-chart-line-fill me-2"></i>Rankings for {{ .Data.CurrentDate }}</h2>
+      <!-- TODO: use the actual mode and content names instead of variables, and make weekly and monthly show a date range -->
+      <h2 class="text-capitalize mb-0"><i class="bi bi-bar-chart-line-fill me-2"></i>{{ Queries.mode }} {{ Queries.content }} rankings for {{ .Data.CurrentDate }}</h2>
       <button class="js-required custom-btn-secondary bg-charcoal-surface2" type="button" data-bs-toggle="modal" data-bs-target="#RankingOptionsModal">
-        <i class="bi bi-gear-fill me-2"></i>Open options
+        <i class="bi bi-gear-fill me-2"></i>Options
       </button>
     </div>
 
@@ -226,4 +142,122 @@
   {{- paginationData := createPaginator(url, "#checkpoint", .Page, -1, 1, 5) }}
   {{- yield pagination(data=paginationData) }}
 </div>
+
+<!-- End of main content -->
+
+<!-- Ranking options modal -->
+<div class="modal fade" id="RankingOptionsModal" tabindex="-1" aria-labelledby="RankingOptionsModalLabel" aria-hidden="true" hx-boost="false">
+  <div class="modal-dialog modal-lg">
+    <div class="modal-content bg-charcoal-surface1 rounded-5 border-0 p-4">
+      <div class="modal-header border-0 p-0 mb-4">
+        <h2 class="modal-title" id="RankingOptionsModalLabel"><i class="bi bi-gear-fill me-2"></i>Ranking options</h2>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body p-0">
+        <!--
+        TODO: figure out how to import this a block or fragment to avoid duplication in the noscript element
+              see also rankingoptions.jet.html
+
+        TODO: add additional checks to these UnderlineNav buttons to ensure only valid URLs can be generated
+              e.g. selecting the "Ugoira" button hides the buttons under
+                  "Specialized rankings" as well as the "Monthly" and "Rookie"
+                  options under "Time frame", but this doesn't occur vice versa
+                  with the "Ugoira" button still visible if either of the latter
+                  buttons are selected, thus allowing the user to generate an invalid
+                  URL even when there is no UX indication that this is the case
+        -->
+        {{- Mode := isset(Queries.mode) ? Queries.mode : "daily" }}
+        {{- Content := isset(Queries.content) ? Queries.content : "all" }}
+        {{- url := "" }}
+        {{- if Mode == "original" || Mode == "male" || Mode == "female" || Mode == ""}}
+          {{ url = "/ranking?date=" + .Data.CurrentDate + "&page=1&content=" }}
+        {{- else }}
+          {{- url = "/ranking?mode=" + Mode + "&date=" + .Data.CurrentDate + "&page=1&content=" }}
+        {{- end }}
+        {{- if Content == "all" || Content == "illust" || Content == "manga" }}
+        <div class="row border-bottom border-2 mb-4">
+        {{- else }}
+        <div class="row">
+        {{- end }}
+          <div class="col-12">
+            <h3><i class="bi bi-calendar3 me-2"></i>Time frame</h3>
+            {{ url := "/ranking?content=" + Content +"&date=" + .Data.CurrentDate + "&page=1&mode=" }}
+            {{- if Content != "ugoira" }}
+            <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3">
+              {{- path := slice("daily", "weekly", "monthly", "rookie") }}
+              {{- name := slice("Daily", "Weekly", "Monthly", "Rookie")}}
+              {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
+            </div>
+            <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3">
+              {{- path := slice("daily_r18", "weekly_r18", "r18g") }}
+              {{- name := slice("Daily (R-18)", "Weekly (R-18)", "Weekly (R-18G)")}}
+              {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
+            </div>
+            {{- else }}
+            <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3">
+              {{- path := slice("daily", "weekly") }}
+              {{- name := slice("Daily", "Weekly")}}
+              {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
+            </div>
+            <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3">
+              {{- path := slice("daily_r18", "weekly_r18", "r18g") }}
+              {{- name := slice("Daily (R-18)", "Weekly (R-18)", "Weekly (R-18G)")}}
+              {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
+            </div>
+            {{- end }}
+            {{- if Content == "all" || Content == "illust" || Content == "manga" }}
+            <p class="small text-body-secondary mb-4">
+            {{- else }}
+            <p class="small text-body-secondary mb-0">
+            {{- end }}
+              Choose the time frame for the rankings.
+            </p>
+          </div>
+        </div>
+
+        <div class="row mb-4">
+          <!-- NOTE: still rendering the row element when Content == ugoira to keep things simple for margin -->
+          {{- if Content != "ugoira" }}
+          <div class="col-12">
+            <h3><i class="bi bi-star-fill me-2"></i>Specialized rankings</h3>
+            <!-- Options for Overall -->
+            {{- if Content == "all" }}
+              <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="Specialized ranking modes">
+                {{ specUrl := "/ranking?content=all&date=" + .Data.CurrentDate + "&page=1&mode=" }}
+                {{- path := slice("original", "daily_ai", "male", "female") }}
+                {{- name := slice("Original", "AI-generated", "Popular among males", "Popular among females")}}
+                {{- yield UnderlineNav(baseURL=specUrl, paths=path, names=name, activeState=Mode)}}
+              </div>
+              <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="Specialized ranking modes">
+                {{ specUrl := "/ranking?content=all&date=" + .Data.CurrentDate + "&page=1&mode=" }}
+                {{- path := slice("daily_r18_ai", "male_r18", "female_r18") }}
+                {{- name := slice("AI-generated (R-18)", "Popular among males (R-18)", "Popular among females (R-18)")}}
+                {{- yield UnderlineNav(baseURL=specUrl, paths=path, names=name, activeState=Mode)}}
+              </div>
+            {{- end }}
+            <!-- Options for Illustrations -->
+            {{- if Content == "illust" || Content == "manga" }}
+              <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="Specialized ranking modes">
+                {{ specUrl := "/ranking?content=all&date=" + .Data.CurrentDate + "&page=1&mode=" }}
+                {{- path := slice("male_r18", "female_r18") }}
+                {{- name := slice("Popular among males (R-18)", "Popular among females (R-18)")}}
+                {{- yield UnderlineNav(baseURL=specUrl, paths=path, names=name, activeState=Mode)}}
+              </div>
+            {{- end }}
+            <p class="small text-body-secondary mb-0">Specialized ranking categories.</p>
+            </div>
+            {{- end }}
+          </div>
+
+        <div class="row">
+          <div class="col-12 d-flex justify-content-between">
+            <a href="/ranking" type="button" class="btn btn-danger fw-bold rounded-pill">Reset filters</a>
+            <button type="button" class="custom-btn-secondary bg-charcoal-surface2" data-bs-dismiss="modal">Close</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
 {{- end }}