Issue 234 [DO NOT MERGE]

Makefile

@@ -74,7 +74,7 @@ install-dev:
 	-cp css/css_framework/* public/stylesheets/
 	-cp css/d3_components/d3Framework.css public/stylesheets/
 	-cp js/util/*.js public/javascripts/library/
-	sed -i.bak "s~$(subst $\",,$(match))~$(subst $\",,$(match))\\$(bootstrap)\\$(subst $\",,$(framework))\\$(subst $\",,$(chosen))\\$(subst $\",,$(chosen))\\$(subst $\",,$(d3))\\ $(subst $\",,$(jquery))\\$(subst $\",,$(jqueryui))\\$(subst $\",,$(datamanager))\\$(subst $\",,$(loadDatamanager))\\ $(subst $\",,$(validations))~" views/$(subst $\",,$(file))
+	sed -i.bak "s~$(subst $\",,$(match))~$(subst $\",,$(match))\\$(bootstrap)\\$(subst $\",,$(framework))\\$(subst $\",,$(chosen))\\$(subst $\",,$(chosen))\\$(subst $\",,$(d3))\\ $(subst $\",,$(jquery))\\ $(subst $\",,$(jquerychosen))\\ $(subst $\",,$(jqueryui))\\$(subst $\",,$(datamanager))\\$(subst $\",,$(datamanager))$(subst $\",,$(datamanager))    jquerychosen $(subst $\",,$(loadDatamanager))\\ $(subst $\",,$(validations))~" views/$(subst $\",,$(file))
 	-mkdir -p $(DESTDIR)/ciao-webui/
 	-mkdir -p $(DESTDIR)/share/ciao-webui
 	-cp config/ciao_config.json $(DESTDIR)/share/ciao-webui/

core/blockService.js

@@ -48,7 +48,8 @@ blockService.prototype.createVolume = function () {
 
         var jsonBody = req.body.volume? req.body :{ volume: {
             size:req.body.size,
-            name: req.body.name
+            name: req.body.name,
+            imageRef: req.body.imageRef
         }};
         // add optional values
         if (req.body.description) {

deploy.sh

@@ -42,13 +42,14 @@ match="</title>"
 bootstrap="$cssStart/bootstrap/dist/css/bootstrap.min.css$cssEnd"
 framework="$cssStart/stylesheets/framework.css$cssEnd"
 d3="$cssStart/stylesheets/d3Framework.css$cssEnd"
+chosen="$cssStart/stylesheets/chosen.css$cssEnd"
 jquery="$jsStart/jquery/dist/jquery.js$jsEnd"
 jqueryui="$jsStart/jquery-ui/jquery-ui.js$jsEnd"
 datamanager="$jsStart/data/dataManager.js$jsEnd"
 loadDatamanager="<script type='text/javascript'>window.datamanager.loadData((<%- JSON.stringify(data)%>));</script>"
 validations="$jsStart/javascripts/library/validations.js$jsEnd"
 # Delete .bak (this is just for mac)
 # Replace \\ for \n (this is just for mac)
-sed -i.bak "s~$match~$match\\$bootstrap\\$framework\\$d3\\$jquery\\$jqueryui\\$datamanager\\$loadDatamanager\\$validations~" views/$file
+sed -i.bak "s~$match~$match\\$bootstrap\\$framework\\$d3\\$chosen\\$jquery\\$jqueryui\\$datamanager\\$loadDatamanager\\$validations~" views/$file
 
 npm start -- "$@"

js/components/catalogue/customModal.js

@@ -5,6 +5,7 @@ var Modal = reactBootstrap.Modal;
 var Button = reactBootstrap.Button;
 var Input = reactBootstrap.Input;
 var Alert = reactBootstrap.Alert;
+var Select = require('react-select');
 
 /* Custom modal usage
    Properties
@@ -40,6 +41,7 @@ var customModal = React.createClass({
             showModal: true,
             showAlert:false,
             data:[]
+
         };
     },
 
@@ -52,11 +54,17 @@ var customModal = React.createClass({
         };
     },
 
-    onChange: function( key, event ) {
+    onChange: function( key, type, event ) {
 
         if(event){
             var data = this.state.data;
-            data[key] = (event.target)?event.target.value:event.value;
+
+            if(type == 'checkbox'){
+                data[key] = event.target.checked;
+            }else{
+                data[key] = (event.target)?event.target.value:event.value;
+            }
+
             this.setState({data: data});
         }else{
             var data = this.state.data;
@@ -66,71 +74,98 @@ var customModal = React.createClass({
 
     },
 
+    getField: function(row){
+
+       // console.log('row', row);
+
+        var label = (row.validate.required)?row.label + '*':row.label;
+        switch(row.field) {
+            case "input":
+                return <Input
+                id={row.id}
+                label={label}
+                value={this.state.data[row.name]}
+                onChange={this.onChange.bind(this, row.name, row.type)}
+                type={row.type} />;
+            break;
+            case "textarea":
+                return React.createElement(
+                  'div',
+                  null,
+                  React.createElement(
+                    'div',
+                    { className: 'form-group' },
+                  <label class="control-label" >
+                  {row.label}
+                </label>
+                ),
+                React.createElement(
+                  'div',
+                  { className: 'form-group' },
+                  React.createElement(
+                    'textarea',
+                    {
+                        id: row.id,
+                        className: 'form-control' ,
+                        label:label,
+                        value:this.state.data[row.name],
+                        onChange: this.onChange.bind(this, row.name, row.type)
+
+                    },
+                    ''
+                  )
+                )
+                );
+            break;
+            case "select":
+                return <Select
+                id={row.id}
+
+                name={row.name}
+                label={label}
+                value={this.state.data[row.name]}
+                placeholder={row.placeholder?row.placeholder:label}
+                onChange={this.onChange.bind(this, row.name, row.type)}
+                options={row.options}
+                />;
+
+            break;
+            default:
+                return React.createElement(
+                    'p', {},'field not implemented'
+                );
+        }
+    },
+
     getBody: function(){
         if(this.props.type == 'form'){
             return this.props.fields.map((row, i) => {
 
-                var label = (row.validate.required)?row.label + '*':row.label;
-                switch(row.field) {
-                case "input":
-                    return <Input
-                                id={row.id}
-                                label={label}
-                                value={this.state.data[row.name]}
-                                onChange={this.onChange.bind(this, row.name)}
-                                type={row.type} />;
-                    break;
-                case "textarea":
-                    return React.createElement(
-                                'div',
-                                null,
-                                React.createElement(
-                                    'div',
-                                    { className: 'form-group' },
-                                    <label class="control-label" >
-                                        {row.label}
-                                    </label>
-                                ),
-                                React.createElement(
-                                    'div',
-                                    { className: 'form-group' },
-                                    React.createElement(
-                                        'textarea',
-                                        {
-                                          id: row.id,
-                                          className: 'form-control' ,
-                                          label:label,
-                                          value:this.state.data[row.name],
-                                          onChange: this.onChange.bind(this, row.name)
-                                        },
-                                        ''
-                                    )
-                                )
-                            );
-                    break;
-                case "select":
-                    return <Select
-                            id={row.id}
-                            name={row.id}
-                            label={label}
-                            value={this.state.data[row.name]}
-                            placeholder={row.placeholder?row.placeholder:""}
-                            onChange={this.onChange.bind(this, row.name)}
-                            options={row.options}
-                            />;
-
-                    break;
-                default:
-                    return React.createElement(
-                        'p', {},'field not implemented'
-                    );
+                if(this.props.conditions &&
+                    this.props.conditions[row.name]){
+                    var fieldCond = this.props.conditions[row.name];
+
+                    if(fieldCond){
+
+                        if(this.state.data[fieldCond] ){
+                            return this.getField(row);
+                        }else{
+                            return null;
+                        }
+                    }else{
+                        return this.getField(row);
+                    }
+                }else{
+                    return this.getField(row);
                 }
+
             });
         }else{
             return React.createElement(
-                'p', {},this.props.body
+              'p', {},this.props.body
             );
         }
+
     },
     //Return true if the field is empty
     isEmpty: function(field){
@@ -214,7 +249,7 @@ var customModal = React.createClass({
 
     handleSubmit: function () {
         if(this.isValid()){
-            this.props.onAccept(this.state.data, this.state);
+            this.props.onAccept(this.state.data);
             this.setState({showModal:false, data: []});
         }
     },