mirror of
https://github.com/tiqi-group/pydase.git
synced 2025-04-20 00:10:03 +02:00
frontend: adding GenericComponent
This commit is contained in:
Mose Müller
parent
ce1442b354
commit
837f02b0d3
@ -1,35 +1,9 @@
|
||||
import { useState } from 'react';
|
||||
import { ButtonComponent } from './ButtonComponent';
|
||||
import { NumberComponent } from './NumberComponent';
|
||||
import { SliderComponent } from './SliderComponent';
|
||||
import { EnumComponent } from './EnumComponent';
|
||||
import { MethodComponent } from './MethodComponent';
|
||||
import { AsyncMethodComponent } from './AsyncMethodComponent';
|
||||
import React from 'react';
|
||||
import { Card, Collapse } from 'react-bootstrap';
|
||||
import { ChevronDown, ChevronRight } from 'react-bootstrap-icons';
|
||||
import { StringComponent } from './StringComponent';
|
||||
import { Attribute, GenericComponent } from './GenericComponent';
|
||||
|
||||
type AttributeType =
|
||||
| 'str'
|
||||
| 'bool'
|
||||
| 'float'
|
||||
| 'int'
|
||||
| 'method'
|
||||
| 'DataService'
|
||||
| 'Enum'
|
||||
| 'NumberSlider';
|
||||
|
||||
type ValueType = boolean | string | number | object;
|
||||
interface Attribute {
|
||||
type: AttributeType;
|
||||
value?: ValueType;
|
||||
readonly: boolean;
|
||||
doc?: string | null;
|
||||
parameters?: Record<string, string>;
|
||||
async?: boolean;
|
||||
enum?: Record<string, string>;
|
||||
}
|
||||
type DataServiceProps = {
|
||||
props: DataServiceJSON;
|
||||
parentPath?: string;
|
||||
@ -53,107 +27,14 @@ export const DataServiceComponent = React.memo(
|
||||
<Collapse in={open}>
|
||||
<Card.Body>
|
||||
{Object.entries(props).map(([key, value]) => {
|
||||
if (value.type === 'bool') {
|
||||
return (
|
||||
<div key={key}>
|
||||
<ButtonComponent
|
||||
name={key}
|
||||
parent_path={parentPath}
|
||||
docString={value.doc}
|
||||
readOnly={value.readonly}
|
||||
value={Boolean(value.value)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} else if (value.type === 'float' || value.type === 'int') {
|
||||
return (
|
||||
<div key={key}>
|
||||
<NumberComponent
|
||||
name={key}
|
||||
type={value.type}
|
||||
parent_path={parentPath}
|
||||
docString={value.doc}
|
||||
readOnly={value.readonly}
|
||||
value={Number(value.value)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} else if (value.type === 'NumberSlider') {
|
||||
return (
|
||||
<div key={key}>
|
||||
<SliderComponent
|
||||
name={key}
|
||||
parent_path={parentPath}
|
||||
docString={value.doc}
|
||||
readOnly={value.readonly}
|
||||
value={value.value['value']['value']}
|
||||
min={value.value['min']['value']}
|
||||
max={value.value['max']['value']}
|
||||
stepSize={value.value['step_size']['value']}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} else if (value.type === 'Enum') {
|
||||
return (
|
||||
<div key={key}>
|
||||
<EnumComponent
|
||||
name={key}
|
||||
parent_path={parentPath}
|
||||
docString={value.doc}
|
||||
value={String(value.value)}
|
||||
enumDict={value.enum}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} else if (value.type === 'method') {
|
||||
if (!value.async) {
|
||||
return (
|
||||
<div key={key}>
|
||||
<MethodComponent
|
||||
name={key}
|
||||
parent_path={parentPath}
|
||||
docString={value.doc}
|
||||
parameters={value.parameters}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div key={key}>
|
||||
<AsyncMethodComponent
|
||||
name={key}
|
||||
parent_path={parentPath}
|
||||
docString={value.doc}
|
||||
parameters={value.parameters}
|
||||
value={value.value as Record<string, string>}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
} else if (value.type === 'str') {
|
||||
return (
|
||||
<div key={key}>
|
||||
<StringComponent
|
||||
name={key}
|
||||
value={value.value as string}
|
||||
readOnly={value.readonly}
|
||||
docString={value.doc}
|
||||
parent_path={parentPath}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} else if (value.type === 'DataService') {
|
||||
return (
|
||||
<div key={key}>
|
||||
<DataServiceComponent
|
||||
props={value.value as DataServiceJSON}
|
||||
parentPath={parentPath.concat('.', key)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return <div key={key}></div>;
|
||||
}
|
||||
return (
|
||||
<GenericComponent
|
||||
key={key}
|
||||
attribute={value}
|
||||
name={key}
|
||||
parentPath={parentPath}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Card.Body>
|
||||
</Collapse>
|
||||
|
||||
136
frontend/src/components/GenericComponent.tsx
Normal file
136
frontend/src/components/GenericComponent.tsx
Normal file
@ -0,0 +1,136 @@
|
||||
import React from 'react';
|
||||
import { ButtonComponent } from './ButtonComponent';
|
||||
import { NumberComponent } from './NumberComponent';
|
||||
import { SliderComponent } from './SliderComponent';
|
||||
import { EnumComponent } from './EnumComponent';
|
||||
import { MethodComponent } from './MethodComponent';
|
||||
import { AsyncMethodComponent } from './AsyncMethodComponent';
|
||||
import { StringComponent } from './StringComponent';
|
||||
import { ListComponent } from './ListComponent';
|
||||
import { DataServiceComponent, DataServiceJSON } from './DataServiceComponent';
|
||||
|
||||
export type AttributeType =
|
||||
| 'str'
|
||||
| 'bool'
|
||||
| 'float'
|
||||
| 'int'
|
||||
| 'list'
|
||||
| 'method'
|
||||
| 'DataService'
|
||||
| 'Enum'
|
||||
| 'NumberSlider';
|
||||
|
||||
type ValueType = boolean | string | number | object;
|
||||
interface Attribute {
|
||||
type: AttributeType;
|
||||
value?: ValueType | ValueType[];
|
||||
readonly: boolean;
|
||||
doc?: string | null;
|
||||
parameters?: Record<string, string>;
|
||||
async?: boolean;
|
||||
enum?: Record<string, string>;
|
||||
}
|
||||
type GenericComponentProps = {
|
||||
attribute: Attribute;
|
||||
name: string;
|
||||
parentPath: string;
|
||||
};
|
||||
|
||||
export const GenericComponent = React.memo(
|
||||
({ attribute, name, parentPath }: GenericComponentProps) => {
|
||||
if (attribute.type === 'bool') {
|
||||
return (
|
||||
<ButtonComponent
|
||||
name={name}
|
||||
parent_path={parentPath}
|
||||
docString={attribute.doc}
|
||||
readOnly={attribute.readonly}
|
||||
value={Boolean(attribute.value)}
|
||||
/>
|
||||
);
|
||||
} else if (attribute.type === 'float' || attribute.type === 'int') {
|
||||
return (
|
||||
<NumberComponent
|
||||
name={name}
|
||||
type={attribute.type}
|
||||
parent_path={parentPath}
|
||||
docString={attribute.doc}
|
||||
readOnly={attribute.readonly}
|
||||
value={Number(attribute.value)}
|
||||
/>
|
||||
);
|
||||
} else if (attribute.type === 'NumberSlider') {
|
||||
return (
|
||||
<SliderComponent
|
||||
name={name}
|
||||
parent_path={parentPath}
|
||||
docString={attribute.doc}
|
||||
readOnly={attribute.readonly}
|
||||
value={attribute.value['value']['value']}
|
||||
min={attribute.value['min']['value']}
|
||||
max={attribute.value['max']['value']}
|
||||
stepSize={attribute.value['step_size']['value']}
|
||||
/>
|
||||
);
|
||||
} else if (attribute.type === 'Enum') {
|
||||
return (
|
||||
<EnumComponent
|
||||
name={name}
|
||||
parent_path={parentPath}
|
||||
docString={attribute.doc}
|
||||
value={String(attribute.value)}
|
||||
enumDict={attribute.enum}
|
||||
/>
|
||||
);
|
||||
} else if (attribute.type === 'method') {
|
||||
if (!attribute.async) {
|
||||
return (
|
||||
<MethodComponent
|
||||
name={name}
|
||||
parent_path={parentPath}
|
||||
docString={attribute.doc}
|
||||
parameters={attribute.parameters}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<AsyncMethodComponent
|
||||
name={name}
|
||||
parent_path={parentPath}
|
||||
docString={attribute.doc}
|
||||
parameters={attribute.parameters}
|
||||
value={attribute.value as Record<string, string>}
|
||||
/>
|
||||
);
|
||||
}
|
||||
} else if (attribute.type === 'str') {
|
||||
return (
|
||||
<StringComponent
|
||||
name={name}
|
||||
value={attribute.value as string}
|
||||
readOnly={attribute.readonly}
|
||||
docString={attribute.doc}
|
||||
parent_path={parentPath}
|
||||
/>
|
||||
);
|
||||
} else if (attribute.type === 'DataService') {
|
||||
return (
|
||||
<DataServiceComponent
|
||||
props={attribute.value as DataServiceJSON}
|
||||
parentPath={parentPath.concat('.', name)}
|
||||
/>
|
||||
);
|
||||
} else if (attribute.type === 'list') {
|
||||
return (
|
||||
<ListComponent
|
||||
name={name}
|
||||
value={attribute.value as object[]}
|
||||
docString={attribute.doc}
|
||||
parent_path={parentPath}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return <div key={name}>{name}</div>;
|
||||
}
|
||||
}
|
||||
);
|
||||
Loading…
x
Reference in New Issue
Block a user