mirror of
https://github.com/bunkerity/bunkerweb
synced 2026-05-24 09:28:37 +00:00
enhance service + darkmode script
This commit is contained in:
BlasenhauerJ
parent
f02adf3001
commit
b098478bdd
6 changed files with 460 additions and 109 deletions
|
|
@ -771,22 +771,18 @@ h6 {
|
|||
right: -22.5rem;
|
||||
}
|
||||
|
||||
.right-1\/2 {
|
||||
right: 50%;
|
||||
}
|
||||
|
||||
.z-100 {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.z-110 {
|
||||
z-index: 110;
|
||||
}
|
||||
|
||||
.z-\[1001\] {
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.z-110 {
|
||||
z-index: 110;
|
||||
}
|
||||
|
||||
.z-20 {
|
||||
z-index: 20;
|
||||
}
|
||||
|
|
@ -947,6 +943,14 @@ h6 {
|
|||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.mb-0 {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
|
@ -959,10 +963,6 @@ h6 {
|
|||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.mb-0 {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.ml-12 {
|
||||
margin-left: 3rem;
|
||||
}
|
||||
|
|
@ -995,10 +995,6 @@ h6 {
|
|||
margin-right: 3rem;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.ml-3 {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
|
@ -1183,6 +1179,10 @@ h6 {
|
|||
height: 33.333333%;
|
||||
}
|
||||
|
||||
.h-5\.5 {
|
||||
height: 1.375rem;
|
||||
}
|
||||
|
||||
.max-h-screen {
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
|
@ -1235,10 +1235,6 @@ h6 {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.w-40 {
|
||||
width: 10rem;
|
||||
}
|
||||
|
||||
.w-4 {
|
||||
width: 1rem;
|
||||
}
|
||||
|
|
@ -1299,10 +1295,18 @@ h6 {
|
|||
width: 1.75rem;
|
||||
}
|
||||
|
||||
.w-5\.5 {
|
||||
width: 1.375rem;
|
||||
}
|
||||
|
||||
.min-w-0 {
|
||||
min-width: 0px;
|
||||
}
|
||||
|
||||
.max-w-screen-sm {
|
||||
max-width: 576px;
|
||||
}
|
||||
|
||||
.max-w-180 {
|
||||
max-width: 45rem;
|
||||
}
|
||||
|
|
@ -1319,10 +1323,6 @@ h6 {
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
.max-w-screen-sm {
|
||||
max-width: 576px;
|
||||
}
|
||||
|
||||
.max-w-lg {
|
||||
max-width: 32rem;
|
||||
}
|
||||
|
|
@ -1331,10 +1331,6 @@ h6 {
|
|||
max-width: 300px;
|
||||
}
|
||||
|
||||
.max-w-60 {
|
||||
max-width: 15rem;
|
||||
}
|
||||
|
||||
.flex-auto {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
|
@ -1602,14 +1598,14 @@ h6 {
|
|||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.rounded-2xl {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.rounded-full {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
|
@ -1946,6 +1942,18 @@ h6 {
|
|||
fill: #22c55e;
|
||||
}
|
||||
|
||||
.fill-emerald-500 {
|
||||
fill: #2dce89;
|
||||
}
|
||||
|
||||
.fill-emerald-800 {
|
||||
fill: #065f46;
|
||||
}
|
||||
|
||||
.fill-emerald-700 {
|
||||
fill: #047857;
|
||||
}
|
||||
|
||||
.stroke-0 {
|
||||
stroke-width: 0;
|
||||
}
|
||||
|
|
@ -1959,14 +1967,14 @@ h6 {
|
|||
padding: 1rem;
|
||||
}
|
||||
|
||||
.p-3 {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.p-2 {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.p-3 {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.p-0 {
|
||||
padding: 0px;
|
||||
}
|
||||
|
|
@ -2064,10 +2072,6 @@ h6 {
|
|||
padding-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.pt-5 {
|
||||
padding-top: 1.25rem;
|
||||
}
|
||||
|
||||
.pb-0 {
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
|
@ -2100,6 +2104,10 @@ h6 {
|
|||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.pt-5 {
|
||||
padding-top: 1.25rem;
|
||||
}
|
||||
|
||||
.pb-2 {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
|
@ -2169,6 +2177,11 @@ h6 {
|
|||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5rem;
|
||||
|
|
@ -2179,11 +2192,6 @@ h6 {
|
|||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
|
|
@ -2255,6 +2263,16 @@ h6 {
|
|||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-red-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 57 57 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-green-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(34 197 94 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-gray-700 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(73 80 87 / var(--tw-text-opacity));
|
||||
|
|
@ -2270,11 +2288,6 @@ h6 {
|
|||
color: rgb(251 177 64 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-green-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(34 197 94 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-emerald-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(45 206 137 / var(--tw-text-opacity));
|
||||
|
|
@ -2285,11 +2298,6 @@ h6 {
|
|||
color: rgb(62 161 236 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-red-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 57 57 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-gray-300 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(210 214 218 / var(--tw-text-opacity));
|
||||
|
|
@ -2337,6 +2345,12 @@ h6 {
|
|||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.shadow-md {
|
||||
--tw-shadow: 0 4px 6px rgba(50,50,93,.1),0 1px 3px rgba(0,0,0,.08);
|
||||
--tw-shadow-colored: 0 4px 6px var(--tw-shadow-color), 0 1px 3px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.shadow-xl {
|
||||
--tw-shadow: 0 0 2rem 0 rgba(136,152,170,.15);
|
||||
--tw-shadow-colored: 0 0 2rem 0 var(--tw-shadow-color);
|
||||
|
|
@ -2355,12 +2369,6 @@ h6 {
|
|||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.shadow-md {
|
||||
--tw-shadow: 0 4px 6px rgba(50,50,93,.1),0 1px 3px rgba(0,0,0,.08);
|
||||
--tw-shadow-colored: 0 4px 6px var(--tw-shadow-color), 0 1px 3px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.shadow-sm {
|
||||
--tw-shadow: 0 .25rem .375rem -.0625rem hsla(0,0%,8%,.12),0 .125rem .25rem -.0625rem hsla(0,0%,8%,.07);
|
||||
--tw-shadow-colored: 0 .25rem .375rem -.0625rem var(--tw-shadow-color), 0 .125rem .25rem -.0625rem var(--tw-shadow-color);
|
||||
|
|
@ -2914,6 +2922,10 @@ h6 {
|
|||
fill: #adb5bd;
|
||||
}
|
||||
|
||||
.dark .dark\:fill-emerald-500 {
|
||||
fill: #2dce89;
|
||||
}
|
||||
|
||||
.dark .dark\:text-white {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
|
|
@ -3078,14 +3090,6 @@ h6 {
|
|||
margin-right: 4rem;
|
||||
}
|
||||
|
||||
.sm\:mb-3 {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.sm\:mr-3 {
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
.sm\:hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -3118,10 +3122,6 @@ h6 {
|
|||
width: 1.75rem;
|
||||
}
|
||||
|
||||
.sm\:w-40 {
|
||||
width: 10rem;
|
||||
}
|
||||
|
||||
.sm\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
|
@ -3188,14 +3188,6 @@ h6 {
|
|||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.md\:mb-8 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.md\:mb-0 {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.md\:mb-3 {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
|
@ -3204,6 +3196,14 @@ h6 {
|
|||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
.md\:mb-8 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.md\:mb-0 {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.md\:block {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,19 +44,35 @@ class darkMode {
|
|||
this.htmlEl = document.querySelector("html");
|
||||
this.darkToggleEl = document.querySelector("[dark-toggle]");
|
||||
this.darkToggleLabel = document.querySelector("[dark-toggle-label]");
|
||||
this.setTxt();
|
||||
this.darkToggleEl.addEventListener("change", this.toggle.bind(this));
|
||||
this.init();
|
||||
}
|
||||
|
||||
setTxt() {
|
||||
init() {
|
||||
this.darkToggleEl.addEventListener("change", (e) => {
|
||||
this.toggle();
|
||||
this.saveMode();
|
||||
});
|
||||
}
|
||||
|
||||
toggle() {
|
||||
document.querySelector("html").classList.toggle("dark");
|
||||
this.darkToggleLabel.textContent = this.darkToggleEl.checked
|
||||
? "dark"
|
||||
: "light";
|
||||
}
|
||||
|
||||
toggle() {
|
||||
document.querySelector("html").classList.toggle("dark");
|
||||
this.setTxt();
|
||||
async saveMode() {
|
||||
const isDark = this.darkToggleEl.checked ? "true" : "false";
|
||||
console.log(isDark);
|
||||
const data = {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ darkmode: isDark }),
|
||||
};
|
||||
const send = await fetch(`${location.href}/darkmode}`, data);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -21,21 +21,22 @@
|
|||
>
|
||||
{% include "header.html" %}
|
||||
<!-- flash message-->
|
||||
{% with messages = get_flashed_messages(with_categories=true) %} {% if
|
||||
messages %} {% for category, message in messages %}
|
||||
<div
|
||||
flash-message
|
||||
class="p-4 mb-1 md:mb-3 md:mr-3 z-[1001] flex flex-col fixed bottom-0 right-0 w-full md:w-1/2 max-w-screen-sm min-h-20 bg-white rounded-lg dark:brightness-110 hover:scale-102 transition shadow-md break-words dark:bg-slate-850 dark:shadow-dark-xl bg-clip-border"
|
||||
class="hidden p-4 mb-1 md:mb-3 md:mr-3 z-[1001] flex flex-col fixed bottom-0 right-0 w-full md:w-1/2 max-w-screen-sm min-h-20 bg-white rounded-lg dark:brightness-110 hover:scale-102 transition shadow-md break-words dark:bg-slate-850 dark:shadow-dark-xl bg-clip-border"
|
||||
>
|
||||
{% with messages = get_flashed_messages(with_categories=true) %} {% if
|
||||
messages %} {% for category, message in messages %} {% if category ==
|
||||
'error' %}
|
||||
{% if category == 'error' %}
|
||||
<h5 class="text-lg mb-0 text-red-500">error</h5>
|
||||
<p class="text-red-500 mb-0 text-sm">{{ message|safe }}</p>
|
||||
{% endif %} {% if category == 'success' %}
|
||||
<h5 class="text-lg mb-0 text-green-500">success</h5>
|
||||
<p class="text-green-500 mb-0 text-sm">{{ message|safe }}</p>
|
||||
{% endif %} {% endfor %} {% endif %} {% endwith %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<!-- end flash message-->
|
||||
{% endfor %} {% endif %} {% endwith %}
|
||||
</div>
|
||||
<!-- info -->
|
||||
<main
|
||||
|
|
|
|||
312
src/ui/templates/jobs.html
Normal file
312
src/ui/templates/jobs.html
Normal file
|
|
@ -0,0 +1,312 @@
|
|||
{% extends "base.html" %} {% block content %} {% set current_endpoint =
|
||||
url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
|
||||
<!-- settings -->
|
||||
<div
|
||||
{{current_endpoint}}-settings
|
||||
class="col-span-12 lg: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">SETTINGS</h5>
|
||||
<div class="grid grid-cols-12 gap-x-4 gap-y-2">
|
||||
<!-- select instance -->
|
||||
<div class="flex flex-col relative col-span-12 sm:col-span-6">
|
||||
<h5
|
||||
class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
|
||||
>
|
||||
Select instance
|
||||
</h5>
|
||||
<button
|
||||
{{current_endpoint}}-setting-select="instances"
|
||||
type="button"
|
||||
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"
|
||||
name="logs-instance"
|
||||
{{current_endpoint}}-setting-select-text="instances"
|
||||
>none
|
||||
</span>
|
||||
<!-- chevron -->
|
||||
<svg
|
||||
{{current_endpoint}}-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"
|
||||
>
|
||||
<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
|
||||
{{current_endpoint}}-setting-select-dropdown="instances"
|
||||
class="hidden z-100 absolute h-full flex-col w-full translate-y-12"
|
||||
>
|
||||
{% for instance in instances %}
|
||||
<button
|
||||
{{current_endpoint}}-setting-select-dropdown-btn="instances"
|
||||
type="button"
|
||||
value="{{instance.name}}"
|
||||
_type="{{instance._type}}"
|
||||
class="{% 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 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"
|
||||
>
|
||||
{{instance.name}}
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<!-- end dropdown-->
|
||||
</div>
|
||||
<!-- end select instance -->
|
||||
<!-- from date input -->
|
||||
<div class="flex flex-col relative col-span-12 sm:col-span-6">
|
||||
<h5
|
||||
class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
|
||||
>
|
||||
Fetch (default 1 day)
|
||||
</h5>
|
||||
<input
|
||||
datetimepicker
|
||||
type="date"
|
||||
id="update-date"
|
||||
name="update-date"
|
||||
class="col-span-12 sm:col-span-6 lg:col-span-4 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="update date"
|
||||
pattern="(.*?)"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<!-- end from date input -->
|
||||
<!-- refresh input -->
|
||||
<div class="flex flex-col relative col-span-12 sm:col-span-6">
|
||||
<h5
|
||||
class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
|
||||
>
|
||||
Update auto
|
||||
</h5>
|
||||
<div checkbox-handler="live-update" class="relative mb-7 md:mb-0">
|
||||
<input
|
||||
id="live-update"
|
||||
class="relative cursor-pointer 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 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"
|
||||
pattern=""
|
||||
value="no"
|
||||
/>
|
||||
<svg
|
||||
checkbox-handler="live-update"
|
||||
class="cursor-pointer absolute fill-white dark:fill-gray-300 left-0 top-0 translate-x-1 translate-y-2 h-3 w-3"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end refresh input -->
|
||||
<!-- refresh delay input -->
|
||||
<div class="flex flex-col relative col-span-12 sm:col-span-6">
|
||||
<h5
|
||||
class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
|
||||
>
|
||||
Update delay (in seconds)
|
||||
</h5>
|
||||
<input
|
||||
type="number"
|
||||
id="update-delay"
|
||||
name="update-delay"
|
||||
class="col-span-12 sm:col-span-6 lg:col-span-4 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="2"
|
||||
pattern="(.*?)"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<!-- end refresh delay input -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end settings -->
|
||||
|
||||
<!-- filter -->
|
||||
<div
|
||||
{{current_endpoint}}-filter
|
||||
class="col-span-12 lg: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">FILTERS</h5>
|
||||
<div class="grid grid-cols-12 gap-x-4 gap-y-2">
|
||||
<!-- search inpt-->
|
||||
<div class="flex flex-col relative col-span-12 sm:col-span-6">
|
||||
<h5
|
||||
class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
|
||||
>
|
||||
Search
|
||||
</h5>
|
||||
<input
|
||||
type="text"
|
||||
id="keyword"
|
||||
name="keyword"
|
||||
class="col-span-12 sm:col-span-6 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="key words"
|
||||
pattern="(.*?)"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<!-- end search inpt-->
|
||||
<!-- select types -->
|
||||
<div class="flex flex-col relative col-span-12 sm:col-span-6">
|
||||
<h5
|
||||
class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
|
||||
>
|
||||
Select types
|
||||
</h5>
|
||||
<button
|
||||
{{current_endpoint}}-setting-select="types"
|
||||
type="button"
|
||||
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-types"
|
||||
name="logs-types"
|
||||
{{current_endpoint}}-setting-select-text="types"
|
||||
>all</span
|
||||
>
|
||||
<!-- chevron -->
|
||||
<svg
|
||||
{{current_endpoint}}-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"
|
||||
>
|
||||
<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
|
||||
{{current_endpoint}}-setting-select-dropdown="types"
|
||||
class="hidden z-100 absolute h-full flex-col w-full translate-y-12"
|
||||
>
|
||||
<button
|
||||
{{current_endpoint}}-setting-select-dropdown-btn="types"
|
||||
type="button"
|
||||
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"
|
||||
>
|
||||
all
|
||||
</button>
|
||||
<button
|
||||
{{current_endpoint}}-setting-select-dropdown-btn="types"
|
||||
type="button"
|
||||
value="message"
|
||||
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"
|
||||
>
|
||||
message
|
||||
</button>
|
||||
<button
|
||||
{{current_endpoint}}-setting-select-dropdown-btn="types"
|
||||
type="button"
|
||||
value="error"
|
||||
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"
|
||||
>
|
||||
error
|
||||
</button>
|
||||
<button
|
||||
{{current_endpoint}}-setting-select-dropdown-btn="types"
|
||||
type="button"
|
||||
value="warn"
|
||||
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"
|
||||
>
|
||||
warn
|
||||
</button>
|
||||
<button
|
||||
{{current_endpoint}}-setting-select-dropdown-btn="types"
|
||||
type="button"
|
||||
value="info"
|
||||
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"
|
||||
>
|
||||
info
|
||||
</button>
|
||||
<button
|
||||
{{current_endpoint}}-setting-select-dropdown-btn="types"
|
||||
type="button"
|
||||
value="misc"
|
||||
class="rounded-b 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"
|
||||
>
|
||||
misc
|
||||
</button>
|
||||
</div>
|
||||
<!-- end dropdown-->
|
||||
</div>
|
||||
<!-- end select types -->
|
||||
<!-- from date input -->
|
||||
<div class="flex flex-col relative col-span-12 sm:col-span-6">
|
||||
<h5
|
||||
class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
|
||||
>
|
||||
From date
|
||||
</h5>
|
||||
<input
|
||||
datetimepicker
|
||||
type="date"
|
||||
id="from-date"
|
||||
name="from-date"
|
||||
class="col-span-12 sm:col-span-6 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="from date"
|
||||
pattern="(.*?)"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<!-- end from date input -->
|
||||
<!-- to date input -->
|
||||
<div class="flex flex-col relative col-span-12 sm:col-span-6">
|
||||
<h5
|
||||
class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
|
||||
>
|
||||
To date
|
||||
</h5>
|
||||
<input
|
||||
datetimepicker
|
||||
type="date"
|
||||
id="to-date"
|
||||
name="to-date"
|
||||
class="col-span-12 sm:col-span-6 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="to date"
|
||||
pattern="(.*?)"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<!-- end to date input -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end filter -->
|
||||
|
||||
<div
|
||||
class="min-h-50-screen col-span-12 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">LOGS</h5>
|
||||
<!-- list container-->
|
||||
<div class="w-full grid grid-cols-12 rounded p-2">
|
||||
<!-- header-->
|
||||
<p
|
||||
class="dark:text-gray-300 h-8 text-sm font-bold col-span-3 m-0 pb-2 border-b border-gray-400"
|
||||
>
|
||||
Type
|
||||
</p>
|
||||
<p
|
||||
class="dark:text-gray-300 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 max-h-100 overflow-y-auto"
|
||||
{{current_endpoint}}-list
|
||||
></ul>
|
||||
<!-- end list-->
|
||||
</div>
|
||||
<!-- end list container-->
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -257,7 +257,7 @@
|
|||
class="mr-2 flex items-center justify-center rounded-lg bg-center stroke-0 text-center p-1 xl:p-1.5"
|
||||
>
|
||||
<svg
|
||||
class="fill-gray-600 dark:fill-gray-500 xl:h-6 xl:w-6 h-5 w-5 relative"
|
||||
class="fill-gray-600 dark:fill-gray-500 h-5 w-5 relative"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
|
|
@ -272,6 +272,31 @@
|
|||
</a>
|
||||
</li>
|
||||
<!-- end item -->
|
||||
<!-- item -->
|
||||
<li class="mt-0.5 w-full">
|
||||
<a
|
||||
class="{% if current_endpoint == 'jobs' %}font-semibold text-slate-700 dark:bg-primary/50 rounded-lg dark:hover:bg-primary/60 bg-primary/20 hover:bg-primary/30{% else %}dark:hover:bg-primary/20 hover:bg-primary/5 {% endif %} hover:rounded-lg dark:text-white dark:opacity-80 py-1 text-sm ease-nav-brand my-0 mx-2 flex items-center whitespace-nowrap px-4 transition"
|
||||
href="{% if current_endpoint == 'jobs' %}javascript:void(0){% else %}loading?next={{ url_for('jobs') }}{% endif %}"
|
||||
>
|
||||
<div
|
||||
class="mr-2 flex items-center justify-center rounded-lg bg-center stroke-0 text-center p-1 xl:p-1.5"
|
||||
>
|
||||
<svg
|
||||
class="fill-emerald-700 h-5.5 w-5.5 relative"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path
|
||||
d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-1 duration-300 opacity-100 pointer-events-none ease"
|
||||
>Jobs</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
<!-- end item -->
|
||||
</ul>
|
||||
<!-- end default anchor -->
|
||||
|
||||
|
|
|
|||
|
|
@ -27,8 +27,7 @@
|
|||
{% else %}{% for services_batched in services|batch(3) %} {% for service in
|
||||
services_batched %} {% set id_server_name =
|
||||
service["SERVER_NAME"]['value'].replace(".", "-") %}
|
||||
|
||||
<div services-service
|
||||
<div services-service
|
||||
class="dark:brightness-110 overflow-hidden hover:scale-102 transition col-span-12 lg:col-span-6 3xl:col-span-4 p-4 w-full shadow-md break-words bg-white dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
|
||||
>
|
||||
<div services-settings class="hidden" value="{{service['settings']}}"></div>
|
||||
|
|
@ -50,7 +49,7 @@
|
|||
<p
|
||||
class="transition duration-300 ease-in-out dark:opacity-90 pl-2 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-500 "
|
||||
>
|
||||
{% if service['USE_REVERSE_PROXY'] == 'yes' %}
|
||||
{% if service['USE_REVERSE_PROXY']['value'] == 'yes' %}
|
||||
<svg
|
||||
class="h-4 w-4 fill-green-500"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -85,7 +84,7 @@
|
|||
<p
|
||||
class="transition duration-300 ease-in-out dark:opacity-90 pl-2 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-500 "
|
||||
>
|
||||
{% if service['SERVE_FILES'] == 'yes' %}
|
||||
{% if service['SERVE_FILES']['value'] == 'yes' %}
|
||||
<svg
|
||||
class="h-4 w-4 fill-green-500"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -119,7 +118,7 @@
|
|||
<p
|
||||
class="transition duration-300 ease-in-out dark:opacity-90 pl-2 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-500 "
|
||||
>
|
||||
{% if service['REMOTE_PHP'] == 'yes' %}
|
||||
{% if service['REMOTE_PHP']['value'] == 'yes' %}
|
||||
<svg
|
||||
class="h-4 w-4 fill-green-500"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -153,8 +152,8 @@
|
|||
<p
|
||||
class="transition duration-300 ease-in-out dark:opacity-90 pl-2 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-500 "
|
||||
>
|
||||
{% if service['REMOTE_PHP'] == 'yes' or service['USE_CUSTOM_HTTPS'] ==
|
||||
'yes' or service['GENERATE_SELF_SIGNED_SSL'] == 'yes' %}
|
||||
{% if service['REMOTE_PHP']['value'] == 'yes' or service['USE_CUSTOM_HTTPS'] and service['USE_CUSTOM_HTTPS']['value'] ==
|
||||
'yes' or service['GENERATE_SELF_SIGNED_SSL'] and service['GENERATE_SELF_SIGNED_SSL']['value'] == 'yes' %}
|
||||
<svg
|
||||
class="h-4 w-4 fill-green-500"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -188,7 +187,7 @@
|
|||
<p
|
||||
class="transition duration-300 ease-in-out dark:opacity-90 pl-2 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-500 "
|
||||
>
|
||||
{% if service['USE_MODSECURITY'] == 'yes' %}
|
||||
{% if service['USE_MODSECURITY']['value'] == 'yes' %}
|
||||
<svg
|
||||
class="h-4 w-4 fill-green-500"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -222,7 +221,7 @@
|
|||
<p
|
||||
class="transition duration-300 ease-in-out dark:opacity-90 pl-2 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-500 "
|
||||
>
|
||||
{% if service['USE_BAD_BEHAVIOR'] == 'yes' %}
|
||||
{% if service['USE_BAD_BEHAVIOR']['value'] == 'yes' %}
|
||||
<svg
|
||||
class="h-4 w-4 fill-green-500"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -256,7 +255,7 @@
|
|||
<p
|
||||
class="transition duration-300 ease-in-out dark:opacity-90 pl-2 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-500 "
|
||||
>
|
||||
{% if service['USE_LIMIT_REQ'] == 'yes' %}
|
||||
{% if service['USE_LIMIT_REQ']['value'] == 'yes' %}
|
||||
<svg
|
||||
class="h-4 w-4 fill-green-500"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -290,7 +289,7 @@
|
|||
<p
|
||||
class="transition duration-300 ease-in-out dark:opacity-90 pl-2 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-500 "
|
||||
>
|
||||
{% if service['USE_DNSBL'] == 'yes' %}
|
||||
{% if service['USE_DNSBL']['value'] == 'yes' %}
|
||||
<svg
|
||||
class="h-4 w-4 fill-green-500"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -319,10 +318,8 @@
|
|||
|
||||
<!-- button list-->
|
||||
<div class="relative w-full flex justify-center sm:justify-end">
|
||||
<button
|
||||
services-action="redirect"
|
||||
type="button"
|
||||
service-name="{{service["SERVER_NAME"]['value']}}"
|
||||
<a href="http://{{service["SERVER_NAME"]['value']}}"
|
||||
target="_blank"
|
||||
class="dark:brightness-90 z-20 mx-1 bg-sky-500 hover:bg-sky-500/80 focus:bg-sky-500/80 inline-block p-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
|
||||
>
|
||||
<svg
|
||||
|
|
@ -334,7 +331,7 @@
|
|||
d="M288 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h50.7L169.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L384 141.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H288zM80 64C35.8 64 0 99.8 0 144V400c0 44.2 35.8 80 80 80H336c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v80c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16h80c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<button
|
||||
services-action="edit"
|
||||
|
|
|
|||
Loading…
Reference in a new issue