Add subscription manager page (WIP)

public/js/subscription-manager.js

@@ -0,0 +1,57 @@
+const component = () => {
+	return {
+		subscriptions: [],
+		plugins: [],
+		pid: undefined,
+
+		init() {
+			fetch(`${base_url}api/admin/plugin`)
+				.then((res) => res.json())
+				.then((data) => {
+					if (!data.success) throw new Error(data.error);
+					this.plugins = data.plugins;
+
+					const pid = localStorage.getItem("plugin");
+					if (pid && this.plugins.map((p) => p.id).includes(pid))
+						this.pid = pid;
+					else if (this.plugins.length > 0)
+						this.pid = this.plugins[0].id;
+
+					if (this.pid) this.list(pid);
+				})
+				.catch((e) => {
+					alert(
+						"danger",
+						`Failed to list the available plugins. Error: ${e}`
+					);
+				});
+		},
+		pluginChanged() {
+			localStorage.setItem("plugin", this.pid);
+			this.list(this.pid);
+		},
+		list(pid) {
+			fetch(
+				`${base_url}api/admin/plugin/subscriptions?${new URLSearchParams(
+					{
+						plugin: pid,
+					}
+				)}`,
+				{
+					method: "GET",
+				}
+			)
+				.then((response) => response.json())
+				.then((data) => {
+					if (!data.success) throw new Error(data.error);
+					this.subscriptions = data.subscriptions;
+				})
+				.catch((e) => {
+					alert(
+						"danger",
+						`Failed to list subscriptions. Error: ${e}`
+					);
+				});
+		},
+	};
+};

src/routes/admin.cr

@@ -70,6 +70,10 @@ struct AdminRouter
       layout "download-manager"
     end
 
+    get "/admin/subscriptions" do |env|
+      layout "subscription-manager"
+    end
+
     get "/admin/missing" do |env|
       layout "missing-items"
     end

src/views/layout.html.ecr

@@ -19,6 +19,7 @@
                   <ul class="uk-nav-sub">
                     <li><a href="<%= base_url %>download/plugins">Plugins</a></li>
                     <li><a href="<%= base_url %>admin/downloads">Download Manager</a></li>
+                    <li><a href="<%= base_url %>admin/subscriptions">Subscription Manager</a></li>
                   </ul>
                 </li>
               <% end %>
@@ -51,6 +52,7 @@
                     <li><a href="<%= base_url %>download/plugins">Plugins</a></li>
                     <li class="uk-nav-divider"></li>
                     <li><a href="<%= base_url %>admin/downloads">Download Manager</a></li>
+                    <li><a href="<%= base_url %>admin/subscriptions">Subscription Manager</a></li>
                   </ul>
                 </div>
               </li>

src/views/subscription-manager.html.ecr

@@ -0,0 +1,29 @@
+<h2 class=uk-title>Subscription Manager</h2>
+<div x-data="component()" x-init="init()">
+    <div class="uk-grid-small" uk-grid style="margin-bottom:40px;">
+        <div class="uk-container uk-text-center" x-show="plugins.length === 0" style="width:100%">
+            <h2>No Plugins Found</h2>
+            <p>We could't find any plugins in the directory <code><%= Config.current.plugin_path %></code>.</p>
+            <p>You can download official plugins from the <a href="https://github.com/hkalexling/mango-plugins">Mango plugins repository</a>.</p>
+        </div>
+
+        <div x-show="plugins.length > 0" style="width:100%">
+            <div class="uk-margin">
+                <label class="uk-form-label">Choose a plugin</label>
+                <div class="uk-form-controls">
+                    <select class="uk-select" x-model="pid" @change="pluginChanged()">
+                        <template x-for="p in plugins" :key="p">
+                            <option :value="p.id" x-text="p.title"></option>
+                        </template>
+                    </select>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<% content_for "script" do %>
+    <%= render_component "moment" %>
+    <script src="<%= base_url %>js/alert.js"></script>
+    <script src="<%= base_url %>js/subscription-manager.js"></script>
+<% end %>