Synnefo

  padding: 6px;

  margin-top: 9px;

  border-bottom: 1px solid #75A9C1;

  position: relative;

  left: 4px;

  margin-top: 10px;

    padding: 0px 10px;

.select-item input {

  cursor: pointer;

}

.select-item {

  font-size: 0.9em;

  padding: 5px 4px;

  margin-bottom: 3px;

  background-color: #efefef;

  cursor: pointer;

}

.select-item.selected {

  background-color: #4085A5;

}

.select-item.selected * {

  color: #fff;

}

.items-list.floating-ips {

  margin-top: -5px;

}

.select-item.floating-ip.not-available {

  background-image: none;

}

.select-item.floating-ip.create {

  padding-left: 34px;

  margin-bottom: 5px;

  background-image: url("../images/option-action-add-dark.png");

  background-repeat: no-repeat;

  background-position: 9px 7px;

}

.select-item.floating-ip.selected * {

  color: #222 !important;

  font-weight: bold;

}

.select-item.floating-ip {

  border-left: 10px solid #efefef;

  background-color: #ddd;

  margin-bottom: 0;

  border-bottom: 1px solid #efefef;

}

.select-item.private-network .name {

  float: left;

  width: 50%;

}

.select-item.private-network .cidr {

  float: left;

  width: 40%;

}

.select-item .name {

  float: left;

  width: 90%;

}

.select-item .ico {

  float: left;

  width: 5%;

}

