add quick load for monitor preset

languages/en_CA.json

@@ -522,6 +522,7 @@
    "Delete Monitor State?": "Delete Monitor State",
    "deleteMonitorStateText1": "Do you want to delete this Monitor States Preset? The monitor configurations associated cannot be recovered.",
    "deleteMonitorStateText2": "Do you want to delete this Monitor's Preset?",
+   "undoAllUnsaveChanges": "Are you sure you want to do this? This will undo all unsaved changes.",
    "monitorStatesError": "Monitor Presets Error",
    "monitorStateNotEnoughChanges": "You need to make a change in your monitor configuration before attempting to add it to a Preset.",
    "Search Images": "Search Images",

web/libs/css/dash2.basic.css

@@ -443,6 +443,9 @@ ul.msg_list li .message {
 .text-white {
     color: #fff!important;
 }
+.cursor-pointer {
+    cursor: pointer!important;
+}
 /* Start of custom table sorter */
 .table .table-header-sorter {
     cursor: pointer;

web/libs/js/dash2.monitoredit.js

@@ -977,11 +977,11 @@ monitorEditorWindow.find('.monitor-section-header').click(function(e){
                 }
             })
             html += `<li class="mdl-list__item" preset-name="${preset.name}">
-                <span class="mdl-list__item-primary-content">
+                <span class="mdl-list__item-primary-content" style="word-break:break-all">
                     <code>${preset.name}</code> &nbsp;
-                    ${hasSelectedMonitor ? `<ul class="json-to-block striped">${$.ccio.init('jsontoblock',humanizedMonitorKeys)}</ul>` : ''}
+                    ${hasSelectedMonitor ? `<ul class="json-to-block striped import-monitor-preset cursor-pointer">${$.ccio.init('jsontoblock',humanizedMonitorKeys)}</ul>` : ''}
                 </span>
-                <span class="mdl-list__item-secondary-action">
+                <span class="mdl-list__item-secondary-action text-right" style="width:150px">
                     <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" style="margin-right: 15px">
                         <input type="checkbox" value="${preset.name}" ${hasSelectedMonitor ? 'checked' : ''} class="mdl-switch__input"/>
                     </label>
@@ -1117,6 +1117,23 @@ monitorEditorWindow.find('.monitor-section-header').click(function(e){
             }
         })
     }
+    var loadMonitorPartialFromPreset = function(preset,monitorId){
+        $.confirm.create({
+            title: lang['Import Monitor Configuration'],
+            body: lang.undoAllUnsaveChanges,
+            clickOptions: {
+                title: 'Import',
+                class: 'btn-primary'
+            },
+            clickCallback: function(){
+                var monitorConfigPartial = preset.details.monitors.find(monitor => monitor.mid === monitorId) || {};
+                var copyCurrentConfig = $.ccio.init('cleanMon',$.ccio.mon[$user.ke+monitorId+$user.auth_token])
+                copyCurrentConfig.details = $.parseJSON(copyCurrentConfig.details)
+                var monitorObjectToLoad = mergeDeep(copyCurrentConfig,monitorConfigPartial);
+                $.aM.import(monitorObjectToLoad)
+            }
+        })
+    }
     loadPresets()
     monSectionPresets.find('.add-new').click(function(){
         addNewPreset()
@@ -1125,6 +1142,14 @@ monitorEditorWindow.find('.monitor-section-header').click(function(e){
         var presetName = $(this).parents('[preset-name]').attr('preset-name')
         deletePreset(presetName)
     })
+    monSectionPresets.on('click','.import-monitor-preset',function(e){
+        e.preventDefault()
+        var presetName = $(this).parents('[preset-name]').attr('preset-name')
+        var preset = loadedPresets[presetName]
+        var currentMonitorInEditor = getSelectedMonitorInfo()
+        loadMonitorPartialFromPreset(preset,currentMonitorInEditor.mid)
+        return false
+    })
     monitorPresetsSelection.on('change','.mdl-switch__input',function(){
         var el = $(this)
         var name = el.val()