jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

building the json & other stuff

pull/339/head
Youssef ABIDI 2017-08-18 18:08:53 +01:00
parent 046441d254
commit 8739f29e61
9 changed files with 500 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/app/pages/surveys/SurveysPageCtrl.js
View File

@ -1,66 +0,0 @@
/**
* @author v.lugovsky
* created on 16.12.2015
*/
(function () {
'use strict';
angular.module('BlurAdmin.pages.surveys')
.controller('SurveysPageCtrl', SurveysPageCtrl)
.directive('multiple', function() {
return {
templateUrl: 'app/pages/surveys/widgets/multiple.html'
};
});
/** @ngInject */
function SurveysPageCtrl($scope, $compile, $timeout) {
$scope.isUnfolded = false;
$scope.actualId = 0;
$scope.survey = {};
$scope.survey.name = '';
$scope.survey.description = '';
$scope.survey.elements = [];
$scope.progressFunction = function() {
return $timeout(function() {}, 3000);
};
$scope.panelFoldToggle = function() {
$scope.isUnfolded = !$scope.isUnfolded;
console.log($scope.isUnfolded);
};
$scope.getTheFoldingClass = function() {
var $className = ( $scope.isUnfolded ) ? "fa fa-compress" : "fa fa-expand";
return $className;
};
$scope.addElement = function(type){
$scope.actualId = $scope.survey.elements.length + 1;
var element = $scope.createEmptyElement(type, $scope.survey.elements.length + 1);
$scope.activeElement=element;
$scope.survey.elements.push(element);
var compiledeHTML = $compile("<div multiple></div>")($scope);
$("#newElem").append(compiledeHTML);
console.log($scope.survey.elements);
};
$scope.removeElement = function(index){
console.log("#q-"+index, index);
$scope.survey.elements.splice(index,1);
$("#q-"+index).remove();
};
$scope.createEmptyElement = function(type,orderNo){
return {
id: $scope.survey.elements.length+1, // TODO : generate the ID
orderNo: orderNo,
type: type
};
}
}
})();

142
src/app/pages/surveys/SurveysPageCtrl.js.bak Normal file
View File

@ -0,0 +1,142 @@
/**
* @author v.lugovsky
* created on 16.12.2015
*/
(function () {
'use strict';
angular.module('BlurAdmin.pages.surveys')
.controller('SurveysPageCtrl', SurveysPageCtrl)
.directive('multiple', function() {
return {
templateUrl: 'app/pages/surveys/widgets/multiple.html'
};
})
.directive("contenteditable", function() {
return {
require: "ngModel",
link: function(scope, element, attrs, ngModel) {
function read() {
ngModel.$setViewValue(element.html());
}
ngModel.$render = function() {
element.html(ngModel.$viewValue || "");
};
element.bind("blur keyup change", function() {
scope.$apply(read);
});
}
};
});
/** @ngInject */
function SurveysPageCtrl($scope, $http, $compile, $timeout) {
$scope.editmode = true;
$scope.survey = {};
$scope.survey.name = 'Page Title';
$scope.survey.description = 'Page Description';
$scope.survey.elements = [];
$scope.progressFunction = function() {
return $timeout(function() {}, 3000);
};
$scope.panelFoldToggle = function(index) {
$scope.survey.elements[index].isUnfolded = !$scope.survey.elements[index].isUnfolded;
console.log($scope.survey.elements[index].isUnfolded);
};
$scope.getTheFoldingClass = function() {
var $className = ( $scope.isUnfolded ) ? "fa fa-compress" : "fa fa-expand";
return $className;
};
$scope.addElement = function(type){
var element = $scope.createEmptyElement(type, $scope.survey.elements.length + 1);
$scope.activeElement=element;
$scope.survey.elements.push(element);
$scope.updateBuilder();
console.log($scope.survey.elements);
};
$scope.removeElement = function(index){
$scope.survey.elements.splice(index,1);
$scope.updateBuilder();
};
$scope.createEmptyElement = function(type,orderNo){
var item = {
id: 1,
orderNo: 1,
value: null
};
return {
id: $scope.survey.elements.length+1, // TODO : generate the ID
orderNo: orderNo,
text: "",
type: type,
required: false,
multiAnswers: false,
isUnfolded: false,
comment: false,
commentLabel: '',
tags:[],
items: (type == 'multiple') ? [item] : [],
};
}
$scope.addNewItem=function(index){
var item = {
id: $scope.survey.elements[index].length + 1,
orderNo: $scope.survey.elements[index].length + 1,
value: null
};
$scope.survey.elements[index]['items'].push(item);
$scope.updateBuilder();
};
$scope.removeItem=function(index, itemIndex){
console.log(index, itemIndex, $scope.survey.elements);
if(itemIndex != 0) {
$scope.survey.elements[index]['items'].splice(itemIndex,1);
$scope.updateBuilder();
}
};
$scope.submitSurvey=function(){
$scope.json = angular.toJson($scope.survey);
var url = "/"
var parameter = JSON.stringify($scope.json);
$http.post(url, parameter).
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
console.log(data);
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
console.log("error",data);
});
};
$scope.updateBuilder=function(){
var compiledeHTML = $compile("<div multiple></div>")($scope);
$("#newElem").html(compiledeHTML);
console.log($scope.survey.elements);
};
}
})();