.select-item .checkbox {

  float: left;

  width: 5%;

}

          if (subnets && subnets.length) { return subnets[0] }

        this.floating_ips = synnefo.storage.floating_ips;

        this.set({floating_ips: this.floating_ips});

        this.available_floating_ips = new Backbone.FilteredCollection(undefined, {

          collection: synnefo.storage.floating_ips,

          collectionFilter: function(m) {

            return !m.get('port_id');

          }

        });

        this.set({available_floating_ips: this.available_floating_ips});

              this.fetcher_params = [snf.config.update_interval, 

                    snf.config.update_interval_increase || 500,

                    snf.config.fast_interval || snf.config.update_interval/2, 

                    snf.config.update_interval_increase_after_calls || 4,

                    snf.config.update_interval_max || 20000,

                    true, 

                    {is_recurrent: true, update: true}];

            this.cont = this.$(".step-cont");

              this.networks_view = new views.NetworkSelectView({

                container: this.cont

              this.networks_view.hide(true);

            this.networks_view.show(true);

        hide_step: function() {

            this.networks_view && this.networks_view.hide(true);

        },

            if (!this.networks_view) { return [] }

            return this.networks_view.get_selected_networks();

            if (!this.networks_view) { return [] }

            return this.networks_view.get_selected_floating_ips();

                                  ip.get('floating_ip_address'));

                extra['networks'] = [];

                _.each(data.networks, function(n) {

                  extra.networks.push({'uuid': n.get('id')})

                });

                _.each(data.ips, function(ip) {

                  extra.networks.push({

                    'uuid': ip.get('network').get('id'),

                    'fixed_ip': ip.get('floating_ip_address')

                  });

                });

                _.map(data.networks, function(n) { return n.get('id') });

            this.current_view && this.current_view.hide_step && this.current_view.hide_step();

          floatingip: {}

    views.NetworkSelectModelView = views.ext.ModelView.extend({

      select: function() {

        if (!this.delegate_input) {

          this.input.attr("checked", true);

          this.item.addClass("selected");

        }

        this.selected = true;

        this.trigger("change:select", this, this.selected);

      },

      deselect: function() {

        if (!this.delegate_input) {

          this.input.attr("checked", false);

          this.item.removeClass("selected");

        }

        this.selected = false;

        this.trigger("change:select", this, this.selected);

      },

      toggle_select: function() {

        if (this.selected) { 

          this.deselect();

        } else {

          this.select();

        }

      },

      post_init_element: function() {

        this.input = $(this.$("input").get(0));

        this.item = $(this.$(".select-item").get(0));

        this.delegate_input = this.model.get('noselect');

        this.deselect();

        var self = this;

        if (self.model.get('forced')) {

          this.select();

          this.input.attr("disabled", true);

          $(this.el).attr('title', this.forced_title);

          $(this.el).tooltip({

            'tipClass': 'tooltip', 

            'position': 'top center',

            'offset': [-5, 0]

          });

        }

        $(this.item).click(function(e) {

          if (self.model.get('forced')) { return }

          e.stopPropagation();

          e.preventDefault();

          self.toggle_select();

        });

        views.NetworkSelectModelView.__super__.post_init_element.apply(this,

                                                                       arguments);

      }

    });

    views.NetworkSelectNetworkTypeModelView = views.NetworkSelectModelView.extend({

      get_network_icon: function() {

        var ico = this.model.get('is_public') ? 'internet-small.png' : 'network-small.png';

        return synnefo.config.media_url + 'images/' + ico;

      },

      forced_title: 'You machine will be automatically connected ' +

                    'to this network.'

    });

    views.NetworkSelectPublicNetwork = views.NetworkSelectNetworkTypeModelView.extend({

      tpl: '#networks-select-public-item-tpl',

      classes: 'public-network',

      post_init_element: function() {

        views.NetworkSelectPublicNetwork.__super__.post_init_element.apply(this);

        //$(this.el).attr('title', 'Public network tooltip');

        //$(this.el).tooltip({

          //'tipClass': 'tooltip', 

          //'position': 'top center',

          //'offset': [-5, 0]

        //});

      }

    });

    views.NetworkSelectPrivateNetwork = views.NetworkSelectNetworkTypeModelView.extend({

      tpl: '#networks-select-private-item-tpl',

      classes: 'private-network'

    });

    views.NetworkSelectTypeView = views.ext.CollectionView.extend({});

    views.NetworkSelectPublicNetworks = views.NetworkSelectTypeView.extend({

      tpl: '#networks-select-public-tpl',

      model_view_cls: views.NetworkSelectPublicNetwork,

      get_floating_ips: function() {

        return _.map(this._subviews[1]._subviews[0].selected, function(m) {

          return m.id;

        });

      }

    });

    views.NetworkSelectFloatingIpView = views.NetworkSelectModelView.extend({

      tpl: '#networks-select-floating-ip-tpl'

    });

    views.NetworkSelectFloatingIpsView = views.ext.CollectionView.extend({

      tpl: '#networks-select-floating-ips-tpl',

      model_view_cls: views.NetworkSelectFloatingIpView,

      select_available: function() {

        var selected = false;

        this.each_ip_view(function(v) { 

          if (selected) { return }

          v.select();

          selected = true;

        });

      },

      deselect_all: function() {

        this.each_ip_view(function(v) { v.deselect() });

      },

      each_ip_view: function(cb) {

        _.each(this._subviews, function(view) {

          if (view instanceof views.NetworkSelectFloatingIpView) {

            cb(view);

          }

        })

      },

      post_init: function() {

        this.selected = [];

        var parent = this.parent_view;

        var self = this;

        this.handle_ip_select = _.bind(this.handle_ip_select, this);

        this.create = this.$(".floating-ip.create");

        parent.bind("change:select", function(selected) {

          if (parent.selected) {

            self.show(true);

            self.select_available();

          } else {

            self.deselect_all();

            self.hide(true);

          }

        });

        this.create.click(function() {

          self.create_ip();

        })

      },

      post_add_model_view: function(view) {

        view.bind("change:select", this.handle_ip_select)

      },

      post_remove_model_view: function(view) {

        view.unbind("change:select", this.handle_ip_select)

      },

      handle_create_error: function() {},

      create_ip: function() {

        synnefo.storage.floating_ips.create({floatingip:{}}, {

          error: _.bind(this.handle_create_error, this),

          skip_api_error: true

        });

      },

      handle_ip_select: function(view) {

        if (view.selected) {

          this.selected.push(view.model);

        } else {

          this.selected = _.without(this.selected, view.model);

        }

        this.update_selected();

      },

      update_selected: function() {

        var selected = this.selected.length;

        if (selected) {

          this.parent_view.input.attr("checked", true);

          this.parent_view.item.addClass("selected");

          $(this.parent_view.el).addClass("selected");

        } else {

          this.parent_view.input.attr("checked", false);

          this.parent_view.item.removeClass("selected");

          $(this.parent_view.el).removeClass("selected");

        }

      },

      post_show: function() {

        if (!this.parent_view.selected) {

          this.hide(true);

        }

      },

      get_floating_ips: function() {

        return this.selected;

      }

    });

    views.NetworkSelectPrivateNetworks = views.NetworkSelectTypeView.extend({

      tpl: '#networks-select-private-tpl',

      model_view_cls: views.NetworkSelectPrivateNetwork,

      get_networks: function() {

        return _.filter(_.map(this._subviews, function(view) {

          if (view.selected) { return view.model.id }

        }), function(id) { return id });

      }

    });

    views.NetworkSelectView = views.ext.ModelView.extend({

      rivets_view: true,

      tpl: '#networks-select-view-tpl',

      select_public: true,

      initialize: function(options) {

        this.quotas = synnefo.storage.quotas.get('cyclades.private_network');

        options = options || {};

        options.model = options.model || new models.Model();

        this.private_networks = new Backbone.FilteredCollection(undefined, {

          collection: synnefo.storage.networks,

          collectionFilter: function(m) {

            return !m.get('is_public')

        }});

        this.public_networks = new Backbone.Collection();

        // forced networks

        // TODO: check config

        this.forced = new models.networks.Network({

          name: 'Public IPv6 Network', 

          subnets: [],

          is_public: true,

          forced: true

        });

        this.public_networks.add(this.forced);

        // combined public

        this.combined_public = new models.networks.CombinedPublicNetwork();

        this.combined_public.set({noselect: true, name: 'Internet'});

        this.public_networks.add(this.combined_public);

        model_attrs = {

          public_collection: this.public_networks,

          private_collection: this.private_networks,

          floating_selected: true

        }

        options.model.set(model_attrs);

        this._configure(options);

        return views.NetworkSelectView.__super__.initialize.call(this, options);

      },

      get_selected_floating_ips: function() {

        var ips = [];

        _.each(this._subviews, function(view) {

          if (view.get_floating_ips) {

            ips = _.union(ips, view.get_floating_ips());

          }

        }, this);

        return _.filter(

          _.map(ips, function(ipid) { 

          return synnefo.storage.floating_ips.get(parseInt(ipid))

        }), function(ip) { console.log("IP", ip); return ip });

      },

      get_selected_networks: function() {

        var networks = [];

        _.each(this._subviews, function(view) {

          if (view.get_networks) {

            networks = _.union(networks, view.get_networks());

          }

        }, this);

        return _.filter(

          _.map(networks, function(netid) { 

          return synnefo.storage.networks.get(netid)

        }), function(net) { return net });

      }

    });

<div id="networks-select-floating-ip-tpl" class="hidden">

  <div class="select-item floating-ip clearfix">

    <div class="checkbox">

      <input type="checkbox" data-rv-data-id="model.id" />

    </div>

    <div class="name" data-rv-text="model.floating_ip_address"></div>

  </div>

</div>

<div id="networks-select-floating-ips-tpl" class="hidden">

  <div class="collection">

    <div class="empty-list hidden">{% trans "No ip addresses available" %}</div>

    <div class="items-list floating-ips clearfix">

    </div>

    <div class="create model-item select-item floating-ip">create...</div>

  </div>

</div>

<div id="networks-select-public-item-tpl" class="hidden">

  <div class="select-item clearfix">

    <div class="checkbox">

      <input type="checkbox" data-rv-data-id="model.id" />

    </div>

    <div class="ico"><img data-rv-src="model.is_public|get_network_icon" /></div>

    <div class="name"><span class="" data-rv-text="model.name"></span></div>

  </div>

  <div data-rv-show="model.is_public" class="floating-ips">

    <div data-rv-collection-view="model.available_floating_ips|NetworkSelectFloatingIpsView">

    </div>

  </div>

</div>

<div id="networks-select-private-item-tpl" class="hidden">

  <div class="select-item private-network clearfix">

    <div class="checkbox"><input type="checkbox" data-rv-data-id="model.id"></div>

    <div class="ico"><img data-rv-src="model.is_public|get_network_icon" /></div>

    <div class="name"><span class="" data-rv-text="model.name"></span></div>

    <div class="cidr"><span class="" data-rv-text="model.subnet.cidr"></span></div>

  </div>

</div>

<div id="networks-select-public-tpl" class="hidden">

  <div class="collection">

    <div class="items-list">

    </div>

  </div>

</div>

<div id="networks-select-private-tpl" class="hidden">

  <div class="collection">

    <div class="items-list">

    </div>

  </div>

</div>

<div id="networks-select-view-tpl" class="hidden list-cont">

  <h4>{% trans "Available networks" %}</h4>

  <p class="desc">Select the networks you want your machine to get connected to.</p>

  <div class="network-select">

    <div class="public-list" 

      data-rv-collection-view="model.public_collection|NetworkSelectPublicNetworks">

    </div>

    <div class="private-list" 

      data-rv-collection-view="model.private_collection|NetworkSelectPrivateNetworks">

    </div>

  </div>

</div>