Sensor Setup

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<CrawlerSelectorProps, Crawl
     this.props.onCrawlerReadAllByMetaCrawler(crawler);
 
     this.props.onSelectCrawlerId(Number(data.value));
+
+    let sd = this.props.getSensor();
+    sd.crawlerId = Number(data.value);
+    this.props.setSensor(sd);
   }
 
   public checkInstall(): void {

src/ts/@overflow/meta/react/components/SensorItemTree.tsx

@@ -21,13 +21,15 @@ import Sensor from '@overflow/sensor/api/model/Sensor';
 import SensorItem from '@overflow/sensor/api/model/SensorItem';
 
 import * as Utils from '@overflow/commons/util/Utils';
-
+import SensorRegistInfo from '@overflow/sensor/api/model/SensorRegistInfo';
 
 export interface SensorItemTreeStateProps {
   crawlerId?: number;
   sensorItemList?: SensorItem[];
   metaSensorItemTypeList?: MetaSensorItemType[];
   metaSensorItemList?: MetaSensorItem[];
+  setSensor?(data: SensorRegistInfo): void;
+  getSensor?(): SensorRegistInfo;
 }
 
 export interface SensorItemTreeDispatchProps {
@@ -44,6 +46,7 @@ export interface SensorItemTreeState {
   categoryState: Map<number, boolean>;
   categoryCheckState: Map<number, boolean>;
   itemState: Map<number, Array<boolean>>;
+
 }
 
 interface TreeItem {
@@ -212,6 +215,9 @@ export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorI
         this.setState({ categoryCheckState: newCheckState });
       }
     }
+    let sd = this.props.getSensor();
+    sd.sensorItemMap = this.selectedItemMap;
+    this.props.setSensor(sd);
   }
 
   private onTypeClick = (key: number) => {

src/ts/@overflow/sensor/api/model/SensorRegistInfo.ts

@@ -0,0 +1,11 @@
+
+import MetaSensorItem from '@overflow/meta/api/model/MetaSensorItem';
+
+interface SensorRegistInfo {
+  sensorItemMap: Map<number, Array<MetaSensorItem>>;
+  crawlerId: number;
+  targetId: number;
+  interval: number;
+}
+
+export default SensorRegistInfo;

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<any>): SensorConfigStepperDispatchProps {
+  return {
+  };
+}
+
+
+export default connect(mapStateToProps, mapDispatchToProps)(SensorConfigStepper);

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<JSX.Element>;
+  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<SensorConfigStepperProps, SensorConfigStepperState> {
+
+  private selectOptions: Array<DropdownItemProps>;
+
+  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<HTMLAnchorElement>, 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<HTMLAnchorElement>, 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<DropdownItemProps> = 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<DropdownItemProps> = 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<HTMLElement>, 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 (<Dropdown
+      placeholder='Select Target' selection options={this.selectOptions} defaultValue={this.defaultValue()}
+      onChange={this.onChangeTarget.bind(this)} />);
+  }
+
+  public render(): JSX.Element {
+
+    return (
+      <Container fluid>
+        <Step.Group fluid>
+          <Step active={this.handleActive(1)} completed={this.handleCompleted(1)}>
+            <Icon name='settings' color='grey' />
+            <Step.Content title='Step 1' description='골라골라 크롤러를 골라' />
+          </Step>
+
+          <Step active={this.handleActive(2)} completed={this.handleCompleted(2)}>
+            <Icon name='list ul' color='grey' />
+            <Step.Content title='Step 2' description='골라골라 아이템도 골라' />
+          </Step>
+
+          <Step active={this.handleActive(3)} completed={this.handleCompleted(3)}>
+            <Icon name='options' color='grey' />
+            <Step.Content title='Step 3' description='나머지도 골라 아 빨리' />
+          </Step>
+        </Step.Group>
+        {this.renderInfra()}
+        {this.showContent()}
+        <br />
+        <Button.Group floated='right'> {/* floated 사용시 레이아웃 깨지는 현상 */}
+          <Button content='Prev' icon='left arrow' labelPosition='left'
+            onClick={this.handlePrev.bind(this)} disabled={this.checkPrevDisabled()} />
+          <Button.Or />
+          <Button content={this.state.currentStep === 3 ? 'Finish' : 'Next'}
+            icon={this.state.currentStep === 3 ? 'send' : 'right arrow'} labelPosition='right' positive
+            onClick={this.handleNext.bind(this)} disabled={this.checkNextDisabled()} />
+        </Button.Group>
+      </Container>
+    );
+  }
+}

src/ts/@overflow/sensor/react/components/SensorConfiguration.tsx

@@ -19,19 +19,24 @@ import {
   List,
   Accordion,
   Loader,
-  DropdownItemProps,
+  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';
 
+import SensorConfigStepperContainer from '../SensorConfigStepper';
+
 export interface SensorConfigurationStateProps {
   infraId?: number;
-  infraList?: Infra[];
+  infraList?: Page;
   infra?: Infra;
 }
 
@@ -48,11 +53,14 @@ export type SensorConfigurationProps = SensorConfigurationStateProps & SensorCon
 
 export class SensorConfiguration extends React.Component<SensorConfigurationProps, SensorConfigurationState> {
 
+  private sensorData: any;
+
   constructor(props: SensorConfigurationProps, context: SensorConfigurationState) {
     super(props, context);
     this.state = {
       selectedCrawlerId: 0,
     };
+    this.sensorData = {};
   }
 
   public componentWillMount(): void {
@@ -69,178 +77,39 @@ export class SensorConfiguration extends React.Component<SensorConfigurationProp
     });
   }
 
