display changes in Preset with humanized name tags

definitions/en_CA.js

@@ -89,8 +89,7 @@ module.exports = function(s,config,lang){
                        "info": [
                            {
                               "id": "monitorPresetsName",
-                              "field": lang.Name,
-                              "placeholder": "Fill to bind to new Preset."
+                              "field": lang['Preset Name'],
                            }
                        ]
                    },
@@ -1472,7 +1471,7 @@ module.exports = function(s,config,lang){
                       "possible": "1-23"
                    },
                    {
-                      "name": "preset_record",
+                      "name": "detail=preset_record",
                       "field": lang.Preset,
                       "description": "Preset flag for certain video encoders. If you find your camera is crashing every few seconds : try leaving it blank.",
                       "default": "",

languages/en_CA.json

@@ -805,6 +805,7 @@
    "Select a Monitor": "Select a Monitor",
    "Per Monitor": "Per Monitor",
    "Matrices": "Matrices",
+   "Preset Name": "Preset Name",
    "Show Matrices": "Show Matrices",
    "Show Matrix": "Show Matrix",
    "No Monitor ID Present in Form": "No Monitor ID Present in Form",

web/libs/css/dash2.basic.css

@@ -46,6 +46,13 @@
     background-clip: padding-box;
 }
 /**/
+.json-to-block div > div{
+    margin-left:10px;
+}
+.json-to-block.striped div > div{
+    padding-left:10px;
+    border-left: 2px solid #fff;
+}
 .flex{display:flex}
 .flex>div{flex:1}
 .flex-block{display:inline-flex;width:100%;flex-flow: row wrap;}

web/libs/js/dash2.basic.js

@@ -386,7 +386,7 @@ var diffObject = function (obj1, obj2) {
         }
         if (type1 === '[object Object]') {
             var objDiff = diffObject(item1, item2);
-            if (Object.keys(objDiff).length > 1) {
+            if (Object.keys(objDiff).length > 0) {
                 diffs[key] = objDiff;
             }
             return;

web/libs/js/dash2.monitoredit.js

@@ -11,6 +11,7 @@ var copySettingsSelector = $('#copy_settings')
 var monitorPresetsSelection = $('#monitorPresetsSelection')
 var monitorPresetsNameField = $('#monitorPresetsName')
 var editorForm = monitorEditorWindow.find('form')
+var fieldsLoaded = {}
 var sections = {}
 var loadedPresets = {}
 monitorEditorWindow.find('.follow-list ul').affix();
@@ -357,6 +358,8 @@ var addSection = function(section){
         $.each(section.info,function(m,block){
             if(block.isFormGroupGroup === true){
                 addSection(block)
+            }else if(block.name){
+                fieldsLoaded[block.name] = block
             }
         })
     }
@@ -932,16 +935,26 @@ editorForm.find('[name="type"]').change(function(e){
         var selectedMonitor = getSelectedMonitorInfo()
         $.each(loadedPresets,function(n,preset){
             var hasSelectedMonitor = false
-            console.log(preset)
+            var humanizedMonitorKeys = {}
             $.each(preset.details.monitors || [],function(n,monitor){
                 if(monitor.mid === selectedMonitor.mid){
-                    hasSelectedMonitor = monitor
+                    hasSelectedMonitor = true
+                    $.each(monitor,function(key,value){
+                        if(key === 'details'){
+                            humanizedMonitorKeys.details = {}
+                            $.each(value,function(key,value){
+                                humanizedMonitorKeys.details[fieldsLoaded[`detail=${key}`] && fieldsLoaded[`detail=${key}`].field ? fieldsLoaded[`detail=${key}`].field : key] = value
+                            })
+                        }else{
+                            humanizedMonitorKeys[fieldsLoaded[key] && fieldsLoaded[key].field ? fieldsLoaded[key].field : key] = value
+                        }
+                    })
                 }
             })
             html += `<li class="mdl-list__item">
                 <span class="mdl-list__item-primary-content">
-                    ${preset.name} &nbsp;
-                    ${hasSelectedMonitor ? `<ul class="msg_list">${$.ccio.init('jsontoblock',hasSelectedMonitor)}</ul>` : ''}
+                    <code>${preset.name}</code> &nbsp;
+                    ${hasSelectedMonitor ? `<ul class="json-to-block striped">${$.ccio.init('jsontoblock',humanizedMonitorKeys)}</ul>` : ''}
                 </span>
                 <span class="mdl-list__item-secondary-action">
                     <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
@@ -980,7 +993,7 @@ editorForm.find('[name="type"]').change(function(e){
         if(!validation.ok){
             return
         }
-        var monitorConfig = Object.assign({},$.ccio.init('cleanMon',validation.monitorConfig))
+        var monitorConfig = validation.monitorConfig
         console.log(monitorConfig.mid)
         var inMemoryMonitorConfig = Object.assign({},$.ccio.init('cleanMon',$.ccio.mon[$user.ke+monitorConfig.mid+$user.auth_token]));
         var currentPreset = loadedPresets[presetName]