skyquake/plugins/config/src/dashboard/dashboard.jsx

   1 /*
   2  * STANDARD_RIFT_IO_COPYRIGHT
   3  */
   4
   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';
  14
  15 class ConfigDashboard extends React.Component {
  16     constructor(props) {
  17         super(props);
  18         this.Store = this.props.flux.stores.hasOwnProperty('ConfigStore') ? this.props.flux.stores.ConfigStore : this.props.flux.createStore(ConfigStore, "ConfigStore");
  19         this.state = this.Store.getState();
  20     }
  21     componentWillMount() {
  22         this.Store.listen(this.updateState);
  23         this.Store.getResourceOrchestrator();
  24     }
  25     componentWillUnmount() {
  26         this.Store.unlisten(this.updateState);
  27     }
  28     updateState = (state) => {
  29         this.setState(state);
  30     }
  31     updateAccount = (e) => {
  32         e.preventDefault();
  33         e.stopPropagation();
  34         this.Store.update(this.state.account);
  35     }
  36     render() {
  37         let self = this;
  38         let html;
  39         let Account = this.state.account;
  40         let AccountMeta = this.state.AccountMeta;
  41         let AccountType = this.state.accountType;
  42         let isEdit = true;
  43         let ParamsHTML = null;
  44         let Store = this.Store;
  45         let Types = this.state.AccountMeta['account-types'];
  46
  47         let selectAccountStack = [];
  48         let selectAccountHTML = null;
  49
  50
  51         if (Account['account-type']) {
  52             for (var i = 0; i < Types.length; i++) {
  53                 var node = Types[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)}/>
  60                     </div>
  61                     <input type="radio" name="account"
  62                         onChange={Store.handleAccountTypeChange} defaultChecked={node == Types[0]} value={node} />{node}
  63                   </label>
  64                 )
  65             }
  66             selectAccountHTML = (
  67                 <Panel className="accountForm" title="Select Account Type" no-corners>
  68                     <div className="select-type accountForm-content row" >
  69                         {selectAccountStack}
  70                     </div>
  71                 </Panel>
  72             );
  73         }
  74
  75         if (AccountMeta[AccountType] && AccountMeta[AccountType].length > 0) {
  76             var paramsStack = [];
  77             var optionalField = '';
  78             for (var i = 0; i < AccountMeta[AccountType].length; i++) {
  79                 var node = AccountMeta[AccountType][i];
  80                 var value = ""
  81                 if (Account[AccountType]) {
  82                     value = Account[AccountType][node.ref]
  83                 }
  84                 paramsStack.push(
  85                     <TextInput key={node.label} className="accountForm-input" label={node.label} required={!node.optional}  onChange={this.Store.handleParamChange(node)} value={value} />
  86                 );
  87             }
  88             ParamsHTML = (
  89                 <Panel className="create-fleet-pool accountForm" title={(isEdit ? 'Update' : 'Enter') +  ' Account Details'} no-corners>
  90                     <div className="accountForm-content">
  91                         {paramsStack}
  92                     </div>
  93                 </Panel>
  94             )
  95         } else {
  96             ParamsHTML = (
  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>
  99                 </Panel>
 100             )
 101         }
 102
 103
 104
 105         html = (
 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">
 109                     * required
 110                 </div>
 111                 <div>
 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} />
 115                         </div>
 116                     </Panel>
 117
 118                             {
 119                                 selectAccountHTML
 120                             }
 121                             {
 122                                 ParamsHTML
 123                             }
 124                 </div>
 125                 <div className="form-actions">
 126                     <Button key="4" role="button" className="update dark" label="Update"  onClick={this.updateAccount} />
 127                 </div>
 128             </form>
 129             </PanelWrapper>
 130         );
 131         return html;
 132     }
 133 }
 134 // onClick={this.Store.update.bind(null, Account)}
 135 ConfigDashboard.contextTypes = {
 136     router: React.PropTypes.object
 137 };
 138
 139 export default SkyquakeComponent(ConfigDashboard);