<ma-button label="Show dialog" ng-click="showDialog = {}"></ma-button>

<ma-dialog show-dialog="showDialog">
    <div>This is the dialog content</div>
</ma-dialog>

I like the way you segment your code. I have been working with a few MVC frameworks over the years as it fits well with the way I code. Sometimes can be fun trying to trace through code but the modularity is great.

I saw your segments for interfacing with the json store and data points. Those are my next stop in this trip. :)

Ian

So by this I mean userModule.js is
/opt/mango/overrides/web/modules/mangoUI/web/dev/userModule.js

the modalDemo.html:
/opt/mango/overrides/web/modules/mangoUI/web/dev/views/modalDemo.html

and the settingsModal.js file is in
/opt/mango/overrides/web/modules/mangoUI/web/dev/components/settingsModal.js

The reason I do this is to better segment my code. You can put it all in one directory if you'd rather, but as I have done a lot of MVC programming in my PHP days I'm used to separating my model, controller and views for consistency.

@iperry said in Pop up window (face plate):

Now to play around with retrieving and saving data to a data point or JSON store.

If you look under the settingsModal.js I've done some code for you to do that.
Just add a button to the view and call the method with $ctrl.saveToStore( ) or for a virtual point,
make sure you simply set your virtual point in the savePoint attribute and call the. $ctrl.saveToPoint() method.

Hmm, should remove that (data) argument for the JSON store method...

Anyway! Once you've got that saving we can look at loading the data and re-populating your fields.

One thing that confused me was the folder structure that was required. I followed the (Jared's) tutorial that you linked which created the userModule.js in /rest/v2/file-stores/public/userModule.js. You mentioned that within this directory I need to create:
/components/settingsModal.js
/views/modalDemo.html

Also, you mentioned creating these directories and files under: /mango/overrides/web/modules/mangoUI/web/dev/

It seemed odd that the files would (appear to) be duplicated in these 2 locations.

What I found to work was that the settingsModal.js was located in:
/rest/v2/file-stores/public/components/settingsModal.js (based on the path defined in the userModal.js)
and the modalDemo.html was located in:
/mango/overrides/web/modules/mangoUI/web/dev/views/modalDemo.html (based on the path defined in settingsModal.js)

Is this correct? It would seem to be bit of a maintenance pain to have the files located in different contexts.

This example was great. Thanks again

Ian

Secondly, check on the page you have myComponent on and check the console there to ensure there is not some silly form of a clash etc...

Fox

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);}	

try{userModule.component('myComponent', {
    bindings: {
        name: '@?'
    },
    template: '<span>Hello {{$ctrl.name}}</span>'
});
}
catch(e){console.log(e);}

    return userModule;
});

EDIT:have corrected by adding missing brace

@MattFox Thank you very much for doing this. I've been wanting to dive into modules for sometime now but have never been able to find the time. This will really help with the learning curve.

There is just one thing that has got me here. When I try add a 2nd userModule my previous one disappears. Could someone help me with how to do this correctly, it will be very much appreciated.

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

Fox

Are you still able to post a sample of a modal popup? I was able to get the user module example created and working but I have yet been able to find an example of a modal that seems to fit within the framework.

The intention of the modal is to allow users to add information about a sensor, such as GPS coordinates, add alarm setpoints, calibration values, etc. This data would then be saved to either a (virtual) data point or the JSON store.

Thanks
Ian

Actually I'm studying right now AngularJS and starting to understand the Model,View and Controller . Most of the time I learn by inspecting the code and running it to see the results. What actually the face plate has are as follows:

1. Setpoint, 2 Minimum Limit, 3. Maximum Limit (limits are used for setting the low and/or high limit alarm), 4. Override bits (set to manual or Automatic mode). Basically all those points can be define as virtual points so it practically take the points after selecting the data source.

Hope you could share the pop up panel and I'll try to work on it.

Thanks

Joey

We can make it look pretty after that.

Yeah I think this is the right solution, unfortunately I come from Siemens Automation background and need to study the AngularJS as you mention in your comment., If you could share a simple example would be great.

I would use md-dialog for something like that which Mango has...
https://material.angularjs.org/latest/demo/dialog

This however needs programming to be customized to your needs.

Thomas