Elgato_dark/bunkerweb
1
0
Fork 0
mirror of https://github.com/bunkerity/bunkerweb synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

update table + validity

Browse source
This commit is contained in:
Jordan Blasenhauer 2024-06-17 13:53:00 +02:00
parent 7b65f94f2c
commit ea55ded3e7
14 changed files with 335 additions and 264 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
vuejs/client/input.css
View file

@ -161,7 +161,7 @@ body {
/* INPUT */
.field-container {
@apply relative w-full px-3 md:px-4 pt-2 md:pt-3 pb-0.5 md:pb-1;
@apply relative w-full px-3 md:px-4 pt-3 pb-4;
}
.input-header-container {
@ -185,15 +185,39 @@ body {
}
.input-error-msg {
@apply text-red-500 text-[0.75rem] font-semibold mb-0 mt-0.5;
@apply absolute text-red-500 text-[0.75rem] font-semibold mb-0 mt-0.5;
}
.input.input-error-msg {
@apply -bottom-5;
}
.picker.input-error-msg {
@apply -bottom-5;
}
.select.input-error-msg {
@apply -bottom-5;
}
.combobox.input-error-msg {
@apply -bottom-5;
}
.check.input-error-msg {
@apply -bottom-11;
}
.editor.input-error-msg {
@apply -bottom-3;
}
.valid.input-error-msg {
@apply pointer-events-none -z-10 opacity-0;
@apply pointer-events-none text-green-500 -z-10 opacity-0;
}
.checkbox-container {
@apply relative z-10 flex flex-col items-start mt-1;
@apply relative z-10 mt-1;
}
.checkbox {
@ -229,8 +253,6 @@ body {
@apply pointer-events-none transition-transform h-4 w-4 fill-gray-600 dark:fill-gray-500;
}
.select-combobox-dropdown-container {
@apply flex w-fit mt-2;
}

2
vuejs/client/public/css/style.css
View file

File diff suppressed because one or more lines are too long

9
vuejs/client/src/components/Forms/Error/Field.vue
View file

@ -10,6 +10,7 @@
}
@param {boolean} [isValid=false] - Check if the field is valid
@param {boolean} [isValue=false] - Check if the field has a value, display a different message if the field is empty or not
@param {string} [errorClass=""] - Additional class
*/
const props = defineProps({
@ -21,6 +22,11 @@ const props = defineProps({
type: Boolean,
required: false,
},
errorClass: {
type: String,
required: false,
default: "",
},
});
</script>
@ -28,8 +34,7 @@ const props = defineProps({
<p
:aria-hidden="props.isValid ? 'true' : 'false'"
role="alert"
:class="[props.isValid ? 'valid' : '']"
class="input-error-msg"
:class="[props.isValid ? 'valid' : '', 'input-error-msg', props.errorClass]"
>
{{
props.isValid

6
vuejs/client/src/components/Forms/Field/Checkbox.vue
View file

@ -182,7 +182,11 @@ onMounted(() => {
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>
<ErrorField :isValid="checkbox.isValid" :isValue="checkbox.isValid" />
<ErrorField
:errorClass="'check'"
:isValid="checkbox.isValid"
:isValue="checkbox.isValid"
/>
</div>
</Container>
</template>

6
vuejs/client/src/components/Forms/Field/Combobox.vue
View file

@ -429,7 +429,11 @@ const emits = defineEmits(["inp"]);
</template>
</div>
</div>
<ErrorField :isValid="select.isValid" :isValue="true" />
<ErrorField
:errorClass="'combobox'"
:isValid="select.isValid"
:isValue="true"
/>
<!-- end dropdown-->
</div>
<!-- end custom-->

6
vuejs/client/src/components/Forms/Field/Datepicker.vue
View file

@ -693,7 +693,11 @@ function setIndex(calendarEl, tabindex) {
:clipboardClass="'datepicker-clip'"
:copyClass="'datepicker-clip'"
/>
<ErrorField :isValid="date.isValid" :isValue="!!date.value" />
<ErrorField
:errorClass="'picker'"
:isValid="date.isValid"
:isValue="!!date.value"
/>
</div>
</Container>
</template>

6
vuejs/client/src/components/Forms/Field/Editor.vue
View file

@ -336,6 +336,10 @@ onUnmounted(() => {
:valueToCopy="editor.value"
/>
</div>
<ErrorField :isValid="editor.isValid" :isValue="!!editor.value" />
<ErrorField
:errorClass="'editor'"
:isValid="editor.isValid"
:isValue="!!editor.value"
/>
</Container>
</template>

6
vuejs/client/src/components/Forms/Field/Input.vue
View file

@ -253,7 +253,11 @@ onMounted(() => {
</svg>
</button>
</div>
<ErrorField :isValid="inp.isValid" :isValue="!!inp.value" />
<ErrorField
:errorClass="'input'"
:isValid="inp.isValid"
:isValue="!!inp.value"
/>
</div>
</Container>
</template>

9
vuejs/client/src/components/Forms/Field/Select.vue
View file

@ -153,6 +153,7 @@ function toggleSelect() {
// Get field container rect
const fieldContainer = selectBtn.value.closest("[data-field-container]");
const parent = fieldContainer.parentElement;
console.log("dzq");
// Update position only if parent has overflow
const isOverflow = parent.scrollHeight > parent.clientHeight ? true : false;
if (!isOverflow) return;
@ -169,6 +170,8 @@ function toggleSelect() {
? true
: false;
console.log(canBeDown);
if (!canBeDown) {
selectDropdown.value.style.top = `-${
selectDropRect.height + selectBtnRect.height
@ -354,7 +357,11 @@ const emits = defineEmits(["inp"]);
{{ value }}
</button>
</div>
<ErrorField :isValid="select.isValid" :isValue="true" />
<ErrorField
:errorClass="'select'"
:isValid="select.isValid"
:isValue="true"
/>
<!-- end dropdown-->
</div>
<!-- end custom-->

2
vuejs/client/src/components/Widget/GridLayout.vue
View file

@ -66,7 +66,7 @@ const containerClass = computed(() => {
});
const gridClass = computed(() => {
return `break-words grid grid-cols-12 w-full col-span-${props.columns.mobile} md:col-span-${props.columns.tablet} lg:col-span-${props.columns.pc}`;
return `overflow-hidden break-words grid grid-cols-12 w-full col-span-${props.columns.mobile} md:col-span-${props.columns.tablet} lg:col-span-${props.columns.pc}`;
});
const gridLayoutEl = ref();

3
vuejs/client/src/components/Widget/Table.vue
View file

@ -151,13 +151,14 @@ onUpdated(() => {
</thead>
<tbody ref="tableBody" class="table-content">
<tr
v-for="rowId in table.rowLength"
v-for="rowId in table.rowLength - 1"
role="row"
:aria-rowindex="rowId"
class="table-content-item"
>
<template v-for="(col, id) in props.items[rowId]">
<td
role="Scell"
:class="[
'table-content-item-wrap',
`col-span-${props.positions[id]}`,

224
vuejs/client/src/pages/test/Test.vue
View file

@ -512,31 +512,33 @@ const tableData = {
},
},
{
type: "select",
type: "Fields",
data: {
id: "default-server-cert_cache",
label: "default-server-cert_cache",
hideLabel: true,
inpType: "select",
name: "default-server-cert_cache",
value: "none",
values: [
"none",
"default-server-cert.pem",
"default-server-cert.key",
],
columns: {
pc: 12,
tablet: 12,
mobile: 12,
},
popovers: [
{
iconColor: "info",
iconName: "info",
text: "jobs_download_cache_file",
setting: {
id: "default-server-cert_cache",
label: "default-server-cert_cache",
hideLabel: true,
inpType: "select",
name: "default-server-cert_cache",
value: "none",
values: [
"none",
"default-server-cert.pem",
"default-server-cert.key",
],
columns: {
pc: 12,
tablet: 12,
mobile: 12,
},
],
popovers: [
{
iconColor: "info",
iconName: "info",
text: "jobs_download_cache_file",
},
],
},
},
},
],
@ -672,27 +674,29 @@ const tableData = {
},
},
{
type: "select",
type: "Fields",
data: {
id: "failover-backup_cache",
label: "failover-backup_cache",
hideLabel: true,
inpType: "select",
name: "failover-backup_cache",
value: "none",
values: ["none", "folder:/var/tmp/bunkerweb/failover.tgz"],
columns: {
pc: 12,
tablet: 12,
mobile: 12,
},
popovers: [
{
iconColor: "info",
iconName: "info",
text: "jobs_download_cache_file",
setting: {
id: "failover-backup_cache",
label: "failover-backup_cache",
hideLabel: true,
inpType: "select",
name: "failover-backup_cache",
value: "none",
values: ["none", "folder:/var/tmp/bunkerweb/failover.tgz"],
columns: {
pc: 12,
tablet: 12,
mobile: 12,
},
],
popovers: [
{
iconColor: "info",
iconName: "info",
text: "jobs_download_cache_file",
},
],
},
},
},
],
@ -782,27 +786,29 @@ const tableData = {
},
},
{
type: "select",
type: "Fields",
data: {
id: "mmdb-asn_cache",
label: "mmdb-asn_cache",
hideLabel: true,
inpType: "select",
name: "mmdb-asn_cache",
value: "none",
values: ["none", "asn.mmdb"],
columns: {
pc: 12,
tablet: 12,
mobile: 12,
},
popovers: [
{
iconColor: "info",
iconName: "info",
text: "jobs_download_cache_file",
setting: {
id: "mmdb-asn_cache",
label: "mmdb-asn_cache",
hideLabel: true,
inpType: "select",
name: "mmdb-asn_cache",
value: "none",
values: ["none", "asn.mmdb"],
columns: {
pc: 12,
tablet: 12,
mobile: 12,
},
],
popovers: [
{
iconColor: "info",
iconName: "info",
text: "jobs_download_cache_file",
},
],
},
},
},
],
@ -846,27 +852,29 @@ const tableData = {
},
},
{
type: "select",
type: "Fields",
data: {
id: "mmdb-country_cache",
label: "mmdb-country_cache",
hideLabel: true,
inpType: "select",
name: "mmdb-country_cache",
value: "none",
values: ["none", "country.mmdb"],
columns: {
pc: 12,
tablet: 12,
mobile: 12,
},
popovers: [
{
iconColor: "info",
iconName: "info",
text: "jobs_download_cache_file",
setting: {
id: "mmdb-country_cache",
label: "mmdb-country_cache",
hideLabel: true,
inpType: "select",
name: "mmdb-country_cache",
value: "none",
values: ["none", "country.mmdb"],
columns: {
pc: 12,
tablet: 12,
mobile: 12,
},
],
popovers: [
{
iconColor: "info",
iconName: "info",
text: "jobs_download_cache_file",
},
],
},
},
},
],
@ -956,31 +964,33 @@ const tableData = {
},
},
{
type: "select",
type: "Fields",
data: {
id: "self-signed_cache",
label: "self-signed_cache",
hideLabel: true,
inpType: "select",
name: "self-signed_cache",
value: "none",
values: [
"none",
"www.example.com/cert.pem",
"www.example.com/key.pem",
],
columns: {
pc: 12,
tablet: 12,
mobile: 12,
},
popovers: [
{
iconColor: "info",
iconName: "info",
text: "jobs_download_cache_file",
setting: {
id: "self-signed_cache",
label: "self-signed_cache",
hideLabel: true,
inpType: "select",
name: "self-signed_cache",
value: "none",
values: [
"none",
"www.example.com/cert.pem",
"www.example.com/key.pem",
],
columns: {
pc: 12,
tablet: 12,
mobile: 12,
},
],
popovers: [
{
iconColor: "info",
iconName: "info",
text: "jobs_download_cache_file",
},
],
},
},
},
],
@ -1082,13 +1092,7 @@ const tableData = {
<template>
<DashboardLayout>
<GridLayout :columns="{ pc: 4, tablet: 6, mobile: 12 }">
<!-- widget grid -->
<Grid>
<Input v-bind="inputData" />
</Grid>
</GridLayout>
<GridLayout :columns="{ pc: 4, tablet: 6, mobile: 12 }">
<GridLayout :columns="{ pc: 12, tablet: 12, mobile: 12 }">
<!-- widget grid -->
<Grid>
<Table v-bind="tableData" />

244
vuejs/jobs.json
View file

@ -453,31 +453,33 @@
}
},
{
"type": "select",
"type": "Fields",
"data": {
"id": "default-server-cert_cache",
"label": "default-server-cert_cache",
"hideLabel": true,
"inpType": "select",
"name": "default-server-cert_cache",
"value": "none",
"values": [
"none",
"default-server-cert.pem",
"default-server-cert.key"
],
"columns": {
"pc": 12,
"tablet": 12,
"mobile": 12
},
"popovers": [
{
"iconColor": "info",
"iconName": "info",
"text": "jobs_download_cache_file"
}
]
"setting": {
"id": "default-server-cert_cache",
"label": "default-server-cert_cache",
"hideLabel": true,
"inpType": "select",
"name": "default-server-cert_cache",
"value": "none",
"values": [
"none",
"default-server-cert.pem",
"default-server-cert.key"
],
"columns": {
"pc": 12,
"tablet": 12,
"mobile": 12
},
"popovers": [
{
"iconColor": "info",
"iconName": "info",
"text": "jobs_download_cache_file"
}
]
}
}
}
],
@ -613,30 +615,32 @@
}
},
{
"type": "select",
"type": "Fields",
"data": {
"id": "failover-backup_cache",
"label": "failover-backup_cache",
"hideLabel": true,
"inpType": "select",
"name": "failover-backup_cache",
"value": "none",
"values": [
"none",
"folder:/var/tmp/bunkerweb/failover.tgz"
],
"columns": {
"pc": 12,
"tablet": 12,
"mobile": 12
},
"popovers": [
{
"iconColor": "info",
"iconName": "info",
"text": "jobs_download_cache_file"
}
]
"setting": {
"id": "failover-backup_cache",
"label": "failover-backup_cache",
"hideLabel": true,
"inpType": "select",
"name": "failover-backup_cache",
"value": "none",
"values": [
"none",
"folder:/var/tmp/bunkerweb/failover.tgz"
],
"columns": {
"pc": 12,
"tablet": 12,
"mobile": 12
},
"popovers": [
{
"iconColor": "info",
"iconName": "info",
"text": "jobs_download_cache_file"
}
]
}
}
}
],
@ -726,30 +730,32 @@
}
},
{
"type": "select",
"type": "Fields",
"data": {
"id": "mmdb-asn_cache",
"label": "mmdb-asn_cache",
"hideLabel": true,
"inpType": "select",
"name": "mmdb-asn_cache",
"value": "none",
"values": [
"none",
"asn.mmdb"
],
"columns": {
"pc": 12,
"tablet": 12,
"mobile": 12
},
"popovers": [
{
"iconColor": "info",
"iconName": "info",
"text": "jobs_download_cache_file"
}
]
"setting": {
"id": "mmdb-asn_cache",
"label": "mmdb-asn_cache",
"hideLabel": true,
"inpType": "select",
"name": "mmdb-asn_cache",
"value": "none",
"values": [
"none",
"asn.mmdb"
],
"columns": {
"pc": 12,
"tablet": 12,
"mobile": 12
},
"popovers": [
{
"iconColor": "info",
"iconName": "info",
"text": "jobs_download_cache_file"
}
]
}
}
}
],
@ -793,30 +799,32 @@
}
},
{
"type": "select",
"type": "Fields",
"data": {
"id": "mmdb-country_cache",
"label": "mmdb-country_cache",
"hideLabel": true,
"inpType": "select",
"name": "mmdb-country_cache",
"value": "none",
"values": [
"none",
"country.mmdb"
],
"columns": {
"pc": 12,
"tablet": 12,
"mobile": 12
},
"popovers": [
{
"iconColor": "info",
"iconName": "info",
"text": "jobs_download_cache_file"
}
]
"setting": {
"id": "mmdb-country_cache",
"label": "mmdb-country_cache",
"hideLabel": true,
"inpType": "select",
"name": "mmdb-country_cache",
"value": "none",
"values": [
"none",
"country.mmdb"
],
"columns": {
"pc": 12,
"tablet": 12,
"mobile": 12
},
"popovers": [
{
"iconColor": "info",
"iconName": "info",
"text": "jobs_download_cache_file"
}
]
}
}
}
],
@ -906,31 +914,33 @@
}
},
{
"type": "select",
"type": "Fields",
"data": {
"id": "self-signed_cache",
"label": "self-signed_cache",
"hideLabel": true,
"inpType": "select",
"name": "self-signed_cache",
"value": "none",
"values": [
"none",
"www.example.com/cert.pem",
"www.example.com/key.pem"
],
"columns": {
"pc": 12,
"tablet": 12,
"mobile": 12
},
"popovers": [
{
"iconColor": "info",
"iconName": "info",
"text": "jobs_download_cache_file"
}
]
"setting": {
"id": "self-signed_cache",
"label": "self-signed_cache",
"hideLabel": true,
"inpType": "select",
"name": "self-signed_cache",
"value": "none",
"values": [
"none",
"www.example.com/cert.pem",
"www.example.com/key.pem"
],
"columns": {
"pc": 12,
"tablet": 12,
"mobile": 12
},
"popovers": [
{
"iconColor": "info",
"iconName": "info",
"text": "jobs_download_cache_file"
}
]
}
}
}
],

42
vuejs/test3.py
View file

@ -34,26 +34,28 @@ def jobs_to_list(jobs):
file_name = f"{cache['service_id']}/{cache['file_name']}" if cache['service_id'] else cache['file_name']
files.append(file_name)
item.append({ 'type': 'select', 'data': {
"id": f"{key}_cache",
"label": f"{key}_cache",
"hideLabel": True,
"inpType": "select",
"name": f"{key}_cache",
"value": "none",
"values": files,
"columns": {
"pc": 12,
"tablet": 12,
"mobile": 12,
},
"popovers": [
{
"iconColor": "info",
"iconName": "info",
"text": "jobs_download_cache_file",
},
],
item.append({ 'type': 'Fields', 'data': {
'setting' : {
"id": f"{key}_cache",
"label": f"{key}_cache",
"hideLabel": True,
"inpType": "select",
"name": f"{key}_cache",
"value": "none",
"values": files,
"columns": {
"pc": 12,
"tablet": 12,
"mobile": 12,
},
"popovers": [
{
"iconColor": "info",
"iconName": "info",
"text": "jobs_download_cache_file",
},
],
}
},
})
continue