<!DOCTYPE html>
<html ng-app="Training">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../CSS/TISCO.css">
<link rel="stylesheet" href="../CSS/font-awesome.css">
<link rel="stylesheet" href="../CSS/Bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../public/lib/angular-material/angular-material.css" />
<script type='text/javascript' src='../JS/SCREEN.js'></script>
<script type="text/javascript" src="../public/lib/angular/angular.min.js"></script>
<script type="text/javascript" src="../JS/ANGULAR/SCREEN_ANGULAR.js"></script>
<script type="text/javascript" src="../public/lib/angular-resource/angular-resource.min.js"></script>
<script type="text/javascript" src="../public/lib/angular-material/angular-material.js"></script>
<script type="text/javascript" src="../public/lib/angular-animate/angular-animate.js"></script>
<script type="text/javascript" src="../public/lib/angular-aria/angular-aria.js"></script>
<script type="text/javascript" src="../public/lib/angular-messages/angular-messages.js"></script>
<script type="text/javascript" src="JS/TRE021_FORM/Module.Controller.js"></script>
<script type="text/javascript" src="JS/TRE021_FORM/services.js"></script>
<script type="text/javascript" src="JS/TRE021_FORM/Question.Controller.js"></script>
<!-- <script type="text/javascript" src="JS/TRE021/TRE021.Controller.js"></script> -->
<script type="text/javascript" src="../JS/jquery-2.1.3.min.js"></script>
<script type='text/javascript' src='../JS/ICONSMENU.js'></script>
<script type="text/javascript" src="../JS/HOTKEY.js"></script>
<script language='javascript'>setLang('eng');</script>
<script language="javascript">getTitleName();</script>
<style>
.fullwidth{
width: 100%;
}
.halfwidth{
width: 45%;
}
.floatright{
float: right;
}
.label-subject{
font-size: 30px;
}
.input-custom{
font-size: 16px;
}
.line-space{
margin-top: 15px;
margin-bottom: 15px;
text-align: center;
width: 300px;
height: 5px;
background-color : #00AD9A;
}
.delChoice{
font-size: 30px;
color: #AAA;
cursor: pointer;
}
.delChoice:hover{
color: #AAA;
cursor: pointer;
}
.delquestion{
font-size: 25px;
color: rgb(255, 60, 53);
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 20px;
text-align: center;
background-color: #fff;
box-shadow: 0px 1px 3px 0px #939393 !important;
}
.delquestion:hover{
color: rgb(255, 60, 53);
cursor: pointer;
}
.delright{
float: right;
}
.backcard{
margin-bottom: 20px;
}
.topcard{
margin-top: 20px;
}
.numquest{
background-color: #fff;
width: 30px;
height: 30px;
border-radius: 15px;
text-align: center;
line-height: 30px;
color: #444;
box-shadow: 0px 1px 3px 0px #939393 !important;
font-size: 16px;
}
.subcard{
background-color: rgb(252, 252, 252);
}
fieldset{
border: 1px solid #c0c0c0 !important;
padding: .35em .625em .75em !important;
margin-bottom: 15px;
}
legend{
width: auto !important;
border-bottom: 0px !important;
color: rgba(0,0,0,0.26) !important;
}
.row-background{
background-color: rgb(255, 251, 206);
}
.icon-control{
font-size: 30px;
padding-left: 15px;
cursor: pointer;
color: #777;
}
</style>
<script>
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function sendList(data,childindex,parentindex,grandparentindex){
var scope = angular.element($("form[name=cscform]")).scope();
console.log("parent is "+parentindex+" child is "+childindex+" grandparent is "+grandparentindex);
if (grandparentindex == 'none'){
scope.$apply(function(){
scope.selectedList(data,childindex,parentindex);
});
}else{
console.log(grandparentindex);
scope.$apply(function(){
scope.selectedSubList(data, childindex, parentindex, grandparentindex);
});
}
}
function selectGroup(data,childindex,parentindex,grandparentindex){
var scope = angular.element($("form[name=cscform]")).scope();
if (grandparentindex == 'none'){
scope.$apply(function(){
scope.selectedGroup(data,childindex,parentindex);
});
}else{
scope.$apply(function(){
scope.selectSubGroup(data,childindex,parentindex,grandparentindex);
});
}
}
function checkPermissionSave(){
var scope = angular.element($("form[name=cscform]")).scope();
scope.$apply(function(){
scope.saveForm();
});
}
</script>
</head>
<body leftmargin="0" topmargin="0" ng-controller="QuestionControl">
<form class="form-horizontal" name="cscform">
<script language="javascript">
var swap = new swaplang();
var titlename = "";
document.write(Icons("TRE021_FORM,"+titlename));
</script>
<br>
<div align="center">
<table cellpadding="0" cellspacing="0" class="maxsize">
<tr>
<td class="header">TRE021_FORM, TRE021_FORM</td>
</tr>
<tr>
<td class="blankspace"></td>
</tr>
<tr>
<td>
<div class="row">
<div class="col-xs-10 col-sm-10 col-md-10">
</div>
<div class="col-xs-2 col-sm-2 col-md-2">
<md-switch ng-model="formData.detailStatus" aria-label="Open detail box" ng-true-value="1" ng-false-value="0">Detail box</md-switch>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-sm-10 col-md-10">
</div>
<div class="col-xs-2 col-sm-2 col-md-2">
<md-switch ng-model="formData.footerStatus" aria-label="" ng-true-value="1" ng-false-value="0">Open Footer</md-switch>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2">
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<md-input-container class="md-block fullwidth">
<label class="label-subject">Subject (Eng)</label>
<input class="input-custom" ng-model="formData.formSubject.eng">
</md-input-container>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<md-input-container class="md-block fullwidth">
<label class="label-subject">Subject (Thai)</label>
<input class="input-custom" ng-model="formData.formSubject.tha">
</md-input-container>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2">
</div>
<div class="col-xs-8 col-sm-8 col-md-8">
<md-input-container class="md-block fullwidth">
<label class="input-custom">Form Description (Eng)</label>
<textarea class="input-custom" rows="2" ng-model="formData.formDescription.eng"></textarea>
</md-input-container>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2">
</div>
<div class="col-xs-8 col-sm-8 col-md-8">
<md-input-container class="md-block fullwidth">
<label class="input-custom">Form Description (Thai)</label>
<textarea class="input-custom" rows="2" ng-model="formData.formDescription.tha"></textarea>
</md-input-container>
</div>
</div>
<div class="row" ng-if="formData.detailStatus == 1">
<div class="col-xs-2 col-sm-2 col-md-2">
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<md-input-container class="md-block fullwidth">
<label class="input-custom">Label form detail (Eng)</label>
<input class="input-custom" ng-model="formData.formDetail.eng">
</md-input-container>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<md-input-container class="md-block fullwidth">
<label class="input-custom">Label form detail (Thai)</label>
<input class="input-custom" ng-model="formData.formDetail.tha">
</md-input-container>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<center>
<div class="line-space"></div>
</center>
</div>
</div>
<md-card ng-repeat="question in questionData">
<div class="topcard"></div>
<div class="row">
<div class="col-xs-1 col-sm-1 col-md-1">
</div>
<div class="col-xs-1 col-sm-1 col-md-1">
<div class="numquest">{{ $index+1 }}</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<md-input-container class="md-block fullwidth">
<label class="input-custom">Question (Eng)</label>
<input class="input-custom" ng-model="question.tqtopic.eng">
</md-input-container>
</div>
<div class="col-xs-2 col-sm-2 col-md-2">
<md-input-container class="md-block fullwidth">
<label class="input-custom">Question Type</label>
<md-select ng-model="question.type" class="input-custom" ng-change="setStructure($index)">
<md-option ng-repeat="mytype in questionType" value="{{ mytype.id }}" class="input-custom">
{{ mytype.name }}
</md-option>
</md-select>
</md-input-container>
</div>
<div class="col-xs-1 col-sm-1 col-md-1">
<a class="delquestion delright" ng-click="delQuestion($index)">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2">
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<md-input-container class="md-block fullwidth">
<label class="input-custom">Question (Thai)</label>
<input class="input-custom" ng-model="Question.tqtopic.tha">
</md-input-container>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 ">
<md-switch class="input-custom" aria-label="Required Question" ng-true-value="1" ng-false-value="0" ng-model="question.tqrequire">required</md-switch>
</div>
</div>
<questiontext ng-if="question.type == 1"></questiontext>
<questionchoice ng-if="question.type == 2 || question.type == 3"></questionchoice>
<questiontable ng-if="question.type == 4 || question.type == 5"></questiontable>
<subquestion ng-if="question.type == 6"></subquestion>
<div class="backcard"></div>
</md-card>
<div class="row">
<div class="col-xs-10 col-sm-10 col-md-10">
</div>
<div class="col-xs-2 col-sm-2 col-md-2">
<a class="btn btn-primary" ng-click="putQuestion()"><i class="fa fa-plus"></i></a>
</div>
</div>
<br>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>