allow monitor grouping from simple monitor settings

web/assets/js/bs5.accountSettings.js

@@ -30,8 +30,11 @@ $(document).ready(function(){
     function writewMonGroups(){
         theForm.find('[detail="mon_groups"]').val(JSON.stringify($user.mon_groups)).change()
     }
+    window.getMonitorGroups = function(){
+        return $user.mon_groups ? $user.mon_groups : safeJsonParse($user.details.mon_groups)
+    }
     window.reDrawMonGroupsInAccountSettings = function(){
-        $user.mon_groups = $user.mon_groups ? $user.mon_groups : safeJsonParse($user.details.mon_groups)
+        $user.mon_groups = getMonitorGroups()
         var monitorList = Object.values($user.mon_groups).map(function(item){
             return {
                 value: item.id,

web/assets/js/bs5.monitorsUtils.js

@@ -684,7 +684,7 @@ function magnifyStream(options){
 function getCardMonitorSettingsFields(formElement){
     var formValues = {};
     formValues.details = {}
-    $.each(['name','detail'],function(n,keyType){
+    $.each(['name','detail','monitor-groups-selected'],function(n,keyType){
         formElement.find(`[${keyType}]`).each(function(n,v){
             var el = $(v);
             var key = el.attr(keyType)
@@ -697,6 +697,9 @@ function getCardMonitorSettingsFields(formElement){
                 case'detail':
                     formValues.details[key] = value;
                 break;
+                case'monitor-groups-selected':
+                    formValues.details.groups = value;
+                break;
                 case'name':
                     formValues[key] = value;
                 break;
@@ -708,7 +711,6 @@ function getCardMonitorSettingsFields(formElement){
             }
         })
     })
-    console.log(formValues)
     return formValues;
 }
 function updateMonitor(monitorToPost,callback){
@@ -736,7 +738,23 @@ var miniCardSettingsFields = [
             value: monitorAlreadyAdded.details.detector_pam || '0',
             fieldType: 'toggle',
         }
-    }
+    },
+    function(monitorAlreadyAdded){
+        var monitorGroups = Object.values($user.mon_groups).map(function(item){
+            return {
+                value: item.id,
+                name: item.name,
+                selected: monitorAlreadyAdded.details.groups.indexOf(item.id) > -1,
+            }
+        });
+        return  {
+            label: lang['Grouping'],
+            name: `monitor-groups-selected="${monitorAlreadyAdded.mid}"`,
+            fieldType: 'select',
+            attributes: 'multiple',
+            possible: monitorGroups,
+        }
+    },
 ]
 function buildMiniMonitorCardBody(monitorAlreadyAdded,monitorConfigPartial,additionalInfo,doOpenVideosInsteadOfDelete){
     if(!monitorConfigPartial)monitorConfigPartial = monitorAlreadyAdded;
@@ -758,21 +776,40 @@ function buildMiniMonitorCardBody(monitorAlreadyAdded,monitorConfigPartial,addit
         `
         $.each(([]).concat(miniCardSettingsFields),function(n,option){
             option = typeof option === 'function' ? option(monitorAlreadyAdded,monitorConfigPartial,additionalInfo,doOpenVideosInsteadOfDelete) : option
-            monitorSettingsHtml += `<div class="row mb-2">
+            var newFieldHtml = '';
-                <div class="col-md-9">
+            if((['div']).indexOf(option.fieldType) > -1){
-                    ${option.label}
+                switch(option.fieldType){
-                </div>
+                    case'div':
-                <div class="col-md-3 text-right">`
+                        newFieldHtml += `<div id="${option.id}" ${option.attributes || ''} class="${option.class || ''}" style="${option.style || ''}">${option.divContent || ''}</div>`
-                    switch(option.fieldType){
+                    break;
-                        case'toggle':
+                }
-                            monitorSettingsHtml += `<input class="form-check-input" type="checkbox" ${option.value === '1' ? 'checked' : ''} ${option.name.indexOf('=') > -1 ? option.name : `name="${option.name}"`}>`
+            }else{
-                        break;
+                newFieldHtml += `<div class="row mb-2">
-                        case'text':
+                    <div class="col-md-9">
-                            monitorSettingsHtml += `<input class="form-control text-center form-control-sm" type="text" ${option.name.indexOf('=') > -1 ? option.name : `name="${option.name}"`} value="${option.value || ''}" placeholder="${option.placeholder || ''}">`
+                        ${option.label}
-                        break;
+                    </div>
-                    }
+                    <div class="col-md-3 text-right">`
-                    monitorSettingsHtml += `</div>
+                        switch(option.fieldType){
-                </div>`
+                            case'toggle':
+                                newFieldHtml += `<input class="form-check-input" type="checkbox" ${option.value === '1' ? 'checked' : ''} ${option.name.indexOf('=') > -1 ? option.name : `name="${option.name}"`}>`
+                            break;
+                            case'text':
+                                newFieldHtml += `<input class="form-control text-center form-control-sm" type="text" ${option.name.indexOf('=') > -1 ? option.name : `name="${option.name}"`} value="${option.value || ''}" placeholder="${option.placeholder || ''}">`
+                            break;
+                            case'select':
+                                newFieldHtml += `<select ${option.name.indexOf('=') > -1 ? option.name : `name="${option.name}"`} ${option.id ? `id="${option.id}"` : ''} ${option.attributes || ''} class="form-control form-control-sm ${option.class || ''}" style="${option.style || ''}">`
+                                if(option.possible){
+                                    option.possible.forEach(function(item){
+                                        newFieldHtml += `<option value="${item.value}" ${item.selected ? 'selected' : ''}>${item.name}</option>`
+                                    })
+                                }
+                                newFieldHtml += `</select>`
+                            break;
+                        }
+                        newFieldHtml += `</div>
+                    </div>`
+            }
+            monitorSettingsHtml += newFieldHtml;
         })
         monitorSettingsHtml += `</div>
             <div class="card-footer text-center">
@@ -825,7 +862,10 @@ $(document).ready(function(){
         var monitorId = formElement.attr('data-mid');
         var loadedMonitor = getDbColumnsForMonitor(loadedMonitors[monitorId])
         var thisForm = getCardMonitorSettingsFields(formElement);
-        updateMonitor(mergeDeep({},loadedMonitor,thisForm))
+        var baseConfig = mergeDeep({},loadedMonitor)
+        baseConfig.details.groups = [];
+        var newConfig = mergeDeep(baseConfig,thisForm)
+        updateMonitor(newConfig)
     })
     .on('click','.card-page-selector',function(e){
         e.preventDefault()