Hi, I am trying to make a crude system by dash SQLALachemy.
machines_layout = html.Div(
[
dcc.Location(id="machine_list_path", refresh=True),
dcc.Input(id="hidden_input", readOnly=True, disabled=True, autoFocus=False),
dbc.Container(
[
dbc.Row(
[
dbc.Col(
[
html.Div(
[
dbc.Label("Machine name", html_for="machine_name"),
dbc.Input(
type="text",
id="machine_name",
placeholder="Machine name",
autoComplete=False,
autoFocus=False
),
], className="machine_input"
)
],
width=4,
),
dbc.Col(
[
html.Div(
[
dbc.Label("Equipment Id", html_for="equipment_id"),
dbc.Input(
type="text",
id="equipment_id",
placeholder="Equipment Id",
autoComplete=False,
autoFocus=False
),
], className="machine_input"
)
],
width=4,
),
dbc.Col(
[
html.Div(
[
dbc.Label("Company Name", html_for="company_name"),
dbc.Input(
type="text",
id="company_name",
placeholder="Company name",
autoComplete=False,
autoFocus=False
),
], className="machine_input"
)
],
width=4,
),
]
),
dbc.Row(
[
dbc.Col(
[
dbc.Button(
"Create machine",
id="machine_submit",
n_clicks=0,
value="machine_submit",
color="success",
size="lg",
className="me-1",
),
],
width={"size": 6, "offset": 3},
),
],
align="center",
justify="center",
)
]
),
dbc.Container(
[
dbc.Row(
[
dbc.Col(
[
html.Div(id="machine_list_table")
]
),
]
),
]
),
],
className="machine_list_section container_header",
)
As you can see, there is a front-end code that shows the form information and machine list in a table.
@callback(
[
Output("machine_list_table", "children"),
],
[
Input("machine_submit", "n_clicks"),
],
[
State("machine_name", "value"),
State("equipment_id", "value"),
State("company_name", "value"),
],
#prevent_initial_call=True,
)
def machine_register(*machine_info) -> List:
"""_register new machine_
Args:
machine_info (_list_): _machine information_
Returns:
_list_: _return empty list_
"""
triggered_value = ctx.triggered[0]["prop_id"].split(".")[0]
#if "machine_submit" not in triggered_value:
# raise Exception("you haven't submitted the form")
print(machine_info[1:3])
if (machine_info[1:3] is not None):
machine_list = create_machine(machine_info)
notify_message("machine information registered")
else:
notify_message("Please write all the information")
return [dbc.Table(
[
html.Thead(
html.Tr(
[
html.Th("Id"),
html.Th("Machine name"),
html.Th("Equipment Id"),
html.Th("Company name"),
html.Th("Actions"),
]
)
),
html.Tbody(
[
html.Tr(
[
html.Td(idx+1),
html.Td(item.machine_name),
html.Td(item.equipment_id),
html.Td(item.company_name),
html.Td(
[
# dbc.Button(
# "Edit",
# id="{}_edit".format(
# item.equipment_id
# ),
# value=item.equipment_id,
# color="info",
# size="lm",
# className="me-1",
# ),
dbc.Button(
"Delete",
id="{}".format(
item.equipment_id
),
value=item.equipment_id,
color="danger",
size="lm",
className="me-1",
)
]
),
]
)
for idx, item in enumerate(machine_list)
]
),
],
dark=True,
hover=True,
responsive=True,
color="light",
className="user_list",
)]
I used the callback method to update the machine list information, but the callback input and state automatically executed the function.
Is there anyone who has been done the crud system by dash?
Thanks
Saddam