116
src/app/pages/surveys/create/create.html Normal file
View File

@ -0,0 +1,116 @@
<div id="surveys" class="row">
<div id="sidebar" class="col-md-4 col-lg-4">
<uib-accordion>
<uib-accordion-group panel-class="bootstrap-panel accordion-panel panel-default saved-questions">
<uib-accordion-heading>
Saved Questions <i class="fa pull-right fa-floppy-o"></i>
</uib-accordion-heading>
<section class="col-md-12 col-lg-12 no-gutter">
<button progress-button="progressFunction()" pb-style="flip-open" class="btn btn-default btn-with-icon col-md-12">
First Question
</button>
<button progress-button="progressFunction()" pb-style="flip-open" class="btn btn-default btn-with-icon col-md-12">
Second Question
</button>
<button progress-button="progressFunction()" pb-style="flip-open" class="btn btn-default btn-with-icon col-md-12">
Third Question
</button>
<button progress-button="progressFunction()" pb-style="flip-open" class="btn btn-default btn-with-icon col-md-12">
Last Question
</button>
</section>
</uib-accordion-group>
<uib-accordion-group panel-class="bootstrap-panel accordion-panel panel-default">
<uib-accordion-heading>
Survey Builder <i class="fa pull-right fa-gavel"></i>
</uib-accordion-heading>
<section class="col-md-12 col-lg-12 no-gutter">
<button ng-click="addElement('')" progress-button="progressFunction()" pb-style="flip-open" class="btn btn-default btn-with-icon col-md-12">
<i class="fa fa-font"></i>Textbox
</button>
<button ng-click="addElement('multiple')" progress-button="progressFunction()" pb-style="flip-open" class="btn btn-default btn-with-icon col-md-12">
<i class="fa fa-list"></i>Multiple Choices
</button>
<button progress-button="progressFunction()" pb-style="flip-open" class="btn btn-default btn-with-icon col-md-12">
<i class="fa fa-star"></i>Star Rating
</button>
<button progress-button="progressFunction()" pb-style="flip-open" class="btn btn-default btn-with-icon col-md-12">
<i class="fa fa-chevron-circle-down"></i>Drop Down
</button>
<button progress-button="progressFunction()" pb-style="flip-open" class="btn btn-default btn-with-icon col-md-12 ">
<i class="fa fa-sliders"></i>Slider
</button>
</section>
</uib-accordion-group>
<uib-accordion-group panel-class="bootstrap-panel accordion-panel panel-default survey-template">
<uib-accordion-heading>
Survey Template <i class="fa pull-right fa-file-code-o"></i>
</uib-accordion-heading>
<section class="col-md-12 col-lg-12 no-gutter">
<button progress-button="progressFunction()" pb-style="flip-open" class="btn btn-default btn-with-icon col-md-12">
First Template
</button>
<button progress-button="progressFunction()" pb-style="flip-open" class="btn btn-default btn-with-icon col-md-12">
Second Template
</button>
<button progress-button="progressFunction()" pb-style="flip-open" class="btn btn-default btn-with-icon col-md-12">
Third Template
</button>
<button progress-button="progressFunction()" pb-style="flip-open" class="btn btn-default btn-with-icon col-md-12">
Last Template
</button>
</section>
</uib-accordion-group>
<uib-accordion-group panel-class="bootstrap-panel accordion-panel panel-default">
<uib-accordion-heading>
Options <i class="fa pull-right ion-settings"></i>
</uib-accordion-heading>
Some options in here ...
</uib-accordion-group>
</uib-accordion>
</div>
<div class="col-md-8 col-lg-8">
<div id="survey-builder" class="panel panel-default bootstrap-panel">
<div class="panel-heading"><h2 class="panel-title pull-left">Survey Title</h2></div>
<div class="panel-body">
<h2 ng-model="survey.name" ng-attr-contenteditable="{{ editmode }}">Page Title</h2>
<p ng-model="survey.description" ng-attr-contenteditable="{{ editmode }}">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 id="newElem"></div>
<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>
<button type="button" class="btn btn-primary btn-with-icon btn-lg"><i class="ion-plus-round"></i>NEW QUESTION</button>
<button type="button" class="btn btn-primary btn-with-icon btn-lg" uib-dropdown-toggle>
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul uib-dropdown-menu>
<li><a href>Textbox</a></li>
<li><a ng-click="addElement('multiple')" href>Multiple Choices</a></li>
<li><a href>Star Rating</a></li>
<li><a href>Drop Down</a></li>
<li><a href>Slider</a></li>
</ul>
</div>
<hr />
<div class="btn-group">
<button ng-click="submitSurvey()" class="btn btn-success btn-lg">
SUBMIT
</button>
</div>
</div>
<br/>
<br/>
<br/>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>

