From 2034d2f7287c227f8ce4045e70bf875c15b8e73b Mon Sep 17 00:00:00 2001
From: Jordan Blasenhauer <blasenhauer.jordan.dev@gmail.com>
Date: Tue, 23 Apr 2024 09:41:39 +0200
Subject: [PATCH] update filter grid based on attribute_name

---
 src/ui/templates/account.html     |  6 ++++--
 src/ui/templates/bans.html        |  2 +-
 src/ui/templates/card_filter.html | 14 +++++++++++--
 src/ui/templates/home.html        |  2 ++
 src/ui/templates/instances.html   |  2 ++
 src/ui/templates/logs.html        | 34 ++++++++++++++++---------------
 6 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/src/ui/templates/account.html b/src/ui/templates/account.html
index 3de49b053..7c9a15da2 100644
--- a/src/ui/templates/account.html
+++ b/src/ui/templates/account.html
@@ -1,5 +1,7 @@
 {% extends "base.html" %}
 {% block content %}
+    {% set attribute_name = "account" %}
+
     <div data-service-content
          class="md:max-w-[700px] min-h-[200px] first-letter:w-full overflow-hidden overflow-y-auto overflow-x-auto col-span-12 p-4 relative break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border">
         <h5 class="my-2 font-bold dark:text-white/90 mx-2">SETTINGS</h5>
@@ -25,8 +27,8 @@
                 "description": "Enabled / Disabled TOTP"
             }
         ] %}
-        <div data-account-tabs class="col-span-12 grid grid-cols-12">
-            <div role="tablist" data-account-tabs class="block col-span-12 mb-4">
+        <div data-{{attribute_name}}-tabs class="col-span-12 grid grid-cols-12">
+            <div role="tablist" data-{{attribute_name}}-tabs class="block col-span-12 mb-4">
                 <!-- tabs -->
                 {% for tab in tabs %}
                     <button role="tab"
diff --git a/src/ui/templates/bans.html b/src/ui/templates/bans.html
index 98830c57e..fb87a3a51 100644
--- a/src/ui/templates/bans.html
+++ b/src/ui/templates/bans.html
@@ -1,5 +1,6 @@
 {% extends "base.html" %}
 {% block content %}
+    {% set attribute_name = "bans" %}
     {% set reasons = ["all"] %}
     {% set terms = ["all"] %}
     {% for ban in bans %}
@@ -10,7 +11,6 @@
             {% if terms.append(ban["term"]) %}{% endif %}
         {% endif %}
     {% endfor %}
-    {% set attribute_name = "bans" %}
 
     <!-- actions -->
     <div class="col-span-12 relative flex justify-center min-w-0 break-words rounded-2xl bg-clip-border">
diff --git a/src/ui/templates/card_filter.html b/src/ui/templates/card_filter.html
index f83c3ca95..b5f4d14cb 100644
--- a/src/ui/templates/card_filter.html
+++ b/src/ui/templates/card_filter.html
@@ -1,5 +1,15 @@
+{% set grid_cols = 'col-span-12 md:col-span-8 2xl:col-span-6 3xl:col-span-5' if attribute_name == 'bans'
+    else 'md:col-span-8 lg:col-span-5 2xl:col-span-4 3xl:col-span-3' if attribute_name == 'configs'
+    else 'col-span-12 md:col-span-6 3xl:col-span-4' if attribute_name == 'global-config'
+    else 'col-span-12 md:col-span-8 2xl:col-span-6 3xl:col-span-5'  if attribute_name == 'jobs'
+    else 'col-span-12 md:col-span-6 2xl:col-span-4'  if attribute_name == 'plugins'
+    else 'col-span-12 md:col-span-8 2xl:col-span-6 3xl:col-span-5'  if attribute_name == 'reports'
+    else 'col-span-12 md:col-span-8 2xl:col-span-6 3xl:col-span-4'  if attribute_name == 'services'
+    else 'col-span-12 md:col-span-8 2xl:col-span-6 3xl:col-span-4'
+%}
+
 <div data-{{attribute_name}}-filter
-        class="h-fit col-span-12 md:col-span-8 2xl:col-span-6 3xl:col-span-4 p-4 relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border">
+        class="h-fit {{grid_cols}} p-4 relative flex flex-col 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>
     <div class="mx-2 grid grid-cols-12 gap-4">
         {% for filter in filters %}
