diff --git a/app/assets/javascripts/foreman_fog_proxmox/proxmox_vm.js b/app/assets/javascripts/foreman_fog_proxmox/proxmox_vm.js index ba0249014..b4e82a1f5 100644 --- a/app/assets/javascripts/foreman_fog_proxmox/proxmox_vm.js +++ b/app/assets/javascripts/foreman_fog_proxmox/proxmox_vm.js @@ -15,8 +15,6 @@ // You should have received a copy of the GNU General Public License // along with ForemanFogProxmox. If not, see . -//= require jquery-ui/widgets/accordion - $(document).ready(vmTypeSelected); function vmTypeSelected() { @@ -25,13 +23,21 @@ function vmTypeSelected() { var host_uuid = $("input[id='host_uuid']").val(); var new_vm = host_uuid == undefined; var fieldsets = []; + var fieldconfig = []; fieldsets.push({id: 'config_advanced_options', toggle: true, new_vm: new_vm, selected: selected}); fieldsets.push({id: 'config_ext', toggle: true, new_vm: new_vm, selected: selected}); fieldsets.push({id: 'volume', toggle: true, new_vm: new_vm, selected: selected}); fieldsets.push({id: 'network', toggle: true, new_vm: true, selected: selected}); + fieldconfig.push({id: 'config_options', new_vm: new_vm, selected: selected}); + fieldconfig.push({id: 'config_cpu', new_vm: new_vm, selected: selected}); + fieldconfig.push({id: 'config_memory', new_vm: new_vm, selected: selected}); + fieldconfig.push({id: 'config_cdrom', new_vm: new_vm, selected: selected}); + fieldconfig.push({id: 'config_os', new_vm: new_vm, selected: selected}); + fieldconfig.push({id: 'config_dns', new_vm: new_vm, selected: selected}); fieldsets.forEach(toggleFieldsets); - toggleAccordion(selected); toggleVolumes(selected); + fieldconfig.forEach(toggleConfigs); + toggleAccordions(); return false; } @@ -131,7 +137,7 @@ function enableFieldset(fieldsetId, fieldset) { input_hidden_id(fieldsetId).removeAttr('disabled'); } -function disableFieldset(fieldsetId, fieldset) { +function disableFieldset(fieldsetId, fieldset) { if (fieldset.toggle && fieldset.new_vm){ fieldset_id(fieldsetId, fieldset).hide(); } @@ -139,57 +145,72 @@ function disableFieldset(fieldsetId, fieldset) { input_hidden_id(fieldsetId).attr('disabled','disabled'); } -function enableConfigOptions(fieldsetId) { - var field = $("#" + fieldsetId + "_advanced_options"); - field.accordion({collapsible : true, heightStyle: "content"}); - field.removeClass('disabled').find("*").prop("disabled", false); - field.removeClass('hide'); +function toggleFieldset(fieldsetId, fieldset, type1, type2) { + type1 === type2 ? enableFieldset(fieldsetId, fieldset) : disableFieldset(fieldsetId, fieldset); } -function disableConfigOptions(fieldsetId) { - var field = $("#" + fieldsetId + "_advanced_options"); - field.addClass('disabled').find("*").prop("disabled", true); - field.addClass('hide'); +function input_hidden_id(volume_id){ + return $("div[id^='"+ volume_id +"_volumes']" + " + input:hidden"); } -function toggleConfigOptions(fieldsetId, type1, type2) { - if (type1 === type2) { - enableConfigOptions(fieldsetId); - } else { - disableConfigOptions(fieldsetId); - } +function fieldset_id(fieldsetId, fieldset){ + return $("fieldset[id^='" + fieldsetId + "_"+fieldset.id+"']"); } -function toggleAccordion(selected){ +function fieldsets(type){ + return type === 'qemu' ? ['server'] : ['container']; +} + +function toggleFieldsets(fieldset){ + var removable_input_hidden = $("div.removable-item[style='display: none;']" + " + input:hidden"); + removable_input_hidden.attr('disabled','disabled'); ['qemu', 'lxc'].forEach(function(type){ fieldsets(type).forEach(function(fieldsetId){ - toggleConfigOptions(fieldsetId, selected, type); + toggleFieldset(fieldsetId, fieldset, fieldset.selected, type); }); }); } -function toggleFieldset(fieldsetId, fieldset, type1, type2) { - type1 === type2 ? enableFieldset(fieldsetId, fieldset) : disableFieldset(fieldsetId, fieldset); +function toggleAccordions() { + $('.accordion-content').hide(); + $('.accordion-section').off('click').on('click', function(event) { + var $content = $(this).find('.accordion-content'); + $content.slideToggle(); + $(this).toggleClass('active'); + $('.accordion-content').not($content).slideUp(); + $('.accordion-section').not($(this)).removeClass('active'); + event.stopPropagation(); + }); + $('.accordion-content').on('click', function(event) { + event.stopPropagation(); + }); } -function input_hidden_id(volume_id){ - return $("div[id^='"+ volume_id +"_volumes']" + " + input:hidden"); +function enableConfig(fieldsetId, fieldset) { + fieldset_id(fieldsetId, fieldset).removeClass('hide'); + fieldset_id(fieldsetId, fieldset).removeAttr('disabled'); + input_hidden_id(fieldsetId).removeAttr('disabled'); + } -function fieldset_id(fieldsetId, fieldset){ - return $("fieldset[id^='" + fieldsetId + "_"+fieldset.id+"']"); +function disableConfig(fieldsetId, fieldset) { + fieldset_id(fieldsetId, fieldset).addClass('hide'); + fieldset_id(fieldsetId, fieldset).attr('disabled','disabled'); + input_hidden_id(fieldsetId).attr('disabled','disabled'); } -function fieldsets(type){ - return type === 'qemu' ? ['server'] : ['container']; +function toggleConfig(fieldsetId, fieldset, type1, type2) { + if (type1 === type2) { + enableConfig(fieldsetId, fieldset); + } else { + disableConfig(fieldsetId, fieldset); + } } -function toggleFieldsets(fieldset){ - var removable_input_hidden = $("div.removable-item[style='display: none;']" + " + input:hidden"); - removable_input_hidden.attr('disabled','disabled'); +function toggleConfigs(fieldset){ ['qemu', 'lxc'].forEach(function(type){ fieldsets(type).forEach(function(fieldsetId){ - toggleFieldset(fieldsetId, fieldset, fieldset.selected, type); + toggleConfig(fieldsetId, fieldset, fieldset.selected, type); }); }); } diff --git a/app/assets/stylesheets/foreman_fog_proxmox/accordion.css b/app/assets/stylesheets/foreman_fog_proxmox/accordion.css new file mode 100644 index 000000000..46449c944 --- /dev/null +++ b/app/assets/stylesheets/foreman_fog_proxmox/accordion.css @@ -0,0 +1,21 @@ +.accordion-section { + cursor: pointer; +} + +.accordion-section > legend::before { + content: "\f054"; + font-family: "Font Awesome 5 Free"; + position: relative; + left: -1em; + top: 50%; + transform: translateY(-50%); +} + +.accordion-section.active > legend::before { + content: "\f078"; + font-family: "Font Awesome 5 Free"; + position: relative; + left: -1em; + top: 50%; + transform: translateY(-50%); +} diff --git a/app/views/compute_resources_vms/form/proxmox/container/_config.html.erb b/app/views/compute_resources_vms/form/proxmox/container/_config.html.erb index b8496d7f0..34021de56 100644 --- a/app/views/compute_resources_vms/form/proxmox/container/_config.html.erb +++ b/app/views/compute_resources_vms/form/proxmox/container/_config.html.erb @@ -16,33 +16,37 @@ You should have received a copy of the GNU General Public License along with ForemanFogProxmox. If not, see . %> <%= javascript_include_tag 'foreman_fog_proxmox/proxmox_vm_container', "data-turbolinks-track" => true %> +<%= stylesheet_link_tag 'foreman_fog_proxmox/accordion' %> <% container = type == 'lxc' %> -<%= content_tag :div, :id => "container_advanced_options" do %> - <%= content_tag :h3, "Main Options"%> -
- <%= textarea_f f, :description, :label => _('Description'), :label_size => "col-md-2" %> - <%= checkbox_f f, :onboot, :label => _('Start at boot') %> +<%= field_set_tag n_("Main option", "Main options", 2), :id => "container_config_options", :class => 'accordion-section', :disabled => !container do %> +
+ <%= textarea_f f, :description, :label => _('Description'), :label_size => "col-md-2" %> + <%= checkbox_f f, :onboot, :label => _('Start at boot') %>
- <%= content_tag :h3, "CPUs"%> -
+<% end %> +<%= field_set_tag _("CPU"), :id => "container_config_cpu", :class => 'accordion-section', :disabled => !container do %> +
<%= select_f f, :arch, proxmox_archs_map, :id, :name, { }, :label => _('Architecture'), :label_size => "col-md-2" %> <%= counter_f f, :cores, :class => "input-mini", :label => _('Cores'), :label_size => "col-md-2" %> <%= counter_f f, :cpulimit, :class => "input-mini", :label => _('CPU limit'), :label_size => "col-md-2" %> <%= counter_f f, :cpuunits, :class => "input-mini", :label => _('CPU units'), :label_size => "col-md-2" %>
- <%= content_tag :h3, "Memory"%> -
+<% end %> +<%= field_set_tag _("Memory"), :id => "container_config_memory", :class => 'accordion-section', :disabled => !container do %> +
<%= text_f f, :memory, :class => "input-mini", :label => _('Memory (MB)'), :label_size => "col-md-2" %> <%= text_f f, :swap, :class => "input-mini", :label => _('Swap (MB)'), :label_size => "col-md-2" %>
- <%= content_tag :h3, "DNS"%> -
+<% end %> +<%= field_set_tag _("DNS"), :id => "container_config_dns", :class => 'accordion-section', :disabled => !container do %> +
<%= text_f f, :hostname, :label => _('Hostname'), :label_size => "col-md-2", :disabled => true %> <%= text_f f, :nameserver, :label => _('DNS server'), :label_size => "col-md-2" %> <%= text_f f, :searchdomain, :label => _('Search domain'), :label_size => "col-md-2" %>
- <%= content_tag :h3, "Operating System"%> -
+<% end %> +<%= field_set_tag _("Operating System"), :id => "container_config_os", :class => 'accordion-section', :disabled => !container do %> +
<%= select_f f, :ostype, proxmox_ostypes_map, :id, :name, { }, :label => _('OS type'), :label_size => "col-md-2" %>
<% end %> diff --git a/app/views/compute_resources_vms/form/proxmox/server/_config.html.erb b/app/views/compute_resources_vms/form/proxmox/server/_config.html.erb index 1784c770d..6d3a4c96e 100644 --- a/app/views/compute_resources_vms/form/proxmox/server/_config.html.erb +++ b/app/views/compute_resources_vms/form/proxmox/server/_config.html.erb @@ -16,25 +16,23 @@ You should have received a copy of the GNU General Public License along with ForemanFogProxmox. If not, see . %> <%= javascript_include_tag 'foreman_fog_proxmox/proxmox_vm_server', "data-turbolinks-track" => true %> - +<%= stylesheet_link_tag 'foreman_fog_proxmox/accordion' %> <% server = type == 'qemu' %> <% logger.debug("_config.html.erb server_config=#{f.object.inspect}") %> - -<%= content_tag :div, :id => "server_advanced_options" do %> - <%= content_tag :h3, "Main Options" %> -
- <%= textarea_f f, :description, :label => _('Description'), :label_size => "col-md-2" %> - <%= text_f f, :boot, :label => _('Boot device order'), :label_size => "col-md-2", :label_help => _('Order your devices, e.g. order=net0;ide2;scsi0. Default empty (any)') %> - <%= checkbox_f f, :onboot, :label => _('Start at boot') %> - <%= checkbox_f f, :agent, :label => _('Qemu Agent') %> - <%= checkbox_f f, :kvm, :label => _('KVM'), :label_help => _('Enable/disable KVM hardware virtualization') %> - <%= select_f f, :vga, proxmox_vgas_map, :id, :name, { :include_blank => true }, :label => _('VGA'), :label_size => "col-md-2" %> - <%= select_f f, :scsihw, proxmox_scsi_controllers_map, :id, :name, { }, :label => _('SCSI Controller'), :label_size => "col-md-2" %> - <%= select_f f, :bios, proxmox_bios_map, :id, :name, { }, :label => _('BIOS'), :label_size => "col-md-2" %> +<%= field_set_tag n_("Main option", "Main options", 2), :id => "server_config_options", :class => 'accordion-section', :disabled => !server do %> +
+ <%= textarea_f f, :description, :label => _('Description'), :label_size => "col-md-2" %> + <%= text_f f, :boot, :label => _('Boot device order'), :label_size => "col-md-2", :label_help => _('Order your devices, e.g. order=net0;ide2;scsi0. Default empty (any)') %> + <%= checkbox_f f, :onboot, :label => _('Start at boot') %> + <%= checkbox_f f, :agent, :label => _('Qemu Agent') %> + <%= checkbox_f f, :kvm, :label => _('KVM'), :label_help => _('Enable/disable KVM hardware virtualization') %> + <%= select_f f, :vga, proxmox_vgas_map, :id, :name, { :include_blank => true }, :label => _('VGA'), :label_size => "col-md-2" %> + <%= select_f f, :scsihw, proxmox_scsi_controllers_map, :id, :name, { }, :label => _('SCSI Controller'), :label_size => "col-md-2" %> + <%= select_f f, :bios, proxmox_bios_map, :id, :name, { }, :label => _('BIOS'), :label_size => "col-md-2" %>
- - <%= content_tag :h3, "CPUs" %> -
+<% end %> +<%= field_set_tag _("CPUs"), :id => "server_config_cpu", :class => 'accordion-section', :disabled => !server do %> +
<%= select_f f, :cpu_type, proxmox_cpus_map, :id, :name, { }, :label => _('Type'), :label_size => "col-md-2" %> <%= counter_f f, :sockets, :class => "input-mini", :label => _('Sockets'), :label_size => "col-md-2" %> <%= counter_f f, :cores, :class => "input-mini", :label => _('Cores'), :label_size => "col-md-2" %> @@ -48,14 +46,16 @@ along with ForemanFogProxmox. If not, see . %> <% end %> <% end %>
- <%= content_tag :h3, "Memory" %> -
+<% end %> +<%= field_set_tag _("Memory"), :id => "server_config_memory", :class => 'accordion-section', :disabled => !server do %> +
<%= text_f f, :memory, :class => "input-mini", :label => _('Memory (MB)'), :label_size => "col-md-2" %> <%= text_f f, :balloon, :class => "input-mini", :label => _('Minimum memory (MB)'), :label_size => "col-md-2" %> <%= text_f f, :shares, :class => "input-mini", :label => _('Shares (MB)'), :label_size => "col-md-2" %>
- <%= content_tag :h3, "Operating System" %> -
+<% end %> +<%= field_set_tag _("Operating System"), :id => "server_config_os", :class => 'accordion-section', :disabled => !server do %> +
<%= select_f f, :ostype, proxmox_operating_systems_map, :id, :name, { :include_blank => true }, :label => _('OS type'), :label_size => "col-md-2" %>
<% end %>