mirror of https://github.com/akveo/blur-admin
adding & removing the multiple type question from the builder
Youssef ABIDI
parent
08fd6c9aa5
commit
046441d254
|
|
@ -6,15 +6,22 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
angular.module('BlurAdmin.pages.surveys')
|
angular.module('BlurAdmin.pages.surveys')
|
||||||
.controller('SurveysPageCtrl', SurveysPageCtrl);
|
.controller('SurveysPageCtrl', SurveysPageCtrl)
|
||||||
|
.directive('multiple', function() {
|
||||||
|
return {
|
||||||
|
templateUrl: 'app/pages/surveys/widgets/multiple.html'
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
/** @ngInject */
|
/** @ngInject */
|
||||||
function SurveysPageCtrl($scope, $timeout) {
|
function SurveysPageCtrl($scope, $compile, $timeout) {
|
||||||
|
|
||||||
$scope.isUnfolded = false;
|
$scope.isUnfolded = false;
|
||||||
|
$scope.actualId = 0;
|
||||||
|
$scope.survey = {};
|
||||||
$scope.survey.name = '';
|
$scope.survey.name = '';
|
||||||
$scope.survey.description = '';
|
$scope.survey.description = '';
|
||||||
$scope.survey.elements.length = 0;
|
$scope.survey.elements = [];
|
||||||
|
|
||||||
$scope.progressFunction = function() {
|
$scope.progressFunction = function() {
|
||||||
return $timeout(function() {}, 3000);
|
return $timeout(function() {}, 3000);
|
||||||
|
|
@ -31,14 +38,24 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
$scope.addElement = function(type){
|
$scope.addElement = function(type){
|
||||||
var element = createEmptyElement(type, $scope.survey.elements.length + 1);
|
$scope.actualId = $scope.survey.elements.length + 1;
|
||||||
|
var element = $scope.createEmptyElement(type, $scope.survey.elements.length + 1);
|
||||||
$scope.activeElement=element;
|
$scope.activeElement=element;
|
||||||
$scope.survey.elements.push(element);
|
$scope.survey.elements.push(element);
|
||||||
|
var compiledeHTML = $compile("<div multiple></div>")($scope);
|
||||||
|
$("#newElem").append(compiledeHTML);
|
||||||
|
console.log($scope.survey.elements);
|
||||||
};
|
};
|
||||||
|
|
||||||
function createEmptyElement(type,orderNo){
|
$scope.removeElement = function(index){
|
||||||
|
console.log("#q-"+index, index);
|
||||||
|
$scope.survey.elements.splice(index,1);
|
||||||
|
$("#q-"+index).remove();
|
||||||
|
};
|
||||||
|
|
||||||
|
$scope.createEmptyElement = function(type,orderNo){
|
||||||
return {
|
return {
|
||||||
id: 1, // TODO : generate the ID
|
id: $scope.survey.elements.length+1, // TODO : generate the ID
|
||||||
orderNo: orderNo,
|
orderNo: orderNo,
|
||||||
type: type
|
type: type
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -77,89 +77,7 @@
|
||||||
<h2>Page Title</h2>
|
<h2>Page Title</h2>
|
||||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
|
||||||
|
|
||||||
<div class="panel panel-default bootstrap-panel new-question-options-container">
|
<div id="newElem"></div>
|
||||||
<div class="panel-heading">
|
|
||||||
<h4 class="panel-title pull-left">Question 1</h4>
|
|
||||||
<div class="btn-group pull-right">
|
|
||||||
<button type="button" class="btn btn-default btn-icon" title="Your Title" data-toggle="tooltip"><i class="fa fa-arrows"></i></button>
|
|
||||||
<button type="button" class="btn btn-default btn-icon" ng-click="panelFoldToggle()"><i class="" ng-class="getTheFoldingClass()"></i></button>
|
|
||||||
<button type="button" class="btn btn-default btn-icon"><i class="fa fa-chevron-down"></i></button>
|
|
||||||
<button type="button" class="btn btn-default btn-icon"><i class="fa fa-chevron-up"></i></button>
|
|
||||||
<button type="button" class="btn btn-default btn-icon"><i class="fa fa-pencil-square-o"></i></button>
|
|
||||||
<button type="button" class="btn btn-default btn-icon"><i class="fa fa-trash-o"></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="panel-body" ng-show=isUnfolded>
|
|
||||||
<form class="form-horizontal">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="inputQuestion1" class="col-md-12 control-label">Question 1</label>
|
|
||||||
<div class="col-md-12">
|
|
||||||
<input type="email" class="form-control" id="inputQuestion1" placeholder="Question 1">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr/>
|
|
||||||
<!-- Begin Answer Choices -->
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="col-md-12">Answer Choices</label>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="inputEmail3" class="col-md-2 control-label"><input type="radio" value="option2" disabled="true"></label>
|
|
||||||
<div class="col-md-8">
|
|
||||||
<input type="text" class="form-control" placeholder="Enter an answer choice">
|
|
||||||
</div>
|
|
||||||
<div class="col-md-2 btn-group">
|
|
||||||
<button type="button" class="btn btn-default btn-icon"><i class="fa fa-plus-circle"></i></button>
|
|
||||||
<button type="button" class="btn btn-default btn-icon"><i class="fa fa-minus-circle"></i></button>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="inputEmail3" class="col-md-2 control-label"><input type="radio" value="option2" disabled="true"></label>
|
|
||||||
<div class="col-md-8">
|
|
||||||
<input type="text" class="form-control" placeholder="Enter an answer choice">
|
|
||||||
</div>
|
|
||||||
<div class="col-md-2 btn-group">
|
|
||||||
<button type="button" class="btn btn-default btn-icon"><i class="fa fa-plus-circle"></i></button>
|
|
||||||
<button type="button" class="btn btn-default btn-icon"><i class="fa fa-minus-circle"></i></button>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- End Answer Choices -->
|
|
||||||
|
|
||||||
<hr/>
|
|
||||||
|
|
||||||
<!-- Begin Answer's Options -->
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="col-md-12">Question Options</label>
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="col-md-10 pull-right">
|
|
||||||
<label class="checkbox-inline custom-checkbox nowrap">
|
|
||||||
<input type="checkbox" id="inlineCheckbox03" value="option3">
|
|
||||||
<span>Allow more than one answer to this question (use checkboxes)</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-10 pull-right">
|
|
||||||
<label class="checkbox-inline custom-checkbox nowrap">
|
|
||||||
<input type="checkbox" id="inlineCheckbox03" value="option3" checked="true">
|
|
||||||
<span>Add an "Other" Answer Option or Comment Field</span>
|
|
||||||
</label>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="inputEmail3" class="col-sm-2 control-label">Label</label>
|
|
||||||
<div class="col-sm-10">
|
|
||||||
<input type="text" class="form-control" id="inputEmail3" placeholder="Email">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- End Answer's Options -->
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="control-group col-sm-12 col-xs-12 text-center new-question-container">
|
<div class="control-group col-sm-12 col-xs-12 text-center new-question-container">
|
||||||
<div class="btn-group" uib-dropdown dropdown-append-to-body>
|
<div class="btn-group" uib-dropdown dropdown-append-to-body>
|
||||||
|
|
@ -170,7 +88,7 @@
|
||||||
</button>
|
</button>
|
||||||
<ul uib-dropdown-menu>
|
<ul uib-dropdown-menu>
|
||||||
<li><a href>Textbox</a></li>
|
<li><a href>Textbox</a></li>
|
||||||
<li><a href>Multiple Choices</a></li>
|
<li><a ng-click="addElement('multiple')" href>Multiple Choices</a></li>
|
||||||
<li><a href>Star Rating</a></li>
|
<li><a href>Star Rating</a></li>
|
||||||
<li><a href>Drop Down</a></li>
|
<li><a href>Drop Down</a></li>
|
||||||
<li><a href>Slider</a></li>
|
<li><a href>Slider</a></li>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
<div id="q-{{actualId}}" class="panel panel-default bootstrap-panel new-question-options-container">
|
||||||
|
<div class="panel-heading">
|
||||||
|
<h4 class="panel-title pull-left">Question {{actualId}}</h4>
|
||||||
|
<div class="btn-group pull-right">
|
||||||
|
<button type="button" class="btn btn-default btn-icon" title="Your Title" data-toggle="tooltip"><i class="fa fa-arrows"></i></button>
|
||||||
|
<button type="button" class="btn btn-default btn-icon" ng-click="panelFoldToggle()"><i class="" ng-class="getTheFoldingClass()"></i></button>
|
||||||
|
<button type="button" class="btn btn-default btn-icon"><i class="fa fa-chevron-down"></i></button>
|
||||||
|
<button type="button" class="btn btn-default btn-icon"><i class="fa fa-chevron-up"></i></button>
|
||||||
|
<button type="button" class="btn btn-default btn-icon"><i class="fa fa-pencil-square-o"></i></button>
|
||||||
|
<button type="button" class="btn btn-default btn-icon" ng-click="removeElement(actualId)"><i class="fa fa-trash-o"></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body" ng-show=isUnfolded>
|
||||||
|
<form class="form-horizontal">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="inputQuestion1" class="col-md-12 control-label">Question {{actualId}}</label>
|
||||||
|
<div class="col-md-12">
|
||||||
|
<input type="email" class="form-control" id="inputQuestion1" placeholder="Question 1">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr/>
|
||||||
|
<!-- Begin Answer Choices -->
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-md-12">Answer Choices</label>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="inputEmail3" class="col-md-2 control-label"><input type="radio" value="option2" disabled="true"></label>
|
||||||
|
<div class="col-md-8">
|
||||||
|
<input type="text" class="form-control" placeholder="Enter an answer choice">
|
||||||
|
</div>
|
||||||
|
<div class="col-md-2 btn-group">
|
||||||
|
<button type="button" class="btn btn-default btn-icon"><i class="fa fa-plus-circle"></i></button>
|
||||||
|
<button type="button" class="btn btn-default btn-icon"><i class="fa fa-minus-circle"></i></button>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="inputEmail3" class="col-md-2 control-label"><input type="radio" value="option2" disabled="true"></label>
|
||||||
|
<div class="col-md-8">
|
||||||
|
<input type="text" class="form-control" placeholder="Enter an answer choice">
|
||||||
|
</div>
|
||||||
|
<div class="col-md-2 btn-group">
|
||||||
|
<button type="button" class="btn btn-default btn-icon"><i class="fa fa-plus-circle"></i></button>
|
||||||
|
<button type="button" class="btn btn-default btn-icon"><i class="fa fa-minus-circle"></i></button>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End Answer Choices -->
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
|
||||||
|
<!-- Begin Answer's Options -->
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-md-12">Question Options</label>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="col-md-10 pull-right">
|
||||||
|
<label class="checkbox-inline custom-checkbox nowrap">
|
||||||
|
<input type="checkbox" id="inlineCheckbox03" value="option3">
|
||||||
|
<span>Allow more than one answer to this question (use checkboxes)</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-10 pull-right">
|
||||||
|
<label class="checkbox-inline custom-checkbox nowrap">
|
||||||
|
<input type="checkbox" id="inlineCheckbox03" value="option3" checked="true">
|
||||||
|
<span>Add an "Other" Answer Option or Comment Field</span>
|
||||||
|
</label>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="inputEmail3" class="col-sm-2 control-label">Label</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input type="text" class="form-control" id="inputEmail3" placeholder="Email">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End Answer's Options -->
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Loading…
Reference in New Issue