seimin
/
itsm-whlg


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319
							<!DOCTYPE html>
<html lang="en" ng-app="app">
    <head>
    <title>Easy form generator (Easy Form Viewer)</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">


        <!-- head dep. : all css -->
    <link href="../bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="../bootswatch/paper/bootstrap.min.css" rel="stylesheet">        
    <link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="../animate.css/animate.min.css" rel="stylesheet">
		
		<!--textAngular css is broken since 1.4.4-->
    <!--<link href='../textAngular/dist/textAngular.css' rel='stylesheet'>           -->
		<!--use own to avoid bad surprise-->
		<link href='../easy-form-generator/dist/css/eda.textAngular.min.css' rel='stylesheet'>
    <link href='../nya-bootstrap-select/dist/css/nya-bs-select.min.css' rel='stylesheet' >  
    <link href="../easy-form-generator/dist/css/eda.easyFormViewer.min.css" rel="stylesheet">
		
  <head>
  <body ng-controller="demoController as demoCtrl">  
    
        
    <!-- Easy form viewer -->
		<eda-easy-form-viewer
				eda-easy-form-viewer-data-model="demoCtrl.dataModel"
				eda-easy-form-viewer-easy-form-generator-fields-model="demoCtrl.fieldsModel"
				
				eda-easy-form-viewer-submit-button-text="demoCtrl.submitButtonText"
				eda-easy-form-viewer-cancel-button-text="demoCtrl.cancelButtonText"
				
				eda-easy-form-viewer-submit-form-event="demoCtrl.submitFormEvent(dataModelSubmitted)"
				eda-easy-form-viewer-cancel-form-event="demoCtrl.cancelFormEvent()"> 	
		</eda-easy-form-viewer>


    <!-- at the end of the body : all js -->
    <script type="text/javascript" src="../angular/angular.min.js"></script>  
    <!-- YOUR APPLICATION WILL REPLACE THIS : -->
    <script type="text/javascript">
    (function(angular){
        'use strict';
        angular
            .module('app', ['eda.easyFormViewer'])
            .controller('demoController', demoController);
        
        
        demoController.$inject = ['$timeout'];	
				function demoController($timeout){
					var demoCtrl = this;

					demoCtrl.fieldsModel		= testACompleteForm();
					demoCtrl.dataModel			= {};
					
					demoCtrl.submitButtonText = 'Submit this form';
					demoCtrl.cancelButtonText = 'Cancel all';
					
					demoCtrl.submitFormEvent 	= submitFormEvent;
					demoCtrl.cancelFormEvent 	= cancelFormEvent;
          
          function submitFormEvent(dataModelSubmitted){
            console.info('Submit event : you can manage this event in your controller');
						console.dir( {'dataModelSubmitted' : dataModelSubmitted} );
          }
           
          function cancelFormEvent(){
            console.info('Cancel event : you can manage this event in your controller');
          }
          
					/**
					 * an easy form generator model as demo
					 * 
					 * here as a demo, it could be retrieved from a database
					 */					
					function testACompleteForm(){
						var _testACompleteForm =  [
							{
								"line": 1,
								"activeColumn": 1,
								"columns": [
									{
										"numColumn": 1,
										"exist": true,
										"control": {
											"type": "header",
											"key": "header-1441426238190",
											"selectedControl": "Header",
											"subtype": "",
											"templateOptions": {
												"label": "",
												"required": false,
												"description": "EasyFormViewer : Loaded Form",
												"placeholder": "",
												"options": []
											},
											"formlyExpressionProperties": {},
											"formlyValidators": {},
											"formlyValidation": {},
											"edited": true
										}
									}
								]
							},
							{
								"line": -1,
								"activeColumn": 1,
								"columns": [
									{
										"numColumn": 1,
										"exist": true,
										"control": {
											"type": "input",
											"key": "input-1441426278314",
											"selectedControl": "TextInput",
											"subtype": "",
											"templateOptions": {
												"label": "text input",
												"required": true,
												"description": "text input",
												"placeholder": "text input",
												"options": []
											},
											"formlyExpressionProperties": {},
											"formlyValidators": {},
											"formlyValidation": {
												"messages": {}
											},
											"edited": true
										}
									},
									{
										"numColumn": 2,
										"exist": true,
										"control": {
											"type": "input",
											"key": "input-1441426295927",
											"selectedControl": "Password",
											"subtype": "password",
											"templateOptions": {
												"label": "password",
												"required": true,
												"description": "password",
												"placeholder": "password",
												"options": []
											},
											"formlyExpressionProperties": {},
											"formlyValidators": {},
											"formlyValidation": {
												"messages": {}
											},
											"edited": true
										}
									},
									{
										"numColumn": 3,
										"exist": true,
										"control": {
											"type": "input",
											"key": "input-1441426313388",
											"selectedControl": "Email",
											"subtype": "email",
											"templateOptions": {
												"label": "email",
												"required": true,
												"description": "email",
												"placeholder": "email",
												"options": []
											},
											"formlyExpressionProperties": {},
											"formlyValidators": {
												"emailShape": {
													"message": "$viewValue + ' is not a valid email'"
												}
											},
											"formlyValidation": {
												"messages": {}
											},
											"edited": true
										}
									}
								]
							},
							{
								"line": -1,
								"activeColumn": 1,
								"columns": [
									{
										"numColumn": 1,
										"exist": true,
										"control": {
											"type": "datepicker",
											"key": "datepicker-1441426325143",
											"selectedControl": "Date",
											"subtype": "",
											"templateOptions": {
												"label": "date",
												"required": true,
												"description": "date",
												"placeholder": "",
												"options": [],
												"datepickerPopup": "dd-MMMM-yyyy"
											},
											"formlyExpressionProperties": {},
											"formlyValidators": {},
											"formlyValidation": {
												"messages": {}
											},
											"edited": true
										}
									},
									{
										"numColumn": 2,
										"exist": true,
										"control": {
											"type": "basicSelect",
											"key": "basicSelect-1441426346817",
											"selectedControl": "BasicSelect",
											"subtype": "",
											"templateOptions": {
												"label": "",
												"required": false,
												"description": "",
												"placeholder": "",
												"options": [
													{
														"name": "opt1",
														"value": 0,
														"group": ""
													},
													{
														"name": "opt2",
														"value": 1,
														"group": ""
													},
													{
														"name": "opt3",
														"value": 2,
														"group": ""
													}
												]
											},
											"formlyExpressionProperties": {},
											"formlyValidators": {},
											"formlyValidation": {
												"messages": {}
											},
											"edited": true
										}
									}
								]
							},
							{
								"line": -1,
								"activeColumn": 1,
								"columns": [
									{
										"numColumn": 1,
										"exist": true,
										"control": {
											"type": "richEditor",
											"key": "richEditor-1441426365355",
											"selectedControl": "RichTextEditor",
											"subtype": "",
											"templateOptions": {
												"label": "",
												"required": false,
												"description": "",
												"placeholder": "",
												"options": []
											},
											"formlyExpressionProperties": {},
											"formlyValidators": {},
											"formlyValidation": {
												"messages": {}
											},
											"edited": true
										}
									}
								]
							}
						]
						return _testACompleteForm;
					}                     
            
        }
            
    })(angular);
    </script>
    
    <script type="text/javascript" src="../jquery/dist/jquery.min.js"></script>
      
    <script type="text/javascript" src="../bootstrap/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
    <script type="text/javascript" src="../easy-form-generator/dist/js/eda.easyFormViewer.min.js"></script>
    <script type="text/javascript" src='../textAngular/dist/textAngular-rangy.min.js'></script>
    <script type="text/javascript" src='../textAngular/dist/textAngular-sanitize.min.js'></script>
    <script type="text/javascript" src='../textAngular/dist/textAngular.min.js'></script> 
    <script type="text/javascript" src='../lodash/lodash.min.js'></script> 
    <script type="text/javascript" src="../angular-animate/angular-animate.min.js"></script>
    <script type="text/javascript" src="../angularjs-toaster/toaster.min.js"></script>  
    <script type="text/javascript" src="../nya-bootstrap-select/dist/js/nya-bs-select.min.js"></script>
    <script type="text/javascript" src="../api-check/dist/api-check.min.js"></script> 
    <script type="text/javascript" src="../angular-formly/dist/formly.min.js"></script> 
    <script type="text/javascript" src="../angular-formly-templates-bootstrap/dist/angular-formly-templates-bootstrap.min.js"></script>
  </body>
</html>