@@ -62,4 +72,4 @@
             {% endif %}
         {% endfor %}
     </div>
-</div>
+</div>
diff --git a/src/ui/templates/home.html b/src/ui/templates/home.html
index 81259d053..9f2b865b0 100644
--- a/src/ui/templates/home.html
+++ b/src/ui/templates/home.html
@@ -1,5 +1,7 @@
 {% extends "base.html" %}
 {% block content %}
+    {% set attribute_name = "home" %}
+
     {% set cards = [
             {'name' : 'Version', 'title' : 'PRO' if is_pro_version else 'PRO LOCKED' if pro_status == 'active' and pro_overlapped else 'EXPIRED' if pro_status == 'expired' else 'SUSPENDED' if pro_status == 'suspended' else 'FREE', 'link' : 'https://panel.bunkerweb.io/?utm_campaign=self&utm_source=ui#pro', 'subtitle' : 'all features available' if is_pro_version else 'awaiting compliance' if pro_status == 'active' and pro_overlapped else 'renew license' if pro_status == 'expired' else 'talk to team' if pro_status == 'suspended' else 'upgrade to pro', 'subtitle_color' : 'success' if is_pro_version else 'warning' },
             {'name' : 'Version number', 'title' : version, 'link' : 'https://github.com/bunkerity/bunkerweb', 'subtitle' : "couldn't find remote" if not remote_version else "latest version" if remote_version and check_version else 'Update to ' + remote_version  , 'subtitle_color' : "error" if not remote_version else "success" if remote_version and check_version else 'warning'},
diff --git a/src/ui/templates/instances.html b/src/ui/templates/instances.html
index c968094ca..1b4025199 100644
--- a/src/ui/templates/instances.html
+++ b/src/ui/templates/instances.html
@@ -1,5 +1,7 @@
 {% extends "base.html" %}
 {% block content %}
+    {% set attribute_name = "instances" %}
+
     {% if instances|length == 0 %}
         <div class="col-span-12 sm:col-span-4 sm:col-start-5">
             <div class="text-center relative w-full p-4 text-white bg-blue-500 rounded-lg">No instance to show</div>
diff --git a/src/ui/templates/logs.html b/src/ui/templates/logs.html
index 17fd1169c..58aeaf4ff 100644
--- a/src/ui/templates/logs.html
+++ b/src/ui/templates/logs.html
@@ -1,7 +1,9 @@
 {% extends "base.html" %}
 {% block content %}
+    {% set attribute_name = "logs" %}
+
     <!-- settings -->
-    <div data-logs-settings
+    <div data-{{attribute_name}}-settings
          class="col-span-12 lg:col-span-8 2xl:col-span-6 p-4 relative flex flex-col 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">SETTINGS</h5>
         <div class="mx-2 grid grid-cols-12 gap-x-4 gap-y-2">
@@ -10,11 +12,11 @@
                 <h5 class="my-1 transition duration-300 ease-in-out text-sm sm:text-md font-bold m-0 dark:text-gray-200">
                     Select instance
                 </h5>
-                <button data-logs-setting-select="instances"
+                <button data-{{attribute_name}}-setting-select="instances"
                         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">
                     <span id="logs-instance"
                           data-name="logs-instance"
-                          data-logs-setting-select-text="instances">
+                          data-{{attribute_name}}-setting-select-text="instances">
                         {% for instance in instances %}
                             {% if loop.first %}
                                 {% if
@@ -27,7 +29,7 @@
                         {% endfor %}
                     </span>
                     <!-- chevron -->
-                    <svg data-logs-setting-select="instances"
+                    <svg data-{{attribute_name}}-setting-select="instances"
                          class="transition-transform h-4 w-4 fill-gray-500"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 512 512">
@@ -36,10 +38,10 @@
                 </button>
                 <!-- end chevron -->
                 <!-- dropdown-->
-                <div data-logs-setting-select-dropdown="instances"
+                <div data-{{attribute_name}}-setting-select-dropdown="instances"
                      class="mt-1 hidden z-100 absolute flex-col w-full translate-y-16 max-h-[350px] overflow-hidden overflow-y-auto">
                     {% for instance in instances %}
-                        <button data-logs-setting-select-dropdown-btn="instances"
+                        <button data-{{attribute_name}}-setting-select-dropdown-btn="instances"
                                 value="{{ instance.name }}"
                                 data-_type="{{ instance._type }}"
                                 class="{% if loop.first %}dark:bg-primary bg-primary text-gray-300 border-t rounded-t {% else %} bg-white dark:bg-slate-700 {% endif %} {% if loop.last %}rounded-b{% endif %} 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">
@@ -176,7 +178,7 @@
             ]
         }
     ] %}
