seimin
/
itsm-whlg


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
							<!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="author" content="Erwan Datin (MacKentoch)">

        <!-- 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='../angularjs-toaster/toaster.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.stepway.min.css" rel="stylesheet">
  <head>
  <body ng-controller="demoController as demoCtrl" ng-cloak>  
    
			<!-- navigation : just for decoration it is not easy form generator
			=============================================================-->
			<header id="pageHeader" >	
				<div class="navbar navbar-default navbar-fixed-top">
			      <div class="container">
			        <div class="navbar-header">
			          <a class="navbar-brand" href="#">Easy form generator</a>
			          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
			            <span class="icon-bar"></span>
			            <span class="icon-bar"></span>
			            <span class="icon-bar"></span>
			          </button>
			        </div>
							
			        <div class="navbar-collapse collapse" id="navbar-main">
			          <ul class="nav navbar-nav">
			          </ul>
								
								<ul class="nav navbar-nav navbar-left">
									
									<li class="dropdown">
										<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
											Switch language 
											<span class="caret"></span></a>
										<ul class="dropdown-menu" role="menu">
											<li><a href="#" ng-click="demoCtrl.switchLanguage('en')">English</a></li>
											<li><a href="#" ng-click="demoCtrl.switchLanguage('fr')">French</a></li>
											<li><a href="#" ng-click="demoCtrl.switchLanguage('es')">Spanish</a></li>
											<li><a href="#" ng-click="demoCtrl.switchLanguage('de')">German</a></li>
											<li><a href="#" ng-click="demoCtrl.switchLanguage('jp')">Japanese</a></li>
											<li><a href="#" ng-click="demoCtrl.switchLanguage('tr')">Turkish</a></li>
										</ul>
									</li>									
																		
								</ul>
								
			          <ul class="nav navbar-nav navbar-right">
			          	<li><a class="socialIcon" target="_blank" href="https://github.com/MacKentoch"><span class="text-center"><i class="fa fa-github"></i></span></a></li>
			          </ul>
			        </div>
							
							
			      </div>
			    </div>
			</header>   		
        
        
    <!-- Easy form generator: Step Way -->
    <eda-step-way-easy-form-gen 	
          eda-easy-form-generator-model="demoCtrl.easyFormGeneratorModel"
          eda-save-form-event="demoCtrl.saveForm(edaEasyFormGeneratorModel)">
    </eda-step-way-easy-form-gen>


    <!-- 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('appDemo', ['eda.easyformGen.stepway'])
            .config(configFct)
            .controller('demoController', demoController);
            
				/**
				 * config
				 */
				configFct.$inject = ['easyFormSteWayConfigProvider'];
				function configFct(easyFormSteWayConfigProvider){
          //example get current language (by default = english)
          console.info('- from config - language is ' + easyFormSteWayConfigProvider.getCurrentLanguage());
          
          //set language to french :
          //easyFormSteWayConfigProvider.setLanguage('fr');          
          
					//show/hide preview panel => default is true 
					easyFormSteWayConfigProvider.showPreviewPanel(true);
					//show/hide models in preview panel => default is true
					easyFormSteWayConfigProvider.showPreviewModels(true);
				}
        
			
				/**
				 * controller 
				 **/	
				demoController.$inject = ['$timeout', 'easyFormSteWayConfig'];	
				function demoController($timeout, easyFormSteWayConfig){
					var demoCtrl = this;

					demoCtrl.easyFormGeneratorModel	= {}; // TIP : save a form then look at the console to get a better idea of this model
					demoCtrl.saveForm 							= saveForm;
					demoCtrl.currentLangue					= refreshCurrentLanguage();
					demoCtrl.switchLanguage					= switchLanguage;

					//get current language
					console.info('Current language is ' + demoCtrl.currentLangue);


					function switchLanguage(toLanguage){
						if(angular.isString){
							easyFormSteWayConfig.setLanguage(toLanguage);
							refreshCurrentLanguage();
							
							console.info('language changed to ' + demoCtrl.currentLangue);
						}
					}
				
					function refreshCurrentLanguage(){
						return easyFormSteWayConfig.getCurrentLanguage();
					}
					
					/**
					 * when click on save form, will call your save form function :
					 */
					function saveForm(easyFormGeneratorModel){
						console.info('-> from here : you can save models to database (your controller)');							
						console.dir({
								'What is it?' : 'this log shows you easy form returned model on save event',
								'easyFormGeneratorModel' : easyFormGeneratorModel
						});		
         } 
         
        } 
        /**
          * 
          * 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. 
          */
    })(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.stepway.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="../angular-translate/angular-translate.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>