dd

src/ts/containers/agent/waitForAuth.tsx

@@ -0,0 +1,158 @@
+import * as React from 'react';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import {
+    Table,
+    TableBody,
+    TableHeader,
+    TableHeaderColumn,
+    TableFooter,
+    TableRow,
+    TableRowColumn,
+} from 'material-ui/Table';
+import Toggle from 'material-ui/Toggle';
+import FlatButton from 'material-ui/FlatButton';
+import Dialog from 'material-ui/Dialog';
+
+const styles = {
+    propContainer: {
+        width: 200,
+        overflow: 'hidden',
+        margin: '20px auto 0',
+    },
+    propToggleHeader: {
+        margin: '20px auto 10px',
+    },
+};
+
+const tableData = [
+    {
+        apiKey: 'wqekoekeeeeerw',
+        name: 'Agent 1',
+        status: 'Wait For Auth',
+    },
+    {
+        apiKey: 'wqekoekeeeeerw',
+        name: 'Agent 2',
+        status: 'Wait For Auth',
+    },
+    {
+        apiKey: 'wqekoekeeeeerw',
+        name: 'Agent 3',
+        status: 'Wait For Auth',
+    },
+    {
+        apiKey: 'wqekoekeeeeerw',
+        name: 'Agent 4',
+        status: 'Wait For Auth',
+    },
+    {
+        apiKey: 'wqekoekeeeeerw',
+        name: 'Agent 5',
+        status: 'Wait For Auth',
+    },
+    {
+        apiKey: 'wqekoekeeeeerw',
+        name: 'Agent 6',
+        status: 'Wait For Auth',
+    },
+    {
+        apiKey: 'wqekoekeeeeerw',
+        name: 'Agent 7',
+        status: 'Wait For Auth',
+    },
+];
+
+export class WaitForAuth extends React.Component<any, any> {
+    constructor(props: any, context: any) {
+        super(props, context)
+
+    };
+
+    state = {
+        selectable: true,
+        multiSelectable: true,
+        enableSelectAll: true,
+        showCheckboxes: true,
+        stripedRows: false,
+        open: false,
+    };
+
+    handleCellClick = (e: any, idx: number) => {
+        console.log(e)
+        this.setState({open:true})
+    }
+
+    handleRowSelected = (selectedRows: number[] | string) => {
+        // console.log(selectedRows)
+    }
+
+    handleClose = () => {
+        this.setState({ open: false });
+    };
+
+    render() {
+        const actions = [
+            <FlatButton
+                label="Cancel"
+                primary={true}
+                onTouchTap={this.handleClose}
+            />,
+            <FlatButton
+                label="Submit"
+                primary={true}
+                disabled={true}
+                onTouchTap={this.handleClose}
+            />,
+        ]
+        return (
+            <MuiThemeProvider >
+                <div>
+                    <Table
+                        selectable={this.state.selectable}
+                        multiSelectable={this.state.multiSelectable}
+                        onCellClick={this.handleCellClick}
+                        onRowSelection={this.handleRowSelected}
+                    >
+                        <TableHeader
+                            displaySelectAll={this.state.showCheckboxes}
+                            adjustForCheckbox={this.state.showCheckboxes}
+                            enableSelectAll={this.state.enableSelectAll} >
+                            <TableRow>
+                                <TableHeaderColumn colSpan={3} tooltip="Super Header" style={{ textAlign: 'center' }}>
+                                    Super Header
+                                </TableHeaderColumn>
+                            </TableRow>
+                            <TableRow>
+                                <TableHeaderColumn tooltip="The API Key">API Key</TableHeaderColumn>
+                                <TableHeaderColumn tooltip="The Name">Name</TableHeaderColumn>
+                                <TableHeaderColumn tooltip="The Status">Status</TableHeaderColumn>
+                            </TableRow>
+                        </TableHeader>
+                        <TableBody
+                            displayRowCheckbox={this.state.showCheckboxes}
+                            stripedRows={this.state.stripedRows}>
+                            {tableData.map((row: any, index: number) => (
+                                <TableRow key={index} >
+                                    <TableRowColumn>{row.apiKey}</TableRowColumn>
+                                    <TableRowColumn>{row.name}</TableRowColumn>
+                                    <TableRowColumn>{row.status}</TableRowColumn>
+                                </TableRow>
+                            ))};
+                            
+                        </TableBody>
+                        <TableFooter
+                            adjustForCheckbox={this.state.showCheckboxes} >
+                            < Dialog
+                                title="Dialog With Actions"
+                                actions={actions}
+                                modal={true}
+                                open={this.state.open} >
+                                    Agent를 인증하시겠습니까?
+                            </Dialog >
+                        </TableFooter>
+                    </Table>
+                </div>
+            </MuiThemeProvider>
+        );
+    }
+}

src/ts/index.tsx

@@ -9,6 +9,7 @@ import { MemberLogin } from './containers/member/login';
 import { Main } from './containers/Main';
 import { ProveDownload } from './containers/prove/download';
 import { SensorConfig } from './containers/config/sensorConfig';
+import { WaitForAuth } from './containers/agent/waitForAuth';
 
 
 import '../scss/index.scss';
@@ -16,6 +17,6 @@ import '../scss/index.scss';
 injectTapEventPlugin();
 
 ReactDOM.render(
-    <SensorConfig />,
+    <WaitForAuth />,
     document.getElementById('example')
 );