update and fix plugins page

*fix variable names conflicts
*update filter script to match type
*update jinja to match new type names and add pro filter
*remove current_endpoint

src/ui/main.py

@@ -1224,9 +1224,9 @@ def plugins():
     return render_template(
         "plugins.html",
         plugins=plugins,
-        plugins_internal=plugins_internal,
-        plugins_external=plugins_external,
-        plugins_pro=plugins_pro,
+        plugins_count_internal=plugins_internal,
+        plugins_count_external=plugins_external,
+        plugins_count_pro=plugins_pro,
         username=current_user.get_id(),
     )
 

src/ui/static/js/plugins.js

@@ -214,7 +214,7 @@ class Filter {
     if (this.lastType === "all") return;
     for (let i = 0; i < logs.length; i++) {
       const el = logs[i];
-      const type = el.getAttribute(`data-${this.prefix}-external`).trim();
+      const type = el.getAttribute(`data-${this.prefix}-type`).trim();
       if (type !== this.lastType) el.classList.add("hidden");
     }
   }
@@ -491,8 +491,8 @@ class Modal {
     this.modalTxt.textContent = `Are you sure you want to delete ${elName} ?`;
     //external
     const isExternal = el
-      .closest("[data-plugins-external]")
-      .getAttribute("data-plugins-external")
+      .closest("[data-plugins-type]")
+      .getAttribute("data-plugins-type")
       .trim()
       .includes("external")
       ? "True"

src/ui/templates/plugins.html

@@ -1,5 +1,4 @@
-{% extends "base.html" %} {% block content %}{% set current_endpoint =
-url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %} {%
+{% extends "base.html" %} {% block content %}{%
 include "plugins_modal.html" %}
 
 <!-- info -->
@@ -28,7 +27,7 @@ include "plugins_modal.html" %}
     <p
       class="transition duration-300 ease-in-out pl-2 col-span-1 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-white dark:opacity-80"
     >
-      {{plugins_internal}}
+      {{plugins_count_internal}}
     </p>
   </div>
   <div class="mx-1 flex items-center my-4">
@@ -40,7 +39,7 @@ include "plugins_modal.html" %}
     <p
       class="transition duration-300 ease-in-out pl-2 col-span-1 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-white dark:opacity-80"
     >
-      {{plugins_external}}
+      {{plugins_count_external}}
     </p>
   </div>
   <div class="mx-1 flex items-center my-4">
@@ -52,7 +51,7 @@ include "plugins_modal.html" %}
     <p
       class="transition duration-300 ease-in-out pl-2 col-span-1 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-white dark:opacity-80"
     >
-      {{plugins_pro}}
+      {{plugins_count_pro}}
     </p>
   </div>
 </div>
@@ -60,7 +59,7 @@ include "plugins_modal.html" %}
 
 <!-- upload layout -->
 <div
-  data-{{current_endpoint}}-upload
+  data-plugins-upload
   class="p-4 col-span-12 md:col-span-7 2xl:col-span-4 grid grid-cols-12 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
 >
   <h5 class="col-span-12 mb-4 font-bold dark:text-white/90">UPLOAD / RELOAD</h5>
@@ -112,7 +111,7 @@ include "plugins_modal.html" %}
 
 <!-- filter -->
 <div
-  data-{{current_endpoint}}-filter
+  data-plugins-filter
   class="h-fit p-4 col-span-12 md:col-span-6 2xl:col-span-4 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
 >
   <h5 class="mb-2 font-bold dark:text-white/90">FILTER</h5>
@@ -144,7 +143,7 @@ include "plugins_modal.html" %}
         Select types
       </h5>
       <button
-        data-{{current_endpoint}}-setting-select="types"
+        data-plugins-setting-select="types"
         aria-controls="filter-types"
         class="disabled:opacity-75 dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 duration-300 ease-in-out dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 focus:border-green-500 flex justify-between align-middle items-center text-left text-sm leading-5.6 ease w-full rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 font-normal text-gray-700 transition-all placeholder:text-gray-500"
       >
@@ -152,12 +151,12 @@ include "plugins_modal.html" %}
           aria-description="current type"
           id="types"
           data-name="types"
-          data-{{current_endpoint}}-setting-select-text="types"
+          data-plugins-setting-select-text="types"
           >all</span
         >
         <!-- chevron -->
         <svg
