working on the create vm form

src/store/actions.js

@@ -28,12 +28,11 @@ export function signIn () {
   // using redux thunk https://github.com/gaearon/redux-thunk
   // instead of returning one promise, it can dispatch multiple events
   // that way it become trivial to inform user of progress
-  console.log(' will signin')
   return dispatch => {
     setTimeout(() => {
       // Yay! Can invoke sync or async actions with `dispatch`
       dispatch(signedIn({userId: Math.floor(Math.random() * 1000)}))
-    }, 2500)
+    }, 10)
 
     dispatch({type: 'SIGN_IN'}) // immediatly inform the sore that we'll try to signin
   }

src/store/reducers.js

@@ -66,7 +66,7 @@ function xoApiReducer (state = initialState.xoApi, action) {
         {},
         state,
         {
-          [action.payload.id]: action.payload
+          [action.payload.id]: payload
         }
       )
 

src/xo-app/index.js

@@ -19,7 +19,7 @@ const App = React.createClass({
     return (
       <div>
         <ul>
-          <li><Link to="/vm/create">createvm</Link></li>
+          <li><Link to="/vm/Lab1/create">createvm</Link></li>
           <li><Link to="/inbox">Inbox</Link></li>
         </ul>
         {this.props.children}
@@ -61,7 +61,7 @@ class XoAppUnconnected extends Component {
          {isLoggued &&
               <Router  history={hashHistory}>
                 <Route path="/" component={App}>
-                  <Route path="vm/:vmId" component={ VMForm } />
+                  <Route path="vm/:host/:vmId" component={ VMForm } host='lab1'/>
                   <Route path="inbox" component={Inbox}>
                     <Route path="messages/:id" component={Message} />
                   </Route>

src/xo-app/vm/form.js

@@ -22,16 +22,6 @@ const legendStyle = {
 */
 
 class VmForm extends Component {
-  constructor (props) {
-    super(props)
-    this.state = {
-      vmName: '',
-      vmTemplateId: 2
-    }
-  }
-  saveAuthorized () {
-      return !!this.state.vmName && !!this.state.vmTemplateId
-  }
   save (e){
     e.preventDefault()
     this.props.actions.VMSave(this.props.routeParams.vmId)
@@ -42,20 +32,126 @@ class VmForm extends Component {
         [field]:value
       })
   }
+
+  addSr ( e) {
+    e.preventDefault()
+    const vm = this.props.vm || {}
+    let srs = vm.srs || []
+    srs.push({})
+    this.props.actions.VMEdit({
+        id:this.props.routeParams.vmId,
+        srs:srs
+      })
+  }
+
+  editSr( index, field, value) {
+    const vm = this.props.vm || {}
+    let srs = vm.srs || []
+    srs[index].field = value
+    this.props.actions.VMEdit({
+        id:this.props.routeParams.vmId,
+        srs:srs
+      })
+  }
+  removeSr (e,index) {
+    e.preventDefault()
+    const vm = this.props.vm || {}
+    let srs = vm.srs || []
+    srs.splice(index,1)
+    this.props.actions.VMEdit({
+        id:this.props.routeParams.vmId,
+        srs:srs
+      })
+  }
   render () {
     const s = this.state
-    var saveable = this.saveAuthorized()
-    const {name,templateId, isSaving, isSaved } = this.props.vm || {}
+    const {name,templateId, isSaving, isSaved, desc, vcpus, ram , ramUnit, srs } = this.props.vm || {}
+    const {host} = this.props.routeParams
+    console.log('VM is now  ',this.props.vm)
+
     return (
-      <form onSubmit={(e)=>this.save(e)}>
-        <h2>Vm name : {name}</h2>
+      <form onSubmit={(e) => this.save(e)}>
+        <h2>Create VM on {host}</h2>
         <div style={fieldsetStyle}>
           <div style={legendStyle}>
-
+              Infos
           </div>
           <div style={inputContainerStyle}>
-            <label htmlFor='vm-edit-name'>Name </label>
-            <input id ='vm-edit-name' type='text' value={name} onChange={(e)=>this.patch("name",e.target.value)}/>
+            <label htmlFor='vm-edit-name'>Name : </label>
+            <input
+              id ='vm-edit-name'
+              type='text'
+              value={name}
+              onChange={(e) => this.patch('name', e.target.value)}/>
+            <label htmlFor='vm-template-id'>Template : </label>
+            <select
+              id='vm-template-id'
+              value={templateId}
+              onChange={(e) => this.patch('templateId', e.target.value)}>
+              <option></option>
+              <option value='0'>Template0</option>
+              <option value='1'>Template1</option>
+            </select>
+            <br/>
+            <label htmlFor='Description'>Description</label>
+            <input type='text'
+              value={desc}
+              placeholder='Optional description'
+              onChange={(e) => this.patch('desc', e.target.value)}/>
+          </div>
+        </div>
+
+        <div style={fieldsetStyle}>
+          <div style={legendStyle}>
+              Perf
+          </div>
+          <div style={inputContainerStyle}>
+            <label htmlFor='vm-edit-vcpus'>VCPUs : </label>
+            <input
+              id ='vm-edit-vcpus'
+              type='number'
+              value={vcpus}
+              onChange={(e) => this.patch('vcpus', e.target.value)}/>
+            <label htmlFor='vm-template-id'>Ram : </label>
+            <input type='number'
+              value={ram}
+              defaultValue='0'
+              onChange={(e) => this.patch('ram', e.target.value)}/>
+            <select
+              id='vm-edit-ramUnit'
+              value={ramUnit}
+              onChange={(e) => this.patch('ramUnit', e.target.value)}>
+              <option value='MB'>MB</option>
+              <option value='GB'>GB</option>
+              <option value='TB'>TB</option>
+            </select>
+          </div>
+        </div>
+
+        <div style={fieldsetStyle}>
+          <div style={legendStyle}>
+            Disks
+          </div>
+          <div style={inputContainerStyle}>
+            {(srs || []).map((sr, i)=>{
+              console.log('loop')
+              return <div key={'srs'+i} /*should be sr.id*/>
+                Name <input type='text' value={sr.name} onChange={(e) => this.editSr(i, 'name',e.target.value)}></input>
+              desc <input type='text' value={sr.mac} placeholder='optionnal desc'  onChange={(e) => this.editSr(i, 'desc',e.target.value)}></input>
+              <button onClick={(e) => this.removeSr(e,i)}> X</button>
+              </div>
+            })}
+            <button onClick={(e) => this.addSr(e)}>+ addInterface</button>
+
+          </div>
+        </div>
+
+        <div style={fieldsetStyle}>
+          <div style={legendStyle}>
+            Summary
+          </div>
+          <div style={inputContainerStyle}>
+            {vcpus} x cpus {ram} {ramUnit || 'MB'}
           </div>
         </div>
         {!isSaving && !isSaved &&