+  public setSensor = (data: SensorRegistInfo) => {
+    this.sensorData = data;
+  }
+
+  public getSensor = () => {
+    return this.sensorData;
+  }
+
 
   public render(): JSX.Element {
-    let steps = [<CrawlerSelectorContainer onSelectCrawlerId={this.onSelectCrawlerId.bind(this)} />,
+    let steps = [
-    <Segment vertical><SensorItemTree crawlerId={this.state.selectedCrawlerId} /></Segment>, <ETCSelector />];
+      <CrawlerSelectorContainer onSelectCrawlerId={this.onSelectCrawlerId.bind(this)}
+        setSensor={this.setSensor.bind(this)} getSensor={this.getSensor.bind(this)} />,
+      <Segment vertical>
+        <SensorItemTree crawlerId={this.state.selectedCrawlerId}
+          setSensor={this.setSensor.bind(this)} getSensor={this.getSensor.bind(this)} />
+      </Segment>,
+      <ETCSelector setSensor={this.setSensor.bind(this)} getSensor={this.getSensor.bind(this)} />];
 
     return (
-      <ConfigStepper steps={steps} infra={this.props.infra} infraList={this.props.infraList} />
+      <SensorConfigStepperContainer steps={steps} infraId={this.props.infraId} infra={this.props.infra} infraList={this.props.infraList}
+        setSensor={this.setSensor.bind(this)} getSensor={this.getSensor.bind(this)} />
     );
   }
 }
 
 
-export interface ConfigStepperProps {
-  steps: Array<JSX.Element>;
-  infraList?: Infra[];
-  infra?: Infra;
-}
-
-export interface ConfigStepperState {
-  currentStep: number;
-}
-
-export class ConfigStepper extends React.Component<ConfigStepperProps, ConfigStepperState> {
-
-  private selectOptions: Array<DropdownItemProps>;
-
-  constructor(props: ConfigStepperProps, context: ConfigStepperState) {
-    super(props, context);
-    this.state = {
-      currentStep: 1,
-    };
-  }
-
-  public convertInfraList(): void {
-
-    if (this.props.infraList === undefined) {
-      return null;
-    }
-
-    let selectionOptions: Array<DropdownItemProps> = new Array;
-
-    for (let infra of this.props.infraList) {
-
-      let option = {
-        key: infra.target.id,
-        text: infra.target.displayName,
-        value: infra.target.id,
-        icon: 'check', // or close?
-      };
-      selectionOptions.push(option);
-
-    }
-    this.selectOptions = selectionOptions;
-  }
-
-  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<HTMLAnchorElement>, 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<HTMLAnchorElement>, 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');
-    }
-  }
-
-  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 renderInfraList(): JSX.Element {
-
-    if (this.props.infraList === undefined) {
-      return null;
-    }
-
-    this.convertInfraList();
-
-    // let elems: Array<JSX.Element> = new Array;
-
-    // elems.push(
-    return (<Dropdown openOnFocus
-      placeholder='Select Target' selection options={this.selectOptions} />);
-    // );
-
-    // return elems;
-  }
-
-  public render(): JSX.Element {
-
-    return (
-      <Container fluid>
-        <Step.Group fluid>
-          <Step active={this.handleActive(1)} completed={this.handleCompleted(1)}>
-            <Icon name='settings' color='grey' />
-            <Step.Content title='Step 1' description='골라골라 크롤러를 골라' />
-          </Step>
-
-          <Step active={this.handleActive(2)} completed={this.handleCompleted(2)}>
-            <Icon name='list ul' color='grey' />
-            <Step.Content title='Step 2' description='골라골라 아이템도 골라' />
-          </Step>
-
-          <Step active={this.handleActive(3)} completed={this.handleCompleted(3)}>
-            <Icon name='options' color='grey' />
-            <Step.Content title='Step 3' description='나머지도 골라 아 빨리' />
-          </Step>
-        </Step.Group>
-        {this.renderInfraList()}
-        {this.showContent()}
-        <br />
-        <Button.Group floated='right'> {/* floated 사용시 레이아웃 깨지는 현상 */}
-          <Button content='Prev' icon='left arrow' labelPosition='left'
-            onClick={this.handlePrev.bind(this)} disabled={this.checkPrevDisabled()} />
-          <Button.Or />
-          <Button content='Next' icon='right arrow' labelPosition='right' positive
-            onClick={this.handleNext.bind(this)} disabled={this.checkNextDisabled()} />
-        </Button.Group>
-      </Container>
-    );
-  }
-}
 
 
 
 export interface ETCSelectorProps {
-
+  setSensor?(data: any): void;
+  getSensor?(): any;
 }
 
 export interface ETCSelectorState {
@@ -254,8 +123,12 @@ export class ETCSelector extends React.Component<ETCSelectorProps, ETCSelectorSt
       interval: 5,
     };
   }
-  public handleIntervalChange(e: any, { value }: any): void {
+  public handleIntervalChange = (e: any, { value }: any) => {
     this.setState({ interval: value });
+
+    let sd = this.props.getSensor();
+    sd.interval = value;
+    this.props.setSensor(sd);
   }
 
   public render(): JSX.Element {