From c6fdbfd9fd8a490ca48c72c4dafba048e289d372 Mon Sep 17 00:00:00 2001
From: Alex Ling <hkalexling@gmail.com>
Date: Mon, 15 Mar 2021 07:12:10 +0000
Subject: [PATCH] Better format ranges on subscription manager page

---
 public/js/subscription.js       |  9 ++++
 src/views/subscription.html.ecr | 94 ++++++++++++++++-----------------
 2 files changed, 54 insertions(+), 49 deletions(-)

diff --git a/public/js/subscription.js b/public/js/subscription.js
index e6e4909..ed2cb17 100644
--- a/public/js/subscription.js
+++ b/public/js/subscription.js
@@ -68,6 +68,15 @@ const component = () => {
 				.fail((jqXHR, status) => {
 					alert('danger', `Failed to check subscription. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
 				});
+		},
+
+		formatRange(min, max) {
+			if (!isNaN(min) && isNaN(max)) return `≥ ${min}`;
+			if (isNaN(min) && !isNaN(max)) return `≤ ${max}`;
+			if (isNaN(min) && isNaN(max)) return 'All';
+
+			if (min === max) return `= ${min}`;
+			return `${min} - ${max}`;
 		}
 	};
 };
diff --git a/src/views/subscription.html.ecr b/src/views/subscription.html.ecr
index c01604e..cc96c47 100644
--- a/src/views/subscription.html.ecr
+++ b/src/views/subscription.html.ecr
@@ -1,58 +1,54 @@
 <h2 class="uk-title">MangaDex Subscription Manager</h2>
 
 <div x-data="component()" x-init="init()">
-    <p x-show="available === false">The subscription manager uses a MangaDex API that requires authentication. Please <a href="<%= base_url %>admin/mangadex">connect to MangaDex</a> before using this feature.</p>
+  <p x-show="available === false">The subscription manager uses a MangaDex API that requires authentication. Please <a href="<%= base_url %>admin/mangadex">connect to MangaDex</a> before using this feature.</p>
 
-    <p x-show="available && subscriptions.length === 0">No subscription found. Go to the <a href="<%= base_url %>download">MangaDex download page</a> and start subscribing.</p>
+  <p x-show="available && subscriptions.length === 0">No subscription found. Go to the <a href="<%= base_url %>download">MangaDex download page</a> and start subscribing.</p>
 
-    <template x-if="subscriptions.length > 0">
-        <div class="uk-overflow-auto">
-            <table class="uk-table uk-table-striped">
-                <thead>
-                    <tr>
-                        <th>Manga ID</th>
-                        <th>Language</th>
-                        <th>Group ID</th>
-                        <th>Min Volume</th>
-                        <th>Max Volume</th>
-                        <th>Min Chapter</th>
-                        <th>Max Chapter</th>
-                        <th>Creator</th>
-                        <th>Last Checked</th>
-                        <th>Created At</th>
-                        <th>Actions</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <template x-for="sub in subscriptions" :key="sub">
-                        <tr>
-                            <td><a :href="`<%= mangadex_base_url %>/manga/${sub.manga_id}`" x-text="sub.manga_id"></a></td>
-                            <td x-text="sub.language || 'All'"></td>
-                            <td>
-                                <a x-show="sub.group_id" :href="`<%= mangadex_base_url %>/group/${sub.group_id}`" x-text="sub.group_id"></a>
-                                <span x-show="!sub.group_id">All</span>
-                            </td>
-                            <td x-text="sub.min_volume || '0'"></td>
-                            <td x-text="sub.max_volume || '+∞'"></td>
-                            <td x-text="sub.min_chapter || '0'"></td>
-                            <td x-text="sub.max_chapter || '+∞'"></td>
-                            <td x-text="sub.username"></td>
-                            <td x-text="`${moment.unix(sub.last_checked).fromNow()}`"></td>
-                            <td x-text="`${moment.unix(sub.created_at).fromNow()}`"></td>
-                            <td :data-id="sub.id">
-                                <a @click="check($event)" x-show="sub.username === '<%= username %>'" uk-icon="refresh" uk-tooltip="Check for updates"></a>
-                                <a @click="rm($event)" x-show="sub.username === '<%= username %>'" uk-icon="trash" uk-tooltip="Delete"></a>
-                            </td>
-                        </tr>
-                    </template>
-                </tbody>
-            </table>
-        </div>
-    </template>
+  <template x-if="subscriptions.length > 0">
+    <div class="uk-overflow-auto">
+      <table class="uk-table uk-table-striped">
+        <thead>
+          <tr>
+            <th>Manga ID</th>
+            <th>Language</th>
+            <th>Group ID</th>
+            <th>Volume Range</th>
+            <th>Chapter Range</th>
+            <th>Creator</th>
+            <th>Last Checked</th>
+            <th>Created At</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <template x-for="sub in subscriptions" :key="sub">
+            <tr>
+              <td><a :href="`<%= mangadex_base_url %>/manga/${sub.manga_id}`" x-text="sub.manga_id"></a></td>
+              <td x-text="sub.language || 'All'"></td>
+              <td>
+                <a x-show="sub.group_id" :href="`<%= mangadex_base_url %>/group/${sub.group_id}`" x-text="sub.group_id"></a>
+                <span x-show="!sub.group_id">All</span>
+              </td>
+              <td x-text="formatRange(sub.min_volume, sub.max_volume)"></td>
+              <td x-text="formatRange(sub.min_chapter, sub.max_chapter)"></td>
+              <td x-text="sub.username"></td>
+              <td x-text="`${moment.unix(sub.last_checked).fromNow()}`"></td>
+              <td x-text="`${moment.unix(sub.created_at).fromNow()}`"></td>
+              <td :data-id="sub.id">
+                <a @click="check($event)" x-show="sub.username === '<%= username %>'" uk-icon="refresh" uk-tooltip="Check for updates"></a>
+                <a @click="rm($event)" x-show="sub.username === '<%= username %>'" uk-icon="trash" uk-tooltip="Delete"></a>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
+  </template>
 </div>
 
 <% content_for "script" do %>
-    <%= render_component "moment" %>
-    <script src="<%= base_url %>js/alert.js"></script>
-    <script src="<%= base_url %>js/subscription.js"></script>
+  <%= render_component "moment" %>
+  <script src="<%= base_url %>js/alert.js"></script>
+  <script src="<%= base_url %>js/subscription.js"></script>
 <% end %>