first commit
This commit is contained in:
snoop
commit
581e1e1aec
60
.gitignore
vendored
Normal file
60
.gitignore
vendored
Normal file
@ -0,0 +1,60 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# Typescript v1 declaration files
|
||||
typings/
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
|
||||
dist/
|
||||
17
.vscode/tasks.json
vendored
Normal file
17
.vscode/tasks.json
vendored
Normal file
@ -0,0 +1,17 @@
|
||||
{
|
||||
// See https://go.microsoft.com/fwlink/?LinkId=733558
|
||||
// for the documentation about the tasks.json format
|
||||
"version": "0.1.0",
|
||||
"command": "npm",
|
||||
"isShellCommand": true,
|
||||
"showOutput": "always",
|
||||
"suppressTaskName": true,
|
||||
"tasks": [
|
||||
{
|
||||
"taskName": "build:test",
|
||||
"command": "npm",
|
||||
"args": ["run","build:test"]
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
6075
package-lock.json
generated
Normal file
6075
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
38
package.json
Normal file
38
package.json
Normal file
@ -0,0 +1,38 @@
|
||||
{
|
||||
"name": "web_ui",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"build:test": "webpack-dev-server",
|
||||
"build": "WEBPACK_ENV=build webpack"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/material-ui": "^0.17.7",
|
||||
"@types/node": "^7.0.22",
|
||||
"@types/react": "^15.0.24",
|
||||
"@types/react-dom": "^15.5.0",
|
||||
"@types/react-router-dom": "^4.0.4",
|
||||
"@types/react-tap-event-plugin": "^0.0.30",
|
||||
"awesome-typescript-loader": "^3.1.3",
|
||||
"css-loader": "^0.28.2",
|
||||
"copy-webpack-plugin": "^4.0.1",
|
||||
"extract-text-webpack-plugin": "^2.1.0",
|
||||
"file-loader": "^0.11.1",
|
||||
"image-webpack-loader": "^3.3.1",
|
||||
"node-sass": "^4.5.3",
|
||||
"postcss-loader": "^2.0.5",
|
||||
"react-router-dom": "^4.1.1",
|
||||
"sass-loader": "^6.0.5",
|
||||
"source-map-loader": "^0.2.1",
|
||||
"style-loader": "^0.18.1",
|
||||
"typescript": "^2.3.3",
|
||||
"webpack": "^2.6.0",
|
||||
"webpack-dev-server": "^2.4.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"material-ui": "^0.18.1",
|
||||
"react": "^15.5.4",
|
||||
"react-dom": "15.5.4",
|
||||
"react-router-dom": "^4.1.1",
|
||||
"react-tap-event-plugin": "^2.0.1"
|
||||
}
|
||||
}
|
||||
5
postcss.config.js
Normal file
5
postcss.config.js
Normal file
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
plugins: [
|
||||
require('autoprefixer')
|
||||
]
|
||||
}
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
15
public/index.html
Normal file
15
public/index.html
Normal file
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Hello React!</title>
|
||||
<!--[if lte IE 9]>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.0/es6-promise.auto.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="react-container"></div>
|
||||
<script src="./vendor.js"></script>
|
||||
<script src="./app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
41
src/ts/App.tsx
Normal file
41
src/ts/App.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
import * as React from 'react';
|
||||
import { deepOrange500 } from 'material-ui/styles/colors';
|
||||
import getMuiTheme from 'material-ui/styles/getMuiTheme';
|
||||
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
|
||||
|
||||
import { Router } from 'react-router';
|
||||
import * as History from 'history';
|
||||
|
||||
import { Main } from './containers/Main';
|
||||
import { Routes } from './Routes';
|
||||
|
||||
const history = History.createHashHistory();
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
textAlign: 'center',
|
||||
paddingTop: 200,
|
||||
},
|
||||
};
|
||||
|
||||
const muiTheme = getMuiTheme({
|
||||
palette: {
|
||||
accent1Color: deepOrange500,
|
||||
},
|
||||
});
|
||||
|
||||
export class App extends React.Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<MuiThemeProvider muiTheme={muiTheme}>
|
||||
<Router history={history}>
|
||||
<Routes />
|
||||
</Router>
|
||||
</MuiThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
12
src/ts/NotFound.tsx
Normal file
12
src/ts/NotFound.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import * as React from "react";
|
||||
import { RouteComponentProps } from "react-router";
|
||||
|
||||
export default class NotFound extends React.Component<RouteComponentProps<any>, {}> {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
Not Found
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
49
src/ts/Routes.tsx
Normal file
49
src/ts/Routes.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
import * as React from 'react';
|
||||
import { Switch } from 'react-router';
|
||||
import { Link, Route } from 'react-router-dom';
|
||||
|
||||
import { Main } from './containers/Main';
|
||||
import { Regist as MemberRegist } from './containers/member/Regist';
|
||||
import { Login as MemberLogin } from './containers/member/Login';
|
||||
import NotFound from './NotFound';
|
||||
|
||||
import { ProveDownload } from './containers/prove/Download';
|
||||
import { SensorConfig } from './containers/config/SensorConfig';
|
||||
import { WaitForAuth } from './containers/agent/WaitForAuth';
|
||||
import { MemberRegistResult } from './containers/member/RegistResult';
|
||||
import { MemberEmailConfirm } from './containers/member/EmailConfirm';
|
||||
|
||||
export class Routes extends React.Component<any, any> {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h1>React Redux sample</h1>
|
||||
<li><Link to='/' >Home</Link></li>
|
||||
<li><Link to='/member/regist' >Member Regist</Link></li>
|
||||
<li><Link to='/member/login' >Member Login</Link></li>
|
||||
|
||||
|
||||
<li><Link to='/member/result' >MemberRegistResult</Link></li>
|
||||
<li><Link to='/member/emailconfirm' >MemberEmailConfirm</Link></li>
|
||||
<li><Link to='/agent/waitauth' >WaitForAuth</Link></li>
|
||||
|
||||
<li><Link to='/config/sensorconfig' >SensorConfig</Link></li>
|
||||
<li><Link to='/prove/download' >ProveDownload</Link></li>
|
||||
|
||||
<Switch>
|
||||
<Route exact path='/' component={Main} />
|
||||
<Route exact path='/member/regist' component={MemberRegist} />
|
||||
<Route exact path='/member/login' component={MemberLogin} />
|
||||
<Route exact path='/member/result' component={MemberRegistResult} />
|
||||
<Route exact path='/member/emailconfirm' component={MemberEmailConfirm} />
|
||||
|
||||
<Route exact path='/agent/waitauth' component={WaitForAuth} />
|
||||
<Route exact path='/config/sensorconfig' component={SensorConfig} />
|
||||
<Route exact path='/prove/download' component={ProveDownload} />
|
||||
<Route component={NotFound} />
|
||||
</Switch>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
34
src/ts/components/Rest.tsx
Normal file
34
src/ts/components/Rest.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
|
||||
|
||||
const url = "http://192.168.1.203:8080/v1/overflow/services";
|
||||
|
||||
export class OFRest {
|
||||
|
||||
obj: any;
|
||||
|
||||
|
||||
constructor(serviceName: string, methodName: string, data: any) {
|
||||
|
||||
this.obj = {
|
||||
"serviceName": serviceName,
|
||||
"methodName": methodName,
|
||||
"param": data
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
public Call() {
|
||||
return fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
// mode: 'no-cors'
|
||||
},
|
||||
body: JSON.stringify(this.obj)
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
71
src/ts/containers/Main.tsx
Normal file
71
src/ts/containers/Main.tsx
Normal file
@ -0,0 +1,71 @@
|
||||
import * as React from 'react';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import Dialog from 'material-ui/Dialog';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
textAlign: 'center',
|
||||
paddingTop: 200,
|
||||
},
|
||||
};
|
||||
|
||||
interface MainState {
|
||||
open: boolean;
|
||||
}
|
||||
|
||||
export class Main extends React.Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
|
||||
this.handleRequestClose = this.handleRequestClose.bind(this);
|
||||
this.handleTouchTap = this.handleTouchTap.bind(this);
|
||||
|
||||
this.state = {
|
||||
open: false,
|
||||
} as MainState;
|
||||
}
|
||||
|
||||
handleRequestClose() {
|
||||
this.setState({
|
||||
open: false,
|
||||
} as MainState);
|
||||
}
|
||||
|
||||
handleTouchTap() {
|
||||
this.setState({
|
||||
open: true,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const standardActions = (
|
||||
<FlatButton
|
||||
label="Ok"
|
||||
primary={true}
|
||||
onTouchTap={this.handleRequestClose}
|
||||
/>
|
||||
) as any;
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<Dialog
|
||||
open={this.state.open}
|
||||
title="Super Secret Password"
|
||||
actions={standardActions}
|
||||
onRequestClose={this.handleRequestClose}
|
||||
>
|
||||
1-2-3-4-5
|
||||
</Dialog>
|
||||
<h1>Material-UI</h1>
|
||||
<h2>example project</h2>
|
||||
<RaisedButton
|
||||
label="Super Secret Password"
|
||||
secondary={true}
|
||||
onTouchTap={this.handleTouchTap}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
184
src/ts/containers/agent/WaitForAuth.tsx
Normal file
184
src/ts/containers/agent/WaitForAuth.tsx
Normal file
@ -0,0 +1,184 @@
|
||||
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,
|
||||
};
|
||||
|
||||
sselectedRows: number[] | string;
|
||||
|
||||
// handleCellClick = (e: any, idx: number) => {
|
||||
// console.log(e)
|
||||
// }
|
||||
|
||||
handleRowSelected = (selectedRows: number[] | string) => {
|
||||
// console.log(selectedRows)
|
||||
// this.setState({ open: true })
|
||||
this.sselectedRows = selectedRows;
|
||||
}
|
||||
|
||||
handleClose = () => {
|
||||
this.setState({ open: false });
|
||||
};
|
||||
|
||||
handleOpenDialog = () => {
|
||||
this.setState({ open: true })
|
||||
// console.log(this.sselectedRows)
|
||||
}
|
||||
|
||||
handleSubmit = () => {
|
||||
console.log("Agent Auth Service Request: " + this.sselectedRows)
|
||||
}
|
||||
|
||||
render() {
|
||||
const actions = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary={true}
|
||||
onTouchTap={this.handleClose}
|
||||
/>,
|
||||
<FlatButton
|
||||
label="Submit"
|
||||
primary={true}
|
||||
disabled={false}
|
||||
onTouchTap={this.handleSubmit}
|
||||
/>,
|
||||
]
|
||||
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>
|
||||
<FlatButton
|
||||
style={{float:'right'}}
|
||||
label="Submit"
|
||||
primary={true}
|
||||
onTouchTap={this.handleOpenDialog}
|
||||
/>
|
||||
<FlatButton
|
||||
style={{float:'right' }}
|
||||
label="Cancel"
|
||||
primary={true}
|
||||
onTouchTap={this.handleClose}
|
||||
/>
|
||||
</div>
|
||||
</MuiThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
21
src/ts/containers/config/CrawlerSelector.tsx
Normal file
21
src/ts/containers/config/CrawlerSelector.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
import * as React from 'react';
|
||||
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
|
||||
|
||||
export class CrawlerSelector extends React.Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context)
|
||||
this.state = {
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<MuiThemeProvider >
|
||||
<div>
|
||||
CrawlerSelector
|
||||
</div>
|
||||
</MuiThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
21
src/ts/containers/config/ItemSelector.tsx
Normal file
21
src/ts/containers/config/ItemSelector.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
import * as React from 'react';
|
||||
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
|
||||
|
||||
export class ItemSelector extends React.Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context)
|
||||
this.state = {
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<MuiThemeProvider >
|
||||
<div>
|
||||
ItemSelector
|
||||
</div>
|
||||
</MuiThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
118
src/ts/containers/config/SensorConfig.tsx
Normal file
118
src/ts/containers/config/SensorConfig.tsx
Normal file
@ -0,0 +1,118 @@
|
||||
import * as React from 'react';
|
||||
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
|
||||
import {
|
||||
Step,
|
||||
Stepper,
|
||||
StepLabel,
|
||||
} from 'material-ui/Stepper';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import Divider from 'material-ui/Divider';
|
||||
|
||||
import { TargetSelector } from './TargetSelector';
|
||||
import { CrawlerSelector } from './CrawlerSelector';
|
||||
import { ItemSelector } from './ItemSelector';
|
||||
|
||||
export class SensorConfig extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context)
|
||||
}
|
||||
|
||||
state = {
|
||||
finished: false,
|
||||
stepIndex: 0,
|
||||
selected: -1
|
||||
};
|
||||
|
||||
handleNext = () => {
|
||||
const { stepIndex } = this.state;
|
||||
this.setState({
|
||||
stepIndex: stepIndex + 1,
|
||||
finished: stepIndex >= 2,
|
||||
});
|
||||
if(this.state.stepIndex == 0) {
|
||||
alert(this.state.selected);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
handlePrev = () => {
|
||||
const { stepIndex } = this.state;
|
||||
if (stepIndex > 0) {
|
||||
this.setState({ stepIndex: stepIndex - 1 });
|
||||
}
|
||||
};
|
||||
|
||||
handleChange(idx :any) {
|
||||
this.setState({
|
||||
selected : idx
|
||||
});
|
||||
}
|
||||
|
||||
getStepContent(stepIndex: any) {
|
||||
switch (stepIndex) {
|
||||
case 0:
|
||||
return <TargetSelector onChange={this.handleChange.bind(this)} />;
|
||||
case 1:
|
||||
return <CrawlerSelector />;
|
||||
case 2:
|
||||
return <ItemSelector />;
|
||||
default:
|
||||
return 'errrrrrr';
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<MuiThemeProvider >
|
||||
<div style={{ width: '100%', maxWidth: 900, margin: 'auto' }}>
|
||||
<Stepper activeStep={this.state.stepIndex}>
|
||||
<Step>
|
||||
<StepLabel>MONITOR WHAT?</StepLabel>
|
||||
</Step>
|
||||
<Step>
|
||||
<StepLabel>TECHNOLOGY USED?</StepLabel>
|
||||
</Step>
|
||||
<Step>
|
||||
<StepLabel>SELEC ITEMS</StepLabel>
|
||||
</Step>
|
||||
</Stepper>
|
||||
<Divider />
|
||||
<div>
|
||||
{this.state.finished ? (
|
||||
<p>
|
||||
<a
|
||||
href="#"
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
this.setState({ stepIndex: 0, finished: false });
|
||||
}}
|
||||
>
|
||||
Click here
|
||||
</a> to reset the example.
|
||||
</p>
|
||||
) : (
|
||||
<div>
|
||||
{this.getStepContent(this.state.stepIndex)}
|
||||
<div style={{ marginTop: 12, marginBottom: 15, float: 'right' }}>
|
||||
<FlatButton
|
||||
label="Back"
|
||||
disabled={this.state.stepIndex === 0}
|
||||
onTouchTap={this.handlePrev}
|
||||
style={{ marginRight: 12 }}
|
||||
/>
|
||||
<RaisedButton
|
||||
label={this.state.stepIndex === 2 ? 'Finish' : 'Next'}
|
||||
primary={true}
|
||||
onTouchTap={this.handleNext}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</MuiThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
107
src/ts/containers/config/TargetSelector.tsx
Normal file
107
src/ts/containers/config/TargetSelector.tsx
Normal file
@ -0,0 +1,107 @@
|
||||
import * as React from 'react';
|
||||
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
|
||||
|
||||
import { List, ListItem, makeSelectable } from 'material-ui/List';
|
||||
import Subheader from 'material-ui/Subheader';
|
||||
import Checkbox from 'material-ui/Checkbox';
|
||||
|
||||
|
||||
|
||||
let SelectableList = makeSelectable(List);
|
||||
|
||||
function wrapState(ComposedComponent: any, par: any) {
|
||||
return class SelectableList extends React.Component<any, any> {
|
||||
|
||||
componentWillMount() {
|
||||
this.setState({
|
||||
selectedIndex: -1,
|
||||
});
|
||||
}
|
||||
|
||||
handleRequestChange = (event: any, index: any) => {
|
||||
this.setState({
|
||||
selectedIndex: index,
|
||||
});
|
||||
par.handleSelect(index);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ComposedComponent
|
||||
value={this.state.selectedIndex}
|
||||
onChange={this.handleRequestChange}
|
||||
>
|
||||
{this.props.children}
|
||||
</ComposedComponent>
|
||||
);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
|
||||
export class TargetSelector extends React.Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context)
|
||||
this.state = {
|
||||
};
|
||||
SelectableList = wrapState(SelectableList, this);
|
||||
}
|
||||
|
||||
handleSelect(idx: any) {
|
||||
this.props.onChange(idx);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<MuiThemeProvider >
|
||||
<div>
|
||||
<SelectableList >
|
||||
<Subheader>Select a target to monitor</Subheader>
|
||||
<ListItem
|
||||
value={1}
|
||||
primaryText="192.168.1.0"
|
||||
secondaryText={'Zone'}
|
||||
initiallyOpen={true}
|
||||
nestedItems={[
|
||||
<ListItem
|
||||
value={2}
|
||||
primaryText="192.168.1.11"
|
||||
secondaryText={'Host'}
|
||||
initiallyOpen={true}
|
||||
nestedItems={[
|
||||
<ListItem
|
||||
value={3}
|
||||
primaryText="Redis"
|
||||
secondaryText="Port 5432" />,
|
||||
<ListItem
|
||||
value={4}
|
||||
primaryText="FTP"
|
||||
secondaryText="Port 5432" />,
|
||||
]}
|
||||
/>,
|
||||
<ListItem
|
||||
value={5}
|
||||
primaryText="192.168.1.12"
|
||||
secondaryText={'Host'}
|
||||
initiallyOpen={true}
|
||||
nestedItems={[
|
||||
<ListItem
|
||||
value={6}
|
||||
|
||||
primaryText="MySQL"
|
||||
secondaryText="Port 5432" />,
|
||||
<ListItem
|
||||
value={7}
|
||||
primaryText="SSH"
|
||||
secondaryText="Port 5432" />,
|
||||
]}
|
||||
/>,
|
||||
]}
|
||||
/>
|
||||
</SelectableList>
|
||||
</div>
|
||||
</MuiThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
44
src/ts/containers/member/EmailConfirm.tsx
Normal file
44
src/ts/containers/member/EmailConfirm.tsx
Normal file
@ -0,0 +1,44 @@
|
||||
|
||||
|
||||
import * as React from "react";
|
||||
import getMuiTheme from 'material-ui/styles/getMuiTheme';
|
||||
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
|
||||
import { deepOrange500 } from 'material-ui/styles/colors';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
textAlign: 'center',
|
||||
}
|
||||
}
|
||||
|
||||
const muiTheme = getMuiTheme({
|
||||
palette: {
|
||||
accent1Color: deepOrange500,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
export class MemberEmailConfirm extends React.Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
|
||||
return (
|
||||
<MuiThemeProvider muiTheme={muiTheme}>
|
||||
<div style={styles.container}>
|
||||
<h1>Email Conform!</h1>
|
||||
<h2>You Can Do it</h2>
|
||||
<RaisedButton label="Go to Main" primary={true}/>
|
||||
|
||||
|
||||
</div>
|
||||
</MuiThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
134
src/ts/containers/member/Login.tsx
Normal file
134
src/ts/containers/member/Login.tsx
Normal file
@ -0,0 +1,134 @@
|
||||
import * as React from 'react';
|
||||
import * as ReactDOM from 'react-dom';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import * as http from "http"
|
||||
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import Dialog from 'material-ui/Dialog';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import Divider from 'material-ui/Divider';
|
||||
import Paper from 'material-ui/Paper';
|
||||
import TextField from 'material-ui/TextField';
|
||||
import SelectField from 'material-ui/SelectField';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
import Slider from 'material-ui/Slider';
|
||||
|
||||
|
||||
const styles = {
|
||||
body: {
|
||||
textAlign: 'center',
|
||||
},
|
||||
container: {
|
||||
textAlign: 'center',
|
||||
|
||||
},
|
||||
|
||||
textfield: {
|
||||
width: 300,
|
||||
marginLeft: 3
|
||||
},
|
||||
|
||||
customWidth: {
|
||||
width: 150,
|
||||
},
|
||||
button: {
|
||||
margin: 12,
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
export class Login extends React.Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
|
||||
this.handleSignUp = this.handleSignUp.bind(this);
|
||||
|
||||
this.state = {
|
||||
open: false,
|
||||
value: 1,
|
||||
|
||||
email: "",
|
||||
pw: "",
|
||||
};
|
||||
}
|
||||
|
||||
handleChange = () => this.setState({});
|
||||
|
||||
private emailInput: any;
|
||||
|
||||
handleRequestClose = () => {
|
||||
this.setState({
|
||||
open: false,
|
||||
});
|
||||
}
|
||||
|
||||
handleTouchTap = () => {
|
||||
this.setState({
|
||||
open: true,
|
||||
});
|
||||
}
|
||||
|
||||
handleSignUp = () => {
|
||||
|
||||
let output: string;
|
||||
let obj: any; //new object declaration
|
||||
obj = {
|
||||
"email": this.state.email,
|
||||
"pwSalt": this.state.pw,
|
||||
};
|
||||
|
||||
let exeObj: any;
|
||||
exeObj = {
|
||||
"serviceName": "Member",
|
||||
"methodName": "Login",
|
||||
"param": obj
|
||||
}
|
||||
|
||||
|
||||
output = JSON.stringify(exeObj);
|
||||
}
|
||||
|
||||
|
||||
|
||||
btnTouchTap = () => {
|
||||
alert(event)
|
||||
};
|
||||
|
||||
render() {
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<h1>Log in with a overflow Account:</h1>
|
||||
<br />
|
||||
<TextField
|
||||
ref="email"
|
||||
hintText="smith@gmail.com"
|
||||
floatingLabelText="Email address*"
|
||||
errorText=""
|
||||
style={styles.textfield}
|
||||
underlineShow={true}
|
||||
value={this.state.email}
|
||||
onChange={(e, newValue) => this.setState({ email: newValue })}
|
||||
/>
|
||||
|
||||
<br />
|
||||
|
||||
<TextField
|
||||
hintText="Password"
|
||||
floatingLabelText="Password"
|
||||
type="password"
|
||||
style={styles.textfield}
|
||||
value={this.state.pw}
|
||||
onChange={(e, newValue) => this.setState({ pw: newValue })}
|
||||
/>
|
||||
<br />
|
||||
|
||||
|
||||
<RaisedButton label="Sign In" primary={true} style={styles.button} onClick={this.handleSignUp.bind(this)} />
|
||||
<Link to="/member/regist"><RaisedButton label="Sign Up" primary={false} style={styles.button} /></Link>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
252
src/ts/containers/member/Regist.tsx
Normal file
252
src/ts/containers/member/Regist.tsx
Normal file
@ -0,0 +1,252 @@
|
||||
import * as React from 'react';
|
||||
import * as ReactDOM from 'react-dom';
|
||||
|
||||
import * as http from "http"
|
||||
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import Dialog from 'material-ui/Dialog';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import Divider from 'material-ui/Divider';
|
||||
import Paper from 'material-ui/Paper';
|
||||
import TextField from 'material-ui/TextField';
|
||||
import SelectField from 'material-ui/SelectField';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
import Slider from 'material-ui/Slider';
|
||||
|
||||
|
||||
const styles = {
|
||||
body: {
|
||||
textAlign: 'center',
|
||||
},
|
||||
container: {
|
||||
textAlign: 'center',
|
||||
|
||||
},
|
||||
|
||||
textfield: {
|
||||
width: 300,
|
||||
marginLeft: 3
|
||||
},
|
||||
|
||||
customWidth: {
|
||||
width: 150,
|
||||
},
|
||||
button: {
|
||||
margin: 12,
|
||||
}
|
||||
};
|
||||
|
||||
var EMailRegex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||
|
||||
export class Regist extends React.Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
|
||||
this.handleSignUp = this.handleSignUp.bind(this);
|
||||
|
||||
|
||||
|
||||
this.state = {
|
||||
open: false,
|
||||
value: 1,
|
||||
|
||||
id: 0,
|
||||
email: "",
|
||||
name: "",
|
||||
company: "",
|
||||
phone: "",
|
||||
pw: "",
|
||||
|
||||
isEmail: true
|
||||
};
|
||||
}
|
||||
|
||||
handleChange = () => this.setState({});
|
||||
|
||||
private emailInput: any;
|
||||
|
||||
|
||||
|
||||
handleSignUp = () => {
|
||||
|
||||
let output: string;
|
||||
let obj: any; //new object declaration
|
||||
obj = {
|
||||
"email": this.state.email,
|
||||
"pwSalt": this.state.pw,
|
||||
"name": this.state.name,
|
||||
"company": this.state.company,
|
||||
"phone": this.state.phone
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
public validateEmail(email: any) {
|
||||
return EMailRegex.test(email);
|
||||
}
|
||||
|
||||
handleTestRead = () => {
|
||||
let output: string;
|
||||
let obj: any; //new object declaration
|
||||
obj = {
|
||||
"id": this.state.id,
|
||||
"email": this.state.email,
|
||||
"pwSalt": this.state.pw,
|
||||
"name": this.state.name,
|
||||
"company": this.state.company,
|
||||
"phone": this.state.phone
|
||||
};
|
||||
|
||||
let exeObj: any;
|
||||
exeObj = {
|
||||
"serviceName": "Member",
|
||||
"methodName": "Read",
|
||||
"param": obj
|
||||
};
|
||||
|
||||
|
||||
output = JSON.stringify(exeObj);
|
||||
|
||||
}
|
||||
|
||||
handleTestUpdate = () => {
|
||||
let output: string;
|
||||
let obj: any; //new object declaration
|
||||
obj = {
|
||||
"id": this.state.id,
|
||||
"email": this.state.email,
|
||||
"pwSalt": this.state.pw,
|
||||
"name": this.state.name,
|
||||
"company": this.state.company,
|
||||
"phone": this.state.phone
|
||||
};
|
||||
|
||||
let exeObj: any;
|
||||
exeObj = {
|
||||
"serviceName": "Member",
|
||||
"methodName": "Modify",
|
||||
"param": obj
|
||||
};
|
||||
|
||||
|
||||
output = JSON.stringify(exeObj);
|
||||
|
||||
}
|
||||
|
||||
handleTestDelete = () => {
|
||||
let output: string;
|
||||
let obj: any; //new object declaration
|
||||
obj = {
|
||||
"id": this.state.id,
|
||||
"email": this.state.email,
|
||||
"pwSalt": this.state.pw,
|
||||
"name": this.state.name,
|
||||
"company": this.state.company,
|
||||
"phone": this.state.phone
|
||||
};
|
||||
|
||||
let exeObj: any;
|
||||
exeObj = {
|
||||
"serviceName": "Member",
|
||||
"methodName": "Remove",
|
||||
"param": obj
|
||||
};
|
||||
|
||||
|
||||
output = JSON.stringify(exeObj);
|
||||
|
||||
}
|
||||
|
||||
|
||||
handleResultContainer = () => {
|
||||
}
|
||||
|
||||
|
||||
btnTouchTap = () => {
|
||||
alert(event)
|
||||
};
|
||||
|
||||
render() {
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
Get started with Overflow
|
||||
<br />
|
||||
<TextField
|
||||
ref="email"
|
||||
hintText="smith@gmail.com"
|
||||
floatingLabelText="Email address*"
|
||||
errorText={this.state.isEmail ? "" : "Please Email Format"}
|
||||
style={styles.textfield}
|
||||
underlineShow={true}
|
||||
value={this.state.email}
|
||||
onChange={(e, newValue) => {
|
||||
this.setState({ email: newValue });
|
||||
|
||||
this.state.isEmail = this.validateEmail(this.state.email);
|
||||
}
|
||||
}
|
||||
/>
|
||||
<br />
|
||||
<TextField
|
||||
ref="name"
|
||||
hintText="Snoop"
|
||||
floatingLabelText="Full Name*"
|
||||
style={styles.textfield}
|
||||
underlineShow={true}
|
||||
value={this.state.name}
|
||||
onChange={(e, newValue) => this.setState({ name: newValue })}
|
||||
|
||||
/>
|
||||
<br />
|
||||
|
||||
<TextField
|
||||
ref="company"
|
||||
hintText="Loafle"
|
||||
floatingLabelText="Company*"
|
||||
style={styles.textfield}
|
||||
underlineShow={true}
|
||||
value={this.state.company}
|
||||
onChange={(e, newValue) => this.setState({ company: newValue })}
|
||||
/>
|
||||
<br />
|
||||
|
||||
<TextField
|
||||
ref="phone"
|
||||
hintText="Loafle"
|
||||
floatingLabelText="Phone*"
|
||||
style={styles.textfield}
|
||||
underlineShow={true}
|
||||
value={this.state.phone}
|
||||
onChange={(e, newValue) => this.setState({ phone: newValue })}
|
||||
/>
|
||||
<br />
|
||||
|
||||
<TextField
|
||||
hintText="Password"
|
||||
floatingLabelText="Password"
|
||||
type="password"
|
||||
style={styles.textfield}
|
||||
value={this.state.pw}
|
||||
onChange={(e, newValue) => this.setState({ pw: newValue })}
|
||||
/>
|
||||
<br />
|
||||
|
||||
|
||||
<RaisedButton label="Sign Up" primary={true} style={styles.button} onClick={this.handleSignUp.bind(this)} />
|
||||
<RaisedButton label="Read" primary={true} style={styles.button} onClick={this.handleTestRead.bind(this)} />
|
||||
<RaisedButton label="Update" primary={true} style={styles.button} onClick={this.handleTestUpdate.bind(this)} />
|
||||
<RaisedButton label="Delete" primary={true} style={styles.button} onClick={this.handleTestDelete.bind(this)} />
|
||||
<br />
|
||||
<TextField
|
||||
hintText="id"
|
||||
floatingLabelText="id"
|
||||
|
||||
style={styles.textfield}
|
||||
value={this.state.id}
|
||||
onChange={(e, newValue) => this.setState({ id: newValue })}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
44
src/ts/containers/member/RegistResult.tsx
Normal file
44
src/ts/containers/member/RegistResult.tsx
Normal file
@ -0,0 +1,44 @@
|
||||
|
||||
|
||||
import * as React from "react";
|
||||
import getMuiTheme from 'material-ui/styles/getMuiTheme';
|
||||
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
|
||||
import { deepOrange500 } from 'material-ui/styles/colors';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
textAlign: 'center',
|
||||
}
|
||||
}
|
||||
|
||||
const muiTheme = getMuiTheme({
|
||||
palette: {
|
||||
accent1Color: deepOrange500,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
export class MemberRegistResult extends React.Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
|
||||
return (
|
||||
<MuiThemeProvider muiTheme={muiTheme}>
|
||||
<div style={styles.container}>
|
||||
<h1>Starting Overflow!</h1>
|
||||
<h2>Please Check Email</h2>
|
||||
<RaisedButton label="ReSend Email" primary={true}/>
|
||||
|
||||
|
||||
</div>
|
||||
</MuiThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
71
src/ts/containers/prove/Download.tsx
Normal file
71
src/ts/containers/prove/Download.tsx
Normal file
@ -0,0 +1,71 @@
|
||||
import * as React from 'react';
|
||||
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
|
||||
import Paper from 'material-ui/Paper';
|
||||
import Menu from 'material-ui/Menu';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
import Divider from 'material-ui/Divider';
|
||||
import Download from 'material-ui/svg-icons/file/file-download';
|
||||
import Delete from 'material-ui/svg-icons/action/delete';
|
||||
|
||||
import ContentCopy from 'material-ui/svg-icons/content/content-copy';
|
||||
import { InstallGuide } from './Installguide';
|
||||
|
||||
const styles = {
|
||||
osSelector: {
|
||||
display: 'inline-block',
|
||||
float: 'left',
|
||||
},
|
||||
content: {
|
||||
display: 'inline-block',
|
||||
float: 'left',
|
||||
width: "85%",
|
||||
height: 700,
|
||||
padding: 20,
|
||||
},
|
||||
}
|
||||
|
||||
export class ProveDownload extends React.Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context)
|
||||
this.state = {
|
||||
selectedOSidx: 0,
|
||||
selectedOSName: "Windows",
|
||||
};
|
||||
}
|
||||
|
||||
handleOSChange = (event: any, menuItem: any, index: any) => {
|
||||
this.setState({
|
||||
selectedOSidx: index,
|
||||
selectedOSName: menuItem.props.primaryText
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
|
||||
return (
|
||||
<MuiThemeProvider >
|
||||
<div>
|
||||
<div>
|
||||
<Paper style={styles.osSelector}>
|
||||
<Menu onItemTouchTap={this.handleOSChange.bind(this)}>
|
||||
<MenuItem primaryText="Windows" leftIcon={<ContentCopy />} />
|
||||
<MenuItem primaryText="Ubuntu" leftIcon={<ContentCopy />} />
|
||||
<MenuItem primaryText="Mac OS X" leftIcon={<ContentCopy />} />
|
||||
<MenuItem primaryText="Docker" leftIcon={<ContentCopy />} />
|
||||
<MenuItem primaryText="Debian" leftIcon={<ContentCopy />} />
|
||||
<MenuItem primaryText="CentOS" leftIcon={<ContentCopy />} />
|
||||
<MenuItem primaryText="Fedora" leftIcon={<ContentCopy />} />
|
||||
</Menu>
|
||||
</Paper>
|
||||
|
||||
<Paper style={styles.content}>
|
||||
<InstallGuide idx={this.state.selectedOSidx} name={this.state.selectedOSName} />
|
||||
</Paper>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</MuiThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
96
src/ts/containers/prove/Installguide.tsx
Normal file
96
src/ts/containers/prove/Installguide.tsx
Normal file
@ -0,0 +1,96 @@
|
||||
import * as React from 'react';
|
||||
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
|
||||
import { List, ListItem } from 'material-ui/List';
|
||||
import ActionInfo from 'material-ui/svg-icons/action/info';
|
||||
import SelectField from 'material-ui/SelectField';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
|
||||
const styles = {
|
||||
content: {
|
||||
display: 'inline-block',
|
||||
float: 'left',
|
||||
width: "85%",
|
||||
height: 700,
|
||||
},
|
||||
}
|
||||
|
||||
export class InstallGuide extends React.Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context)
|
||||
this.state = {
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
const osIdx = this.props.idx;
|
||||
let target = null;
|
||||
if (osIdx == 0) {
|
||||
target = <WindowsInstallGuide />;
|
||||
} else if (osIdx == 1) {
|
||||
target = <UbuntuInstallGuide />;
|
||||
} else {
|
||||
target = <h2>Not support yet.</h2>;
|
||||
}
|
||||
|
||||
return (
|
||||
<MuiThemeProvider >
|
||||
<div>
|
||||
<h1>Installing on {this.props.name}</h1>
|
||||
<ListItem primaryText="Blah Blah Blah..." disabled={true} leftIcon={<ActionInfo />} />
|
||||
{target}
|
||||
</div>
|
||||
</MuiThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export class WindowsInstallGuide extends React.Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context)
|
||||
this.state = {
|
||||
};
|
||||
}
|
||||
|
||||
handleArchChange = (event: any, menuItem: any, value: any) => {
|
||||
this.setState({
|
||||
selectedArch: value,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<MuiThemeProvider >
|
||||
<div>
|
||||
<SelectField
|
||||
floatingLabelText="Architecture"
|
||||
value={this.state.selectedArch}
|
||||
onChange={this.handleArchChange}
|
||||
>
|
||||
<MenuItem value={0} primaryText="32bit" />
|
||||
<MenuItem value={1} primaryText="64bit" />
|
||||
</SelectField>
|
||||
</div>
|
||||
</MuiThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export class UbuntuInstallGuide extends React.Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context)
|
||||
this.state = {
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<MuiThemeProvider >
|
||||
<div>
|
||||
Ubuntu blah blah
|
||||
</div>
|
||||
</MuiThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
104
src/ts/containers/target/Table.tsx
Normal file
104
src/ts/containers/target/Table.tsx
Normal file
@ -0,0 +1,104 @@
|
||||
|
||||
import * as React from 'react';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableHeader,
|
||||
TableHeaderColumn,
|
||||
TableRow,
|
||||
TableRowColumn,
|
||||
} from 'material-ui/Table';
|
||||
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
|
||||
|
||||
|
||||
export class TargetTable extends React.Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
finished: false,
|
||||
stepIndex: 0,
|
||||
selectedTarget: 0,
|
||||
selectedSensors : []
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
var Columns = ["ID", "Name", "Status"]
|
||||
|
||||
var objs = [
|
||||
{
|
||||
id:1,
|
||||
name:"John Smith",
|
||||
status:"Employed"
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
name:"John Male",
|
||||
status:"Unemployed"
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
name:"John Curter",
|
||||
status:"Employed"
|
||||
},
|
||||
{
|
||||
id:4,
|
||||
name:"John Son",
|
||||
status:"Unemployed"
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<MuiThemeProvider >
|
||||
<div>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{/*<TableHeaderColumn>ID</TableHeaderColumn>
|
||||
<TableHeaderColumn>Name</TableHeaderColumn>
|
||||
<TableHeaderColumn>Status</TableHeaderColumn>*/
|
||||
Columns.map(function(item) {
|
||||
return (<TableHeaderColumn>{item}</TableHeaderColumn>)
|
||||
})
|
||||
|
||||
}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{
|
||||
|
||||
}
|
||||
<TableRow>
|
||||
<TableRowColumn>1</TableRowColumn>
|
||||
<TableRowColumn>John Smith</TableRowColumn>
|
||||
<TableRowColumn>Employed</TableRowColumn>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableRowColumn>2</TableRowColumn>
|
||||
<TableRowColumn>Randal White</TableRowColumn>
|
||||
<TableRowColumn>Unemployed</TableRowColumn>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableRowColumn>3</TableRowColumn>
|
||||
<TableRowColumn>Stephanie Sanders</TableRowColumn>
|
||||
<TableRowColumn>Employed</TableRowColumn>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableRowColumn>4</TableRowColumn>
|
||||
<TableRowColumn>Steve Brown</TableRowColumn>
|
||||
<TableRowColumn>Employed</TableRowColumn>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableRowColumn>5</TableRowColumn>
|
||||
<TableRowColumn>Christopher Nolan</TableRowColumn>
|
||||
<TableRowColumn>Unemployed</TableRowColumn>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</MuiThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
11
src/ts/index.tsx
Normal file
11
src/ts/index.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import * as React from 'react';
|
||||
import * as ReactDOM from 'react-dom';
|
||||
import * as injectTapEventPlugin from 'react-tap-event-plugin';
|
||||
import { App } from './App';
|
||||
|
||||
injectTapEventPlugin();
|
||||
|
||||
ReactDOM.render(
|
||||
<App />,
|
||||
document.getElementById('react-container')
|
||||
);
|
||||
25
tsconfig.json
Normal file
25
tsconfig.json
Normal file
@ -0,0 +1,25 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"declaration": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"jsx": "react",
|
||||
"module": "commonjs",
|
||||
"moduleResolution": "node",
|
||||
"newLine": "LF",
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"outDir": "./dist/src/",
|
||||
"preserveConstEnums": true,
|
||||
"sourceMap": true,
|
||||
"target": "es5"
|
||||
},
|
||||
"include": [
|
||||
"./src/ts/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"dist"
|
||||
]
|
||||
}
|
||||
23
tslint.json
Normal file
23
tslint.json
Normal file
@ -0,0 +1,23 @@
|
||||
{
|
||||
"rules": {
|
||||
"indent": [
|
||||
true,
|
||||
4,
|
||||
"spaces"
|
||||
],
|
||||
"quotemark": [
|
||||
"single"
|
||||
],
|
||||
"no-unused-expression": true,
|
||||
"no-duplicate-variable": true,
|
||||
"curly": true,
|
||||
"class-name": true,
|
||||
"triple-equals": [
|
||||
true
|
||||
],
|
||||
"semicolon": [
|
||||
true,
|
||||
"always"
|
||||
]
|
||||
}
|
||||
}
|
||||
97
webpack.config.js
Normal file
97
webpack.config.js
Normal file
@ -0,0 +1,97 @@
|
||||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
const CopyPlugin = require('copy-webpack-plugin');
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
const packages = require('./package.json');
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
app: [
|
||||
'./src/ts/index.tsx'
|
||||
],
|
||||
vendor: Object.keys(packages.dependencies)
|
||||
},
|
||||
|
||||
output: {
|
||||
filename: 'app.js',
|
||||
path: path.join(__dirname, 'dist/'),
|
||||
},
|
||||
|
||||
devtool: 'cheap-module-eval-source-map',
|
||||
|
||||
devServer: {
|
||||
hot: true, // enable HMR on the server
|
||||
inline: true,
|
||||
historyApiFallback: true,
|
||||
contentBase: [__dirname + '/public', __dirname + '/dist', __dirname + '/node_modules'], // match the output path
|
||||
publicPath: '/' ,// match the output `publicPath`
|
||||
host: '192.168.1.209',
|
||||
port: 9091,
|
||||
stats: {
|
||||
colors: true
|
||||
},
|
||||
},
|
||||
|
||||
resolve: {
|
||||
// Add '.ts' and '.tsx' as resolvable extensions.
|
||||
extensions: ['.ts', '.tsx', '.js', '.json']
|
||||
},
|
||||
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
enforce: 'pre',
|
||||
test: /\.js$/,
|
||||
loader: 'source-map-loader'
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: 'style-loader',
|
||||
use: ['css-loader', 'postcss-loader', 'sass-loader']
|
||||
})
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
|
||||
// loader: 'url?limit=10000'
|
||||
loaders: [
|
||||
'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
|
||||
'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false'
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
loader: 'awesome-typescript-loader'
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new CopyPlugin([
|
||||
{
|
||||
from: 'public/index.html'
|
||||
}
|
||||
]),
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: 'vendor',
|
||||
minChunks: Infinity,
|
||||
filename: 'vendor.js'
|
||||
}),
|
||||
new ExtractTextPlugin({
|
||||
filename: __dirname + '/dist/css/[name].bundle.css',
|
||||
disable: false,
|
||||
allChunks: true
|
||||
}),
|
||||
new webpack.HotModuleReplacementPlugin(), // enable HMR globally
|
||||
|
||||
],
|
||||
// When importing a module whose path matches one of the following, just
|
||||
// assume a corresponding global variable exists and use that instead.
|
||||
// This is important because it allows us to avoid bundling all of our
|
||||
// dependencies, which allows browsers to cache those libraries between builds.
|
||||
// externals: {
|
||||
// 'react': 'React',
|
||||
// 'react-dom': 'ReactDOM'
|
||||
// },
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user