Revision 9c8f31ad snf-cyclades-app/synnefo/ui/static/snf/js/ui/web/ui_networks_view.js
| b/snf-cyclades-app/synnefo/ui/static/snf/js/ui/web/ui_networks_view.js | ||
|---|---|---|
| 407 | 407 |
} |
| 408 | 408 |
this.ports_toggler.find(".cont-toggler").toggleClass("open");
|
| 409 | 409 |
this.ports_visible = this.ports_toggler.find(".cont-toggler").hasClass("open");
|
| 410 |
if (this.ports_visible) {
|
|
| 411 |
$(this.el).addClass("hovered");
|
|
| 412 |
} else {
|
|
| 413 |
$(this.el).removeClass("hovered");
|
|
| 414 |
} |
|
| 410 | 415 |
}, |
| 411 | 416 |
|
| 412 | 417 |
get_network_icon: function() {
|
| ... | ... | |
| 694 | 699 |
|
| 695 | 700 |
views.NetworkSelectModelView = views.ext.ModelView.extend({
|
| 696 | 701 |
select: function() {
|
| 697 |
if (!this.delegate_input) {
|
|
| 702 |
if (!this.delegate_checked) {
|
|
| 698 | 703 |
this.input.attr("checked", true);
|
| 699 | 704 |
this.item.addClass("selected");
|
| 700 | 705 |
} |
| ... | ... | |
| 703 | 708 |
}, |
| 704 | 709 |
|
| 705 | 710 |
deselect: function() {
|
| 706 |
if (!this.delegate_input) {
|
|
| 711 |
if (!this.delegate_checked) {
|
|
| 707 | 712 |
this.input.attr("checked", false);
|
| 708 | 713 |
this.item.removeClass("selected");
|
| 709 | 714 |
} |
| ... | ... | |
| 722 | 727 |
post_init_element: function() {
|
| 723 | 728 |
this.input = $(this.$("input").get(0));
|
| 724 | 729 |
this.item = $(this.$(".select-item").get(0));
|
| 725 |
this.delegate_input = this.model.get('noselect');
|
|
| 730 |
this.delegate_checked = this.model.get('noselect');
|
|
| 726 | 731 |
this.deselect(); |
| 727 | 732 |
|
| 728 | 733 |
var self = this; |
| ... | ... | |
| 733 | 738 |
$(this.el).tooltip({
|
| 734 | 739 |
'tipClass': 'tooltip', |
| 735 | 740 |
'position': 'top center', |
| 736 |
'offset': [-5, 0]
|
|
| 741 |
'offset': [29, 0]
|
|
| 737 | 742 |
}); |
| 738 | 743 |
} |
| 739 |
|
|
| 744 |
|
|
| 740 | 745 |
$(this.item).click(function(e) {
|
| 741 | 746 |
if (self.model.get('forced')) { return }
|
| 742 | 747 |
e.stopPropagation(); |
| 743 |
e.preventDefault(); |
|
| 744 | 748 |
self.toggle_select(); |
| 745 | 749 |
}); |
| 746 | 750 |
|
| ... | ... | |
| 783 | 787 |
tpl: '#networks-select-public-tpl', |
| 784 | 788 |
model_view_cls: views.NetworkSelectPublicNetwork, |
| 785 | 789 |
get_floating_ips: function() {
|
| 786 |
return _.map(this._subviews[1]._subviews[0].selected, function(m) {
|
|
| 790 |
return _.map(this._subviews[1]._subviews[0].selected_ips, function(m) {
|
|
| 787 | 791 |
return m.id; |
| 788 | 792 |
}); |
| 789 | 793 |
} |
| ... | ... | |
| 797 | 801 |
tpl: '#networks-select-floating-ips-tpl', |
| 798 | 802 |
model_view_cls: views.NetworkSelectFloatingIpView, |
| 799 | 803 |
|
| 800 |
select_available: function() {
|
|
| 804 |
select_if_available: function() {
|
|
| 801 | 805 |
var selected = false; |
| 802 |
this.each_ip_view(function(v) {
|
|
| 803 |
if (selected) { return }
|
|
| 804 |
v.select(); |
|
| 805 |
selected = true; |
|
| 806 |
}); |
|
| 806 |
if (this._subviews[0]) {
|
|
| 807 |
this._subviews[0].select(); |
|
| 808 |
} |
|
| 807 | 809 |
}, |
| 808 | 810 |
|
| 809 | 811 |
deselect_all: function() {
|
| ... | ... | |
| 819 | 821 |
}, |
| 820 | 822 |
|
| 821 | 823 |
post_init: function() {
|
| 822 |
this.selected = []; |
|
| 823 | 824 |
var parent = this.parent_view; |
| 824 | 825 |
var self = this; |
| 826 |
|
|
| 827 |
this.quota = synnefo.storage.quotas.get("cyclades.floating_ip");
|
|
| 828 |
this.selected_ips = []; |
|
| 825 | 829 |
this.handle_ip_select = _.bind(this.handle_ip_select, this); |
| 826 | 830 |
this.create = this.$(".floating-ip.create");
|
| 827 |
parent.bind("change:select", function(selected) {
|
|
| 828 |
if (parent.selected) {
|
|
| 829 |
self.show(true);
|
|
| 830 |
self.select_available();
|
|
| 831 |
} else {
|
|
| 832 |
self.deselect_all(); |
|
| 833 |
self.hide(true);
|
|
| 834 |
} |
|
| 835 |
}); |
|
| 831 |
|
|
| 832 |
this.quota.bind("change", _.bind(this.update_available, this));
|
|
| 833 |
this.collection.bind("change", _.bind(this.update_available, this))
|
|
| 834 |
this.collection.bind("add", _.bind(this.update_available, this))
|
|
| 835 |
this.collection.bind("remove", _.bind(this.update_available, this))
|
|
| 836 |
|
|
| 837 |
parent.bind("change:select", function(view, selected) {
|
|
| 838 |
if (selected) { this.show_parent() } else { this.hide_parent() }
|
|
| 839 |
}, this);
|
|
| 836 | 840 |
|
| 837 |
this.create.click(function() {
|
|
| 841 |
this.create.click(function(e) {
|
|
| 842 |
e.preventDefault(); |
|
| 838 | 843 |
self.create_ip(); |
| 839 |
}) |
|
| 844 |
}); |
|
| 845 |
this.update_available(); |
|
| 840 | 846 |
}, |
| 841 | 847 |
|
| 842 |
post_add_model_view: function(view) {
|
|
| 843 |
view.bind("change:select", this.handle_ip_select)
|
|
| 848 |
hide_parent: function() {
|
|
| 849 |
this.parent_view.item.removeClass("selected");
|
|
| 850 |
this.parent_view.input.attr("checked", false);
|
|
| 851 |
this.parent_view.selected = false; |
|
| 852 |
this.deselect_all(); |
|
| 853 |
this.hide(true); |
|
| 854 |
}, |
|
| 855 |
|
|
| 856 |
show_parent: function() {
|
|
| 857 |
var left = this.quota.get_available(); |
|
| 858 |
var available = this.collection.length || left; |
|
| 859 |
if (!available) {
|
|
| 860 |
this.hide_parent(); |
|
| 861 |
return; |
|
| 862 |
} |
|
| 863 |
this.parent_view.item.addClass("selected");
|
|
| 864 |
this.parent_view.input.attr("checked", true);
|
|
| 865 |
this.parent_view.selected = true; |
|
| 866 |
this.show(true); |
|
| 867 |
this.select_if_available(); |
|
| 868 |
}, |
|
| 869 |
|
|
| 870 |
update_available: function() {
|
|
| 871 |
var left = this.quota.get_available(); |
|
| 872 |
var available = this.collection.length || left; |
|
| 873 |
var available_el = this.parent_view.$(".available");
|
|
| 874 |
var no_available_el = this.parent_view.$(".no-available");
|
|
| 875 |
var create = this.$(".create.model-item");
|
|
| 876 |
var create_link = this.$(".create a");
|
|
| 877 |
var create_no_available = this.$(".create .no-available");
|
|
| 878 |
|
|
| 879 |
if (!available) {
|
|
| 880 |
// no ip's available to select |
|
| 881 |
this.hide_parent(); |
|
| 882 |
available_el.hide(); |
|
| 883 |
no_available_el.show(); |
|
| 884 |
} else {
|
|
| 885 |
// available floating ip |
|
| 886 |
var available_text = "{0} IP's available.".format(
|
|
| 887 |
this.collection.length + this.quota.get_available()); |
|
| 888 |
available_el.removeClass("hidden").text(available_text).show();
|
|
| 889 |
available_el.show(); |
|
| 890 |
no_available_el.hide(); |
|
| 891 |
} |
|
| 892 |
|
|
| 893 |
if (left) {
|
|
| 894 |
// available quota |
|
| 895 |
create.removeClass("no-available");
|
|
| 896 |
create.show(); |
|
| 897 |
//create_link.show(); |
|
| 898 |
create_no_available.hide(); |
|
| 899 |
} else {
|
|
| 900 |
// no available quota |
|
| 901 |
create.addClass("no-available");
|
|
| 902 |
create.show(); |
|
| 903 |
//create_link.hide(); |
|
| 904 |
create_no_available.show(); |
|
| 905 |
} |
|
| 906 |
// |
|
| 907 |
this.update_selected(); |
|
| 908 |
}, |
|
| 909 |
|
|
| 910 |
update_selected: function() {
|
|
| 911 |
if (this.selected_ips.length) {
|
|
| 912 |
this.parent_view.input.attr("checked", true);
|
|
| 913 |
this.parent_view.item.addClass("selected");
|
|
| 914 |
this.parent_view.item.selected = true; |
|
| 915 |
} else {
|
|
| 916 |
this.parent_view.input.attr("checked", false);
|
|
| 917 |
this.parent_view.item.removeClass("selected");
|
|
| 918 |
this.parent_view.item.selected = false; |
|
| 919 |
} |
|
| 844 | 920 |
}, |
| 845 | 921 |
|
| 846 | 922 |
post_remove_model_view: function(view) {
|
| 923 |
view.deselect(); |
|
| 847 | 924 |
view.unbind("change:select", this.handle_ip_select)
|
| 848 | 925 |
}, |
| 849 | 926 |
|
| 850 | 927 |
handle_create_error: function() {},
|
| 851 | 928 |
|
| 852 | 929 |
create_ip: function() {
|
| 930 |
if (!this.quota.get_available()) { return }
|
|
| 853 | 931 |
synnefo.storage.floating_ips.create({floatingip:{}}, {
|
| 854 | 932 |
error: _.bind(this.handle_create_error, this), |
| 855 | 933 |
skip_api_error: true |
| 856 | 934 |
}); |
| 857 | 935 |
}, |
| 858 | 936 |
|
| 937 |
post_add_model_view: function(view, model) {
|
|
| 938 |
view.bind("change:select", this.handle_ip_select)
|
|
| 939 |
if (!this.selected_ips.length && this._subviews.length == 1) {
|
|
| 940 |
this._subviews[0].select(); |
|
| 941 |
if (!_.contains(this.selected_ips, model)) {
|
|
| 942 |
this.selected_ips.push(model); |
|
| 943 |
} |
|
| 944 |
} |
|
| 945 |
}, |
|
| 946 |
|
|
| 859 | 947 |
handle_ip_select: function(view) {
|
| 860 | 948 |
if (view.selected) {
|
| 861 |
this.selected.push(view.model); |
|
| 949 |
if (!_.contains(this.selected_ips, view.model)) {
|
|
| 950 |
this.selected_ips.push(view.model); |
|
| 951 |
} |
|
| 862 | 952 |
} else {
|
| 863 |
this.selected = _.without(this.selected, view.model);
|
|
| 953 |
this.selected_ips = _.without(this.selected_ips, view.model);
|
|
| 864 | 954 |
} |
| 865 | 955 |
this.update_selected(); |
| 866 | 956 |
}, |
| 867 | 957 |
|
| 868 |
update_selected: function() {
|
|
| 869 |
var selected = this.selected.length; |
|
| 870 |
if (selected) {
|
|
| 871 |
this.parent_view.input.attr("checked", true);
|
|
| 872 |
this.parent_view.item.addClass("selected");
|
|
| 873 |
$(this.parent_view.el).addClass("selected");
|
|
| 874 |
} else {
|
|
| 875 |
this.parent_view.input.attr("checked", false);
|
|
| 876 |
this.parent_view.item.removeClass("selected");
|
|
| 877 |
$(this.parent_view.el).removeClass("selected");
|
|
| 878 |
} |
|
| 879 |
}, |
|
| 880 |
|
|
| 881 | 958 |
post_show: function() {
|
| 882 |
if (!this.parent_view.selected) {
|
|
| 883 |
this.hide(true); |
|
| 884 |
} |
|
| 959 |
this.update_available(); |
|
| 885 | 960 |
}, |
| 886 | 961 |
|
| 887 | 962 |
get_floating_ips: function() {
|
| 888 |
return this.selected; |
|
| 963 |
return this.selected_ips;
|
|
| 889 | 964 |
} |
| 890 | 965 |
}); |
| 891 | 966 |
|
Also available in: Unified diff