move legacy files + update builder

.gitignore

@@ -11,7 +11,5 @@ node_modules
 /package*.json
 /src/client/static
 /src/client/templates
-/src/ui/static/assets
-/src/ui/static/css
-/src/ui/static/flags
-/src/ui/static/img
+/src/ui/static/*
+/src/ui/templates/*

src/ui/client/build.py

@@ -1,6 +1,6 @@
 # I want to run process
 from os import getenv
-from shutil import copy, move, rmtree
+from shutil import copy, move, rmtree, copytree
 from subprocess import PIPE, Popen
 from pathlib import Path
 from re import sub
@@ -16,6 +16,8 @@
 opt_dir_setup_page = current_directory.joinpath("opt-setup", "setup")
 ui_dir_static = current_directory.parent.joinpath("static")
 ui_dir_templates = current_directory.parent.joinpath("templates")
+legacy_dir_static = current_directory.joinpath("legacy", "static")
+legacy_dir_templates = current_directory.joinpath("legacy", "templates")
 
 statics = ("assets", "css", "flags", "img", "js")
 
@@ -25,6 +27,8 @@ def reset():
     print("Resetting...", flush=True)
     remove_dir(opt_dir_dashboard)
     remove_dir(opt_dir_setup)
+    remove_dir(ui_dir_static)
+    remove_dir(ui_dir_templates)
 
 
 def set_dashboard():
@@ -135,10 +139,17 @@ def move_statics(folder: Path, target_folder: Path):
         move(file.as_posix(), target_folder.joinpath(file.name).as_posix())
 
 
+def add_legacy():
+    # copy dir
+    copytree(legacy_dir_static.as_posix(), ui_dir_static.as_posix())
+    copytree(legacy_dir_templates.as_posix(), ui_dir_templates.as_posix())
+
+
 def build():
     """All steps to build the front end and set it to the flask app"""
     reset()
     create_base_dirs()
+    add_legacy()
     # Only install packages if not already installed
     if not current_directory.joinpath("node_modules").exists():
         if run_command(["/usr/bin/npm", "install"]):

src/ui/templates/card_filter.html → src/ui/client/legacy/templates/card_filter.html

@@ -1,58 +1,58 @@
-{% 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-6 3xl:col-span-4' 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="{% if is_filter_hidden %} hidden {% endif %} 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 %}
-            {% if filter['type'] == 'input' %}
-                <!-- search inpt-->
-                <div class="flex flex-col relative col-span-12 md:col-span-6">
-                    <h5 class="my-1 transition duration-300 ease-in-out text-sm sm:text-md font-bold m-0 dark:text-gray-200">
-                        {{ filter['name'] }}
-                    </h5>
-                    <label for="{{ filter['id'] }}" class="sr-only">{{ filter['label'] }}</label>
-                    <input type="text"
-                           id="{{ filter['id'] }}"
-                           name="{{ filter['id'] }}"
-                           class="dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
-                           placeholder="{{ filter['placeholder'] }}"
-                           pattern="{{ filter['pattern'] }}"
-                           required />
-                </div>
-                <!-- end search inpt-->
-            {% endif %}
-            {% if filter['type'] == 'select' %}
-                <!-- select -->
-                <div class="flex flex-col relative col-span-12 md:col-span-6">
-                    <h5 class="my-1 transition duration-300 ease-in-out text-sm sm:text-md font-bold m-0 dark:text-gray-200">
-                        {{ filter['name'] }}
-                    </h5>
-                    <button aria-controls="filter-{{ 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="services-{{ filter['id'] }}" data-name="services-{{ filter['id'] }}" data-{{ attribute_name }}-setting-select-text="{{ filter['id'] }}">{{ filter['value'] }}</span>
-                        <!-- chevron -->
-                        <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">
-                            <path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" />
-                        </svg>
-                    </button>
-                    <!-- end chevron -->
-                    <!-- dropdown-->
-                    <div id="filter-{{ filter['id'] }}" role="listbox" 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-{{ 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 }}
-                            </button>
-                        {% endfor %}
-                    </div>
-                    <!-- end dropdown-->
-                </div>
-                <!-- end select  -->
-            {% endif %}
-        {% endfor %}
-    </div>
-</div>
+{% 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-6 3xl:col-span-4' 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="{% if is_filter_hidden %} hidden {% endif %} 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 %}
+            {% if filter['type'] == 'input' %}
+                <!-- search inpt-->
+                <div class="flex flex-col relative col-span-12 md:col-span-6">
+                    <h5 class="my-1 transition duration-300 ease-in-out text-sm sm:text-md font-bold m-0 dark:text-gray-200">
+                        {{ filter['name'] }}
+                    </h5>
+                    <label for="{{ filter['id'] }}" class="sr-only">{{ filter['label'] }}</label>
+                    <input type="text"
+                           id="{{ filter['id'] }}"
+                           name="{{ filter['id'] }}"
+                           class="dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
+                           placeholder="{{ filter['placeholder'] }}"
+                           pattern="{{ filter['pattern'] }}"
+                           required />
+                </div>
+                <!-- end search inpt-->
+            {% endif %}
+            {% if filter['type'] == 'select' %}
+                <!-- select -->
+                <div class="flex flex-col relative col-span-12 md:col-span-6">
+                    <h5 class="my-1 transition duration-300 ease-in-out text-sm sm:text-md font-bold m-0 dark:text-gray-200">
+                        {{ filter['name'] }}
+                    </h5>
+                    <button aria-controls="filter-{{ 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="services-{{ filter['id'] }}" data-name="services-{{ filter['id'] }}" data-{{ attribute_name }}-setting-select-text="{{ filter['id'] }}">{{ filter['value'] }}</span>
+                        <!-- chevron -->
+                        <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">
+                            <path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" />
+                        </svg>
+                    </button>
+                    <!-- end chevron -->
+                    <!-- dropdown-->
+                    <div id="filter-{{ filter['id'] }}" role="listbox" 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-{{ 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 }}
+                            </button>
+                        {% endfor %}
+                    </div>
+                    <!-- end dropdown-->
+                </div>
+                <!-- end select  -->
+            {% endif %}
+        {% endfor %}
+    </div>
+</div>

src/ui/templates/card_info.html → src/ui/client/legacy/templates/card_info.html

@@ -1,15 +1,15 @@
-{% if not is_info_hidden %}
-    <div class="h-fit col-span-12 md:col-span-4 3xl:col-span-3 p-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">INFO</h5>
-        <div role="grid" class="card-detail-container">
-            {% for info in infos %}
-                <div role="row" class="card-detail-item">
-                    <p role="gridcell" class="card-detail-item-title">{{ info['name'] }}</p>
-                    <p data-info-{{ info['id'] }} role="gridcell" class="card-detail-item-subtitle">
-                        {{ info['data'] }}
-                    </p>
-                </div>
-            {% endfor %}
-        </div>
-    </div>
-{% endif %}
+{% if not is_info_hidden %}
+    <div class="h-fit col-span-12 md:col-span-4 3xl:col-span-3 p-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">INFO</h5>
+        <div role="grid" class="card-detail-container">
+            {% for info in infos %}
+                <div role="row" class="card-detail-item">
+                    <p role="gridcell" class="card-detail-item-title">{{ info['name'] }}</p>
+                    <p data-info-{{ info['id'] }} role="gridcell" class="card-detail-item-subtitle">
+                        {{ info['data'] }}
+                    </p>
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+{% endif %}

src/ui/templates/filter_nomatch.html → src/ui/client/legacy/templates/filter_nomatch.html

@@ -1,15 +1,15 @@
-<div data-{{ attribute_name }}-nomatch-card data-{{ attribute_name }}-nomatch 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">
-    <div class="col-span-12 flex flex-col justify-center items-center h-fit">
-        <svg xmlns="http://www.w3.org/2000/svg"
-             fill="none"
-             viewBox="0 0 24 24"
-             stroke-width="1.5"
-             stroke="currentColor"
-             class="mb-2 w-8 h-8 stroke-white">
-            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607ZM10.5 7.5v6m3-3h-6" />
-        </svg>
-        <h5 class="font-bold dark:text-white/90 mx-2 text-white">
-            No {{ attribute_name.replace('-', ' ').replace('_', ' ')|lower }} match
-        </h5>
-    </div>
-</div>
+<div data-{{ attribute_name }}-nomatch-card data-{{ attribute_name }}-nomatch 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">
+    <div class="col-span-12 flex flex-col justify-center items-center h-fit">
+        <svg xmlns="http://www.w3.org/2000/svg"
+             fill="none"
+             viewBox="0 0 24 24"
+             stroke-width="1.5"
+             stroke="currentColor"
+             class="mb-2 w-8 h-8 stroke-white">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607ZM10.5 7.5v6m3-3h-6" />
+        </svg>
+        <h5 class="font-bold dark:text-white/90 mx-2 text-white">
+            No {{ attribute_name.replace('-', ' ').replace('_', ' ')|lower }} match
+        </h5>
+    </div>
+</div>

src/ui/templates/global-config.html → src/ui/client/legacy/templates/global-config.html

@@ -1,30 +1,30 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/x-icon" href="img/favicon.ico" />
-    <link rel="stylesheet" href="css/style.css" />
-    <link rel="stylesheet" href="css/flag-icons.min.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>BunkerWeb | Global config</title>
-    <script type="module" crossorigin  nonce="{{ script_nonce }}" src="assets/global_config-Bbd-rVb6.js"></script>
-    <link rel="modulepreload" crossorigin  nonce="{{ script_nonce }}" href="assets/Text-Bzn9Bwnl.js">
-    <link rel="modulepreload" crossorigin  nonce="{{ script_nonce }}" href="assets/ButtonGroup-D8ODdwjg.js">
-    <link rel="modulepreload" crossorigin  nonce="{{ script_nonce }}" href="assets/Templates--9yerr1U.js">
-    <link rel="stylesheet" crossorigin href="assets/ButtonGroup-D2kv0NCW.css">
-  </head>
-
-    <body>
-    {% set data_server_flash = [] %}
-    {% with messages = get_flashed_messages(with_categories=true) %}
-        {% for category, message in messages %}
-        {% if data_server_flash.append({"type": "error" if category == "error" else "success", "title": "dashboard_error" if category == "error" else "dashboard_success", "message": message}) %}{% endif %}
-        {% endfor %}
-    {% endwith %}
-    <div class='hidden' data-csrf-token='{{ csrf_token() }}'></div>
-    <div class='hidden' data-server-global='{{data_server_global if data_server_global else {}}}'></div>
-    <div class='hidden' data-server-flash='{{data_server_flash|tojson}}'></div>
-    <div class='hidden' data-server-builder='{{data_server_builder}}'></div>
-    <div id='app'></div>
-    </body>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="img/favicon.ico" />
+    <link rel="stylesheet" href="css/style.css" />
+    <link rel="stylesheet" href="css/flag-icons.min.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>BunkerWeb | Global config</title>
+    <script type="module" crossorigin  nonce="{{ script_nonce }}" src="assets/global_config-Bbd-rVb6.js"></script>
+    <link rel="modulepreload" crossorigin  nonce="{{ script_nonce }}" href="assets/Text-Bzn9Bwnl.js">
+    <link rel="modulepreload" crossorigin  nonce="{{ script_nonce }}" href="assets/ButtonGroup-D8ODdwjg.js">
+    <link rel="modulepreload" crossorigin  nonce="{{ script_nonce }}" href="assets/Templates--9yerr1U.js">
+    <link rel="stylesheet" crossorigin href="assets/ButtonGroup-D2kv0NCW.css">
+  </head>
+
+    <body>
+    {% set data_server_flash = [] %}
+    {% with messages = get_flashed_messages(with_categories=true) %}
+        {% for category, message in messages %}
+        {% if data_server_flash.append({"type": "error" if category == "error" else "success", "title": "dashboard_error" if category == "error" else "dashboard_success", "message": message}) %}{% endif %}
+        {% endfor %}
+    {% endwith %}
+    <div class='hidden' data-csrf-token='{{ csrf_token() }}'></div>
+    <div class='hidden' data-server-global='{{data_server_global if data_server_global else {}}}'></div>
+    <div class='hidden' data-server-flash='{{data_server_flash|tojson}}'></div>
+    <div class='hidden' data-server-builder='{{data_server_builder}}'></div>
+    <div id='app'></div>
+    </body>
     </html>