diff --git a/src/ts/@overflow/meta/react/components/CrawlerSelector.tsx b/src/ts/@overflow/meta/react/components/CrawlerSelector.tsx index 9258e11..10c1fb9 100644 --- a/src/ts/@overflow/meta/react/components/CrawlerSelector.tsx +++ b/src/ts/@overflow/meta/react/components/CrawlerSelector.tsx @@ -10,12 +10,15 @@ import CrawlerAuthInputsContainer from '../CrawlerAuthInputs'; import MetaCrawlerInputItem from '@overflow/meta/api/model/MetaCrawlerInputItem'; import Target from '@overflow/target/api/model/Target'; +import SensorRegistInfo from '@overflow/sensor/api/model/SensorRegistInfo'; export interface CrawlerSelectorStateProps { metaCralwerList?: MetaCrawler[]; targetId?: number; metaCrawlerInputItemList?: MetaCrawlerInputItem[]; onSelectCrawlerId?(id: number): void; + setSensor?(data: SensorRegistInfo): void; + getSensor?(): SensorRegistInfo; } export interface CrawlerSelectorDispatchProps { @@ -86,6 +89,10 @@ export class CrawlerSelector extends React.Component; categoryCheckState: Map; itemState: Map>; + } interface TreeItem { @@ -212,6 +215,9 @@ export class SensorItemTree extends React.Component { diff --git a/src/ts/@overflow/sensor/api/model/SensorRegistInfo.ts b/src/ts/@overflow/sensor/api/model/SensorRegistInfo.ts new file mode 100644 index 0000000..e9c7b50 --- /dev/null +++ b/src/ts/@overflow/sensor/api/model/SensorRegistInfo.ts @@ -0,0 +1,11 @@ + +import MetaSensorItem from '@overflow/meta/api/model/MetaSensorItem'; + +interface SensorRegistInfo { + sensorItemMap: Map>; + crawlerId: number; + targetId: number; + interval: number; +} + +export default SensorRegistInfo; diff --git a/src/ts/@overflow/sensor/react/SensorConfigStepper.tsx b/src/ts/@overflow/sensor/react/SensorConfigStepper.tsx new file mode 100644 index 0000000..588d850 --- /dev/null +++ b/src/ts/@overflow/sensor/react/SensorConfigStepper.tsx @@ -0,0 +1,35 @@ +import { connect, Dispatch } from 'react-redux'; +import { + SensorConfigStepper, + SensorConfigStepperStateProps, + SensorConfigStepperDispatchProps, +} from './components/SensorConfigStepper'; +// import State from '../redux/state/ReadAllByTarget'; + +import Target from '@overflow/target/api/model/Target'; +import Sensor from '@overflow/sensor/api/model/Sensor'; +import Domain from '@overflow/domain/api/model/Domain'; +import MetaSensorItem from '@overflow/meta/api/model/MetaSensorItem'; + +import * as CrawlerReadAllByTargetActions from '@overflow/meta/redux/action/crawler_read_all_by_target'; +import * as SensorItemReadAllActions from '@overflow/meta/redux/action/sensor_item_read_all'; +import * as RegistActions from '../redux/action/regist'; + +import * as asyncRequestActions from '@overflow/commons/redux/action/asyncRequest'; +import * as targetListActions from '@overflow/target/redux/action/read_all_by_probe'; +import * as readActionType from '@overflow/infra/redux/action/read'; + +// FIXME::.... + +export function mapStateToProps(state: any, props: any): SensorConfigStepperStateProps { + return { + }; +} + +export function mapDispatchToProps(dispatch: Dispatch): SensorConfigStepperDispatchProps { + return { + }; +} + + +export default connect(mapStateToProps, mapDispatchToProps)(SensorConfigStepper); diff --git a/src/ts/@overflow/sensor/react/components/SensorConfigStepper.tsx b/src/ts/@overflow/sensor/react/components/SensorConfigStepper.tsx new file mode 100644 index 0000000..1c3b32f --- /dev/null +++ b/src/ts/@overflow/sensor/react/components/SensorConfigStepper.tsx @@ -0,0 +1,232 @@ +import * as React from 'react'; +import { + Icon, + Step, + Button, + Table, + Radio, + Form, + Container, + Checkbox, +} from 'semantic-ui-react'; +import { + Grid, + Image, + Label, + Segment, + Dropdown, + Input, + List, + Accordion, + Loader, + DropdownItemProps, DropdownProps, +} from 'semantic-ui-react'; + +import MetaCrawler from '@overflow/meta/api/model/MetaCrawler'; +import Infra from '@overflow/infra/api/model/Infra'; +import Domain from '@overflow/domain/api/model/Domain'; + +import Page from '@overflow/commons/api/model/Page'; +import SensorRegistInfo from '../../api/model/SensorRegistInfo'; + +import SensorItemTree from '@overflow/meta/react/SensorItemTree'; +import CrawlerSelectorContainer from '@overflow/meta/react/CrawlerSelector'; + + + + +export interface SensorConfigStepperStateProps { + steps?: Array; + infraList?: Page; + infra?: Infra; + infraId?: number; + setSensor?(data: SensorRegistInfo): void; + getSensor?(): SensorRegistInfo; +} + +export interface SensorConfigStepperDispatchProps { + +} + +export type SensorConfigStepperProps = SensorConfigStepperStateProps & SensorConfigStepperDispatchProps; + +export interface SensorConfigStepperState { + currentStep: number; +} + +export class SensorConfigStepper extends React.Component { + + private selectOptions: Array; + + constructor(props: SensorConfigStepperProps, context: SensorConfigStepperState) { + super(props, context); + this.state = { + currentStep: 1, + }; + } + + + + public handleActive(idx: number): boolean { + if (this.state.currentStep === idx) { + return true; + } + return false; + } + + public handleCompleted(idx: number): boolean { + if (this.state.currentStep > idx) { + return true; + } + return false; + } + + public handlePrev(event: React.SyntheticEvent, data: object): void { + let step: number = this.state.currentStep; + if (step <= 1) { + step = 1; + } else { + step--; + } + this.setState({ + currentStep: step, + }); + } + public handleNext(event: React.SyntheticEvent, data: object): void { + let step: number = this.state.currentStep; + if (step >= this.props.steps.length + 1) { + step = this.props.steps.length + 1; + } else { + step++; + } + this.setState({ + currentStep: step, + }); + if (step === this.props.steps.length + 1) { + console.log('Done'); + console.log(this.props.getSensor()); + } + } + + public showContent(): any { + return this.props.steps[this.state.currentStep - 1]; + } + + public checkPrevDisabled(): boolean { + if (this.state.currentStep <= 1) { + return true; + } else { + return false; + } + } + + public checkNextDisabled(): boolean { + if (this.state.currentStep === this.props.steps.length + 1) { + return true; + } else { + return false; + } + } + + public convertInfraList(): void { + + if (this.props.infraList === undefined) { + return null; + } + + let selectionOptions: Array = new Array; + + for (let infra of this.props.infraList.content) { + + selectionOptions.push(this.createOption(infra)); + + } + this.selectOptions = selectionOptions; + } + + public convertInfra(): void { + if (this.props.infra === undefined) { + return; + } + let selectionOptions: Array = new Array; + + selectionOptions.push(this.createOption(this.props.infra)); + this.selectOptions = selectionOptions; + + let sd = this.props.getSensor(); + sd.targetId = this.props.infra.target.id; + this.props.setSensor(sd); + } + + public createOption(infra: Infra): DropdownItemProps { + let option = { + key: infra.id, + text: infra.infraType.name + '-' + infra.target.displayName, + value: infra.target.id, + // icon: 'check', // or close? + }; + return option; + } + + public defaultValue(): any { + if (this.selectOptions !== undefined && this.selectOptions.length > 0) { + return this.selectOptions[0].value; + } + return null; + } + + public onChangeTarget(event: React.SyntheticEvent, data: DropdownProps): void { + let sd = this.props.getSensor(); + + sd.targetId = Number(data.value); + this.props.setSensor(sd); + } + + public renderInfra(): JSX.Element { + + if (this.props.infraId === undefined) { + this.convertInfraList(); + } else { + this.convertInfra(); + } + + return (); + } + + public render(): JSX.Element { + + return ( + + + + + + + + + + + + + + + + + + {this.renderInfra()} + {this.showContent()} +
+ {/* floated 사용시 레이아웃 깨지는 현상 */} +