upload plugins + jobs template + global enhance

This commit is contained in:
BlasenhauerJ 2022-11-22 18:18:31 +01:00
parent 94b0e6a0d5
commit 50ba229146
15 changed files with 1031 additions and 3585 deletions

View File

@ -787,6 +787,10 @@ h6 {
z-index: 20;
}
.-z-10 {
z-index: -10;
}
.z-10 {
z-index: 10;
}
@ -807,10 +811,6 @@ h6 {
z-index: 50;
}
.-z-10 {
z-index: -10;
}
.order-2 {
order: 2;
}
@ -847,6 +847,10 @@ h6 {
grid-column: span 6 / span 6;
}
.col-span-4 {
grid-column: span 4 / span 4;
}
.float-right {
float: right;
}
@ -907,14 +911,19 @@ h6 {
margin-right: 0.25rem;
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.my-1 {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
.my-3 {
margin-top: 0.75rem;
margin-bottom: 0.75rem;
}
.mx-2\.5 {
@ -927,11 +936,6 @@ h6 {
margin-right: 1rem;
}
.my-3 {
margin-top: 0.75rem;
margin-bottom: 0.75rem;
}
.mx-3 {
margin-left: 0.75rem;
margin-right: 0.75rem;
@ -942,11 +946,6 @@ h6 {
margin-bottom: 1.25rem;
}
.my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
@ -1011,6 +1010,14 @@ h6 {
margin-left: 0.25rem;
}
.ml-6 {
margin-left: 1.5rem;
}
.mb-8 {
margin-bottom: 2rem;
}
.mb-7 {
margin-bottom: 1.75rem;
}
@ -1019,14 +1026,6 @@ h6 {
margin-top: 0.25rem;
}
.ml-6 {
margin-left: 1.5rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mt-2 {
margin-top: 0.5rem;
}
@ -1047,6 +1046,10 @@ h6 {
margin-left: 0px;
}
.mb-4 {
margin-bottom: 1rem;
}
.ml-auto {
margin-left: auto;
}
@ -1075,8 +1078,8 @@ h6 {
margin-bottom: 1.25rem;
}
.mb-8 {
margin-bottom: 2rem;
.mr-4 {
margin-right: 1rem;
}
.box-content {
@ -1143,14 +1146,14 @@ h6 {
height: 3rem;
}
.h-3 {
height: 0.75rem;
}
.h-16 {
height: 4rem;
}
.h-3 {
height: 0.75rem;
}
.h-19 {
height: 4.75rem;
}
@ -1191,12 +1194,16 @@ h6 {
max-height: 100vh;
}
.max-h-135 {
max-height: 33.75rem;
}
.max-h-100 {
max-height: 25rem;
}
.max-h-60 {
max-height: 15rem;
.max-h-30 {
max-height: 7.5rem;
}
.max-h-16 {
@ -1215,14 +1222,6 @@ h6 {
max-height: 2rem;
}
.max-h-30 {
max-height: 7.5rem;
}
.max-h-135 {
max-height: 33.75rem;
}
.min-h-20 {
min-height: 5rem;
}
@ -1235,6 +1234,10 @@ h6 {
min-height: 50vh;
}
.min-h-screen {
min-height: 100vh;
}
.min-h-6 {
min-height: 1.5rem;
}
@ -1259,18 +1262,6 @@ h6 {
min-height: 85vh;
}
.min-h-screen {
min-height: 100vh;
}
.min-h-90 {
min-height: 22.5rem;
}
.min-h-80 {
min-height: 20rem;
}
.w-full {
width: 100%;
}
@ -1307,14 +1298,14 @@ h6 {
width: 1.25rem;
}
.w-3 {
width: 0.75rem;
}
.w-60 {
width: 15rem;
}
.w-3 {
width: 0.75rem;
}
.w-28 {
width: 7rem;
}
@ -1343,28 +1334,16 @@ h6 {
min-width: 0px;
}
.min-w-\[900\] {
min-width: 900;
.min-w-\[750px\] {
min-width: 750px;
}
.min-w-\[900px\] {
min-width: 900px;
}
.min-w-\[800px\] {
min-width: 800px;
}
.min-w-\[700px\] {
min-width: 700px;
}
.min-w-\[750px\] {
min-width: 750px;
}
.max-w-screen-sm {
max-width: 576px;
.max-w-\[300px\] {
max-width: 300px;
}
.max-w-180 {
@ -1375,8 +1354,16 @@ h6 {
max-width: 10rem;
}
.max-w-120 {
max-width: 30rem;
.max-w-screen-sm {
max-width: 576px;
}
.max-w-\[400px\] {
max-width: 400px;
}
.max-w-60 {
max-width: 15rem;
}
.max-w-64 {
@ -1391,26 +1378,6 @@ h6 {
max-width: 32rem;
}
.max-w-\[300px\] {
max-width: 300px;
}
.max-w-60 {
max-width: 15rem;
}
.max-w-\[460px\] {
max-width: 460px;
}
.max-w-\[40px\] {
max-width: 40px;
}
.max-w-\[400px\] {
max-width: 400px;
}
.flex-auto {
flex: 1 1 auto;
}
@ -1477,13 +1444,13 @@ h6 {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1 {
--tw-translate-x: 0.25rem;
.translate-y-12 {
--tw-translate-y: 3rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-12 {
--tw-translate-y: 3rem;
.translate-x-1 {
--tw-translate-x: 0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@ -1522,6 +1489,11 @@ h6 {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-19 {
--tw-translate-y: 4.75rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
--tw-rotate: 180deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@ -1563,10 +1535,6 @@ h6 {
resize: both;
}
.scroll-m-4 {
scroll-margin: 1rem;
}
.list-none {
list-style-type: none;
}
@ -1654,10 +1622,6 @@ h6 {
overflow: hidden;
}
.overflow-scroll {
overflow: scroll;
}
.overflow-x-auto {
overflow-x: auto;
}
@ -1670,14 +1634,6 @@ h6 {
overflow-x: hidden;
}
.overflow-x-scroll {
overflow-x: scroll;
}
.overflow-y-scroll {
overflow-y: scroll;
}
.whitespace-nowrap {
white-space: nowrap;
}
@ -1754,6 +1710,16 @@ h6 {
border-top-right-radius: 1rem;
}
.rounded-t-lg {
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
.rounded-b-lg {
border-bottom-right-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
}
.border-2 {
border-width: 2px;
}
@ -1790,6 +1756,10 @@ h6 {
border-style: solid;
}
.border-dashed {
border-style: dashed;
}
.border-white {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
@ -1878,6 +1848,11 @@ h6 {
background-color: rgb(94 114 228 / var(--tw-bg-opacity));
}
.bg-gray-50 {
--tw-bg-opacity: 1;
background-color: rgb(248 249 250 / var(--tw-bg-opacity));
}
.bg-primary\/20 {
background-color: rgb(8 85 119 / 0.2);
}
@ -1886,11 +1861,6 @@ h6 {
background-color: rgb(58 65 111 / 0.1);
}
.bg-gray-50 {
--tw-bg-opacity: 1;
background-color: rgb(248 249 250 / var(--tw-bg-opacity));
}
.bg-white\/80 {
background-color: rgb(255 255 255 / 0.8);
}
@ -1903,6 +1873,10 @@ h6 {
--tw-bg-opacity: 0;
}
.bg-none {
background-image: none;
}
.bg-gradient-to-tl {
background-image: linear-gradient(to top left, var(--tw-gradient-stops));
}
@ -1911,10 +1885,6 @@ h6 {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-none {
background-image: none;
}
.from-transparent {
--tw-gradient-from: transparent;
--tw-gradient-to: rgb(0 0 0 / 0);
@ -2079,10 +2049,6 @@ h6 {
padding: 1.5rem;
}
.p-12 {
padding: 3rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
@ -2133,6 +2099,16 @@ h6 {
padding-right: 0.75rem;
}
.px-12 {
padding-left: 3rem;
padding-right: 3rem;
}
.py-16 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
@ -2168,14 +2144,29 @@ h6 {
padding-bottom: 1.25rem;
}
.px-12 {
padding-left: 3rem;
padding-right: 3rem;
.py-0 {
padding-top: 0px;
padding-bottom: 0px;
}
.py-16 {
padding-top: 4rem;
padding-bottom: 4rem;
.py-0\.5 {
padding-top: 0.125rem;
padding-bottom: 0.125rem;
}
.py-1\.5 {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
}
.py-0\.6 {
padding-top: 0.15rem;
padding-bottom: 0.15rem;
}
.py-2\.5 {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.pb-0 {
@ -2319,6 +2310,10 @@ h6 {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.capitalize {
text-transform: capitalize;
}
@ -2351,6 +2346,18 @@ h6 {
line-height: 1.25;
}
.leading-3 {
line-height: 0.75rem;
}
.leading-4 {
line-height: 1rem;
}
.leading-6 {
line-height: 1.5rem;
}
.tracking-tight-rem {
letter-spacing: -0.025rem;
}
@ -2374,16 +2381,16 @@ h6 {
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));
}
.text-green-500 {
--tw-text-opacity: 1;
color: rgb(34 197 94 / var(--tw-text-opacity));
}
.text-slate-700 {
--tw-text-opacity: 1;
color: rgb(52 71 103 / var(--tw-text-opacity));
@ -2997,6 +3004,11 @@ h6 {
background-color: rgb(17 28 68 / 0.8);
}
.dark .dark\:bg-gray-800 {
--tw-bg-opacity: 1;
background-color: rgb(37 47 64 / var(--tw-bg-opacity));
}
.dark .dark\:bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
@ -3028,16 +3040,16 @@ h6 {
fill: #adb5bd;
}
.dark .dark\:text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark .dark\:text-gray-300 {
--tw-text-opacity: 1;
color: rgb(210 214 218 / var(--tw-text-opacity));
}
.dark .dark\:text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark .dark\:text-gray-500 {
--tw-text-opacity: 1;
color: rgb(173 181 189 / var(--tw-text-opacity));
@ -3170,14 +3182,6 @@ h6 {
grid-column: span 1 / span 1;
}
.sm\:col-span-2 {
grid-column: span 2 / span 2;
}
.sm\:col-span-8 {
grid-column: span 8 / span 8;
}
.sm\:col-start-5 {
grid-column-start: 5;
}
@ -3205,10 +3209,6 @@ h6 {
margin-right: 4rem;
}
.sm\:block {
display: block;
}
.sm\:hidden {
display: none;
}
@ -3229,18 +3229,6 @@ h6 {
max-height: 7rem;
}
.sm\:max-h-0 {
max-height: 0px;
}
.sm\:max-h-120 {
max-height: 30rem;
}
.sm\:max-h-135 {
max-height: 33.75rem;
}
.sm\:max-h-125 {
max-height: 31.25rem;
}
@ -3316,10 +3304,6 @@ h6 {
grid-column: span 7 / span 7;
}
.md\:col-span-1 {
grid-column: span 1 / span 1;
}
.md\:my-0 {
margin-top: 0px;
margin-bottom: 0px;
@ -3367,10 +3351,6 @@ h6 {
min-height: 75vh;
}
.md\:min-h-50-screen {
min-height: 50vh;
}
.md\:w-1\/2 {
width: 50%;
}
@ -3379,11 +3359,6 @@ h6 {
justify-content: flex-end;
}
.md\:bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.md\:py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
@ -3431,8 +3406,8 @@ h6 {
grid-column: span 6 / span 6;
}
.lg\:col-span-12 {
grid-column: span 12 / span 12;
.lg\:col-span-1 {
grid-column: span 1 / span 1;
}
.lg\:col-span-8 {
@ -3443,10 +3418,6 @@ h6 {
grid-column: span 3 / span 3;
}
.lg\:col-span-1 {
grid-column: span 1 / span 1;
}
.lg\:mx-8 {
margin-left: 2rem;
margin-right: 2rem;
@ -3525,16 +3496,6 @@ h6 {
gap: 1.5rem;
}
.lg\:bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.lg\:bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgb(235 239 244 / var(--tw-bg-opacity));
}
.lg\:bg-gray-50 {
--tw-bg-opacity: 1;
background-color: rgb(248 249 250 / var(--tw-bg-opacity));
@ -3643,6 +3604,10 @@ h6 {
grid-column: span 4 / span 4;
}
.\33xl\:col-span-6 {
grid-column: span 6 / span 6;
}
.\33xl\:col-span-2 {
grid-column: span 2 / span 2;
}

View File

@ -1,274 +0,0 @@
/*# sourceMappingURL=basic.css.map */
@keyframes passing-through {
0% {
opacity: 0;
transform: translateY(40px);
}
30%,
70% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(-40px);
}
}
@keyframes slide-in {
0% {
opacity: 0;
transform: translateY(40px);
}
30% {
opacity: 1;
transform: translateY(0px);
}
}
@keyframes pulse {
0% {
transform: scale(1);
}
10% {
transform: scale(1.1);
}
20% {
transform: scale(1);
}
}
.dropzone,
.dropzone * {
box-sizing: border-box;
}
.dropzone {
min-height: 100px;
border: 1px solid rgba(0, 0, 0, 0.8);
border-radius: 5px;
padding: 0;
}
.dropzone.dz-clickable {
cursor: pointer;
}
.dropzone.dz-clickable * {
cursor: default;
}
.dropzone.dz-clickable .dz-message,
.dropzone.dz-clickable .dz-message * {
cursor: pointer;
}
.dropzone.dz-started .dz-message {
display: none;
}
.dropzone.dz-drag-hover {
border-style: solid;
}
.dropzone.dz-drag-hover .dz-message {
opacity: 0.5;
}
.dropzone .dz-message {
text-align: center;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.dropzone .dz-message .dz-button {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
.dropzone .dz-preview {
position: relative;
display: inline-block;
vertical-align: top;
margin: 12px;
min-height: 100px;
}
.dropzone .dz-preview:hover {
z-index: 1000;
}
.dropzone .dz-preview:hover .dz-details {
opacity: 1;
}
.dropzone .dz-preview.dz-file-preview .dz-image {
border-radius: 20px;
background: #999;
background: linear-gradient(to bottom, #eee, #ddd);
}
.dropzone .dz-preview.dz-file-preview .dz-details {
opacity: 1;
}
.dropzone .dz-preview.dz-image-preview {
background: #fff;
}
.dropzone .dz-preview.dz-image-preview .dz-details {
transition: opacity 0.2s linear;
}
.dropzone .dz-preview .dz-remove {
font-size: 14px;
text-align: center;
display: block;
cursor: pointer;
border: none;
}
.dropzone .dz-preview .dz-remove:hover {
text-decoration: underline;
}
.dropzone .dz-preview:hover .dz-details {
opacity: 1;
}
.dropzone .dz-preview .dz-details {
z-index: 20;
position: absolute;
top: 0;
left: 0;
opacity: 0;
font-size: 13px;
min-width: 100%;
max-width: 100%;
padding: 2em 1em;
text-align: center;
color: rgba(0, 0, 0, 0.9);
line-height: 150%;
}
.dropzone .dz-preview .dz-details .dz-size {
margin-bottom: 1em;
font-size: 16px;
}
.dropzone .dz-preview .dz-details .dz-filename {
white-space: nowrap;
}
.dropzone .dz-preview .dz-details .dz-filename:hover span {
border: 1px solid rgba(200, 200, 200, 0.8);
background-color: rgba(255, 255, 255, 0.8);
}
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
overflow: hidden;
text-overflow: ellipsis;
}
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
border: 1px solid transparent;
}
.dropzone .dz-preview .dz-details .dz-filename span,
.dropzone .dz-preview .dz-details .dz-size span {
background-color: rgba(255, 255, 255, 0.4);
padding: 0 0.4em;
border-radius: 3px;
}
.dropzone .dz-preview:hover .dz-image img {
transform: scale(1.05, 1.05);
filter: blur(8px);
}
.dropzone .dz-preview .dz-image {
border-radius: 20px;
overflow: hidden;
width: 120px;
height: 120px;
position: relative;
display: block;
z-index: 10;
}
.dropzone .dz-preview .dz-image img {
display: block;
}
.dropzone .dz-preview.dz-success .dz-success-mark {
animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
}
.dropzone .dz-preview.dz-error .dz-error-mark {
opacity: 1;
animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
}
.dropzone .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark {
pointer-events: none;
opacity: 0;
z-index: 500;
position: absolute;
display: block;
top: 50%;
left: 50%;
margin-left: -27px;
margin-top: -27px;
background: rgba(0, 0, 0, 0.8);
border-radius: 50%;
}
.dropzone .dz-preview .dz-success-mark svg,
.dropzone .dz-preview .dz-error-mark svg {
display: block;
width: 54px;
height: 54px;
fill: #fff;
}
.dropzone .dz-preview.dz-processing .dz-progress {
opacity: 1;
transition: all 0.2s linear;
}
.dropzone .dz-preview.dz-complete .dz-progress {
opacity: 0;
transition: opacity 0.4s ease-in;
}
.dropzone .dz-preview:not(.dz-processing) .dz-progress {
animation: pulse 6s ease infinite;
}
.dropzone .dz-preview .dz-progress {
opacity: 1;
z-index: 1000;
pointer-events: none;
position: absolute;
height: 20px;
top: 50%;
margin-top: -10px;
left: 15%;
right: 15%;
border: 3px solid rgba(0, 0, 0, 0.8);
background: rgba(0, 0, 0, 0.8);
border-radius: 10px;
overflow: hidden;
}
.dropzone .dz-preview .dz-progress .dz-upload {
background: #fff;
display: block;
position: relative;
height: 100%;
width: 0;
transition: width 300ms ease-in-out;
border-radius: 17px;
}
.dropzone .dz-preview.dz-error .dz-error-message {
display: block;
}
.dropzone .dz-preview.dz-error:hover .dz-error-message {
opacity: 1;
pointer-events: auto;
}
.dropzone .dz-preview .dz-error-message {
pointer-events: none;
z-index: 1000;
position: absolute;
display: block;
display: none;
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 8px;
font-size: 13px;
top: 130px;
left: -10px;
width: 140px;
background: #b10606;
padding: 0.5em 1em;
color: #fff;
}
.dropzone .dz-preview .dz-error-message:after {
content: "";
position: absolute;
top: -6px;
left: 64px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #b10606;
} /*# sourceMappingURL=dropzone.css.map */

View File

@ -1 +0,0 @@
{"version":3,"sourceRoot":"","sources":["../src/dropzone.scss"],"names":[],"mappings":"AAGA,2BACE,GACE,UACA,2BAGF,QACE,UACA,0BAGF,KACE,UACA,6BAKJ,oBACE,GACE,UACA,2BAEF,IACE,UACA,2BAMJ,iBACE,sBACA,yBACA,wBAKF,sBACE,sBAEF,UAmBE,iBACA,gCACA,kBACA,kBAhBA,uBACE,eAEA,yBACE,eAGA,wEACE,eAWJ,iCACE,aAIJ,wBACE,mBACA,oCACE,WAGJ,sBACE,kBACA,aAEA,iCACE,gBACA,cACA,YACA,UACA,aACA,eACA,gBAMJ,sBACE,kBACA,qBAEA,mBAEA,YACA,iBAEA,4BAEE,aACA,wCACE,UAMF,gDACE,cArEgB,KAsEhB,gBACA,kDAGF,kDACE,UAIJ,uCACE,gBACA,mDACE,8BAIJ,iCACE,eACA,kBACA,cACA,eACA,YACA,uCACE,0BAIJ,wCACE,UAEF,kCAGE,WAEA,kBACA,MACA,OAEA,UAEA,eACA,eACA,eACA,gBACA,kBACA,qBAIA,iBAEA,2CACE,kBACA,eAGF,+CAEE,mBAGE,0DACE,sCACA,sCAGJ,2DAIE,gBACA,uBAJA,gEACE,6BASJ,oGACE,sCACA,eACA,kBASF,0CACE,4BACA,iBAIN,gCACE,cAvKkB,KAwKlB,gBACA,MA3KS,MA4KT,OA5KS,MA6KT,kBACA,cACA,WAEA,oCACE,cAMF,kDACE,6DAIF,8CACE,UACA,sDASJ,4EAKE,oBAEA,UACA,YAEA,kBACA,cACA,QACA,SACA,kBACA,iBAEA,WApBiB,eAqBjB,kBAEA,oFACE,cACA,MAnBY,KAoBZ,OArBa,KAsBb,KA5BY,KAiChB,iDACE,UACA,0BAEF,+CACE,UACA,+BAIA,uDACE,iCAGJ,mCAIE,UACA,aAEA,oBACA,kBACA,YACA,QACA,iBACA,SACA,UAEA,gCACA,WA9DiB,eAgEjB,mBAEA,gBAEA,8CACE,WAtEY,KAwEZ,cACA,kBACA,YACA,QACA,mCAEA,mBAMF,iDACE,cAEF,uDACE,UACA,oBAIJ,wCAIE,oBACA,aACA,kBACA,cACA,aACA,UACA,4BACA,kBACA,eACA,UACA,WACA,MAdQ,MAeR,WAdQ,QAeR,iBACA,WAGA,8CACE,WACA,kBACA,SACA,UACA,QACA,SACA,kCACA,mCACA","file":"dropzone.css"}

View File

@ -76,7 +76,29 @@ class darkMode {
}
}
class FlashMsg {
constructor() {
this.delayBeforeRemove = 5000;
this.init();
}
//remove flash message after this.delay if exist
init() {
window.addEventListener("DOMContentLoaded", () => {
try {
const flashEl = document.querySelector("[flash-message]");
setTimeout(() => {
try {
flashEl.remove();
} catch (err) {}
}, this.delayBeforeRemove);
} catch (err) {}
});
}
}
const setMenu = new Menu();
const setNews = new News();
const setDarkM = new darkMode();
const setCheckbox = new Checkbox("[sidebar-info]");
const setFlash = new FlashMsg();

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

343
src/ui/static/js/jobs.js Normal file
View File

@ -0,0 +1,343 @@
class Dropdown {
constructor(prefix = "jobs") {
this.prefix = prefix;
this.container = document.querySelector("main");
this.lastDrop = "";
this.initDropdown();
}
initDropdown() {
this.container.addEventListener("click", (e) => {
//SELECT BTN LOGIC
try {
if (
e.target
.closest("button")
.hasAttribute(`${this.prefix}-setting-select`) &&
!e.target.closest("button").hasAttribute(`disabled`)
) {
const btnName = e.target
.closest("button")
.getAttribute(`${this.prefix}-setting-select`);
if (this.lastDrop !== btnName) {
this.lastDrop = btnName;
this.closeAllDrop();
}
this.toggleSelectBtn(e);
}
} catch (err) {}
//SELECT DROPDOWN BTN LOGIC
try {
if (
e.target
.closest("button")
.hasAttribute(`${this.prefix}-setting-select-dropdown-btn`)
) {
const btn = e.target.closest("button");
const btnValue = btn.getAttribute("value");
const btnSetting = btn.getAttribute(
`${this.prefix}-setting-select-dropdown-btn`
);
//stop if same value to avoid new fetching
const isSameVal = this.isSameValue(btnSetting, btnValue);
if (isSameVal) return this.hideDropdown(btnSetting);
//else, add new value to custom
this.setSelectNewValue(btnSetting, btnValue);
//close dropdown and change style
this.hideDropdown(btnSetting);
this.changeDropBtnStyle(btnSetting, btn);
//show / hide filter
if (btnSetting === "instances") {
this.hideFilterOnLocal(btn.getAttribute("_type"));
}
}
} catch (err) {}
});
}
closeAllDrop() {
const drops = document.querySelectorAll(
`[${this.prefix}-setting-select-dropdown]`
);
drops.forEach((drop) => {
drop.classList.add("hidden");
drop.classList.remove("flex");
document
.querySelector(
`svg[${this.prefix}-setting-select="${drop.getAttribute(
`${this.prefix}-setting-select-dropdown`
)}"]`
)
.classList.remove("rotate-180");
});
}
isSameValue(btnSetting, value) {
const selectCustom = document.querySelector(
`[${this.prefix}-setting-select-text="${btnSetting}"]`
);
const currVal = selectCustom.textContent;
return currVal === value ? true : false;
}
setSelectNewValue(btnSetting, value) {
const selectCustom = document.querySelector(
`[${this.prefix}-setting-select="${btnSetting}"]`
);
selectCustom.querySelector(
`[${this.prefix}-setting-select-text]`
).textContent = value;
}
hideDropdown(btnSetting) {
//hide dropdown
const dropdownEl = document.querySelector(
`[${this.prefix}-setting-select-dropdown="${btnSetting}"]`
);
dropdownEl.classList.add("hidden");
dropdownEl.classList.remove("flex");
//svg effect
const dropdownChevron = document.querySelector(
`svg[${this.prefix}-setting-select="${btnSetting}"]`
);
dropdownChevron.classList.remove("rotate-180");
}
changeDropBtnStyle(btnSetting, selectedBtn) {
const dropdownEl = document.querySelector(
`[${this.prefix}-setting-select-dropdown="${btnSetting}"]`
);
//reset dropdown btns
const btnEls = dropdownEl.querySelectorAll("button");
btnEls.forEach((btn) => {
btn.classList.remove(
"dark:bg-primary",
"bg-primary",
"bg-primary",
"text-gray-300",
"text-gray-300"
);
btn.classList.add("bg-white", "dark:bg-slate-700", "text-gray-700");
});
//highlight clicked btn
selectedBtn.classList.remove(
"bg-white",
"dark:bg-slate-700",
"text-gray-700"
);
selectedBtn.classList.add("dark:bg-primary", "bg-primary", "text-gray-300");
}
toggleSelectBtn(e) {
const attribut = e.target
.closest("button")
.getAttribute(`${this.prefix}-setting-select`);
//toggle dropdown
const dropdownEl = document.querySelector(
`[${this.prefix}-setting-select-dropdown="${attribut}"]`
);
const dropdownChevron = document.querySelector(
`svg[${this.prefix}-setting-select="${attribut}"]`
);
dropdownEl.classList.toggle("hidden");
dropdownEl.classList.toggle("flex");
dropdownChevron.classList.toggle("rotate-180");
}
//hide date filter on local
hideFilterOnLocal(type) {
console.log(type);
if (type === "local") {
this.hideInp(`input#from-date`);
this.hideInp(`input#to-date`);
}
if (type !== "local") {
this.showInp(`input#from-date`);
this.showInp(`input#to-date`);
}
}
showInp(selector) {
document.querySelector(selector).closest("div").classList.add("flex");
document.querySelector(selector).closest("div").classList.remove("hidden");
}
hideInp(selector) {
document.querySelector(selector).closest("div").classList.add("hidden");
document.querySelector(selector).closest("div").classList.remove("flex");
}
}
class Filter {
constructor(prefix = "jobs") {
this.prefix = prefix;
this.container = document.querySelector(`[${this.prefix}-filter]`);
this.keyInp = document.querySelector("input#keyword");
this.successValue = "all";
this.reloadValue = "all";
this.sortValue = "name";
this.initHandler();
}
initHandler() {
//SUCCESS HANDLER
this.container.addEventListener("click", (e) => {
try {
if (
e.target
.closest("button")
.getAttribute(`${this.prefix}-setting-select-dropdown-btn`) ===
"success"
) {
setTimeout(() => {
const value = document
.querySelector(`[${this.prefix}-setting-select-text="success"]`)
.textContent.trim();
console.log(value);
this.successValue = value;
//run filter
this.filter();
}, 10);
}
} catch (err) {}
});
//RELOAD HANDLER
this.container.addEventListener("click", (e) => {
try {
if (
e.target
.closest("button")
.getAttribute(`${this.prefix}-setting-select-dropdown-btn`) ===
"reload"
) {
setTimeout(() => {
const value = document
.querySelector(`[${this.prefix}-setting-select-text="reload"]`)
.textContent.trim();
console.log(value);
this.reloadValue = value;
//run filter
this.filter();
}, 10);
}
} catch (err) {}
});
//KEYWORD HANDLER
this.keyInp.addEventListener("input", (e) => {
this.filter();
});
}
filter() {
const jobs = document.querySelector(`[${this.prefix}-list]`).children;
if (jobs.length === 0) return;
//reset
for (let i = 0; i < jobs.length; i++) {
const el = jobs[i];
el.classList.remove("hidden");
}
//filter type
this.setFilterSuccess(jobs);
this.setFilterReload(jobs);
this.setFilterKeyword(jobs);
}
setFilterSuccess(jobs) {
if (this.successValue === "all") return;
for (let i = 0; i < jobs.length; i++) {
const el = jobs[i];
const type = el
.querySelector(`[${this.prefix}-success]`)
.getAttribute(`${this.prefix}-success`)
.trim();
if (type !== this.successValue) el.classList.add("hidden");
}
}
setFilterReload(jobs) {
if (this.reloadValue === "all") return;
for (let i = 0; i < jobs.length; i++) {
const el = jobs[i];
const type = el
.querySelector(`[${this.prefix}-reload]`)
.getAttribute(`${this.prefix}-reload`)
.trim();
if (type !== this.reloadValue) el.classList.add("hidden");
}
}
setFilterKeyword(jobs) {
const keyword = this.keyInp.value.trim().toLowerCase();
if (!keyword) return;
for (let i = 0; i < jobs.length; i++) {
const el = jobs[i];
const name = el
.querySelector(`[${this.prefix}-name`)
.textContent.trim()
.toLowerCase();
const date = el
.querySelector(`[${this.prefix}-last_run`)
.textContent.trim()
.toLowerCase();
const every = el
.querySelector(`[${this.prefix}-every`)
.textContent.trim()
.toLowerCase();
if (
!name.includes(keyword) &&
!date.includes(keyword) &&
!every.includes(keyword)
)
el.classList.add("hidden");
}
}
}
class Download {
constructor(prefix = "jobs") {
this.prefix = prefix;
this.listContainer = document.querySelector(`[${this.prefix}-list]`);
this.init();
}
init() {
this.listContainer.addEventListener("click", (e) => {
try {
if (
e.target.closest("button").hasAttribute(`${this.prefix}-download`)
) {
const btnEl = e.target.closest("button");
const jobName = btnEl.getAttribute("jobs-download");
const fileName = btnEl.getAttribute("jobs-file");
this.sendFileToDL(jobName, fileName);
}
} catch (err) {}
});
}
async sendFileToDL(jobName, fileName) {
const response = await fetch(
`${location.href}/jobs/download?job_name=${jobName}&file_name=${fileName}`
);
if (response.status === 200) {
const res = await response.json();
//last update
return console.log(res);
} else {
console.log(`Error: ${response.status}`);
}
return null;
}
}
const setDropdown = new Dropdown("jobs");
const setFilter = new Filter("jobs");
const setDownload = new Download();

View File

@ -1,7 +1,7 @@
import { Checkbox } from "./utils.js";
import Datepicker from "./datepicker/datepicker.js";
class LogsDropdown {
class Dropdown {
constructor(prefix = "logs") {
this.prefix = prefix;
this.container = document.querySelector("main");
@ -18,6 +18,13 @@ class LogsDropdown {
.hasAttribute(`${this.prefix}-setting-select`) &&
!e.target.closest("button").hasAttribute(`disabled`)
) {
const btnName = e.target
.closest("button")
.getAttribute(`${this.prefix}-setting-select`);
if (this.lastDrop !== btnName) {
this.lastDrop = btnName;
this.closeAllDrop();
}
this.toggleSelectBtn(e);
}
} catch (err) {}
@ -50,6 +57,23 @@ class LogsDropdown {
});
}
closeAllDrop() {
const drops = document.querySelectorAll(
`[${this.prefix}-setting-select-dropdown]`
);
drops.forEach((drop) => {
drop.classList.add("hidden");
drop.classList.remove("flex");
document
.querySelector(
`svg[${this.prefix}-setting-select="${drop.getAttribute(
`${this.prefix}-setting-select-dropdown`
)}"]`
)
.classList.remove("rotate-180");
});
}
isSameValue(btnSetting, value) {
const selectCustom = document.querySelector(
`[${this.prefix}-setting-select-text="${btnSetting}"]`
@ -319,7 +343,7 @@ class FetchLogs {
}
}
class FilterLogs {
class Filter {
constructor(prefix = "logs") {
this.prefix = prefix;
this.container = document.querySelector(`[${this.prefix}-filter]`);
@ -409,8 +433,8 @@ class LogsDate {
}
const setCheckbox = new Checkbox("[logs-settings]");
const dropdown = new LogsDropdown();
const dropdown = new Dropdown("logs");
const setLogs = new FetchLogs();
const setFilter = new FilterLogs();
const setFilter = new Filter("logs");
const fromDatepicker = new LogsDate(document.querySelector("input#from-date"));
const toDatepicker = new LogsDate(document.querySelector("input#to-date"));

View File

@ -1,29 +1,4 @@
class Upload {
constructor() {
this.dropEl = document.querySelector("#dropzone");
this.drop = new Dropzone(this.dropEl, {
paramName: "file",
method: "post",
maxFiles: 100,
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
url: "#",
});
this.submitBtn = this.dropEl.querySelector('button[type="submit"]');
this.init();
}
init() {
this.submitBtn.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
drop.processQueue();
});
}
}
class PluginsDropdown {
class Dropdown {
constructor(prefix = "plugins") {
this.prefix = prefix;
this.container = document.querySelector("main");
@ -40,6 +15,14 @@ class PluginsDropdown {
.hasAttribute(`${this.prefix}-setting-select`) &&
!e.target.closest("button").hasAttribute(`disabled`)
) {
const btnName = e.target
.closest("button")
.getAttribute(`${this.prefix}-setting-select`);
if (this.lastDrop !== btnName) {
this.lastDrop = btnName;
this.closeAllDrop();
}
this.toggleSelectBtn(e);
}
} catch (err) {}
@ -72,6 +55,23 @@ class PluginsDropdown {
});
}
closeAllDrop() {
const drops = document.querySelectorAll(
`[${this.prefix}-setting-select-dropdown]`
);
drops.forEach((drop) => {
drop.classList.add("hidden");
drop.classList.remove("flex");
document
.querySelector(
`svg[${this.prefix}-setting-select="${drop.getAttribute(
`${this.prefix}-setting-select-dropdown`
)}"]`
)
.classList.remove("rotate-180");
});
}
isSameValue(btnSetting, value) {
const selectCustom = document.querySelector(
`[${this.prefix}-setting-select-text="${btnSetting}"]`
@ -170,7 +170,7 @@ class PluginsDropdown {
}
}
class FilterPlugins {
class Filter {
constructor(prefix = "plugins") {
this.prefix = prefix;
this.container = document.querySelector(`[${this.prefix}-filter]`);
@ -242,6 +242,166 @@ class FilterPlugins {
}
}
class Upload {
constructor() {
this.container = document.querySelector("[plugins-upload]");
this.form = document.querySelector("#dropzone-form");
this.dropZoneElement = document.querySelector(".drop-zone");
this.fileInput = document.querySelector(".file-input");
this.progressArea = document.querySelector(".progress-area");
this.uploadedArea = document.querySelector(".uploaded-area");
this.init();
}
init() {
//form click launch input file
this.form.addEventListener("click", () => {
this.fileInput.click();
});
//dropzone logic
this.dropZoneElement.addEventListener("dragover", (e) => {
e.preventDefault();
this.dropZoneElement.classList.add("bg-gray-100 dark:bg-gray-800");
});
["dragleave", "dragend"].forEach((type) => {
this.dropZoneElement.addEventListener(type, (e) => {
this.dropZoneElement.classList.remove("bg-gray-100 dark:bg-gray-800");
});
});
this.dropZoneElement.addEventListener("drop", (e) => {
e.preventDefault();
this.fileInput.files = e.dataTransfer.files;
this.fileInput.dispatchEvent(new Event("change"));
this.dropZoneElement.classList.remove("bg-gray-100 dark:bg-gray-800");
});
//when added file, set upload logic
this.fileInput.addEventListener("change", () => {
const timeout = 500;
for (let i = 0; i < this.fileInput.files.length; i++) {
setTimeout(() => this.uploadFile(this.fileInput.files[i]), timeout * i);
}
});
//close fail/success log
this.container.addEventListener("click", (e) => {
try {
if (e.target.closest("button").hasAttribute("upload-message-delete")) {
const message = e.target.closest("div[upload-message]");
message.remove();
}
} catch (err) {}
});
}
uploadFile(file) {
let name = file.name;
if (name.length >= 12) {
let splitName = name.split(".");
name = splitName[0].substring(0, 13) + "... ." + splitName[1];
}
let xhr = new XMLHttpRequest();
xhr.open("POST", "plugins/upload");
let fileSize;
xhr.upload.addEventListener("progress", ({ loaded, total }) => {
let fileLoaded = Math.floor((loaded / total) * 100);
let fileTotal = Math.floor(total / 1000);
fileTotal < 1024
? (fileSize = fileTotal + " KB")
: (fileSize = (loaded / (1024 * 1024)).toFixed(2) + " MB");
const progressHTML = this.fileLoad(name, fileSize);
this.uploadedArea.classList.add("onprogress");
this.progressArea.innerHTML = progressHTML;
});
xhr.addEventListener("readystatechange", () => {
if (xhr.readyState === XMLHttpRequest.DONE) {
this.progressArea.innerHTML = "";
let uploadedHTML =
xhr.status == 201
? this.fileSuccess(name, fileSize)
: this.fileFail(name, fileSize);
this.uploadedArea.insertAdjacentHTML("afterbegin", uploadedHTML);
}
});
let data = new FormData();
data.set("file", file);
data.set("csrf_token", document.querySelector("#csrf_token").value);
xhr.send(data);
}
fileLoad(name, fileSize) {
const str = `<div u class="mt-2 rounded p-2 w-full bg-gray-100 dark:bg-gray-800">
<div class="flex items-center justify-between">
<svg class="fill-sky-500 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM385 215c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-71-71V392c0 13.3-10.7 24-24 24s-24-10.7-24-24V177.9l-71 71c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9L239 103c9.4-9.4 24.6-9.4 33.9 0L385 215z"/></svg>
<span class="text-sm text-slate-700 dark:text-gray-300 mr-4">${name} </span>
<span class="text-sm text-slate-700 dark:text-gray-300">${fileSize}</span>
<svg class="cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 h-3 w-3 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z"/></svg>
</div>
</div>
</div>`;
return str;
}
fileSuccess(name, fileSize) {
const str = `<div upload-message class="mt-2 rounded p-2 w-full bg-gray-100 dark:bg-gray-800">
<div class="flex items-center justify-between">
<svg
class="fill-green-500 h-5 w-5"
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>
<span class="text-sm text-slate-700 dark:text-gray-300 mr-4">${name} </span>
<span class="text-sm text-slate-700 dark:text-gray-300">${fileSize}</span>
<button type="button" upload-message-delete>
<svg class="cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 h-4 w-4 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"></path>
</svg>
</button>
</div>
</div>
</div>`;
return str;
}
fileFail(name, fileSize) {
const str = `<div upload-message class="mt-2 rounded p-2 w-full bg-gray-100 dark:bg-gray-800">
<div class="flex items-center justify-between">
<svg
class="fill-red-500 h-5 w-5 mr-4"
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 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"
/>
</svg>
<span class="text-sm text-slate-700 dark:text-gray-300 mr-4">${name} </span>
<span class="text-sm text-slate-700 dark:text-gray-300">${fileSize}</span>
<button type="button" upload-message-delete>
<svg class="cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 h-4 w-4 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"></path>
</svg>
</button>
</div>
</div>
</div>`;
return str;
}
}
const setDropdown = new Dropdown("plugins");
const setFilter = new Plugins("plugins");
const setUpload = new Upload();
const setDropdown = new PluginsDropdown();
const setFilter = new FilterPlugins();

View File

@ -25,14 +25,18 @@
{% 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="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-[300px] 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"
>
{% 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>
<p class="text-gray-700 dark:text-gray-300 mb-0 text-sm">
{{ message|safe }}
</p>
{% else %}
<h5 class="text-lg mb-0 text-green-500">Success</h5>
<p class="text-green-500 mb-0 text-sm">{{ message|safe }}</p>
<p class="text-gray-700 dark:text-gray-300 mb-0 text-sm">
{{ message|safe }}
</p>
{% endif %}
</div>
{% endfor %}

View File

@ -34,24 +34,19 @@
{% elif current_endpoint == "services" %}
<script defer type="module" src="./js/services.js"></script>
{% elif current_endpoint == "plugins" %}
<script type="module" defer src="./js/dropzone/dropzone-min.js"></script>
<script
type="application"
defer
src="./js/dropzone/dropzone-min.js.map"
></script>
<script type="module" defer src="./js/plugins.js"></script>
<link rel="stylesheet" type="text/css" href="./css/dropzone/dropzone.css" />
{% elif current_endpoint == "cache" %}
<script defer type="module" src="./js/cache.js"></script>
{% elif current_endpoint == "logs" %}
<script type="module" defer src="./js/logs.js"></script>
<script type="module" defer src="./js/datepicker/Datepicker.js"></script>
<link
rel="stylesheet"
type="text/css"
href="./css/datepicker-foundation.css"
/>
{% elif current_endpoint == "jobs" %}
<script defer type="module" src="./js/jobs.js"></script>
<script type="module" defer src="./js/logs.js"></script>
{% endif %}
</head>

View File

@ -47,7 +47,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
<!-- filter -->
<div
{{current_endpoint}}-filter
class="col-span-12 md:col-span-8 3xl:col-span-3 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="col-span-12 md:col-span-8 3xl: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">FILTER</h5>
<div class="grid grid-cols-12 gap-x-4 gap-y-2">
@ -63,82 +63,19 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
id="keyword"
name="keyword"
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="key words"
placeholder="keyword"
pattern="(.*?)"
required
/>
</div>
<!-- end search inpt-->
<!-- select sort -->
<div class="flex flex-col relative col-span-12 md: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"
>
Sort by
</h5>
<button
{{current_endpoint}}-setting-select="sort"
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="{{current_endpoint}}-sort"
name="{{current_endpoint}}-sort"
{{current_endpoint}}-setting-select-text="sort"
>name</span
>
<!-- chevron -->
<svg
{{current_endpoint}}-setting-select="sort"
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="sort"
class="hidden z-100 absolute h-full flex-col w-full translate-y-12"
>
<button
{{current_endpoint}}-setting-select-dropdown-btn="sort"
type="button"
value="name"
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"
>
name
</button>
<button
{{current_endpoint}}-setting-select-dropdown-btn="sort"
type="button"
value="last run"
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"
>
last run
</button>
<button
{{current_endpoint}}-setting-select-dropdown-btn="sort"
type="button"
value="true"
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"
>
true
</button>
</div>
<!-- end dropdown-->
</div>
<!-- end select success -->
<!-- select success -->
<div class="flex flex-col relative col-span-12 md: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 success
Success state
</h5>
<button
{{current_endpoint}}-setting-select="success"
@ -167,7 +104,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
<!-- dropdown-->
<div
{{current_endpoint}}-setting-select-dropdown="success"
class="hidden z-100 absolute h-full flex-col w-full translate-y-12"
class="hidden z-100 absolute h-full flex-col w-full translate-y-16"
>
<button
{{current_endpoint}}-setting-select-dropdown-btn="success"
@ -202,7 +139,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
<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 reload
Reload state
</h5>
<button
{{current_endpoint}}-setting-select="reload"
@ -231,7 +168,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
<!-- dropdown-->
<div
{{current_endpoint}}-setting-select-dropdown="reload"
class="hidden z-100 absolute h-full flex-col w-full translate-y-12"
class="hidden z-100 absolute h-full flex-col w-full translate-y-16"
>
<button
{{current_endpoint}}-setting-select-dropdown-btn="reload"
@ -270,7 +207,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
>
<h5 class="mb-2 font-bold dark:text-white">{{current_endpoint}}</h5>
<!-- list container-->
<div class="min-w-[750px] w-full grid grid-cols-12 rounded p-2">
<div class="min-w-[900px] 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"
@ -278,120 +215,180 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
Name
</p>
<p
class="dark:text-gray-300 h-8 text-sm font-bold col-span-2 m-0 pb-2 border-b border-gray-400"
class="dark:text-gray-300 h-8 text-sm font-bold col-span-3 m-0 pb-2 border-b border-gray-400"
>
Last run
</p>
<p
class="dark:text-gray-300 h-8 text-sm font-bold col-span-2 m-0 pb-2 border-b border-gray-400"
class="dark:text-gray-300 h-8 text-sm font-bold col-span-1 m-0 pb-2 border-b border-gray-400"
>
Every
</p>
<p
class="dark:text-gray-300 h-8 text-sm font-bold col-span-2 m-0 pb-2 border-b border-gray-400"
class="dark:text-gray-300 h-8 text-sm font-bold col-span-1 m-0 pb-2 border-b border-gray-400"
>
Reload
</p>
<p
class="dark:text-gray-300 h-8 text-sm font-bold col-span-2 m-0 pb-2 border-b border-gray-400"
class="dark:text-gray-300 h-8 text-sm font-bold col-span-1 m-0 pb-2 border-b border-gray-400"
>
Success
</p>
<p
class="dark:text-gray-300 h-8 text-sm font-bold col-span-1 m-0 pb-2 border-b border-gray-400"
class="dark:text-gray-300 h-8 text-sm font-bold col-span-3 m-0 pb-2 border-b border-gray-400"
>
Files
</p>
<!-- end header-->
<!-- list -->
<ul class="col-span-12 w-full" {{current_endpoint}}-list>
{% for job in jobs %} {{job['every']}}
{% for job_name, value in jobs.items() %}
<!-- job item-->
<li class="grid grid-cols-12 border-b border-gray-300 py-2">
<li class="grid grid-cols-12 border-b border-gray-300 py-2.5">
<p
class="dark:text-gray-400 dark:opacity-80 text-sm col-span-3 m-0"
{{current_endpoint}}-name
>
{{job}}
{{job_name}}
</p>
<p
class="dark:text-gray-400 dark:opacity-80 text-sm col-span-2 m-0"
class="dark:text-gray-400 dark:opacity-80 text-sm col-span-3 m-0"
{{current_endpoint}}-last_run
>
{{job['last_run']}}
</p>
<p
class="dark:text-gray-400 dark:opacity-80 text-sm col-span-2 m-0"
{{current_endpoint}}-every
>
{{job["every"]}}
</p>
<p
class="ml-6 dark:text-gray-400 dark:opacity-80 text-sm col-span-2 m-0"
{{current_endpoint}}-reload
>
{% if job["reload"] %}
<svg
class="fill-green-500 h-5 w-5"
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>
{%endif %} {% if not job["reload"] %}
<svg
class="fill-red-500 h-5 w-5"
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 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"
/>
</svg>
{% endif %}
</p>
<p
class="ml-6 dark:text-gray-400 dark:opacity-80 text-sm col-span-2 m-0"
{{current_endpoint}}-success
>
{% if job["success"] == True %}
<svg
class="fill-green-500 h-5 w-5"
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>
{% elif not job["success"] %}
<svg
class="fill-red-500 h-5 w-5"
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 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"
/>
</svg>
{% else %}
<svg
class="fill-sky-500 h-5 w-5"
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 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32z"
/>
</svg>
{% endif %}
{{value['last_run']}}
</p>
<p
class="dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0"
{{current_endpoint}}-every
>
{{value["every"]}}
</p>
{% if value["reload"] %}
<p
class="ml-6 dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0"
{{current_endpoint}}-reload="true"
>
<svg
class="fill-green-500 h-5 w-5"
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>
</p>
{%endif %} {% if not value["reload"] %}
<p
class="ml-6 dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0"
{{current_endpoint}}-reload="false"
>
<svg
class="fill-red-500 h-5 w-5"
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 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"
/>
</svg>
</p>
{% endif %} {% if value["success"] %}
<p
class="ml-6 dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0"
{{current_endpoint}}-success="true"
>
<svg
class="fill-green-500 h-5 w-5"
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>
</p>
{% elif not value["success"] %}
<p
class="ml-6 dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0"
{{current_endpoint}}-success="false"
>
<svg
class="fill-red-500 h-5 w-5"
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 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"
/>
</svg>
</p>
{% endif %}
<div
class="relative dark:text-gray-400 text-sm col-span-3 m-0"
{{current_endpoint}}-files
></p>
>
{% if value['cache']%}
<button
{{current_endpoint}}-setting-select="{{job_name}}"
type="button"
class="text-sm 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 leading-6 ease w-full rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 md:px-3 font-normal text-gray-700 transition-all placeholder:text-gray-500"
>
<span
id="{{current_endpoint}}-{{job_name}}"
name="{{current_endpoint}}-{{job_name}}"
{{current_endpoint}}-setting-select-text="{{job_name}}"
>list</span
>
<!-- chevron -->
<svg
{{current_endpoint}}-setting-select="{{job_name}}"
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="{{job_name}}"
class="hidden z-100 absolute h-full flex-col w-full"
>
{% for file in value['cache'] %}
<button
{{current_endpoint}}-download="{{job_name}}"
{{current_endpoint}}-file="{{file['file_name']}}"
{{current_endpoint}}-setting-select-dropdown-btn="{{job_name}}"
type="button"
value="list"
class="{% if loop.index == loop.length %}rounded-b-lg {% endif %}{% if loop.first %}rounded-t-lg{% 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 bg-white dark:bg-slate-700 text-gray-700"
>
<div class="flex justify-start items-center">
<svg
class="h-6 w-6 fill-sky-500"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
d="M256 0C114.6 0 0 114.6 0 256S114.6 512 256 512s256-114.6 256-256S397.4 0 256 0zM244.7 395.3l-112-112c-4.6-4.6-5.9-11.5-3.5-17.4s8.3-9.9 14.8-9.9l64 0 0-96c0-17.7 14.3-32 32-32l32 0c17.7 0 32 14.3 32 32l0 96 64 0c6.5 0 12.3 3.9 14.8 9.9s1.1 12.9-3.5 17.4l-112 112c-6.2 6.2-16.4 6.2-22.6 0z"
/>
</svg>
<span
class="transition duration-300 ease-in-out text-gray-700 dark:text-gray-300 dark:opacity-80 ml-2"
>{{file['file_name']}}</span
>
</div>
</button>
{%endfor %}
</div>
<!-- end dropdown-->
{%endif%}
</div>
</li>
<!-- end job item-->
{% endfor %}

View File

@ -44,7 +44,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
<!-- dropdown-->
<div
{{current_endpoint}}-setting-select-dropdown="instances"
class="hidden z-100 absolute h-full flex-col w-full translate-y-12"
class="hidden z-100 absolute h-full flex-col w-full translate-y-16"
>
{% for instance in instances %}
<button
@ -223,7 +223,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
<!-- dropdown-->
<div
{{current_endpoint}}-setting-select-dropdown="types"
class="hidden z-100 absolute h-full flex-col w-full translate-y-12"
class="hidden z-100 absolute h-full flex-col w-full translate-y-16"
>
<button
{{current_endpoint}}-setting-select-dropdown-btn="types"

View File

@ -0,0 +1,66 @@
<!-- modal -->
<div
plugins-modal
class="dark:brightness-110 hidden w-screen h-screen fixed bg-gray-600/50 z-[1001] top-0 left-0 justify-center items-center"
>
<div
plugins-modal-card
class="overflow-y-auto mx-3 ml-2 mr-6 sm:mx-6 lg:mx-8 my-3 px-4 pt-4 pb-8 w-full h-[90vh] flex flex-col break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
>
<div class="w-full flex justify-between mb-2">
<p
plugins-modal-title
class="transition duration-300 ease-in-out dark:opacity-90 dark:text-gray-300 mb-2 font-sans font-semibold leading-normal uppercase text-md"
>
DELETE PLUGINS
</p>
<button class="-translate-y-1" type="button" plugins-modal-close>
<svg
class="transition duration-300 ease-in-out dark:opacity-90 h-6 w-6 sm:h-7 sm:w-7 fill-slate-800 dark:fill-gray-300"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"
/>
</svg>
</button>
</div>
<!-- delete form-->
<form
plugins-modal-form-delete
class="w-full h-full flex flex-col justify-between"
id="form-delete-server_name"
method="POST"
>
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<input type="hidden" value="server_name" name="SERVER_NAME" />
<input type="hidden" value="delete" name="operation" />
<div>
<p
plugins-modal-text
class="mx-2 mb-2 mt-8 font-semibold font-sans leading-normal uppercase text-sm"
></p>
</div>
<!-- action button -->
<div class="w-full justify-center flex mt-10">
<button
plugins-modal-close
type="button"
class="dark:brightness-90 mr-3 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 leading-normal text-md ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
>
Close
</button>
<button
type="submit"
class="dark:brightness-90 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-sky-500 hover:bg-sky-500/80 focus:bg-sky-500/80 leading-normal text-md ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
>
Delete
</button>
</div>
<!-- end action button-->
</form>
<!-- end delete form-->
</div>
</div>
<!-- end modal -->

View File

@ -59,34 +59,41 @@ plugins = config["CONFIG"].get_plugins() %}
<!-- upload layout -->
<div
{{current_endpoint}}-upload
class="p-4 col-span-12 md:col-span-7 2xl:col-span-4 grid grid-cols-12 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="col-span-12 mb-4 font-bold dark:text-white">UPLOAD PLUGIN</h5>
<h5 class="col-span-12 mb-4 font-bold dark:text-white">UPLOAD / RELOAD</h5>
<div class="p-0 col-span-12 grid">
<form id="dropzone" class="col-span-12 dropzone max-h-16 overflow-y-auto">
<!-- Now setup your input fields -->
<div class="p-0 col-span-12 grid grid-cols-12">
<!-- dropzone -->
<form
id="dropzone-form"
action="#"
class="cursor-pointer col-span-12 border-2 rounded-lg p-2 border-dashed border-primary drop-zone"
>
<input
name="upload-csrf"
class="hidden"
type="hidden"
id="csrf_token"
name="csrf_token"
value="{{ csrf_token() }}"
/>
<button name="upload-submit" class="hidden" type="submit">
Submit data and files!
</button>
<input
class="file-input drop-zone__input"
type="file"
name="file"
multiple="multiple"
hidden
/>
<i class="fa-solid fa-cloud-upload-alt"></i>
<p class="text-sm text-center my-3">click or drag and drop</p>
</form>
<div
class="col-span-12 flex flex-col sm:flex-row justify-center items-center mt-3"
>
<button
type="button"
class="dark:brightness-90 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-primary hover:bg-primary/80 focus:bg-primary/80 leading-normal text-sm ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
>
Upload
</button>
<section class="col-span-12 progress-area"></section>
<section class="col-span-12 uploaded-area"></section>
<!-- end dropzone -->
<div class="col-span-12 flex flex-col justify-center items-center">
<p
class="mx-4 my-3 sm:my-0 font-sans font-semibold leading-normal uppercase text-sm"
class="mx-4 my-3 font-sans font-semibold leading-normal uppercase text-sm"
>
or
</p>
@ -167,7 +174,7 @@ plugins = config["CONFIG"].get_plugins() %}
<!-- dropdown-->
<div
{{current_endpoint}}-setting-select-dropdown="types"
class="hidden z-100 absolute h-full flex-col w-full translate-y-12"
class="hidden z-100 absolute h-full flex-col w-full translate-y-16"
>
<button
{{current_endpoint}}-setting-select-dropdown-btn="types"
@ -208,31 +215,51 @@ plugins = config["CONFIG"].get_plugins() %}
<div {{current_endpoint}}-list class="grid grid-cols-12 gap-3">
{% for plugin in plugins %} {% if plugin['page'] %}
<a
<div
{{current_endpoint}}-external="{% if plugin['external'] %} external {%else%} internal {%endif%}"
href="/plugins?{{plugin['id']}}"
class="py-3 cursor-pointer min-h-12 relative col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 3xl:col-span-2 p-1 flex justify-between items-center transition rounded bg-gray-100 hover:bg-gray-300 dark:bg-slate-700 dark:hover:bg-slate-800"
class="py-3 min-h-12 relative col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 3xl:col-span-2 p-1 flex justify-between items-center transition rounded bg-gray-100 hover:bg-gray-300 dark:bg-slate-700 dark:hover:bg-slate-800"
>
<p
{{current_endpoint}}-content
class="ml-3 mb-0 transition duration-300 ease-in-out dark:opacity-90 text-center text-sm md:text-base text-slate-700 dark:text-gray-300"
class="ml-3 mr-2 mb-0 transition duration-300 ease-in-out dark:opacity-90 text-left text-sm md:text-base text-slate-700 dark:text-gray-300"
>
{{plugin['name']}}
</p>
<svg
class="h-6 w-6 fill-sky-500 dark dark:brightness-90"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
>
<path
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"
></path>
</svg>
</a>
<div class="flex items-center">
<a class="hover:-translate-y-px" href="/plugins?{{plugin['id']}}">
<svg
class="h-6 w-6 fill-sky-500 dark dark:brightness-90"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
>
<path
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"
></path>
</svg>
</a>
<button
{{current_endpoint}}-action="delete"
name="{{plugin['id']}}"
type="button"
class="z-20 mx-2 inline-block font-bold text-left text-white uppercase align-middle transition-all cursor-pointer text-xs ease-in tracking-tight-rem hover:-translate-y-px"
>
<svg
class="h-5 w-5 fill-red-500 dark:brightness-90"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
>
<path
d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"
/>
</svg>
</button>
</div>
</div>
{% else %}
<div
{{current_endpoint}}-external="{% if plugin['external'] %} external {%else%} internal {%endif%}"
class="py-3 cursor-pointer min-h-12 relative col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 3xl:col-span-2 p-1 flex justify-start items-center transition rounded bg-gray-100 hover:bg-gray-300 dark:bg-slate-700 dark:hover:bg-slate-800"
class="py-3 min-h-12 relative col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 3xl:col-span-2 p-1 flex justify-start items-center transition rounded bg-gray-100 hover:bg-gray-300 dark:bg-slate-700 dark:hover:bg-slate-800"
>
<p
{{current_endpoint}}-content