2 * STANDARD_RIFT_IO_COPYRIGHT
5 import React from 'react';
6 import AppHeader from 'widgets/header/header.jsx';
7 import ConfigStore from './configStore.js';
8 import SkyquakeComponent from 'widgets/skyquake_container/skyquakeComponent.jsx';
9 import 'style/layout.scss';
10 import './config.scss';
11 import {Panel, PanelWrapper} from 'widgets/panel/panel';
12 import TextInput from 'widgets/form_controls/textInput.jsx';
13 import Button from 'widgets/button/rw.button.js';
15 class ConfigDashboard extends React.Component {
18 this.Store = this.props.flux.stores.hasOwnProperty('ConfigStore') ? this.props.flux.stores.ConfigStore : this.props.flux.createStore(ConfigStore);
19 this.state = this.Store.getState();
21 componentWillMount() {
22 this.Store.listen(this.updateState);
23 this.Store.getResourceOrchestrator();
25 componentWillUnmount() {
26 this.Store.unlisten(this.updateState);
28 updateState = (state) => {
31 updateAccount = (e) => {
34 this.Store.update(this.state.account);
39 let Account = this.state.account;
40 let AccountMeta = this.state.AccountMeta;
41 let AccountType = this.state.accountType;
43 let ParamsHTML = null;
44 let Store = this.Store;
45 let Types = this.state.AccountMeta['account-types'];
47 let selectAccountStack = [];
48 let selectAccountHTML = null;
51 if (Account['account-type']) {
52 for (var i = 0; i < Types.length; i++) {
54 var isSelected = (Account['account-type'] == node);
55 selectAccountStack.push(
56 <label key={i} className={"accountSelection " + (isSelected ? "accountSelection--isSelected" : "")}>
57 <div className={"accountSelection-overlay" + (isSelected ? "accountSelection-overlay--isSelected" : "")}></div>
58 <div className="accountSelection-imageWrapper">
59 <img src={Store.getImage(node)}/>
61 <input type="radio" name="account"
62 onChange={Store.handleAccountTypeChange} defaultChecked={node == Types[0]} value={node} />{node}
67 <Panel className="accountForm" title="Select Account Type" no-corners>
68 <div className="select-type accountForm-content row" >
75 if (AccountMeta[AccountType] && AccountMeta[AccountType].length > 0) {
77 var optionalField = '';
78 for (var i = 0; i < AccountMeta[AccountType].length; i++) {
79 var node = AccountMeta[AccountType][i];
81 if (Account[AccountType]) {
82 value = Account[AccountType][node.ref]
85 <TextInput key={node.label} className="accountForm-input" label={node.label} required={!node.optional} onChange={this.Store.handleParamChange(node)} value={value} />
89 <Panel className="create-fleet-pool accountForm" title={(isEdit ? 'Update' : 'Enter') + ' Account Details'} no-corners>
90 <div className="accountForm-content">
97 <Panel className="create-fleet-pool accountForm" title={(isEdit ? 'Update' : 'Enter') + ' Account Details'} no-corners>
98 <label style={{'marginLeft':'17px', color:'#888'}}>No Details Required</label>
106 <PanelWrapper className="column Config" style={{'alignContent': 'center', 'flexDirection': 'column'}}>
107 <form className="app-body create Accounts" onSubmit={this.preventDefault} onKeyDown={this.evaluateSubmit}>
108 <div className="noticeSubText noticeSubText_right">
112 <Panel className="create-fleet-pool accountForm" title="Resource Orchestrator" no-corners>
113 <div className="accountForm-content">
114 <TextInput className="accountForm-input" label={"Name"} onChange={this.Store.handleNameChange} value={Account.name} />
125 <div className="form-actions">
126 <Button key="4" role="button" className="update dark" label="Update" onClick={this.updateAccount} />
134 // onClick={this.Store.update.bind(null, Account)}
135 ConfigDashboard.contextTypes = {
136 router: React.PropTypes.object
139 export default SkyquakeComponent(ConfigDashboard);