sindhu/fe_portserver
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

instrument box component & stories

Browse Source
This commit is contained in:
sindhu
2023-11-09 19:02:51 +07:00
parent 1d6ad9c875
commit 4257c560c9
12 changed files with 356 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
front_end_portserver/src/components/main/cardInstrument/CardInstrument.tsx
View File

@@ -8,13 +8,15 @@ import {
import { Rs232PropertyView } from './Rs232PropertyView';
import { IpClientPropertyView } from './IpClientPropertyView';
import { IpServerPropertyView } from './IpServerPropertyView';
import { RowIndicatorv1 } from './Rowindicatorv1';
import { RowIndicatorv1 } from './RowIndicatorv1';
import { IpClientType, IpServerType, Rs232Type, UdpClientType, UdpServerType, } from '../models/InstrumentModel';
interface CardProps {
titleAlat?: string,
type?: string,
lampu?: boolean,
online?: boolean,
typeDetail: Rs232Type | IpClientType | IpServerType | UdpClientType | UdpServerType
onClick?: () => void;
}
@@ -24,9 +26,10 @@ interface CardProps {
export const CardInstrument = ({
...props
}: CardProps) => {
return (
<>
<Card className="w-234 mx-auto rounded-lg overflow-hidden border-black border-solid">
<Card className="w-60 mx-auto rounded-lg overflow-hidden border-black border-solid">
<CardHeader className='bg-orange-500'>
<CardTitle>
<div className='flex justify-between'>
@@ -50,6 +53,7 @@ export const CardInstrument = ({
lampu={props.lampu}
type={props.type}
online={props.online}
blink={false}
/>
{/* ROW 1 & 2 END */}
@@ -57,22 +61,27 @@ export const CardInstrument = ({
{
props.type == 'rs232' ? (<Rs232PropertyView
type={props.type}
valueSpeed={(props.typeDetail as Rs232Type).speedValue}
valueBaud='8'
valueDataBit={(props.typeDetail as Rs232Type).dataBitValue}
valueStopBit={(props.typeDetail as Rs232Type).stopBitValue}
/>) : ''
}
{
props.type == 'ipclient' ? (<IpClientPropertyView
type={props.type}
valueHost={(props.typeDetail as IpClientType).hostValue}
valuePort={(props.typeDetail as IpClientType).portValue}
/>) : ''
}
{
props.type == 'ipserver' ? (<IpServerPropertyView
type={props.type}
valueListeningPort={(props.typeDetail as IpServerType).listeningPortValue}
/>) : ''
}
</CardContent>
</Card>
</>

6
front_end_portserver/src/components/main/cardInstrument/IpClientPropertyView.tsx
View File

@@ -3,6 +3,8 @@ import { RowLabelValue } from './RowLabelValue';
interface IpClientPropertyViewProps {
type?: string,
valueHost:string,
valuePort:string,
onClick?: () => void;
}
@@ -14,11 +16,11 @@ export const IpClientPropertyView = ({
{/* IpClient START */}
<RowLabelValue
label='Host'
value='192.168.10.10'
value={props.valueHost}
/>
<RowLabelValue
label='Port'
value='5001'
value={props.valuePort}
/>
{/* IpClient END */}
</>

3
front_end_portserver/src/components/main/cardInstrument/IpServerPropertyView.tsx
View File

@@ -3,6 +3,7 @@ import { RowLabelValue } from './RowLabelValue';
interface IpServerPropertyViewProps {
type?: string,
valueListeningPort:string,
onClick?: () => void;
}
@@ -14,7 +15,7 @@ export const IpServerPropertyView = ({
{/* IpServer START */}
<RowLabelValue
label='Listening Port'
value='8001'
value={props.valueListeningPort}
/>
{/* IpServer END */}
</>

5
front_end_portserver/src/components/main/cardInstrument/RowIndicatorv1.tsx
View File

@@ -1,12 +1,13 @@
import '../../../../app/global.css'
import { StatusTransferv1 } from './StatusTransferv1';
import { StatusOnlinev1 } from './Statusonlinev1';
import { TypeCardv1 } from './Typecardv1';
import { StatusOnlinev1 } from './StatusOnlinev1';
import { TypeCardv1 } from './TypeCardv1';
interface RowIndicatorv1Props {
lampu?: boolean,
type?: string;
online?: boolean;
blink?:boolean;
onClick?: () => void;
}

12
front_end_portserver/src/components/main/cardInstrument/Rs232PropertyView.tsx
View File

@@ -3,6 +3,10 @@ import { RowLabelValue } from './RowLabelValue';
interface Rs232PropertyViewProps {
type?: string,
valueSpeed:string,
valueBaud:string,
valueDataBit:string,
valueStopBit:string
onClick?: () => void;
}
@@ -14,24 +18,24 @@ export const Rs232PropertyView = ({
{/* RS232 START */}
<RowLabelValue
label='Speed'
value='800'
value={props.valueSpeed}
/>
<RowLabelValue
label='Baud'
value='8'
value={props.valueBaud}
/>
<RowLabelValue
label='Data Bit'
value='N'
value={props.valueDataBit}
/>
<RowLabelValue
label='Stop Bit'
value='1'
value={props.valueStopBit}
/>
{/* RS232 END */}

74
front_end_portserver/src/components/main/cardInstrumentDummy.json Normal file
View File

@@ -0,0 +1,74 @@
[
{
"idInstrument":"1",
"namaInstrument":"Mindray BC800",
"type":"rs232",
"instrumentTypeDetail":[
{
"label":"speed",
"value":"800"
},
{
"label":"baudRate",
"value":"8"
},
{
"label":"dataBit",
"value":"N"
},
{
"label":"stopBit",
"value":"1"
}
]
},
{
"idInstrument":"2",
"namaInstrument":"Mindray BC240",
"type":"rs232",
"instrumentTypeDetail":[
{
"label":"speed",
"value":"800"
},
{
"label":"baudRate",
"value":"8"
},
{
"label":"dataBit",
"value":"N"
},
{
"label":"stopBit",
"value":"1"
}
]
},
{
"idInstrument":"3",
"namaInstrument":"Mindray BC800",
"type":"ipclient",
"instrumentTypeDetail":[
{
"label":"host",
"value":"192.168.10.10"
},
{
"label":"port",
"value":"5001"
}
]
},
{
"idInstrument":"4",
"namaInstrument":"Mindray BC240",
"type":"ipserver",
"instrumentTypeDetail":[
{
"label":"listeningPort",
"value":"8001"
}
]
}
]

44
front_end_portserver/src/components/main/instrumentBox/InstrumentBox.tsx Normal file
View File

@@ -0,0 +1,44 @@
import '../../../../app/global.css'
import { CardInstrument } from '../cardInstrument/CardInstrument';
import { InstrumentType } from '../models/InstrumentModel';
interface InstrumentBoxProps {
totalCard?: number;
dataInstrumentType: InstrumentType[];
onClick?: () => void;
}
/**
* Primary UI component for user interaction
*/
export const InstrumentBox = ({
...props
}: InstrumentBoxProps) => {
let col = 2;
let showData = [];
if (props.totalCard != undefined && props.totalCard > 0) {
for (let index = 0; index < props.totalCard; index++) {
showData.push([
<CardInstrument
lampu={true}
online={true}
titleAlat={props.dataInstrumentType[index].title}
type={props.dataInstrumentType[index].type}
typeDetail={props.dataInstrumentType[index].data}
/>
]);
}
}
return (
<>
<div className={`grid grid-cols-${col} gap-10`}>
{ showData }
</div>
</>
);
};

43
front_end_portserver/src/components/main/models/InstrumentModel.ts Normal file
View File

@@ -0,0 +1,43 @@
// export type InstrumentTypeDetail = {
// label: string;
// value: string;
// };
// export type InstrumentModel = {
// idInstrument: string;
// namaInstrument: string;
// type:string;
// instrumentTypeDetail: InstrumentTypeDetail[]
// };
export type Rs232Type = {
speedValue: string,
dataBitValue: string,
parityValue: string,
stopBitValue: string,
};
export type IpClientType = {
hostValue: string,
portValue: string,
};
export type IpServerType = {
listeningPortValue: string,
};
export type UdpClientType = {
hostValue: string,
portValue: string,
};
export type UdpServerType = {
listeningPortValue: string,
};
export type InstrumentType = {
engine: string,
type: string,
title: string,
data: Rs232Type | IpClientType | IpServerType | UdpClientType | UdpServerType
};

2
front_end_portserver/src/stories/cardInstrument/StatusCardv1.stories.ts
View File

@@ -1,4 +1,4 @@
import { StatusCardv1 } from '@/components/main/cardInstrument/Statuscardv1';
import { StatusCardv1 } from '@/components/main/cardInstrument/StatusCardv1';
import type { Meta, StoryObj } from '@storybook/react';
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export

2
front_end_portserver/src/stories/cardInstrument/StatusOnlinev1.stories.ts
View File

@@ -1,4 +1,4 @@
import { StatusOnlinev1 } from '@/components/main/cardInstrument/Statusonlinev1';
import { StatusOnlinev1 } from '@/components/main/cardInstrument/StatusOnlinev1';
import type { Meta, StoryObj } from '@storybook/react';
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export

3
front_end_portserver/src/stories/cardInstrument/TypeCardv1.stories.ts
View File

@@ -1,5 +1,4 @@
import { TypeCardv1 } from '@/components/main/cardInstrument/Typecardv1';
import { TypeCardv1 } from '@/components/main/cardInstrument/TypeCardv1';
import type { Meta, StoryObj } from '@storybook/react';
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export

162
front_end_portserver/src/stories/instrumentBox/InstrumentBox.stories.ts Normal file
View File

@@ -0,0 +1,162 @@
import { InstrumentBox } from '@/components/main/instrumentBox/InstrumentBox';
import type { Meta, StoryObj } from '@storybook/react';
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
const meta = {
title: 'Component/Main/Instrument Box',
component: InstrumentBox,
parameters: {
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
layout: 'centered',
},
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
tags: ['autodocs'],
// More on argTypes: https://storybook.js.org/docs/react/api/argtypes
argTypes: {
// backgroundColor: { control: 'color' },
},
} satisfies Meta<typeof InstrumentBox>;
export default meta;
type Story = StoryObj<typeof meta>;
// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
// Instrument 1 Alat
export const Instrument1Alat: Story = {
args: {
totalCard:1,
dataInstrumentType:[
{
engine:'astm',
title:'Cobas800',
type:'rs232',
data:{
speedValue: '800',
dataBitValue: 'N',
parityValue: '',
stopBitValue: 'N'
}
},
],
},
};
// Instrument 2 Alat
export const Instrument2Alat: Story = {
args: {
totalCard:2,
dataInstrumentType:[
{
engine:'astm',
title:'Cobas800',
type:'rs232',
data:{
speedValue: '800',
dataBitValue: 'N',
parityValue: '',
stopBitValue: 'N'
}
},
{
engine:'astm',
title:'Axsym 100',
type:'rs232',
data:{
speedValue: '800',
dataBitValue: 'N',
parityValue: '',
stopBitValue: 'N'
}
},
],
},
};
// Instrument 3 Alat
export const Instrument3Alat: Story = {
args: {
totalCard:3,
dataInstrumentType:[
{
engine:'astm',
title:'Cobas800',
type:'rs232',
data:{
speedValue: '800',
dataBitValue: 'N',
parityValue: '',
stopBitValue: 'N'
}
},
{
engine:'astm',
title:'Axsym 100',
type:'rs232',
data:{
speedValue: '800',
dataBitValue: 'N',
parityValue: '',
stopBitValue: 'N'
}
},
{
engine:'mindray',
title:'Mindray BC800',
type:'ipclient',
data:{
hostValue:"192.168.10.10",
portValue:"5001"
}
},
],
},
};
// Instrument 4 Alat
export const Instrument4Alat: Story = {
args: {
totalCard:4,
dataInstrumentType:[
{
engine:'astm',
title:'Cobas800',
type:'rs232',
data:{
speedValue: '800',
dataBitValue: 'N',
parityValue: '',
stopBitValue: 'N'
}
},
{
engine:'astm',
title:'Axsym 100',
type:'rs232',
data:{
speedValue: '800',
dataBitValue: 'N',
parityValue: '',
stopBitValue: 'N'
}
},
{
engine:'mindray',
title:'Mindray BC800',
type:'ipclient',
data:{
hostValue:"192.168.10.10",
portValue:"5001"
}
},
{
engine:'mindray',
title:'Mindray BC240',
type:'ipserver',
data:{
listeningPortValue:"8001"
}
},
],
},
};