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 forms and services components + fix layout

Browse source
This commit is contained in:
Jordan Blasenhauer 2024-08-13 17:24:20 +02:00
parent 27920db4dd
commit f7c5ca3603
18 changed files with 153 additions and 146 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/ui/client/builder/pages/advanced_mode.py
View file

@ -10,6 +10,7 @@ def advanced_mode_builder(templates: list[dict], plugins: list, global_config: d
builder = [
{
"type": "card",
"maxWidthScreen": "3xl",
"containerColumns": {"pc": 12, "tablet": 12, "mobile": 12},
"widgets": [
{

1
src/ui/client/builder/pages/easy_mode.py
View file

@ -11,6 +11,7 @@ def easy_mode_builder(templates: list[dict], plugins: list, global_config: dict,
builder = [
{
"type": "card",
"maxWidthScreen": "3xl",
"containerColumns": {"pc": 12, "tablet": 12, "mobile": 12},
"widgets": [
{

1
src/ui/client/builder/pages/raw_mode.py
View file

@ -12,6 +12,7 @@ def raw_mode_builder(templates: list[dict], plugins: list, global_config: dict,
builder = [
{
"type": "card",
"maxWidthScreen": "3xl",
"containerColumns": {"pc": 12, "tablet": 12, "mobile": 12},
"widgets": [
{

195
src/ui/client/builder/pages/services.py
View file

@ -1,6 +1,6 @@
from typing import Union
from .utils.widgets import title_widget, table_widget
from .utils.widgets import title_widget, table_widget, button_group_widget, button_widget
def services_builder(services):
@ -11,23 +11,30 @@ def services_builder(services):
builder = [
{
"type": "card",
"containerColumns": {"pc": 12, "tablet": 12, "mobile": 12},
"type": "tabs",
"columns": {"pc": 4, "tablet": 4, "mobile": 4},
"widgets": [
title_widget("services_title"),
{
"type": "Button",
"data": {
"id": "services-new",
"text": "services_new",
"color": "success",
"size": "normal",
"iconName": "plus",
"iconColor": "white",
"modal": services_action(server_name="new", operation="new", title="services_new_title", subtitle="services_new_subtitle"),
"containerClass": "col-span-12 flex justify-center",
},
},
button_group_widget(
buttons=[
button_widget(
id="services-new",
text="services_new",
color="success",
size="normal",
iconName="plus",
iconColor="white",
modal=services_action(server_name="new", operation="new", title="services_new_title", subtitle="services_new_subtitle"),
containerClass="col-span-12 flex justify-center",
)
]
)
],
},
{
"type": "card",
"columns": {"pc": 4, "tablet": 4, "mobile": 4},
"widgets": [
title_widget(title="services_title"),
table_widget(
positions=[4, 4, 4],
header=[
@ -163,43 +170,42 @@ def services_action(
) -> dict:
buttons = [
{
"id": f"close-service-btn-{server_name}",
"text": "action_close",
"disabled": False,
"color": "close",
"size": "normal",
"attrs": {"data-close-modal": ""},
},
button_widget(
id=f"close-service-btn-{server_name}",
text="action_close",
color="close",
size="normal",
attrs={"data-close-modal": ""},
)
]
if operation == "delete":
buttons.append(
{
"id": f"{operation}-service-btn-{server_name}",
"text": f"action_{operation}",
"disabled": False,
"color": "delete",
"size": "normal",
"attrs": {
"data-submit-form": f"""{{"SERVER_NAME" : "{server_name}", "operation" : "{operation}" }}""",
button_widget(
id=f"{operation}-service-btn-{server_name}",
text=f"action_{operation}",
color="delete",
size="normal",
attrs={
"data-submit-form": f"""{{"SERVER_NAME" : "{server_name}" }}""",
"data-submit-endpoint": f"/{operation}",
},
},
)
)
if operation == "draft":
draft_value = "yes" if is_draft else "no"
buttons.append(
{
"id": f"{operation}-service-btn-{server_name}",
"text": "action_switch",
"disabled": False,
"color": "success",
"size": "normal",
"attrs": {
"data-submit-form": f"""{{"SERVER_NAME" : "{server_name}", "OLD_SERVER_NAME" : "{server_name}", "operation" : "edit", "IS_DRAFT" : "{draft_value}" }}""",
button_widget(
id=f"{operation}-service-btn-{server_name}",
text="action_switch",
color="success",
size="normal",
attrs={
"data-submit-form": f"""{{"SERVER_NAME" : "{server_name}", "OLD_SERVER_NAME" : "{server_name}", "IS_DRAFT" : "{draft_value}" }}""",
"data-submit-endpoint": f"/edit",
},
},
)
)
content = [
@ -253,17 +259,16 @@ def services_action(
mode_buttons = []
for mode in modes:
mode_buttons.append(
{
"id": f"{operation}-service-btn-{server_name}",
"text": f"services_mode_{mode}",
"disabled": False,
"color": "info",
"size": "normal",
"attrs": {
button_widget(
id=f"{operation}-service-btn-{server_name}",
text=f"services_mode_{mode}",
color="info",
size="normal",
attrs={
"role": "link",
"data-link": f"modes?service_name={server_name}&mode={mode}" if operation != "new" else f"modes?mode={mode}",
},
},
)
)
content.append(
@ -304,49 +309,49 @@ def get_services_list(services):
"type": "ButtonGroup",
"data": {
"buttons": [
{
"id": f"open-modal-plugins-{index}",
"text": "plugins",
"hideText": True,
"color": "success",
"size": "normal",
"iconName": "eye",
"iconColor": "white",
"modal": services_action(
button_widget(
id=f"open-modal-plugins-{index}",
text="plugins",
hideText=True,
color="success",
size="normal",
iconName="eye",
iconColor="white",
modal=services_action(
server_name=server_name,
operation="plugins",
title="services_plugins_title",
subtitle="",
service=service,
),
},
{
"attrs": {"data-server-name": server_name},
"id": f"open-modal-manage-{index}",
"text": "manage",
"hideText": True,
"color": "edit",
"size": "normal",
"iconName": "pen",
"iconColor": "white",
"modal": services_action(
),
button_widget(
id=f"open-modal-manage-{index}",
text="manage",
hideText=True,
color="edit",
size="normal",
iconName="pen",
iconColor="white",
modal=services_action(
server_name=server_name,
operation="edit",
title="services_edit_title",
subtitle="services_edit_subtitle",
additional=server_name,
),
},
{
"attrs": {"data-server-name": server_name, "data-is-draft": "yes" if is_draft else "no"},
"id": f"open-modal-draft-{index}",
"text": "draft" if is_draft else "online",
"hideText": True,
"color": "blue",
"size": "normal",
"iconName": "document" if is_draft else "globe",
"iconColor": "white",
"modal": services_action(
attrs={"data-server-name": server_name},
),
button_widget(
attrs={"data-server-name": server_name, "data-is-draft": "yes" if is_draft else "no"},
id=f"open-modal-draft-{index}",
text="draft" if is_draft else "online",
hideText=True,
color="blue",
size="normal",
iconName="document" if is_draft else "globe",
iconColor="white",
modal=services_action(
server_name=server_name,
operation="draft",
title="services_draft_title",
@ -354,21 +359,21 @@ def get_services_list(services):
additional="services_draft_switch_subtitle" if is_draft else "services_online_switch_subtitle",
is_draft=is_draft,
),
},
{
"attrs": {"data-server-name": server_name},
"id": f"open-modal-delete-{index}",
"text": "delete",
"disabled": not is_deletable,
"hideText": True,
"color": "red",
"size": "normal",
"iconName": "trash",
"iconColor": "white",
"modal": services_action(
),
button_widget(
attrs={"data-server-name": server_name},
id=f"open-modal-delete-{index}",
text="delete",
disabled=not is_deletable,
hideText=True,
color="red",
size="normal",
iconName="trash",
iconColor="white",
modal=services_action(
server_name=server_name, operation="delete", title="services_delete_title", subtitle="services_delete_subtitle"
),
},
),
]
},
}

6
src/ui/client/builder/pages/utils/widgets.py
View file

@ -952,7 +952,7 @@ def grid_layout_widget(
gridLayoutClass: str = "items-start",
display: Optional[list] = None,
tabId: str = "",
maxWidthScreen: str = "lg"
maxWidthScreen: str = "2xl"
):
"""
This component is used for top level page layout.
@ -970,7 +970,7 @@ def grid_layout_widget(
- `gridLayoutClass` **String** Additional class (optional, default `"items-start"`)
- `display` **Array** Array need two values : "groupName" in index 0 and "compId" in index 1 in order to be displayed using the display store. More info on the display store itslef. (optional, default `[]`)
- `tabId` **String** Case the container is converted to an anchor with a link, we can define the tabId, by default it is the contentIndex (optional, default `contentIndex`)
- `maxWidthScreen` **string** Max screen width for the settings based on the breakpoint (xs, sm, md, lg, xl, 2xl) (optional, default `"lg"`)
- `maxWidthScreen` **string** Max screen width for the settings based on the breakpoint (xs, sm, md, lg, xl, 2xl, 3xl) (optional, default `"2xl"`)
EXAMPLE
@ -989,7 +989,7 @@ def grid_layout_widget(
# List of params that will be add only if not default value
list_params = [("type", type, "card"),("id", id, ""),("title", title, ""),("link", link, ""),("columns", columns, {"pc":12,"tablet":12,"mobile":12}),("gridLayoutClass", gridLayoutClass, "items-start"),("display", display, None),("tabId", tabId, ""),("maxWidthScreen", maxWidthScreen, "lg")]
list_params = [("type", type, "card"),("id", id, ""),("title", title, ""),("link", link, ""),("columns", columns, {"pc":12,"tablet":12,"mobile":12}),("gridLayoutClass", gridLayoutClass, "items-start"),("display", display, None),("tabId", tabId, ""),("maxWidthScreen", maxWidthScreen, "2xl")]
for param in list_params:
add_key_value(data, param[0], param[1], param[2])

15
src/ui/client/builder/services.py → src/ui/client/builder/test_services.py
View file

@ -1,8 +1,5 @@
import json
import base64
from typing import Union
from builder.services import services_builder
from utils import save_builder
from pages.services import services_builder
services = [
{
@ -36,11 +33,5 @@ services = [
output = services_builder(services)
# store on a file
with open("services.json", "w") as f:
json.dump(output, f, indent=4)
output_base64_bytes = base64.b64encode(bytes(json.dumps(output), "utf-8"))
output_base64_string = output_base64_bytes.decode("ascii")
with open("services.txt", "w") as f:
f.write(output_base64_string)
save_builder("services", output, script_name="services")

5
src/ui/client/dashboard/components/Builder/Services.vue
View file

@ -4,6 +4,7 @@ import Grid from "@components/Widget/Grid.vue";
import GridLayout from "@components/Widget/GridLayout.vue";
import Table from "@components/Widget/Table.vue";
import Title from "@components/Widget/Title.vue";
import ButtonGroup from "@components/Widget/ButtonGroup.vue";
import Button from "@components/Widget/Button.vue";
import { useEqualStr } from "@utils/global.js";
@ -319,6 +320,10 @@ const props = defineProps({
<!-- widget element -->
<template v-for="(widget, index) in container.widgets" :key="index">
<Table v-if="useEqualStr(widget.type, 'Table')" v-bind="widget.data" />
<ButtonGroup
v-if="useEqualStr(widget.type, 'ButtonGroup')"
v-bind="widget.data"
/>
<Button
v-if="useEqualStr(widget.type, 'Button')"
v-bind="widget.data"

26
src/ui/client/dashboard/components/Form/Advanced.vue
View file

@ -350,18 +350,20 @@ onUnmounted(() => {
/>
</Container>
</template>
<Button
v-if="Object.keys(advancedForm.templateUIFormat).length"
v-bind="buttonSave"
:disabled="
data.isReqErr || data.isRegErr
? true
: advancedForm.isUpdateData
? false
: true
"
@click="advancedForm.submit()"
/>
<div class="button-group-form">
<Button
v-if="Object.keys(advancedForm.templateUIFormat).length"
v-bind="buttonSave"
:disabled="
data.isReqErr || data.isRegErr
? true
: advancedForm.isUpdateData
? false
: true
"
@click="advancedForm.submit()"
/>
</div>
<div class="flex justify-center items-center" data-is="form-error">
<Text
v-if="

4
src/ui/client/dashboard/components/Form/Easy.vue
View file

@ -11,7 +11,7 @@ import Container from "@components/Widget/Container.vue";
import Fields from "@components/Form/Fields.vue";
import Title from "@components/Widget/Title.vue";
import Subtitle from "@components/Widget/Subtitle.vue";
import Button from "@components/Widget/Button.vue";
import ButtonGroup from "@components/Widget/ButtonGroup.vue";
import Text from "@components/Widget/Text.vue";
import GroupMultiple from "@components/Forms/Group/Multiple.vue";
import MessageUnmatch from "@components/Message/Unmatch.vue";
@ -240,7 +240,7 @@ onUnmounted(() => {
</Container>
</Container>
</template>
<div class="flex justify-center items-center">
<div class="button-group-form">
<Button
@click="data.currStep = Math.max(data.currStep - 1, 0)"
:disabled="data.isFirstStep"

13
src/ui/client/dashboard/components/Form/Raw.vue
View file

@ -209,12 +209,13 @@ onMounted(() => {
:value="rawForm.rawData"
/>
</Container>
<Button
@click="rawForm.submit()"
:disabled="data.isValid ? false : rawForm.isUpdateData ? false : true"
v-bind="buttonSave"
/>
<div class="button-group-form">
<Button
@click="rawForm.submit()"
:disabled="data.isValid ? false : rawForm.isUpdateData ? false : true"
v-bind="buttonSave"
/>
</div>
<div class="flex justify-center items-center" data-is="form-error">
<Text
v-if="!data.isValid"

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

@ -26,7 +26,7 @@ import { useDisplayStore } from "@store/global.js";
* @param {String} [gridLayoutClass="items-start"] - Additional class
* @param {Array} [display=[]] - Array need two values : "groupName" in index 0 and "compId" in index 1 in order to be displayed using the display store. More info on the display store itslef.
* @param {String} [tabId=contentIndex] - Case the container is converted to an anchor with a link, we can define the tabId, by default it is the contentIndex
* @param {string} [maxWidthScreen="lg"] - Max screen width for the settings based on the breakpoint (xs, sm, md, lg, xl, 2xl)
* @param {string} [maxWidthScreen="2xl"] - Max screen width for the settings based on the breakpoint (xs, sm, md, lg, xl, 2xl, 3xl)
*/
const props = defineProps({
@ -118,7 +118,7 @@ const containerClass = computed(() => {
});
const gridClass = computed(() => {
return ` col-span-${props.columns.mobile} md:col-span-${props.columns.tablet} lg:col-span-${props.columns.pc}`;
return `w-full col-span-${props.columns.mobile} md:col-span-${props.columns.tablet} lg:col-span-${props.columns.pc}`;
});
const flowEl = ref();

4
src/ui/client/dashboard/pages/logs/Logs.vue
View file

@ -60,8 +60,6 @@ onMounted(() => {
<template>
<DashboardLayout>
<div class="col-span-12 grid grid-cols-12 card">
<BuilderLogs v-if="logs.builder" :builder="logs.builder" />
</div>
<BuilderLogs v-if="logs.builder" :builder="logs.builder" />
</DashboardLayout>
</template>

4
src/ui/client/dashboard/pages/modes/Modes.vue
View file

@ -33,8 +33,6 @@ onMounted(() => {
<template>
<DashboardLayout>
<div class="col-span-12 grid grid-cols-12 card">
<BuilderModes v-if="modes.builder" :builder="modes.builder" />
</div>
<BuilderModes v-if="modes.builder" :builder="modes.builder" />
</DashboardLayout>
</template>

4
src/ui/client/dashboard/pages/services/Services.vue
View file

@ -33,8 +33,6 @@ onMounted(() => {
<template>
<DashboardLayout>
<div class="col-span-12 grid grid-cols-12 card">
<BuilderServices v-if="services.builder" :builder="services.builder" />
</div>
<BuilderServices v-if="services.builder" :builder="services.builder" />
</DashboardLayout>
</template>

5
src/ui/client/dashboard/pages/services/index.html
View file

File diff suppressed because one or more lines are too long

2
src/ui/client/input.css
View file

@ -1155,7 +1155,7 @@ body {
}
.button-group-tabs {
@apply col-span-12 flex justify-center items-center;
@apply col-span-12 flex flex-col sm:flex-row justify-center items-center gap-2;
}
.button-group-multiple {

2
src/ui/client/public/css/style.css
View file

File diff suppressed because one or more lines are too long

7
src/ui/client/tailwind.config.js
View file

@ -14,6 +14,8 @@ export default {
"max-w-screen-lg",
"max-w-screen-xl",
"max-w-screen-2xl",
"max-w-screen-3xl",
"max-w-screen-4xl",
"col-span-1",
"col-span-2",
"col-span-3",
@ -352,7 +354,10 @@ export default {
"xl-max": { max: "1200px" },
"2xl": "1320px",
"2xl-max": { max: "1320px" },
"3xl": "1920px",
"3xl": "1640px",
"3xl-max": { max: "1640px" },
"4xl": "1920px",
"4xl-max": { max: "1920px" },
},
colors: ({ colors }) => ({
inherit: colors.inherit,