prove download

src/ts/containers/prove/download.tsx

@@ -1,56 +1,69 @@
 import * as React from 'react';
-
-import { List, ListItem } from 'material-ui/List';
-import ContentInbox from 'material-ui/svg-icons/content/inbox';
-import ActionGrade from 'material-ui/svg-icons/action/grade';
-import ContentSend from 'material-ui/svg-icons/content/send';
-import ContentDrafts from 'material-ui/svg-icons/content/drafts';
-import Divider from 'material-ui/Divider';
-import ActionInfo from 'material-ui/svg-icons/action/info';
 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 = {
-    container: {
+    osSelector : {
-        textAlign: "center",
+       display: 'inline-block',
-        width: 250,
+       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 style={styles.container}>
+                <div>  
-                    <List>
+                    <div>
-                        <ListItem primaryText="Mac OS X" leftIcon={<ContentInbox />} />
+                        <Paper style={styles.osSelector}>
-                        <ListItem primaryText="Windows" leftIcon={<ContentInbox />} />
+                            <Menu onItemTouchTap={this.handleOSChange.bind(this)}>
-                        <ListItem primaryText="Debian" leftIcon={<ContentInbox />} />
+                                <MenuItem primaryText="Windows" leftIcon={<ContentCopy />} />
-                        <ListItem primaryText="Ubuntu" leftIcon={<ContentInbox />} />
+                                <MenuItem primaryText="Ubuntu" leftIcon={<ContentCopy />} />
-                        <ListItem primaryText="Amazon Linux" leftIcon={<ContentInbox />} />
+                                <MenuItem primaryText="Mac OS X" leftIcon={<ContentCopy />} />
-                        <ListItem primaryText="CentOS/RedJat" leftIcon={<ContentInbox />} />
+                                <MenuItem primaryText="Docker" leftIcon={<ContentCopy />} />
-                        <ListItem primaryText="Fedora" leftIcon={<ContentInbox />} />
+                                <MenuItem primaryText="Debian" leftIcon={<ContentCopy />} />
-                        <ListItem primaryText="SUSE" leftIcon={<ContentInbox />} />
+                                <MenuItem primaryText="CentOS" leftIcon={<ContentCopy />} />
-                        <ListItem primaryText="CoreOS" leftIcon={<ContentInbox />} />
+                                <MenuItem primaryText="Fedora" leftIcon={<ContentCopy />} />
-                        <ListItem primaryText="Docker" leftIcon={<ContentInbox />} />
+                            </Menu>
-                        <ListItem primaryText="Kubernetes" leftIcon={<ContentInbox />} />
+                        </Paper>
-                        <ListItem primaryText="Openshift" leftIcon={<ContentInbox />} />
-                        <ListItem primaryText="Chef" leftIcon={<ContentInbox />} />
-                        <ListItem primaryText="Puppet" leftIcon={<ContentInbox />} />
-                        <ListItem primaryText="Ansible" leftIcon={<ContentInbox />} />
-                        <ListItem primaryText="From Source" leftIcon={<ContentInbox />} />
-                    </List>
 
+                        <Paper style={styles.content}>
+                            <InstallGuide idx={this.state.selectedOSidx} name={this.state.selectedOSName}/>
+                        </Paper>
+
+                    </div>
                 </div>
             </MuiThemeProvider>
         );

src/ts/containers/prove/installguide.tsx

@@ -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>
+        );
+    }
+}

src/ts/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import * as injectTapEventPlugin from 'react-tap-event-plugin';
+
 import { MemberRegist } from './containers/member/regist';
 import { MemberRegistResult } from './containers/member/registResult';
 import { MemberEmailConfirm } from './containers/member/emailConfirm';
@@ -14,6 +15,6 @@ import '../scss/index.scss';
 injectTapEventPlugin();
 
 ReactDOM.render(
-    <MemberRegist />,
+    <ProveDownload />,
     document.getElementById('example')
 );

webpack.config.js

@@ -26,7 +26,7 @@ module.exports = {
         historyApiFallback: true,
         contentBase: [__dirname + '/public', __dirname + '/dist', __dirname + '/node_modules'], // match the output path
         publicPath:  '/' ,// match the output `publicPath`
-        host: '192.168.1.209',
+        host: '127.0.0.1',
         port: 9091,
         stats: { 
             colors: true