OK!
As a starting point to work from. I'll work with you so you learn how it all works as you go...
(All code is placed in the /opt/mango/overrides/web... directories)
/modules/mangoUI/web/dev/components/settingsModal.js
define(['angular', 'require'], function(angular, require) {
'use strict';
/* Date: 1/9/18
Author: Matt "Fox" Fox
Desc: component written to launch a modal dialog with either a built in template or just spit out a list of points to save one by one.
*/
settingsModalController.$inject = ['$mdDialog','maJsonStore'];
function settingsModalController ($mdDialog,maJsonStore)
{
var ctrl = this;
ctrl.mdDialog = $mdDialog;
ctrl.parsedOptions=[];
ctrl.values={};
this.$onInit = function()
{
if(this.points && !angular.isArray(this.points))
{
console.log('Error: points field not an array of point objects');
}
if(this.pointOptions && !angular.isArray(this.pointOptions) )
{
console.log('Error: points options field not an array');
}
ctrl.clickOffClose = ctrl.clickOffClose===true?true:false;
};
this.$onChanges = function(e)
{
console.log(e);
checkPoints();
}
function checkPoints()
{
ctrl.parsedOptions=[];
if(ctrl.points && angular.isArray(ctrl.points))
{
if(ctrl.pointOptions && angular.isArray(ctrl.pointOptions) )
{
var ptName,ptDesc;
for(var i=0; i<ctrl.points.length; i++)
{
ptName=ctrl.points[ i ].name;
ptDesc='';
if(ctrl.pointOptions[ i ] && ctrl.pointOptions[ i ].hasOwnProperty('name') )
{
ptName = ctrl.pointOptions[ i ].name;
}
if(ctrl.pointOptions[ i ] && ctrl.pointOptions[ i ].hasOwnProperty('desc') )
{
ptDesc = ctrl.pointOptions[ i ].desc;
}
ctrl.parsedOptions.push( {name:ptName,desc:ptDesc} );
}
}
else
{
for(var i=0; i<ctrl.points.length; i++)
{
ptName=ctrl.points[ i ].name;
ptDesc='';
ctrl.parsedOptions.push( {name:ptName,desc:ptDesc} );
}
}
}
else if(ctrl.pointOptions && angular.isArray(ctrl.pointOptions) && !ctrl.points )
{
var ptId, ptName, ptDesc;
for(var i=0; i<ctrl.pointOptions.length; i++)
{
if(ctrl.pointOptions[ i ] && !ctrl.pointOptions[ i ].hasOwnProperty('name') )
{
// ctrl.pointOptions=[];
ctrl.parsedOptions=[];
return;
}
ptId=i;
ptDesc='';
ptName=ctrl.pointOptions[ i ].name;
if(ctrl.pointOptions[ i ] && ctrl.pointOptions[ i ].hasOwnProperty('id') )
{
ptId = ctrl.pointOptions[ i ].id;
}
if(ctrl.pointOptions[ i ] && ctrl.pointOptions[ i ].hasOwnProperty('desc') )
{
ptDesc = ctrl.pointOptions[ i ].desc;
}
ctrl.parsedOptions.push( {id:ptId,name:ptName,desc:ptDesc} );
}
}
}
/* DIALOG CODE */
ctrl.showDialogue = function(ev) {
// ctrl.updateModals();
if( ctrl.altTemplateUrl!==undefined )
{
try
{
ctrl.mdDialog.show({
templateUrl:ctrl.altTemplateUrl,
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: ctrl.clickOffClose
}).then(
function()
{
console.log('function if closed/hidden manually');
},
function()
{
console.log('function to fire if closed from clicking outside/cancelled');
}
);
}catch(e){console.warn(e);}
}
else
{
try{
ctrl.mdDialog.show({
contentElement: '#settingsModal',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: ctrl.clickOffClose
}).then(
function()
{
console.log('function if closed manually');
},
function()
{
console.log('function to fire if closed from clicking outside/cancelled');
}
);
}catch(e){console.warn(e);}
}
};
ctrl.hideDialogue = function() {
ctrl.mdDialog.hide();
};
ctrl.cancel = function() {
ctrl.mdDialog.cancel();
};
/* DIALOG CODE END*/
/* JSON Store Stuff: */
ctrl.saveToStore = function(data=null)
{
var item = maJsonStore.newItem( ctrl.jsonStore.toLowerCase() );
item.jsonData = data===null ? ctrl.values : data;
item.readPermission= "user";
item.editPermission= "user"; //can change this at your leisure or we can break it out into a setting...
var r = item.$save();
if(r.status)
{
}
else
{
}
};
ctrl.loadFromStore = function()
{
maJsonStore.get({xid: ctrl.jsonStore.toLowerCase() }).$promise.then(function(item) {
ctrl.values = item.jsonData;
});
/* JSON Store Stuff END: */
};
/* Virtual Point Save stuff */
ctrl.saveToPoint = function()
{
if(ctrl.savePoint===undefined)
{
alert('Point to save to not set as attribute!');
return;
}
ctrl.savePoint.setValue( JSON.stringify(ctrl.values) );
};
/* Virtual Point Save stuff END */
}
var settingsModal={
bindings:{
jsonStore: '<?', //Store name to save settings to
savePoint: '<?', //alternatively, save my JSON to a virtual pt, MUST BE TYPE DATAPOINT...
altTemplateUrl:'=?', //If we want to use the popup to show something else: use this template...
modalTitle:'=?', //seemed like a good idea at the time... will only work if altTemplateUrl is empty
clickOffClose:'=?', //set to true to click outside modal to shut it
pointOptions:'<?', //Alternate names for points, (object array) [{id:'',name:'',desc:''}], id used for key name if using json/virtual point save
points: '<?', //Array of points to set individually
},
controller: settingsModalController,
templateUrl:'/modules/mangoUI/web/dev/views/modalDemo.html'
};
return settingsModal;
});
and the template markup to add:
/modules/mangoUI/web/dev/views/modalDemo.html
<ma-button hue="hue-2" palette="primary" label="Open Dialogue" ng-click="$ctrl.showDialogue()" raised="true"></ma-button>
<div ng-if="!$ctrl.altTemplateUrl" style="visibility: hidden">
<div class="md-dialog-container" id="settingsModal">
<md-dialog layout-padding>
<md-dialog-actions><md-button ng-if="!$ctrl.clickOffClose" ng-click="$ctrl.cancel()" class="md-primary">x</md-button></md-dialog-actions>
<div ng-if="!$ctrl.points && !$ctrl.parsedOptions">
Custom markup needed!
</div>
<h1 ng-if="$ctrl.modalTitle!==undefined">{{$ctrl.modalTitle}}</h1> <small ng-if="$ctrl.clickOffClose">Click outside dialogue to close</small>
<div ng-if="$ctrl.points">
<md-input-container ng-repeat="(index,point) in $ctrl.points" style="display:block;width:100%;">
{{$ctrl.parsedOptions[index].name}}
<br/>
{{$ctrl.parsedOptions[index].desc}}
<br/>
<span style="display:inline-block;">Current Value: <ma-point-value style="display:inline-block;" point="point" ></ma-point-value></span>
<ma-set-point-value point="point" show-button="true"></ma-set-point-value>
</md-input-container>
</div>
<div ng-if="!$ctrl.points && $ctrl.parsedOptions.length>0">
<md-input-container ng-repeat="input in $ctrl.parsedOptions">
{{input.name}}<br/>{{input.desc}}
<input ng-model="$ctrl.values[ input.id ]"/>
</md-input-container>
</div>
</md-dialog>
</div>
</div>
More than happy to help you work through this (it will be a bit of a crash course)
I've not added the buttons on the template for saving using a virtual point or JSON store, but that can be added quite easily.
Basically you can generate a popup which will populate with inputs that can be named, given an ID and a description if necessary. This can also be used to override point names to more 'user friendly' equivalents for your users if they're filling out items in the dialogue box.
inside the userModule.js directory (assuming that's the name of the file you've followed from Jared's tutorial) you'll want this structure:
/userModule.js
/components/settingsModal.js
/views/modalDemo.html
and inside userModule.js you'll want this:
define(['angular', 'require','./components/settingsModal.js'], function(angular, require,settingsModal) {
'use strict';
var userModule = angular.module('userModule', ['maUiApp']);
try {
userModule.component('settingsModal', settingsModal);
}
catch(e){console.log(e);}
return userModule;
});
Markup in the dashboard page builder will be:
<settings-modal point-options="[{id:'test',name:'input 1',desc:'input test 1'},{id:'test2',name:'input 2',desc:'input test 2'}]" points="vp" click-off-close="true"></settings-modal>
See if you can get the popup showing for you first. I'm using 3.4.1 so I'm not completely sure if this will be affected in your version of mangoUI...
Fox
EDIT: sorry I'll be sure to add some more code comments later...
New Edit: added data to save to store as an optional argument
