tonym/spoolman2
1
0
Fork 0
Code Issues 19 Pull Requests Actions Packages Projects Releases Wiki Activity

Added a basic web UI

Browse Source
This commit is contained in:
Donkie
2023-05-10 21:11:10 +02:00
parent 1c59e0efd5
commit 0269518175
39 changed files with 10950 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
client/src/pages/spools/create.tsx Normal file
View File

@@ -0,0 +1,100 @@
import React from "react";
import { IResourceComponentsProps } from "@refinedev/core";
import { Create, useForm } from "@refinedev/antd";
import { Form, Input, DatePicker, Select, InputNumber } from "antd";
import dayjs from "dayjs";
import TextArea from "antd/es/input/TextArea";
export const SpoolCreate: React.FC<IResourceComponentsProps> = () => {
const { formProps, saveButtonProps, queryResult } = useForm();
return (
<Create saveButtonProps={saveButtonProps}>
<Form {...formProps} layout="vertical">
<Form.Item
label="First Used"
name={["first_used"]}
rules={[
{
required: false,
},
]}
getValueProps={(value) => ({
value: value ? dayjs(value) : undefined,
})}
>
<DatePicker format="lll" />
</Form.Item>
<Form.Item
label="Last Used"
name={["last_used"]}
rules={[
{
required: false,
},
]}
getValueProps={(value) => ({
value: value ? dayjs(value) : undefined,
})}
>
<DatePicker format="lll" />
</Form.Item>
<Form.Item
label="Filament"
name={["filament", "name"]}
rules={[
{
required: true,
},
]}
>
{/* <Select {...filamentSelectProps} /> */}
</Form.Item>
<Form.Item
label="Used Weight"
name={["used_weight"]}
rules={[
{
required: true,
},
]}
>
<InputNumber min={0} addonAfter="g" />
</Form.Item>
<Form.Item
label="Location"
name={["location"]}
rules={[
{
required: false,
},
]}
>
<Input maxLength={64} />
</Form.Item>
<Form.Item
label="Lot Nr"
name={["lot_nr"]}
rules={[
{
required: false,
},
]}
>
<Input maxLength={64} />
</Form.Item>
<Form.Item
label="Comment"
name={["comment"]}
rules={[
{
required: false,
},
]}
>
<TextArea maxLength={1024} />
</Form.Item>
</Form>
</Create>
);
};

127
client/src/pages/spools/edit.tsx Normal file
View File

@@ -0,0 +1,127 @@
import React from "react";
import { IResourceComponentsProps } from "@refinedev/core";
import { Edit, useForm } from "@refinedev/antd";
import { Form, Input, DatePicker, Select, InputNumber } from "antd";
import dayjs from "dayjs";
import TextArea from "antd/es/input/TextArea";
export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
const { formProps, saveButtonProps, queryResult } = useForm();
const spoolData = queryResult?.data?.data;
return (
<Edit saveButtonProps={saveButtonProps}>
<Form {...formProps} layout="vertical">
<Form.Item
label="Id"
name={["id"]}
rules={[
{
required: true,
},
]}
>
<Input readOnly disabled />
</Form.Item>
<Form.Item
label="Registered"
name={["registered"]}
rules={[
{
required: true,
},
]}
getValueProps={(value) => ({
value: value ? dayjs(value) : undefined,
})}
>
<DatePicker disabled format="lll" />
</Form.Item>
<Form.Item
label="First Used"
name={["first_used"]}
rules={[
{
required: true,
},
]}
getValueProps={(value) => ({
value: value ? dayjs(value) : undefined,
})}
>
<DatePicker format="lll" />
</Form.Item>
<Form.Item
label="Last Used"
name={["last_used"]}
rules={[
{
required: true,
},
]}
getValueProps={(value) => ({
value: value ? dayjs(value) : undefined,
})}
>
<DatePicker format="lll" />
</Form.Item>
<Form.Item
label="Filament"
name={["filament", "name"]}
rules={[
{
required: true,
},
]}
>
{/* <Select {...filamentSelectProps} /> */}
</Form.Item>
<Form.Item
label="Used Weight"
name={["used_weight"]}
rules={[
{
required: true,
},
]}
>
<Input min={0} addonAfter="g" />
</Form.Item>
<Form.Item
label="Location"
name={["location"]}
rules={[
{
required: false,
},
]}
>
<Input maxLength={64} />
</Form.Item>
<Form.Item
label="Lot Nr"
name={["lot_nr"]}
rules={[
{
required: false,
},
]}
>
<Input maxLength={64} />
</Form.Item>
<Form.Item
label="Comment"
name={["comment"]}
rules={[
{
required: false,
},
]}
>
<TextArea maxLength={1024} />
</Form.Item>
</Form>
</Edit>
);
};

