From 5491e58898d5e9f1fb97f2f15bb0c35d8865daf1 Mon Sep 17 00:00:00 2001 From: snoop Date: Mon, 10 Jul 2017 19:08:49 +0900 Subject: [PATCH] add test --- src/ts/Routes.tsx | 50 +++----- src/ts/containers/Main.tsx | 72 ++++++++--- src/ts/containers/NewRes.tsx | 169 +++++++++++++++++++++++++ src/ts/containers/test/Page11.tsx | 48 +++++++ src/ts/containers/test/Page17.tsx | 58 +++++++++ src/ts/containers/test/Page8.tsx | 64 ++++++++++ src/ts/containers/test/Page9.tsx | 64 ++++++++++ src/ts/containers/test/Sementic001.tsx | 145 +++++++++++++++++++++ 8 files changed, 622 insertions(+), 48 deletions(-) create mode 100644 src/ts/containers/NewRes.tsx create mode 100644 src/ts/containers/test/Page11.tsx create mode 100644 src/ts/containers/test/Page17.tsx create mode 100644 src/ts/containers/test/Page8.tsx create mode 100644 src/ts/containers/test/Page9.tsx create mode 100644 src/ts/containers/test/Sementic001.tsx diff --git a/src/ts/Routes.tsx b/src/ts/Routes.tsx index 6bb706a..9829246 100644 --- a/src/ts/Routes.tsx +++ b/src/ts/Routes.tsx @@ -20,46 +20,36 @@ import { TargetList } from './containers/target/TargetList'; import { TargetDetail } from './containers/target/TargetDetail'; import { DiscoveryResult } from './containers/discovery/DiscoveryResult'; +import { NewRes } from './containers/NewRes'; + +import {DropDownTest} from './containers/test/Sementic001'; +import {Page8} from './containers/test/Page8'; +import {SignIn} from './containers/test/Page9'; +import {PWChange} from './containers/test/Page11'; +import {ProbeDown} from './containers/test/Page17'; + export class Routes extends React.Component { render() { return (

React Redux sample

  • Home
    • -
  • Member Regist
    • -
  • Member Login
    • - -
  • MemberRegistResult
    • -
  • MemberEmailConfirm
    • -
  • WaitForAuth
    • -
  • WaitForAuthDetail
    • - -
  • SensorConfig
    • -
  • ProveDownload
    • -
  • Agents
    • -
  • AgentDetail
    • -
  • TargetList
    • -
  • TargetDetail
    • -
  • DiscoveryResult
    • +
  • Test
    • +
  • Test2
    • +
  • SignIn
    • +
  • PWChange
    • +
  • ProbeDown
    • + - - - - - - - - - - - - - - - + + + + + + diff --git a/src/ts/containers/Main.tsx b/src/ts/containers/Main.tsx index 6a32e5e..d744737 100644 --- a/src/ts/containers/Main.tsx +++ b/src/ts/containers/Main.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import RaisedButton from 'material-ui/RaisedButton'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; - +// import {client} from 'websocket' const styles = { container: { @@ -15,6 +15,45 @@ interface MainState { open: boolean; } +interface Person { + name: string; + age: number; +} + +let es = new WebSocket("ws://192.168.1.209:8000/echo"); + +es.onopen = function (event: any) { + console.log("open websocket") + let dat: any; + dat = { + "test": "fffff", + "echo": "ehochoc", + }; + + let mm :any; + + mm = { + "message" : dat + }; + + es.send(JSON.stringify(mm)); +}; + +es.onmessage = function (event:any) { + console.log(event.data); +} + +var hello = (person: Person) => { + console.log(`안녕하세요! ${person.name} 입니다.`); + + + + +} + + + + export class Main extends React.Component { constructor(props: any, context: any) { super(props, context); @@ -22,6 +61,13 @@ export class Main extends React.Component { this.handleRequestClose = this.handleRequestClose.bind(this); this.handleTouchTap = this.handleTouchTap.bind(this); + const p: Person = { + name: 'Mark', + age: 35 + }; + + hello(p); // 안녕하세요! Mark 입니다. + this.state = { open: false, } as MainState; @@ -49,23 +95,13 @@ export class Main extends React.Component { ) as any; return ( -
    - - 1-2-3-4-5 - -

    Material-UI

    -

    example project

    - -
    +
    ); } + + + } + + + diff --git a/src/ts/containers/NewRes.tsx b/src/ts/containers/NewRes.tsx new file mode 100644 index 0000000..c61278c --- /dev/null +++ b/src/ts/containers/NewRes.tsx @@ -0,0 +1,169 @@ +import * as React from 'react'; +import RaisedButton from 'material-ui/RaisedButton'; +import Popover, { PopoverAnimationVertical } from 'material-ui/Popover'; +import Menu from 'material-ui/Menu'; +import MenuItem from 'material-ui/MenuItem'; + +import { + Table, + TableBody, + TableHeader, + TableHeaderColumn, + TableRow, + TableRowColumn, +} from 'material-ui/Table'; + +import Badge from 'material-ui/Badge'; +import IconButton from 'material-ui/IconButton'; +import NotificationsIcon from 'material-ui/svg-icons/social/notifications'; +import PersonIcon from 'material-ui/svg-icons/social/person'; +import SettingsIcon from 'material-ui/svg-icons/action/settings'; + + + +import FontIcon from 'material-ui/FontIcon'; +import ActionHome from 'material-ui/svg-icons/action/home'; + + +export class NewRes extends React.Component { + constructor(props: any, context: any) { + super(props, context); + + + + this.state = { + open_monitor: false, + open_infra: false, + }; + } + + handleTouchTap = (event: any, state: any) => { + // This prevents ghost click. + event.preventDefault(); + // console.log(event.target.outerText) + state.anchorEl = event.currentTarget; + this.setState(state); + }; + + handleRequestClose = () => { + this.setState({ + open: false, + }); + }; + + + render() { + + + return ( +
    + + + + { + this.handleTouchTap(event, { + open_infra: false, + open_monitor: true, + }) + }} + + label="Monitoring" + /> + + { + this.handleTouchTap(event, { + open_infra: true, + open_monitor: false, + }) + }} + label="Infrastructure" + /> + + + + + + + + + + { + this.setState({ + open_monitor: false, + }); + }} + animation={PopoverAnimationVertical} + > + + + + + + + { + this.setState({ open_infra: false }); + }} + animation={PopoverAnimationVertical} + > + + + + + + + + + + + + + + + + + + + + + + + + + +
    + ); + } + + + +} + + + diff --git a/src/ts/containers/test/Page11.tsx b/src/ts/containers/test/Page11.tsx new file mode 100644 index 0000000..2c529c1 --- /dev/null +++ b/src/ts/containers/test/Page11.tsx @@ -0,0 +1,48 @@ +import *as React from 'react' +import { + Icon, Label, Input, + Select, Button +} from 'semantic-ui-react' + + +export interface State { + +} +export interface Props { + +} + + + +export class PWChange extends React.Component { + constructor(props: any, context: any) { + super(props, context); + + + } + + + render() { + + + return ( +
    + + + +
    + + +
    + + + + +
    + ); + } + + + +} + diff --git a/src/ts/containers/test/Page17.tsx b/src/ts/containers/test/Page17.tsx new file mode 100644 index 0000000..83c39be --- /dev/null +++ b/src/ts/containers/test/Page17.tsx @@ -0,0 +1,58 @@ +import *as React from 'react' +import { + Grid, Menu, Segment, MenuItemProps +} from 'semantic-ui-react' + + +export interface State { + +} +export interface Props { + +} + +const osNames = ["Windows","Debian","Ubuntu","Fedora"]; + +export class ProbeDown extends React.Component { + constructor(props: any, context: any) { + super(props, context); + + this.state = { activeItem: 'Windows' } + + + } +handleItemClick = (event: React.SyntheticEvent, data: MenuItemProps) => { + this.setState({ activeItem: data.name }) + + console.log(data.name); +} + + render() { + +const { activeItem } = this.state + return ( +
    + + + + + + + + + + + + + {this.state.activeItem} Download Page + + + +
    + ); + } + + + +} + diff --git a/src/ts/containers/test/Page8.tsx b/src/ts/containers/test/Page8.tsx new file mode 100644 index 0000000..0b75bdb --- /dev/null +++ b/src/ts/containers/test/Page8.tsx @@ -0,0 +1,64 @@ +import *as React from 'react' +import { + Icon, Label, Input, + Select, Button +} from 'semantic-ui-react' + + +export interface State { + +} +export interface Props { + +} + +const options = [{ key: 'southkorea', value: '82', text: 'South Korea(82)' }, +{ key: 'unitedstates', value: '1', text: 'United States(1)' }] + + +export class Page8 extends React.Component { + constructor(props: any, context: any) { + super(props, context); + + + } + + + render() { + + + return ( +
    + + +
    + + +
    + + +
    + + +
    + + +
    + + +
    + + +
    + ); + } + + + +} + diff --git a/src/ts/containers/test/Page9.tsx b/src/ts/containers/test/Page9.tsx new file mode 100644 index 0000000..94176f9 --- /dev/null +++ b/src/ts/containers/test/Page9.tsx @@ -0,0 +1,64 @@ +import *as React from 'react' +import { + Icon, Label, Input, + Select, Button, Header, Modal +} from 'semantic-ui-react' + + + + +const options = [{ key: 'southkorea', value: '82', text: 'South Korea(82)' }, +{ key: 'unitedstates', value: '1', text: 'United States(1)' }] + + +export class SignIn extends React.Component { + constructor(props: any, context: any) { + super(props, context); + + this.state = { + forgotPopup: false, + }; + + + } + + + render() { + + + return ( +
    + + +
    + + + +
    + Forgot Password}> + Change your password Enter email address. + + + + + + + + + + +
    + + + + + + +
    + ); + } + + + +} + diff --git a/src/ts/containers/test/Sementic001.tsx b/src/ts/containers/test/Sementic001.tsx new file mode 100644 index 0000000..b06d1f8 --- /dev/null +++ b/src/ts/containers/test/Sementic001.tsx @@ -0,0 +1,145 @@ +import *as React from 'react' +import { + Dropdown, Icon, Menu, Label, + + Sidebar, Segment, Button, Image, Header, +} from 'semantic-ui-react' + + + +const options = [ + { key: 'angular', text: 'Angular', value: 'angular' }, + { key: 'css', text: 'CSS', value: 'css' }, + { key: 'design', text: 'Graphic Design', value: 'design' }, + { key: 'ember', text: 'Ember', value: 'ember' }, + { key: 'html', text: 'HTML', value: 'html' }, + { key: 'ia', text: 'Information Architecture', value: 'ia' }, + { key: 'javascript', text: 'Javascript', value: 'javascript' }, + { key: 'mech', text: 'Mechanical Engineering', value: 'mech' }, + { key: 'meteor', text: 'Meteor', value: 'meteor' }, + { key: 'node', text: 'NodeJS', value: 'node' }, + { key: 'plumbing', text: 'Plumbing', value: 'plumbing' }, + { key: 'python', text: 'Python', value: 'python' }, + { key: 'rails', text: 'Rails', value: 'rails' }, + { key: 'react', text: 'React', value: 'react' }, + { key: 'repair', text: 'Kitchen Repair', value: 'repair' }, + { key: 'ruby', text: 'Ruby', value: 'ruby' }, + { key: 'ui', text: 'UI Design', value: 'ui' }, + { key: 'ux', text: 'User Experience', value: 'ux' }, +] + + +export class DropDownTest extends React.Component { + constructor(props: any, context: any) { + super(props, context); + + this.state = { + notification_visible: false, + }; + + } + + + render() { + + + return ( +
    + + Home + + + Monitoring + + + Probe + + Mens + Shirts + Pants + Jeans + Shoes + + Womens + Dresses + Shoes + Bags + + + Sensors + + + + Infrastructure + Dashboard + Metrics + Alert + History + + + + + { + this.setState({ notification_visible: !this.state.notification_visible }) + }}> + + + + + + + + + + + + + + + + + + + + + + + + + + + Home + + + + Games + + + + Channels + + + + + + + + +
    + ); + } + + + +} +