-    <div data-logs-filter
+    <div data-{{attribute_name}}-filter
          class="h-fit col-span-12 md:col-span-6 lg:col-span-4 p-4 relative flex flex-col 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">FILTERS</h5>
         <div class="mx-2 grid grid-cols-12 gap-x-4 gap-y-2">
@@ -205,14 +207,14 @@
                             {{ filter['name'] }}
                         </h5>
                         <button aria-controls="filter-{{ filter['id'] }}"
-                                data-logs-setting-select="{{ filter['id'] }}"
+                                data-{{attribute_name}}-setting-select="{{ filter['id'] }}"
                                 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">
                             <span aria-description="current filter state value"
                                   id="logs-{{ filter['id'] }}"
                                   data-name="logs-{{ filter['id'] }}"
-                                  data-logs-setting-select-text="{{ filter['id'] }}">all</span>
+                                  data-{{attribute_name}}-setting-select-text="{{ filter['id'] }}">all</span>
                             <!-- chevron -->
-                            <svg data-logs-setting-select="{{ filter['id'] }}"
+                            <svg data-{{attribute_name}}-setting-select="{{ filter['id'] }}"
                                  class="transition-transform h-4 w-4 fill-gray-500"
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 512 512">
@@ -223,11 +225,11 @@
                         <!-- dropdown-->
                         <div id="filter-{{ filter['id'] }}"
                              role="listbox"
-                             data-logs-setting-select-dropdown="{{ filter['id'] }}"
+                             data-{{attribute_name}}-setting-select-dropdown="{{ filter['id'] }}"
                              class="mt-1 hidden z-100 absolute flex-col w-full translate-y-16 max-h-[350px] overflow-hidden overflow-y-auto">
                             {% for value in filter['values'] %}
                                 <button role="option"
-                                        data-logs-setting-select-dropdown-btn="{{ filter['id'] }}"
+                                        data-{{attribute_name}}-setting-select-dropdown-btn="{{ filter['id'] }}"
                                         value="{{ value }}"
                                         class="{% if loop.first %}dark:bg-primary bg-primary text-gray-300 border-t rounded-t {% else %} bg-white dark:bg-slate-700 {% endif %} {% if loop.last %}rounded-b{% endif %} 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">
                                     {{ value }}
@@ -242,7 +244,7 @@
         </div>
     </div>
     <!-- end filter -->
-    <div data-logs-no-run
+    <div data-{{attribute_name}}-no-run
          class="w-full overflow-hidden grid grid-cols-12 max-h-100 sm:max-h-125  col-span-12 p-4 relative break-words">
         <div class="col-span-12 flex flex-col justify-center items-center h-fit">
             <svg xmlns="http://www.w3.org/2000/svg"
@@ -257,13 +259,13 @@
         </div>
     </div>
 
-    <div data-logs-card
+    <div data-{{attribute_name}}-card
          class="hidden w-full overflow-hidden grid grid-cols-12 max-h-100 sm:max-h-125 col-span-12 p-4 relative break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border">
         <div class="col-span-12">
             <h5 class="mb-4 mt-2 font-bold dark:text-white/90 mx-2">LOGS</h5>
         </div>
         <div class="col-span-12 overflow-y-auto overflow-x-auto">
-            <div data-logs-bans-list>
+            <div data-{{attribute_name}}-bans-list>
                 <!-- list container-->
                 <div class="overflow-hidden min-w-[800px] w-full grid grid-cols-12 rounded p-2">
                     <!-- header-->
@@ -271,7 +273,7 @@
                     <p class="dark:text-gray-100 h-8 text-sm font-bold col-span-9 m-0 pb-2 border-b border-gray-400">Description</p>
                     <!-- end header-->
                     <!-- list -->
-                    <ul class="col-span-12 w-full" data-logs-list>
+                    <ul class="col-span-12 w-full" data-{{attribute_name}}-list>
                     </ul>
                     <!-- end list-->
                 </div>