4
client/src/pages/spools/index.ts Normal file
View File

@@ -0,0 +1,4 @@
export { SpoolCreate } from "./create";
export { SpoolEdit } from "./edit";
export { SpoolList } from "./list";
export { SpoolShow } from "./show";

68
client/src/pages/spools/list.tsx Normal file
View File

@@ -0,0 +1,68 @@
import React from "react";
import { IResourceComponentsProps, BaseRecord } from "@refinedev/core";
import {
useTable,
List,
EditButton,
ShowButton,
DateField,
NumberField,
} from "@refinedev/antd";
import { Table, Space } from "antd";
export const SpoolList: React.FC<IResourceComponentsProps> = () => {
const { tableProps } = useTable({
syncWithLocation: true,
});
return (
<List>
<Table {...tableProps} rowKey="id">
<Table.Column dataIndex="id" title="Id" />
<Table.Column
dataIndex={["filament", "vendor", "name"]}
title="Vendor"
/>
<Table.Column dataIndex={["filament", "name"]} title="Filament Name" />
<Table.Column
dataIndex="remaining_weight"
title="Estimated Remaining Weight"
render={(value: any) => (
<NumberField
value={value}
options={{
unitDisplay: "short",
unit: "gram",
style: "unit",
maximumFractionDigits: 1,
}}
/>
)}
/>
<Table.Column
dataIndex={["first_used"]}
title="First Used"
render={(value: any) => <DateField value={value} format="lll" />}
/>
<Table.Column
dataIndex={["last_used"]}
title="Last Used"
render={(value: any) => <DateField value={value} format="lll" />}
/>
<Table.Column dataIndex="location" title="Location" />
<Table.Column dataIndex="lot_nr" title="Lot Nr" />
<Table.Column dataIndex={["comment"]} title="Comment" />
<Table.Column
title="Actions"
dataIndex="actions"
render={(_, record: BaseRecord) => (
<Space>
<EditButton hideText size="small" recordItemId={record.id} />
<ShowButton hideText size="small" recordItemId={record.id} />
</Space>
)}
/>
</Table>
</List>
);
};

64
client/src/pages/spools/show.tsx Normal file
View File

@@ -0,0 +1,64 @@
import React from "react";
import { IResourceComponentsProps, useShow } from "@refinedev/core";
import {
Show,
NumberField,
DateField,
TagField,
TextField,
} from "@refinedev/antd";
import { Typography } from "antd";
const { Title } = Typography;
export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
const { queryResult } = useShow();
const { data, isLoading } = queryResult;
const record = data?.data;
return (
<Show isLoading={isLoading}>
<Title level={5}>Id</Title>
<NumberField value={record?.id ?? ""} />
<Title level={5}>Registered</Title>
<DateField value={record?.registered} format="lll" />
<Title level={5}>First Used</Title>
<DateField value={record?.first_used} format="lll" />
<Title level={5}>Last Used</Title>
<DateField value={record?.last_used} format="lll" />
<Title level={5}>Filament</Title>
{/* {filamentIsLoading ? (
<>Loading...</>
) : (
<>{filamentData?.data?.id}</>
)} */}
<Title level={5}>Remaining Weight</Title>
<NumberField
value={record?.remaining_weight ?? ""}
options={{
unitDisplay: "short",
unit: "gram",
style: "unit",
maximumFractionDigits: 1,
}}
/>
<Title level={5}>Used Weight</Title>
<NumberField
value={record?.used_weight ?? ""}
options={{
unitDisplay: "short",
unit: "gram",
style: "unit",
maximumFractionDigits: 1,
}}
/>
<Title level={5}>Location</Title>
<TextField value={record?.location} />
<Title level={5}>Lot Nr</Title>
<TextField value={record?.lot_nr} />
<Title level={5}>Comment</Title>
<TextField value={record?.comment} />
</Show>
);
};