seimin
/
zuel-itsm-3.0.2


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397
							<!DOCTYPE html>
<html lang="en" ng-app="appDemo">
	<head>
		<title>Easy form generator</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="create amazing forms without coding : form editor based on angular formly">
		<meta name="author" content="Erwan Datin (MacKentoch)">


		<!-- IMPORTANT : angular js lib (here for better result with ng-cloak) -->
		<script type="text/javascript" src="./public/lib/js/angular.min.js"></script>
		<!-- Bootstrap core CSS -->
		<link href="./public/lib/css/bootstrap.min.css" rel="stylesheet">
		<!-- font-awesome -->
		<link href="./public/lib/css/font-awesome.min.css" rel="stylesheet">
		<!-- animate -->
		<link href="./public/lib/css/animate.min.css" rel="stylesheet">
		<!-- textAngular -->
		<link rel='stylesheet' href='./public/lib/css/textAngular.min.css'>
		<!-- nya select bootstrap -->
		<link rel='stylesheet' href='./public/lib/css/nya-bs-select.min.css'>
		<!-- Custom styles for this template -->
		<link href="./public/css/eda.easyFormViewer.css" rel="stylesheet">
		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
			<script src="./public/lib/html5shiv/dist/html5shiv.min.js"></script>
			<script src="./public/lib/respondJS/dest/respond.min.js"></script>
		<![endif]-->
	</head>
	<!-- NOTE : ng-cloak here is not optimal solution : better to use it only where it is needed (I just take a shortcut as this an example not a production sample)  -->
	<body ng-controller="demoController as demoCtrl" ng-cloak>
		<div>

			<!-- 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>


			<!--demo purpose : no use apart from that-->
			<div ng-if="demoCtrl.showDataModel" class="row">
				<div class="col-md-12">
					<pre>
						{{demoCtrl.dataModel}}
					</pre>
				</div>
			</div>


		</div>


		<script type="text/javascript">
			//demo purpose : here should be your app

			//just inject easy form generator and bind properties
			//then,

			(function(){
				'use strict';
				angular
					.module('appDemo', [
						'eda.easyFormViewer' //injects easy form viewer
					])
					.controller('demoController', demoController);

				demoController.$inject = ['$timeout'];
				function demoController($timeout){
					var demoCtrl = this;

					demoCtrl.showDataModel 	= true; //demo purpose only : to show data model in html

					demoCtrl.fieldsModel		= testACompleteForm();
					demoCtrl.dataModel			= {};

					demoCtrl.submitButtonText = 'Submit this form';
					demoCtrl.cancelButtonText = 'Cancel all';

					demoCtrl.submitFormEvent 	= submitFormEvent;
					demoCtrl.cancelFormEvent 	= cancelFormEvent;
					//demo purpose only :
					//in 3 seconds a new form will be bound to easy form generator :
					timedModelChanged();
					/**
					 * when click on save form, will call your save form function :
					 */
					function submitFormEvent(dataModelSubmitted){
						console.info('-> Submit Event (in your controller) : you can save form data entered by user.');
						console.dir( {'dataModel' : dataModelSubmitted} );
					/**
					 *
					 * MORE DETAILS ON 'easyFormGeneratorModel'
					 * ----------------------------------------
					 *
					 * easy form generator model properties:
					 *
					 * - formName 									: {string} (at save step you name your form)
					 * - btnSubmitText 							: {string} (if 'Submit' does not suits to you change submit button name)
					 * - btnCancelText							: {string} (if 'Cancel' does not suits to you change cancel button name)
					 * - edaFieldsModel 						: {array} - easy form generator model that describe form
					 * - edaFieldsModelStringified 	: {string} - exactly same as edaFieldsModel it is just stringified
					 * - formlyFieldsModel 					: {object} - easy form generator model translate by itself 'edaFieldsModel' to 'angular formly fields model' -> usefull is you just need a formly directive
					 * - dataModel									: {object} - this object is filled when filling form.
					 */

					}

					function cancelFormEvent(){
						console.info('-> Cancel Event (in your controller) : you can add behaviours if you need to.');
					}

					/**
					 * to simulate server async load of a form model (3 seconds is eternity I hope your server won't take so much time)
					 *
					 * easy form generator will render it when timer done
					 */
					function timedModelChanged(){
						$timeout(function(){

							demoCtrl.fieldsModel = 	testACompleteForm();

							console.info('timeout in demo controller : fields model changed');
							console.dir(demoCtrl.fieldsModel);
						}, 3000);
					}


					/**
					 * 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": [],
                        "datepickerOptions": {
                          "format": "dd.MM.yyyy"
                        },
												"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;
					}


				}
			})();
		</script>

		<!-- footer : declare JS dependencies
		=============================================================-->
		<footer id="pageFooter">
			<!-- jquery framework : top 1 priority -->
			<script type="text/javascript" src="./public/lib/js/jquery.min.js"></script>
			<!-- bootstrap framework scripts -->
			<script type="text/javascript" src="./public/lib/js/bootstrap.min.js"></script>
			<!-- angular ui bootstrap -->
			<script type="text/javascript" src="./public/lib/js/ui-bootstrap-tpls.min.js"></script>
			<!-- angular app all concatenated here (app, controllers directives, containers ...) -->
			<script type="text/javascript" src="./public/js/eda.easyFormViewer.js"></script>
			<!-- textAngular Includes -->
			<script src='./public/lib/js/textAngular-rangy.min.js'></script>
			<script src='./public/lib/js/textAngular-sanitize.min.js'></script>
			<script src='./public/lib/js/textAngular.min.js'></script>
			<!-- lodash -->
			<script src='./public/lib/js/lodash.min.js'></script>
			<!-- angular animate -->
			<script type="text/javascript" src="./public/lib/js/angular-animate.min.js"></script>
			<!-- nya select bootstrap -->
			<script type="text/javascript" src="./public/lib/js/nya-bs-select.min.js"></script>
			<!--  api-check = formly needed : IMPORTANT : always before formly -->
			<script type="text/javascript" src="./public/lib/js/api-check.min.js"></script>
			<!-- angular formly -->
			<script type="text/javascript" src="./public/lib/js/formly.min.js"></script>
			<!-- angular formly template bootstrap -->
			<script type="text/javascript" src="./public/lib/js/angular-formly-templates-bootstrap.min.js"></script>
		</footer>

	</body>
</html>