From 5bcd87796a8f26725a79397904911252b5991f6f Mon Sep 17 00:00:00 2001
From: Manisha Singhal <singhal@atix.de>
Date: Fri, 5 Apr 2024 09:45:01 +0200
Subject: [PATCH] fix: Advanced options are not set in host creation (#317)

fixes #310
---
 .../foreman_fog_proxmox/proxmox_vm.js         | 87 ++++++++++++-------
 .../foreman_fog_proxmox/accordion.css         | 21 +++++
 .../form/proxmox/container/_config.html.erb   | 30 ++++---
 .../form/proxmox/server/_config.html.erb      | 40 ++++-----
 4 files changed, 112 insertions(+), 66 deletions(-)
 create mode 100644 app/assets/stylesheets/foreman_fog_proxmox/accordion.css

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 <http://www.gnu.org/licenses/>.
 
-//= 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 <http://www.gnu.org/licenses/>. %>
 
 <%= 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"%>
-  <div>
-    <%= 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 %>
+  <div class="accordion-content">
+  <%= textarea_f f, :description, :label => _('Description'), :label_size => "col-md-2" %>
+  <%= checkbox_f f, :onboot, :label => _('Start at boot') %>
   </div>
-  <%= content_tag :h3, "CPUs"%>
-  <div>
+<% end %>
+<%= field_set_tag _("CPU"), :id => "container_config_cpu", :class => 'accordion-section', :disabled => !container do %>
+  <div class="accordion-content">
   <%= 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" %>
   </div>
-  <%= content_tag :h3, "Memory"%>
-  <div>
+<% end %>
+<%= field_set_tag _("Memory"), :id => "container_config_memory", :class => 'accordion-section', :disabled => !container do %>
+  <div class="accordion-content">
   <%= 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" %>
   </div>
-  <%= content_tag :h3, "DNS"%>
-  <div>
+<% end %>
+<%= field_set_tag _("DNS"), :id => "container_config_dns", :class => 'accordion-section', :disabled => !container do %>
+  <div class="accordion-content">
   <%= 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" %>
   </div>
-  <%= content_tag :h3, "Operating System"%>
-  <div>
+<% end %>
+<%= field_set_tag _("Operating System"), :id => "container_config_os", :class => 'accordion-section', :disabled => !container do %>
+  <div class="accordion-content">
   <%= select_f f, :ostype, proxmox_ostypes_map, :id, :name, { }, :label => _('OS type'), :label_size => "col-md-2" %>
   </div>
 <% 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 <http://www.gnu.org/licenses/>. %>
 
 <%= 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" %>
-  <div>
-    <%= 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 %>
+  <div class="accordion-content">
+  <%= 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" %>
   </div>
-
-  <%= content_tag :h3, "CPUs" %>
-  <div>
+<% end %>
+<%= field_set_tag _("CPUs"), :id => "server_config_cpu", :class => 'accordion-section', :disabled => !server do %>
+  <div class="accordion-content">
   <%= 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 <http://www.gnu.org/licenses/>. %>
     <% end %>
   <% end %>
   </div>
-  <%= content_tag :h3, "Memory" %>
-  <div>
+<% end %>
+<%= field_set_tag _("Memory"), :id => "server_config_memory", :class => 'accordion-section', :disabled => !server do %>
+  <div class="accordion-content">
   <%= 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" %>
   </div>
-  <%= content_tag :h3, "Operating System" %>
-  <div>
+<% end %>
+<%= field_set_tag _("Operating System"), :id => "server_config_os", :class => 'accordion-section', :disabled => !server do %>
+  <div class="accordion-content">
   <%= select_f f, :ostype, proxmox_operating_systems_map, :id, :name, { :include_blank => true }, :label => _('OS type'), :label_size => "col-md-2" %>
   </div>
 <% end %>