From addca19af388faa3ce8d35dab8797b2e414ce99a Mon Sep 17 00:00:00 2001
From: Mister Rajoy <danielarezdiaz@gmail.com>
Date: Mon, 21 Dec 2020 11:18:00 +0100
Subject: [PATCH] Fieldsets and new JSON structure support

---
 .../Configuration/configurationpage.html      | 40 ++++++++++---------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html b/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html
index 27182b7..56d1d2d 100644
--- a/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html
+++ b/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html
@@ -57,24 +57,28 @@
     }
 
     function loadOptions(skin){
-      var options = skin.options;
+      
       var html = "";
       html += '<div data-role="controlgroup">';
-      options.forEach(element=>{
-        if(element.type == "checkBox"){
-          html += getCheckBox(element);
-        }else if(element.type == "colorPicker"){
-          html += getColorPicker(element);
-        }else if(element.type == "number"){
-          html += getNumber(element);
-        }else if(element.type == "selector"){
-          html += getSelector(element);
-        }else if(element.type == "slider"){
-          html += getSlider(element);
-        }else if(element.type == "section"){
-          html += getSection(element);
-        }
+      skin.categories.forEach(categorie=>{
+        html += getSection(categorie.name);
+        categorie.options.forEach(element=>{
+          if(element.type == "checkBox"){
+            html += getCheckBox(element);
+          }else if(element.type == "colorPicker"){
+            html += getColorPicker(element);
+          }else if(element.type == "number"){
+            html += getNumber(element);
+          }else if(element.type == "selector"){
+            html += getSelector(element);
+          }else if(element.type == "slider"){
+            html += getSlider(element);
+          
+          }
       });
+
+      })
+      
       html += loadPreviews(skin);
       html += '</div>';
       $('#options').html(html).trigger('create');
@@ -159,8 +163,9 @@
       var css = option.css;
       selections.forEach(element=>{
         var name = element.name;
+        var value = element.value;
         var selected = saved==name?'selected="selected"' : "";                
-        html+= '<option data-css= "'+css + '"value='+name+'" '+ selected+'>'+ name +'</option>'
+        html+= '<option data-css= "'+css + '"value='+value+'" '+ selected+'>'+ name +'</option>'
         })
         return html;
     }
@@ -190,9 +195,8 @@
         return html;
       }  
       
-      function getSection(option){
+      function getSection(name){
         var html = "";
-        var name = option.name;
         html += '</fieldset>';
         html += '<fieldset class="verticalSection verticalSection-extrabottompadding">';
         html += '<legend>'+ name +'</legend>';