librewolf
/
bunkerized-nginx
mirror of https://github.com/bunkerity/bunkerized-nginx
4
0
Fork 1
Code Issues Projects Releases Wiki Activity

merge from ui

This commit is contained in:
bunkerity 2023-04-27 16:57:56 +02:00
parent 1d354c9c6b 55a7c8fee8
commit f118f992f6
11 changed files with 1868 additions and 1474 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

928
src/ui/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
src/ui/package.json
View File

@ -1,6 +1,6 @@
{
"devDependencies": {
"tailwindcss": "^3.1.8"
"tailwindcss": "^3.3.2"
},
"dependencies": {
"ace-builds": "^1.12.5",

2283
src/ui/static/css/dashboard.css
View File

File diff suppressed because it is too large Load Diff

22
src/ui/static/js/global.js
View File

@ -1,4 +1,4 @@
import { Checkbox } from "./utils/form.js";
import { Checkbox, Select, Password, DisabledPop } from "./utils/form.js";
class Menu {
constructor() {
@ -211,7 +211,9 @@ class FlashMsg {
//stop animate if clicked once
this.openBtn.addEventListener("click", (e) => {
try {
if (e.target.closest("button").hasAttribute("data-flash-sidebar-open")) {
if (
e.target.closest("button").hasAttribute("data-flash-sidebar-open")
) {
this.isMsgCheck = true;
}
} catch (err) {}
@ -219,14 +221,17 @@ class FlashMsg {
//remove flash message and change count
window.addEventListener("click", (e) => {
try {
if (e.target.closest("button").hasAttribute("data-close-flash-message")) {
if (
e.target.closest("button").hasAttribute("data-close-flash-message")
) {
//remove logic
const closeBtn = e.target.closest("button");
const flashEl = closeBtn.closest("[data-flash-message]");
flashEl.remove();
//update count
this.flashCount.textContent =
document.querySelectorAll("[data-flash-message]").length;
this.flashCount.textContent = document.querySelectorAll(
"[data-flash-message]"
).length;
}
} catch (err) {}
});
@ -296,6 +301,12 @@ const setNewsSidebar = new Sidebar(
"[data-sidebar-info-open]",
"[data-sidebar-info-close]"
);
const setCheckbox = new Checkbox();
const setSelect = new Select();
const setPassword = new Password();
const setDisabledPop = new DisabledPop();
const setFlashSidebar = new Sidebar(
"[data-flash-sidebar]",
"[data-flash-sidebar-open]",
@ -303,5 +314,4 @@ const setFlashSidebar = new Sidebar(
);
const setNews = new News();
const setDarkM = new darkMode();
const setCheckbox = new Checkbox();
const setFlash = new FlashMsg();

6
src/ui/static/js/global_config.js
View File

@ -1,4 +1,3 @@
import { Checkbox, Select, Password, DisabledPop } from "./utils/form.js";
import {
Popover,
Tabs,
@ -26,11 +25,6 @@ class Multiple {
}
}
const setCheckbox = new Checkbox();
const setSelect = new Select();
const setPassword = new Password();
const setDisabledPop = new DisabledPop();
const setPopover = new Popover("main", "global-config");
const setTabs = new Tabs("[global-config-tabs]", "global-config");
const format = new FormatValue();

2
src/ui/static/js/logs.js
View File

@ -496,8 +496,6 @@ class Filter {
}
}
const setCheckbox = new Checkbox();
const setSelect = new Select();
const dropdown = new Dropdown("logs");
const setLogs = new FetchLogs();
const setFilter = new Filter("logs");

35
src/ui/static/js/services.js
View File

@ -1,4 +1,3 @@
import { Checkbox, Select, Password, DisabledPop } from "./utils/form.js";
import {
Popover,
Tabs,
@ -22,6 +21,9 @@ class ServiceModal {
this.formDelete = this.modal.querySelector(
"[data-services-modal-form-delete]"
);
this.submitBtn = document.querySelector(
"button[data-services-modal-submit]"
);
//container
this.container = document.querySelector("main");
this.init();
@ -123,10 +125,7 @@ class ServiceModal {
}
changeSubmitBtnName(text) {
const submitBtn = document.querySelector(
"button[data-services-modal-submit]"
);
submitBtn.textContent = text;
this.submitBtn.textContent = text;
}
setSettingsDefault() {
@ -148,9 +147,12 @@ class ServiceModal {
//SET VALUE
if (inp.getAttribute("type") === "checkbox") {
inp.checked = defaultVal === "yes" ? true : false;
defaultVal === "yes"
? inp.setAttribute("aria-checked", "true")
: inp.setAttribute("aria-checked", "false");
inp.setAttribute("value", defaultVal);
inp.setAttribute("data-method", defaultMethod);
inp.checked = true;
}
if (inp.getAttribute("type") !== "checkbox") {
@ -197,9 +199,9 @@ class ServiceModal {
setForm(action, serviceName, formEl) {
this.modalTitle.textContent = `${action} ${serviceName}`;
formEl.setAttribute("id", `form-${action}-${serviceName}`);
formEl
.querySelector(`input[name="operation"]`)
.setAttribute("value", action);
const opeInp = formEl.querySelector(`input[name="operation"]`);
opeInp.setAttribute("value", action);
opeInp.value = action;
if (action === "edit" || action === "new") {
this.showNewEditForm();
@ -299,9 +301,12 @@ class ServiceModal {
inp.tagName === "INPUT" &&
inp.getAttribute("type") === "checkbox"
) {
inp.checked = value === "yes" ? true : false;
value === "yes"
? inp.setAttribute("aria-checked", "true")
: inp.setAttribute("aria-checked", "false");
inp.setAttribute("value", value);
inp.setAttribute("data-method", method);
inp.checked = true;
}
//for select
if (inp.tagName === "SELECT") {
@ -682,9 +687,12 @@ class Multiple {
//for settings input
if (inp.getAttribute("type") === "checkbox") {
inp.checked = value === "yes" ? true : false;
value === "yes"
? inp.setAttribute("aria-checked", "true")
: inp.setAttribute("aria-checked", "false");
inp.setAttribute("value", value);
inp.setAttribute("data-method", method);
inp.checked = true;
}
if (inp.getAttribute("type") !== "checkbox") {
@ -820,11 +828,6 @@ class Multiple {
}
}
const setCheckbox = new Checkbox();
const setSelect = new Select();
const setPassword = new Password();
const setDisabledPop = new DisabledPop();
const setPopover = new Popover();
const setTabs = new Tabs();
const setModal = new ServiceModal();

13
src/ui/static/js/utils/form.js
View File

@ -20,10 +20,21 @@ class Checkbox {
.closest("div")
.querySelector('input[type="checkbox"]');
const prevValue = checkboxEl.getAttribute("value");
//set attribute value for new state
checkboxEl.checked
prevValue === "no"
? checkboxEl.setAttribute("value", "yes")
: checkboxEl.setAttribute("value", "no");
//set custom input hidden value
const newValue = checkboxEl.getAttribute("value");
newValue === "yes"
? checkboxEl.setAttribute("aria-checked", "true")
: checkboxEl.setAttribute("aria-checked", "false");
//force checked for submit
checkboxEl.checked = true;
}
} catch (err) {}
});

5
src/ui/tailwind.config.js
View File

@ -10,6 +10,11 @@ module.exports = {
presets: [],
darkMode: "class",
theme: {
extend: {
aria: {
checked: 'checked="true"',
},
},
screens: {
sm: "576px",
"sm-max": { max: "576px" },

16
src/ui/templates/flashs.html
View File

@ -1,10 +1,12 @@
<!-- float button-->
{% with messages = get_flashed_messages(with_categories=true) %}
<div class="fixed top-2 sm:top-3 right-19 sm:right-24 xl:right-24 z-990">
<div
class="group group-hover hover:brightness-75 dark:hover:brightness-105 fixed top-2 sm:top-3 right-19 sm:right-24 xl:right-24 z-990"
>
<button
type="button"
data-flash-sidebar-open
class="transition scale-90 sm:scale-100 dark:brightness-95 dark:hover:brightness-105 hover:brightness-75 p-3 text-xl bg-white shadow-sm cursor-pointer rounded-circle text-slate-700"
class="transition scale-90 sm:scale-100 dark:brightness-95 p-3 text-xl bg-white shadow-sm cursor-pointer rounded-circle text-slate-700"
>
<svg
class="fill-yellow-500 -translate-y-0.4 h-6 w-6"
@ -28,12 +30,12 @@
<!-- right sidebar -->
<aside
data-flash-sidebar
data-flash-sidebar
class="translate-x-90 -right-0 transition z-sticky dark:bg-slate-850 dark:brightness-110 shadow-3xl max-w-full w-90 ease fixed top-0 left-auto flex h-full min-w-0 flex-col break-words rounded-none border-0 bg-white bg-clip-border px-0.5"
>
<!-- close btn-->
<svg
data-flash-sidebar-close
data-flash-sidebar-close
class="cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 absolute h-8 w-8 top-4 right-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
@ -53,7 +55,7 @@ data-flash-sidebar
<!-- close button -->
<div class="float-right mt-6">
<button
data-flash-sidebar-close
data-flash-sidebar-close
class="inline-block p-0 mb-4 text-sm font-bold leading-normal text-center uppercase align-middle transition-all ease-in bg-transparent border-0 rounded-lg shadow-none cursor-pointer hover:-translate-y-px tracking-tight-rem bg-150 bg-x-25 active:opacity-85 dark:text-white text-slate-700"
>
<i class="fa fa-close"></i>
@ -71,7 +73,7 @@ data-flash-sidebar
<!-- flash message-->
{% for category, message in messages %}
<div
data-flash-message
data-flash-message
class="{% if category == 'error' %}bg-red-500 {%else%} bg-green-500 {%endif %} my-2 border relative p-4 w-11/12 min-h-20 rounded-lg hover:scale-102 transition shadow-md break-words dark:brightness-90"
>
<div class="flex justify-between align-top items-start">
@ -81,7 +83,7 @@ data-flash-sidebar
<h5 class="text-lg mb-0 text-white">Success</h5>
{%endif%}
<button
data-close-flash-message
data-close-flash-message
type="button"
class="absolute right-8 top-2"
>

30
src/ui/templates/settings_plugins.html
View File

@ -146,7 +146,7 @@ data-plugin-item="{{plugin['id']}}"
value="{{item}}"
data-setting-select-dropdown-btn="{{value['id']}}"
type="button"
class="min-h-[38px] {% if loop.index == 1 %} border-t rounded-t {% endif %} {% if loop.index == loop.length %}rounded-b {% endif %} border-b border-l border-r border-gray-300 hover:brightness-90 bg-primary text-white my-0 relative px-6 py-2 text-center 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"
class="min-h-[38px] {% if loop.index == 1 %} border-t rounded-t {% endif %} {% if loop.index == loop.length %}rounded-b {% endif %} border-b border-l border-r border-gray-300 hover:brightness-90 bg-primary my-0 relative px-6 py-2 text-center 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"
>
{{item}}
</button>
@ -169,24 +169,30 @@ data-plugin-item="{{plugin['id']}}"
<!-- checkbox -->
{% if value["type"] == "check" %}
<div data-checkbox-handler="{{value['id']}}" class="relative mb-7 md:mb-0 z-10">
<input id="{{setting}}" name="{{setting}}"
<div data-checkbox-handler="{{value['id']}}" class="relative mb-7 md:mb-0 z-10 ">
<input id="{{setting}}" name="{{setting}}"
data-default-method="{% if setting in ["AUTOCONF_MODE", "SWARM_MODE", "KUBERNETES_MODE"] %}mode{% else %}{{global_config[setting]['method']}}{% endif %}"
data-default-value="{{global_config[setting]['value']}}" {% if
setting in ["AUTOCONF_MODE", "SWARM_MODE", "KUBERNETES_MODE"] or global_config[setting]['method'] != 'ui' and global_config[setting]['method']
!= 'default' %} disabled {% endif %}
{% if global_config[setting]['value'] == "yes" %} checked {% endif %}
id="checkbox-{{value['id']}}" class="cursor-pointer disabled:cursor-default
relative dark:border-slate-600 dark:bg-slate-700 z-10 checked:z-0 w-5 h-5 ease
text-base rounded-1.4 checked:bg-primary checked:border-primary
dark:checked:bg-primary dark:checked:border-primary duration-250 float-left
aria-checked="{% if global_config[setting]['value'] == "yes" %}true{% else %}false{% endif %}"
checked
id="checkbox-{{value['id']}}"
class="cursor-pointer disabled:cursor-default
relative dark:border-slate-600 dark:bg-slate-700 z-10 aria-checked:z-0 w-5 h-5 ease
text-base rounded-1.4 aria-checked:bg-primary aria-checked:border-primary
dark:aria-checked:bg-primary dark:aria-checked:border-primary duration-250 float-left
mt-1 appearance-none border border-gray-300 bg-white bg-contain bg-center
bg-no-repeat align-top transition-all disabled:bg-gray-400
disabled:border-gray-400 dark:disabled:bg-gray-800
dark:disabled:border-gray-800 disabled:text-gray-700
dark:disabled:text-gray-300" type="checkbox" data-pattern="{{value['regex']|safe}}"
dark:disabled:text-gray-300
aria-checked:disabled:bg-gray-400
aria-checked:disabled:border-gray-400 dark:aria-checked:disabled:bg-gray-800
dark:aria-checked:disabled:border-gray-800 aria-checked:disabled:text-gray-700
dark:aria-checked:disabled:text-gray-300
" type="checkbox" data-pattern="{{value['regex']|safe}}"
value="{{global_config[setting]['value']}}" />
@ -196,7 +202,7 @@ data-plugin-item="{{plugin['id']}}"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
<path class="pointer-events-none"
d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"
></path>
</svg>
@ -355,7 +361,7 @@ data-plugin-item="{{plugin['id']}}"
value="{{item}}"
data-setting-select-dropdown-btn="{{value['id']}}"
type="button"
class="min-h-[38px] {% if loop.index == 1 %} border-t rounded-t {% endif %} {% if loop.index == loop.length %}rounded-b {% endif %} border-b border-l border-r border-gray-300 hover:brightness-90 bg-primary text-white my-0 relative px-6 py-2 text-center 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"
class="min-h-[38px] {% if loop.index == 1 %} border-t rounded-t {% endif %} {% if loop.index == loop.length %}rounded-b {% endif %} border-b border-l border-r border-gray-300 hover:brightness-90 bg-primary my-0 relative px-6 py-2 text-center 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"
>
{{item}}
</button>