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

instances and plugins base format done

Browse source
This commit is contained in:
Jordan Blasenhauer 2024-08-12 09:31:44 +02:00
parent 4c0bf3edc4
commit 04a743fa4b
4 changed files with 297 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/ui/client/dashboard/components/Widget/Tabulator.vue
View file

@ -11,7 +11,7 @@ import { useEqualStr } from "@utils/global.js";
import {
addColumnsSorter,
addColumnsWidth,
a18yTable,
a11yTable,
applyTableFilter,
overrideDefaultFilters,
} from "@utils/tabulator.js";
@ -200,7 +200,7 @@ onMounted(() => {
table.instance = new Tabulator(tableEl.value, table.options);
table.instance.on("tableBuilt", () => {
table.instance.redraw();
a18yTable(table.instance);
a11yTable(table.instance);
// Add table instance to store in order to use it in other components
tableStore.setTable(props.id, table.instance);
});

18
src/ui/client/dashboard/utils/tabulator.js
View file

@ -92,22 +92,22 @@ function _sortText(column, formatName) {
}
/**
* @name a18yTable
* @name a11yTable
* @description Wrapper to add some accessibility to the table.
* @returns {void}
*/
function a18yTable() {
_a18ySortable();
_a18yFooter();
function a11yTable() {
_a11ySortable();
_a11yFooter();
}
/**
* @name _a18ySortable
* @name _a11ySortable
* @description Allow the user to get to the sortable header by pressing the tab key.
* The user can then press the enter key to sort the column.
* @returns {void}
*/
function _a18ySortable() {
function _a11ySortable() {
const sortableHeaders = document.querySelectorAll(
".tabulator-col.tabulator-sortable .tabulator-col-sorter"
);
@ -128,11 +128,11 @@ function _a18ySortable() {
}
/**
* @name _a18yFooter
* @name _a11yFooter
* @description Update pagination tabindex to get continuity in the tab order in the table footer.
* @returns {void}
*/
function _a18yFooter() {
function _a11yFooter() {
const tableFooter = document.querySelector(".tabulator-footer");
// query button and select tag
const interactiveElements = tableFooter.querySelectorAll("button, select");
@ -326,7 +326,7 @@ function overrideDefaultFilters() {
export {
addColumnsSorter,
addColumnsWidth,
a18yTable,
a11yTable,
applyTableFilter,
overrideDefaultFilters,
};

110
src/ui/client/tests/instances2.py
View file

@ -1,7 +1,7 @@
import json
import base64
from builder.utils.widgets import button, button_group, title, text, tabulator
from builder.utils.widgets import button, button_group, title, text, tabulator, input
columns = [
{"title": "Name", "field": "name", "formatter": "text"},
@ -28,7 +28,7 @@ filters = [
"setting": {
"id": "input-search-host-name",
"name": "input-search-host-name",
"label": "Search (host)name",
"label": "instances_search_host_name", # keep it (a18n)
"value": "",
"inpType": "input",
"columns": {"pc": 3, "tablet": 4, " mobile": 12},
@ -40,9 +40,9 @@ filters = [
"setting": {
"id": "select-type",
"name": "select-type",
"label": "Select type",
"value": "all",
"values": ["all", "type1", "type2"],
"label": "instances_select_type", # keep it (a18n)
"value": "all", # keep "all"
"values": ["all", "type1", "type2"], # keep "all" but add your types
"inpType": "select",
"onlyDown": True,
"columns": {"pc": 3, "tablet": 4, " mobile": 12},
@ -54,9 +54,9 @@ filters = [
"setting": {
"id": "select-method",
"name": "select-method",
"label": "Select method",
"value": "all",
"values": ["all", "method1", "method2"],
"label": "instances_select_method", # keep it (a18n)
"value": "all", # keep "all"
"values": ["all", "method1", "method2"], # keep "all" but add your methods
"inpType": "select",
"onlyDown": True,
"columns": {"pc": 3, "tablet": 4, " mobile": 12},
@ -68,8 +68,8 @@ actions = (
{
"buttons": [
button(
id="ping-instance-INSTANCE_NAME",
text="action_ping",
id="ping-instance-INSTANCE_NAME", # replace INSTANCE_NAME by the instance name
text="action_ping", # keep it (a18n)
color="success",
size="normal",
hideText=True,
@ -77,24 +77,26 @@ actions = (
iconColor="white",
modal={
"widgets": [
title(title="instances_ping_title"),
text(text="instances_ping_subtitle"),
text(bold=True, text="INSTANCE_NAME"),
title(title="instances_ping_title"), # keep it (a18n)
text(text="instances_ping_subtitle"), # keep it (a18n)
text(bold=True, text="INSTANCE_NAME"), # replace INSTANCE_NAME by the instance name
button_group(
buttons=[
button(
id="close-ping-btn-INSTANCE_NAME",
text="action_close",
id="close-ping-btn-INSTANCE_NAME", # replace INSTANCE_NAME by the instance name
text="action_close", # keep it (a18n)
color="close",
size="normal",
attrs={"data-close-modal": ""},
attrs={"data-close-modal": ""}, # a11y
)["data"],
button(
id="ping-btn-INSTANCE_NAME",
text="action_ping",
id="ping-btn-INSTANCE_NAME", # replace INSTANCE_NAME by the instance name
text="action_ping", # keep it (a18n)
color="info",
size="normal",
attrs={"data-submit-form": '{"instance_name" : ", "instance_hostname" : "", "operation" : "ping" }'},
attrs={
"data-submit-form": '{"instance_name" : ", "instance_hostname" : "", "operation" : "ping" }'
}, # replace values by needed ones for ping operation, data-submit-form attributs will parse and submit values to the form
)["data"],
]
),
@ -102,8 +104,8 @@ actions = (
},
),
button(
id="delete-instance-INSTANCE_NAME",
text="action_delete",
id="delete-instance-INSTANCE_NAME", # replace INSTANCE_NAME by the instance name
text="action_delete", # keep it (a18n)
color="success",
size="normal",
hideText=True,
@ -111,24 +113,26 @@ actions = (
iconColor="white",
modal={
"widgets": [
title(title="instances_delete_title"),
text(text="instances_delete_subtitle"),
text(bold=True, text="INSTANCE_NAME"),
title(title="instances_delete_title"), # keep it (a18n)
text(text="instances_delete_subtitle"), # keep it (a18n)
text(bold=True, text="INSTANCE_NAME"), # replace INSTANCE_NAME by the instance name
button_group(
buttons=[
button(
id="close-delete-btn-INSTANCE_NAME",
text="action_close",
id="close-delete-btn-INSTANCE_NAME", # replace INSTANCE_NAME by the instance name
text="action_close", # keep it (a18n)
color="close",
size="normal",
attrs={"data-close-modal": ""},
attrs={"data-close-modal": ""}, # a11y
)["data"],
button(
id="delete-btn-INSTANCE_NAME",
text="action_delete",
id="delete-btn-INSTANCE_NAME", # replace INSTANCE_NAME by the instance name
text="action_delete", # keep it (a18n)
color="info",
size="normal",
attrs={"data-submit-form": '{"instance_name" : ", "instance_hostname" : "", "operation" : "delete" }'},
attrs={
"data-submit-form": '{"instance_name" : ", "instance_hostname" : "", "operation" : "delete" }'
}, # replace values by needed ones for ping operation, data-submit-form attributs will parse and submit values
)["data"],
]
),
@ -153,7 +157,28 @@ items = [
]
instance_create_form = {}
instance_create_form_widgets = [
input(
id="instance-name",
name="instance-name",
label="instances_name", # keep it (a18n)
value="",
columns={"pc": 3, "tablet": 4, " mobile": 12},
),
input(
id="instance-hostname",
name="instance-hostname",
label="instances_hostname", # keep it (a18n)
value="",
columns={"pc": 3, "tablet": 4, " mobile": 12},
),
button(
id="create-instance",
text="action_create", # keep it (a18n)
color="success",
size="normal",
),
]
builder = [
{
@ -171,28 +196,7 @@ builder = [
{
"type": "card",
"display": ["main", 2],
"widgets": [
input(
id="instance-name",
name="instance-name",
label="instances_name",
value="",
columns={"pc": 3, "tablet": 4, " mobile": 12},
),
input(
id="instance-hostname",
name="instance-hostname",
label="instances_hostname",
value="",
columns={"pc": 3, "tablet": 4, " mobile": 12},
),
button(
id="create-instance",
text="action_create",
color="success",
size="normal",
),
],
"widgets": instance_create_form_widgets,
},
]

259
src/ui/client/tests/plugins2.py
View file

@ -1,45 +1,29 @@
import json
import base64
from builder.utils.widgets import button, button_group, title, text, tabulator
from builder.utils.widgets import button, button_group, title, text, tabulator, fields, upload
core_columns = [
{"title": "Name", "field": "name", "formatter": "text"},
{"title": "Description", "field": "description", "formatter": "text"},
{"title": "Page", "field": "type", "formatter": "buttonGroup"},
{"title": "Documentation page", "field": "documentation_page", "formatter": "buttonGroup"},
{"title": "Plugin page", "field": "plugin_page", "formatter": "buttonGroup"},
]
# Because we are going to use built-in filters, we can't use the Filter component
# So we need this format in order to create under the hood fields that will be linked to the tabulator filter
# We need to pass on the setting key the same props as the Fields component. For example a "=" tabulator filter will be used with a select field, this one need "values" array to work.
# type : Choose between available tabulator built-in filters ("keywords", "like", "!=", ">", "<", ">=", "<=", "in", "regex", "!=")
core_filters = [
{
"type": "like",
"fields": ["name"],
"setting": {
"id": "input-search-core_name",
"name": "input-search-core_name",
"label": "Search name",
"id": "input-search-core-name",
"name": "input-search-core-name",
"label": "plugins_search_name", # keep it (a18n)
"value": "",
"inpType": "input",
"columns": {"pc": 3, "tablet": 4, " mobile": 12},
},
},
{
"type": "=",
"fields": ["page"],
"setting": {
"id": "select-core-page",
"name": "select-core-page",
"label": "Select core-page",
"value": "all",
"values": ["all", "plugin page", "no plugin page"],
"inpType": "select",
"onlyDown": True,
"columns": {"pc": 3, "tablet": 4, " mobile": 12},
},
},
]
@ -47,13 +31,31 @@ core_items = [
{
"name": text(text="Name")["data"],
"description": text(text="Description")["data"],
"page": button_group(
"documentation_page": button_group(
buttons=[
button(
id="create-instance",
text="action_create",
id="plugin-doc-plugin-id", # replace by plugin_id custom page
text="plugins_documentation_page", # keep it (a18n)
color="success",
hideText=True,
iconName="document",
iconColor="white",
size="normal",
attrs="""{ "data-link": "plugins/plugin_id" }""", # replace by plugin_id custom page
)["data"]
]
),
"plugin_page": button_group(
buttons=[
button(
id="plugin-page-plugin-id", # replace by plugin_id custom page
text="plugins_custom_page", # keep it (a18n)
color="info",
hideText=True,
iconName="redirect",
iconColor="white",
size="normal",
attrs="""{ "data-link": "plugins/plugin_id" }""", # replace by plugin_id custom page
)["data"]
]
),
@ -61,7 +63,176 @@ core_items = [
]
instance_create_form = {}
register_columns = [
{"title": "Select", "field": "select", "formatter": "fields"}, # checkbox
{"title": "Name", "field": "name", "formatter": "text"},
{"title": "Description", "field": "description", "formatter": "text"},
{"title": "Type", "field": "type", "formatter": "text"},
{"title": "Install", "field": "install", "formatter": "text"},
{"title": "Documentation page", "field": "documentation_page", "formatter": "buttonGroup"},
{"title": "Plugin page", "field": "plugin_page", "formatter": "buttonGroup"},
]
register_filters = [
{
"type": "like",
"fields": ["name"],
"setting": {
"id": "input-search-register-name",
"name": "input-search-register-name",
"label": "plugins_search_name", # keep it (a18n)
"value": "",
"inpType": "input",
"columns": {"pc": 3, "tablet": 4, " mobile": 12},
},
},
{
"type": "=",
"fields": ["type"],
"setting": {
"id": "select-register-type",
"name": "select-register-type",
"label": "plugins_select_type", # keep it (a18n)
"value": "all",
"values": ["all", "pro", "external"],
"inpType": "select",
"onlyDown": True,
"columns": {"pc": 3, "tablet": 4, " mobile": 12},
},
},
{
"type": "=",
"fields": ["install"],
"setting": {
"id": "select-register-install",
"name": "select-register-install",
"label": "plugins_select_install", # keep it (a18n)
"value": "all",
"values": ["all", "yes", "no"],
"inpType": "select",
"onlyDown": True,
"columns": {"pc": 3, "tablet": 4, " mobile": 12},
},
},
]
register_items = [
{
"select": fields(
inputType="checkbox",
value="no", # replace yes or no if installed or not
label="plugin_is_installed", # keep it (a18n)
hideLabel=True,
id="checkbox-plugin-id", # replace by plugin_id
name="checkbox-plugin-id", # replace by plugin_id
columns={"pc": 12, "tablet": 12, " mobile": 12},
)["data"],
"name": text(text="Name")["data"],
"description": text(text="Description")["data"],
"type": text(text="Type")["data"], # replace yes or no if installed or not
"install": text(text="no")["data"],
"documentation_page": button_group(
buttons=[
button(
id="plugin-doc-plugin-id", # replace by plugin_id custom page
text="plugins_documentation_page", # keep it (a18n)
color="success",
hideText=True,
iconName="document",
iconColor="white",
size="normal",
attrs="""{ "data-link": "plugins/plugin_id" }""", # replace by plugin_id custom page
)["data"]
]
),
"plugin_page": button_group(
buttons=[
button(
id="plugin-page-plugin-id", # replace by plugin_id custom page
text="plugins_custom_page", # keep it (a18n)
color="info",
hideText=True,
iconName="redirect",
iconColor="white",
size="normal",
attrs="""{ "data-link": "plugins/plugin_id" }""", # replace by plugin_id custom page
)["data"]
]
),
},
]
upload_columns = [
{"title": "Select", "field": "select", "formatter": "fields"}, # checkbox
{"title": "Name", "field": "name", "formatter": "text"},
{"title": "Description", "field": "description", "formatter": "text"},
{"title": "Documentation page", "field": "documentation_page", "formatter": "buttonGroup"},
{"title": "Plugin page", "field": "plugin_page", "formatter": "buttonGroup"},
]
upload_filters = [
{
"type": "like",
"fields": ["name"],
"setting": {
"id": "input-search-upload-name",
"name": "input-search-upload-name",
"label": "plugins_search_name", # keep it (a18n)
"value": "",
"inpType": "input",
"columns": {"pc": 3, "tablet": 4, " mobile": 12},
},
},
]
upload_items = [
{
"select": fields(
inputType="checkbox",
value="no", # replace yes or no if installed or not
label="plugin_is_installed", # keep it (a18n)
hideLabel=True,
id="checkbox-plugin-id", # replace by plugin_id
name="checkbox-plugin-id", # replace by plugin_id
columns={"pc": 12, "tablet": 12, " mobile": 12},
)["data"],
"name": text(text="Name")["data"],
"description": text(text="Description")["data"],
"documentation_page": button_group(
buttons=[
button(
id="plugin-doc-plugin-id", # replace by plugin_id custom page
text="plugins_documentation_page", # keep it (a18n)
color="success",
hideText=True,
iconName="document",
iconColor="white",
size="normal",
attrs="""{ "data-link": "plugins/plugin_id" }""", # replace by plugin_id custom page
)["data"]
]
),
"plugin_page": button_group(
buttons=[
button(
id="plugin-page-plugin-id", # replace by plugin_id custom page
text="plugins_custom_page", # keep it (a18n)
color="info",
hideText=True,
iconName="redirect",
iconColor="white",
size="normal",
attrs="""{ "data-link": "plugins/plugin_id" }""", # replace by plugin_id custom page
)["data"]
]
),
},
]
builder = [
{
@ -69,17 +240,45 @@ builder = [
"display": ["main", 1],
"widgets": [
tabulator(
id="table-instances",
id="table-core-plugins",
columns=core_columns,
items=core_items,
filters=core_filters,
)
],
},
{
"type": "card",
"display": ["main", 2],
"widgets": [
tabulator(
id="table-register-plugins",
columns=register_columns,
items=register_items,
filters=register_filters,
)
],
},
{
"type": "card",
"display": ["main", 3],
"widgets": [
upload(
id="table-upload-plugins",
type="plugins",
),
tabulator(
id="table-upload-plugins",
columns=upload_columns,
items=upload_items,
filters=upload_filters,
),
],
},
]
with open("instances2.json", "w") as f:
with open("plugins2.json", "w") as f:
f.write(json.dumps(builder))
output_base64_bytes = base64.b64encode(bytes(json.dumps(builder), "utf-8"))
@ -87,5 +286,5 @@ output_base64_bytes = base64.b64encode(bytes(json.dumps(builder), "utf-8"))
output_base64_string = output_base64_bytes.decode("ascii")
with open("instances2.txt", "w") as f:
with open("plugins2.txt", "w") as f:
f.write(output_base64_string)