22
src/app/pages/surveys/create/create.module.js Normal file
View File

@ -0,0 +1,22 @@
/**
* @author v.lugovsky
* created on 16.12.2015
*/
(function () {
'use strict';
angular.module('BlurAdmin.pages.surveys.create', [])
.directive('tagInput', tagInput);
function tagInput() {
return {
restrict: 'A',
link: function( $scope, elem, attr) {
$(elem).tagsinput({
tagClass: 'label label-' + attr.tagInput
});
}
};
}
})();

142
src/app/pages/surveys/create/createTabCtrl.js Normal file
View File

@ -0,0 +1,142 @@
/**
* @author v.lugovsky
* created on 16.12.2015
*/
(function () {
'use strict';
angular.module('BlurAdmin.pages.surveys.create')
.controller('CreateTabCtrl', CreateTabCtrl)
.directive('multiple', function() {
return {
templateUrl: 'app/pages/surveys/create/widgets/multiple.html'
};
})
.directive("contenteditable", function() {
return {
require: "ngModel",
link: function(scope, element, attrs, ngModel) {
function read() {
ngModel.$setViewValue(element.html());
}
ngModel.$render = function() {
element.html(ngModel.$viewValue || "");
};
element.bind("blur keyup change", function() {
scope.$apply(read);
});
}
};
});
/** @ngInject */
function CreateTabCtrl($scope, $http, $compile, $timeout) {
$scope.editmode = true;
$scope.survey = {};
$scope.survey.name = 'Page Title';
$scope.survey.description = 'Page Description';
$scope.survey.elements = [];
$scope.progressFunction = function() {
return $timeout(function() {}, 3000);
};
$scope.panelFoldToggle = function(index) {
$scope.survey.elements[index].isUnfolded = !$scope.survey.elements[index].isUnfolded;
console.log($scope.survey.elements[index].isUnfolded);
};
$scope.getTheFoldingClass = function() {
var $className = ( $scope.isUnfolded ) ? "fa fa-compress" : "fa fa-expand";
return $className;
};
$scope.addElement = function(type){
var element = $scope.createEmptyElement(type, $scope.survey.elements.length + 1);
$scope.activeElement=element;
$scope.survey.elements.push(element);
$scope.updateBuilder();
console.log($scope.survey.elements);
};
$scope.removeElement = function(index){
$scope.survey.elements.splice(index,1);
$scope.updateBuilder();
};
$scope.createEmptyElement = function(type,orderNo){
var item = {
id: 1,
orderNo: 1,
value: null
};
return {
id: $scope.survey.elements.length+1, // TODO : generate the ID
orderNo: orderNo,
text: "",
type: type,
required: false,
multiAnswers: false,
isUnfolded: false,
comment: false,
commentLabel: '',
tags:[],
items: (type == 'multiple') ? [item] : [],
};
}
$scope.addNewItem=function(index){
var item = {
id: $scope.survey.elements[index].length + 1,
orderNo: $scope.survey.elements[index].length + 1,
value: null
};
$scope.survey.elements[index]['items'].push(item);
$scope.updateBuilder();
};
$scope.removeItem=function(index, itemIndex){
console.log(index, itemIndex, $scope.survey.elements);
if(itemIndex != 0) {
$scope.survey.elements[index]['items'].splice(itemIndex,1);
$scope.updateBuilder();
}
};
$scope.submitSurvey=function(){
$scope.json = angular.toJson($scope.survey);
var url = "/"
var parameter = JSON.stringify($scope.json);
$http.post(url, parameter).
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
console.log(data);
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
console.log("error",data);
});
};
$scope.updateBuilder=function(){
var compiledeHTML = $compile("<div multiple></div>")($scope);
$("#newElem").html(compiledeHTML);
console.log($scope.survey.elements);
};
}
})();

66
src/app/pages/surveys/widgets/multiple.html → src/app/pages/surveys/create/widgets/multiple.html
View File

