overflow_backup_2018_0455/test_web_router
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
snoop 2017-06-02 10:43:14 +09:00
commit 581e1e1aec
28 changed files with 7769 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
.gitignore vendored Normal file
View 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
View 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
View File

File diff suppressed because it is too large Load Diff

38
package.json Normal file
View 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
View File

@ -0,0 +1,5 @@
module.exports = {
plugins: [
require('autoprefixer')
]
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

15
public/index.html Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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'
// },
};