update filter grid based on attribute_name

This commit is contained in:
Jordan Blasenhauer 2024-04-23 09:41:39 +02:00
parent 023c1b9d27
commit 2034d2f728
6 changed files with 39 additions and 21 deletions

View file

@ -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"

View file

@ -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">

View file

@ -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>

View file

@ -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'},

View file

@ -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>

View file

@ -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>