@ -1,48 +1,39 @@
<div id="q-{{actualId}}" class="panel panel-default bootstrap-panel new-question-options-container">
<div ng-repeat="element in survey.elements" id="q-{{$index}}" class="panel panel-default bootstrap-panel new-question-options-container">
<div class="panel-heading">
<h4 class="panel-title pull-left">Question {{actualId}}</h4>
<h4 class="panel-title pull-left">Question {{$index+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" ng-click="panelFoldToggle($index)"><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>
<button type="button" class="btn btn-default btn-icon" ng-click="removeElement($index)"><i class="fa fa-trash-o"></i></button>
</div>
</div>
<div class="panel-body" ng-show=isUnfolded>
<div class="panel-body" ng-show=survey.elements[$index].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">
<input ng-model="element.text" type="text" class="form-control" placeholder="Question's text">
</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 id="item-{{$index}}" class="form-group" ng-repeat="item in element['items']">
<label for="inputEmail3" class="col-md-2 control-label"><input type="radio" disabled="true"></label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="Enter an answer choice">
<input ng-model="item.value" 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>
<button type="button" ng-click="addNewItem($parent.$index)" class="btn btn-default btn-icon"><i class="fa fa-plus-circle"></i></button>
<button type="button" ng-click="removeItem($parent.$index, $index)" class="btn btn-default btn-icon"><i class="fa fa-minus-circle"></i></button>
</div>
</div>
</div>
@ -56,20 +47,27 @@
<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">
<input ng-model="element.required" type="checkbox">
<span>Required field</span>
</label>
</div>
<div class="col-md-10 pull-right">
<label class="checkbox-inline custom-checkbox nowrap">
<input ng-model="element.multiAnswers" type="checkbox">
<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">
<input ng-model="element.comment" type="checkbox">
<span>Add an "Other" Answer Option or Comment Field</span>
</label>
<div class="form-group">
<div class="form-group" ng-show=element.comment>
<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 class="col-sm-8">
<input ng-model="element.commentLabel" type="text" class="form-control">
</div>
</div>
@ -78,6 +76,16 @@
</div>
</div>
<!-- End Answer's Options -->
<hr/>
<!-- Begin Tags -->
<div class="form-group">
<label class="col-md-12">Question Tags</label>
<div class="col-md-12">
<input type="text" tag-input="primary" ng-model="element.tags" ng-list data-role="tagsinput" placeholder="Add Tag">
</div>
</div>
<!-- End Tags -->
</form>
</div>
</div>

11
src/app/pages/surveys/surveys.html
View File

@ -74,8 +74,8 @@
<div id="survey-builder" class="panel panel-default bootstrap-panel">
<div class="panel-heading"><h2 class="panel-title pull-left">Survey Title</h2></div>
<div class="panel-body">
<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>
<h2 ng-model="survey.name" ng-attr-contenteditable="{{ editmode }}">Page Title</h2>
<p ng-model="survey.description" ng-attr-contenteditable="{{ editmode }}">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 id="newElem"></div>
@ -94,7 +94,14 @@
<li><a href>Slider</a></li>
</ul>
</div>
<hr />
<div class="btn-group">
<button ng-click="submitSurvey()" class="btn btn-success btn-lg">
SUBMIT
</button>
</div>
</div>
<br/>
<br/>
<br/>

16
src/app/pages/surveys/surveys.module.js
View File

@ -5,7 +5,9 @@
(function () {
'use strict';
angular.module('BlurAdmin.pages.surveys', [])
angular.module('BlurAdmin.pages.surveys', [
'BlurAdmin.pages.surveys.create',
])
.config(routeConfig);
/** @ngInject */
@ -13,12 +15,20 @@
$stateProvider
.state('surveys', {
url: '/surveys',
templateUrl: 'app/pages/surveys/surveys.html',
controller: 'SurveysPageCtrl',
template : '<ui-view autoscroll="true" autoscroll-body-top></ui-view>',
title: 'Surveys',
sidebarMeta: {
icon: 'ion-gear-a',
order: 1500,
},
}).state('surveys.create', {
url: '/create',
templateUrl: 'app/pages/surveys/create/create.html',
controller: "CreateTabCtrl",
title: 'Create a Survey',
sidebarMeta: {
order: 0,
},
});
}

18
src/sass/theme/_layout.scss
View File

@ -247,3 +247,21 @@ a {
#surveys #survey-builder .new-question-options-container .panel-heading .btn-group{
margin-top: -25px;
}
#surveys [contenteditable='true']:hover{
cursor:pointer;
border: 1px dashed;
padding: 5px;
position:relative;
}
#surveys [contenteditable='true']:after{
content: "\f040";
font-family: FontAwesome;
opacity: 0;
position: absolute;
right: 10px;
top: 5px;
}
#surveys [contenteditable='true']:hover:after{
opacity: 1;
}