-          data-{{current_endpoint}}-setting-select="types"
+          data-plugins-setting-select="types"
           class="transition-transform h-4 w-4 fill-gray-500"
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 512 512"
@@ -172,12 +171,12 @@ include "plugins_modal.html" %}
       <div
         id="filter-types"
         role="listbox"
-        data-{{current_endpoint}}-setting-select-dropdown="types"
+        data-plugins-setting-select-dropdown="types"
         class="hidden z-100 absolute h-full flex-col w-full translate-y-16"
       >
         <button
           role="option"
-          data-{{current_endpoint}}-setting-select-dropdown-btn="types"
+          data-plugins-setting-select-dropdown-btn="types"
           value="all"
           class="border-t rounded-t border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300 dark:bg-primary bg-primary text-gray-300"
         >
@@ -185,20 +184,28 @@ include "plugins_modal.html" %}
         </button>
         <button
           role="option"
-          data-{{current_endpoint}}-setting-select-dropdown-btn="types"
-          value="internal"
+          data-plugins-setting-select-dropdown-btn="types"
+          value="core"
           class="border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 bg-white text-gray-700 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300"
         >
-          internal
+          core
         </button>
         <button
           role="option"
-          data-{{current_endpoint}}-setting-select-dropdown-btn="types"
+          data-plugins-setting-select-dropdown-btn="types"
           value="external"
           class="border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 bg-white text-gray-700 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300"
         >
           external
         </button>
+        <button
+        role="option"
+        data-plugins-setting-select-dropdown-btn="types"
+        value="pro"
+        class="border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 bg-white text-gray-700 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300"
+      >
+        pro
+      </button>
       </div>
       <!-- end dropdown-->
     </div>
@@ -212,14 +219,14 @@ include "plugins_modal.html" %}
 >
   <h5 class="mb-4 mt-2 font-bold dark:text-white/90 mx-2">LIST</h5>
 
-  <div data-{{current_endpoint}}-list class="grid grid-cols-12 gap-3">
+  <div data-plugins-list class="grid grid-cols-12 gap-3">
     {% for plugin in plugins %}
     <div
-      data-{{current_endpoint}}-external="{% if plugin['external'] %} external {% else %} internal {% endif %}"
+      data-plugins-type="{{plugin['type']}}"
       class="py-3 min-h-12 relative col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3 p-1 flex justify-between items-center transition rounded bg-gray-100 hover:bg-gray-300 dark:bg-slate-700 dark:hover:bg-slate-800"
     >
       <p
-        data-{{current_endpoint}}-content
+        data-plugins-content
         class="ml-3 mr-2 break-words mb-0 transition duration-300 ease-in-out dark:opacity-90 text-left text-sm md:text-base text-slate-700 dark:text-gray-200"
       >
         {{plugin['name']}}
@@ -242,9 +249,9 @@ include "plugins_modal.html" %}
           </svg>
         </a>
         {%endif%}
-        {% if plugin['external'] %}
+        {% if plugin['type'] == "external" %}
         <button
-          data-{{current_endpoint}}-action="delete"
+          data-plugins-action="delete"
           name="{{plugin['id']}}"
           aria-label="delete plugin"
           class="z-20 mx-2 inline-block font-bold text-left text-white uppercase align-middle transition-all cursor-pointer text-xs ease-in tracking-tight-rem hover:-translate-y-px"
@@ -266,11 +273,11 @@ include "plugins_modal.html" %}
     {% if plugins_pro %}
        {% for plugin in plugins_pro %}
        <div
-       data-{{current_endpoint}}-external="external"
+       data-plugins-type="{{plugin['type']}}"
        class="py-3 min-h-12 relative col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3 p-1 flex justify-between items-center transition rounded {% if is_plugin_pro %}bg-gray-100 hover:bg-gray-300 dark:bg-slate-700 dark:hover:bg-slate-800{% else %} bg-gray-100 dark:bg-slate-700 {% endif %}"
      >
        <p
-         data-{{current_endpoint}}-content
+         data-plugins-content
          class="{% if not is_plugin_pro %} opacity-80 dark:opacity-60{% endif%} ml-3 mr-2 break-words mb-0 transition duration-300 ease-in-out text-left text-sm md:text-base text-slate-700 dark:text-gray-200"
        >
          {{plugin['name']}}