seimin
/
itsm-whlg


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
							<!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.dragdropway.min.css" rel="stylesheet">
  <head>
  <body ng-controller="demoController as demoCtrl" ng-cloak>  
    
   
			<div class="jumbotron">
				<h1>Easy Form Generator : Drag and drop way</h1>
				<p class="text-center">This is currently in development (BETA).</p>
				<p class="text-center">It may change so I can't tell you this will look like the same when released.</p>
				<p class="text-center"><a class="btn btn-primary btn-lg" href="https://github.com/MacKentoch/easyFormGenerator"><i class="fa fa-github"></i>&nbsp;go github</a></p>
				
				<div class="well">
					<h3>
						How to :
					</h3>
					<ul>
						<li>
							<h5>
								expand a group of control (left column)
							</h5>
						</li>
						<li><h5>drag controls from left column then drop into right column</h5></li>
						<li><h5>drag and drop controls within right column to re-order controls</h5></li>
						<li><h5>drag and drop lines of controls within right column to re-order lines</h5></li>
						<li><h5>right click controls (right column) to edit and customize it</h5></li>
						<li><h5>Check your form anytime (preview tab - upper right)</h5></li>
					</ul>
					<br/>
					<div class="col-md-10 col-md-offset-1">
						<div class="alert alert-warning" role="alert">
							<h4>This version is still in BETA so better use chrome to have a nice experience.</h4>
						</div>                              
					</div>
				
				</div>
			</div>
			<hr/>	 
	 
	 
			<!-- Easy Form Generator drag and drop way :
			=============================================================-->
			<eda-dragdrop-way-easy-form-gen 	
						eda-easy-form-generator-model="demoCtrl.easyFormGeneratorModel"
						eda-save-form-event="demoCtrl.saveForm(edaEasyFormGeneratorModel)">
			</eda-dragdrop-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.dragdropway' //injects easy form generator drag and drop way
					])
					.controller('demoController', demoController);
									
				demoController.$inject = [];	
				function demoController(){
					var demoCtrl = this;

					demoCtrl.easyFormGeneratorModel	= {};
					demoCtrl.saveForm 							= saveForm;


					/**
					 * 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.dragdropway.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-strap/dist/angular-strap.min.js"></script>
    <script type="text/javascript" src="../angular-strap/dist/angular-strap.tpl.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>