Skip to content

yotta / pictogram

Go to a project
Commit e900c5f4 by Arturo Montejo Ráez
Options

working on own pictos modal

parent 34ac69c7
Inline Side-by-side
Showing with 103 additions and 295 deletions
sails/src/assets/scripts/modules/student/controllers/addpicto.js
...@@ -17,7 +17,8 @@ dashboardControllers.controller('AddPictoCtrl', function ( ...@@ -17,7 +17,8 @@ dashboardControllers.controller('AddPictoCtrl', function (
ngToast, ngToast,
config, config,
supervisor, supervisor,
student) { student,
onlyOwn) {
$scope.source = 'symbolstx'; $scope.source = 'symbolstx';
$scope.pictos = []; // Pictos to show with infinite sroll $scope.pictos = []; // Pictos to show with infinite sroll
...@@ -26,36 +27,43 @@ dashboardControllers.controller('AddPictoCtrl', function ( ...@@ -26,36 +27,43 @@ dashboardControllers.controller('AddPictoCtrl', function (
$scope.symbolstxCats = []; $scope.symbolstxCats = [];
$scope.breadcrumbs = []; $scope.breadcrumbs = [];
$scope.loadingCatPictos = false; $scope.loadingCatPictos = false;
$scope.radioModel = 'Middle'; $scope.radioModel = 'Middle';
$scope.onlyOwn = onlyOwn;
if (onlyOwn)
$scope.source = 'ownpictos';
$scope.breadcrumbs.push({ /*
id: 0, * Get data about SymbolStix
exp: 'Inicio', */
glyphicon: 'glyphicon glyphicon-home' if (!onlyOwn) { // only if the modal will allow to select SymbolStix pictos
}); $scope.breadcrumbs.push({
id: 0,
// Request of general pictos categories (symbolstx) exp: 'Inicio',
$http.get(config.backend + '/sup/' + supervisor.id + '/pic_categories/0') glyphicon: 'glyphicon glyphicon-home'
.success(function (data) {
$scope.symbolstxCats = data;
})
.error(function () {
$translate('error_loading_pictos').then(function (translation) {
ngToast.danger({ content: translation });
}); });
});
// Request of general pictos categories (symbolstx)
// Request page 1 pictos (symbolstx) $http.get(config.backend + '/sup/' + supervisor.id + '/pic_categories/0')
$http.get(config.backend + '/sup/' + supervisor.id + '/pic_fromSymbolStx/page/1/limit/'+$scope.limit) .success(function (data) {
.success(function (data) { $scope.symbolstxCats = data;
$scope.pictos = data; })
}) .error(function () {
.error(function () { $translate('error_loading_pictos').then(function (translation) {
$translate('error_loading_pictos').then(function (translation) { ngToast.danger({ content: translation });
ngToast.danger({ content: translation }); });
}); });
});
// Request page 1 pictos (symbolstx)
$http.get(config.backend + '/sup/' + supervisor.id + '/pic_fromSymbolStx/page/1/limit/'+$scope.limit)
.success(function (data) {
$scope.pictos = data;
})
.error(function () {
$translate('error_loading_pictos').then(function (translation) {
ngToast.danger({ content: translation });
});
});
}
// //
// Load pictos from a category // Load pictos from a category
...@@ -88,7 +96,7 @@ dashboardControllers.controller('AddPictoCtrl', function ( ...@@ -88,7 +96,7 @@ dashboardControllers.controller('AddPictoCtrl', function (
}; };
// //
// Load pictos from owned by the actual supervisor // Load pictos owned by the actual supervisor
// //
$scope.load_own_pictos = function () { $scope.load_own_pictos = function () {
$scope.source = 'ownpictos'; $scope.source = 'ownpictos';
...@@ -208,7 +216,7 @@ dashboardControllers.controller('AddPictoCtrl', function ( ...@@ -208,7 +216,7 @@ dashboardControllers.controller('AddPictoCtrl', function (
picto.expressions = []; picto.expressions = [];
$scope.open_exp(picto, () => { $scope.open_exp(picto, () => {
$scope.pictos.push(picto); $scope.pictos.push(picto);
$scope.load_own_pictos(); load_own_pictos();
cb(); cb();
}); });
}); });
...@@ -238,14 +246,16 @@ dashboardControllers.controller('AddPictoCtrl', function ( ...@@ -238,14 +246,16 @@ dashboardControllers.controller('AddPictoCtrl', function (
} }
} }
// websocket emit vocabulary delete action if (!$scope.onlyOwn) {
io.socket.post('/stu/vocabulary', { // websocket emit vocabulary delete action
action: 'delete', io.socket.post('/stu/vocabulary', {
attributes: { action: 'delete',
id_stu: student.id, attributes: {
stu_picto: pictoId id_stu: student.id,
} stu_picto: pictoId
}, function () {}); }
}, function () {});
}
}) })
.error(function () {}); .error(function () {});
...@@ -345,7 +355,7 @@ dashboardControllers.controller('AddPictoCtrl', function ( ...@@ -345,7 +355,7 @@ dashboardControllers.controller('AddPictoCtrl', function (
glyphicon: 'glyphicon glyphicon-chevron-right' glyphicon: 'glyphicon glyphicon-chevron-right'
}); });
} }
$scope.symbolstxCats = []; $scope.symbolstxCats = [];
$http.get(request) $http.get(request)
......
sails/src/assets/scripts/modules/student/controllers/collections.js
...@@ -359,9 +359,13 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec ...@@ -359,9 +359,13 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
}, },
supervisor: function () { supervisor: function () {
return $scope.user; return $scope.user;
},
onlyOwn: function () {
return false;
} }
} }
}); });
// Returned data from the modal window // Returned data from the modal window
modalInstance.result.then(function (pictoId) { modalInstance.result.then(function (pictoId) {
......
sails/src/assets/scripts/modules/student/views/addpicto.html
...@@ -5,11 +5,12 @@ ...@@ -5,11 +5,12 @@
<button type="button" class="close" ng-click="close()"> <button type="button" class="close" ng-click="close()">
<span aria-hidden="true">&times;</span><span class="sr-only" translate>close</span> <span aria-hidden="true">&times;</span><span class="sr-only" translate>close</span>
</button> </button>
<h4 class="modal-title" id="myModalLabel" translate>add_picto</h4> <h4 class="modal-title" id="myModalLabel" translate ng-show="!onlyOwn">add_picto</h4>
<h4 class="modal-title" id="myModalLabel" translate ng-show="onlyOwn">own_pictos</h4>
<hr> <hr>
<div class="btn-group"> <div class="btn-group" ng-show="!onlyOwn">
<button class="btn btn-default" btn-radio="'symbolstx'" ng-model="source" ng-click="open_category_from_bc('0')"> <button class="btn btn-default" btn-radio="'symbolstx'" ng-model="source" ng-click="open_category_from_bc('0')">
<span class="glyphicon glyphicon-th"></span> SymbolStix <span class="glyphicon glyphicon-th"></span> SymbolStix
</button> </button>
...@@ -21,7 +22,7 @@ ...@@ -21,7 +22,7 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div ng-show="source == 'symbolstx'" class="panel panel-default" id="bread_and_categories"> <div ng-show="source == 'symbolstx' && !onlyOwn" class="panel panel-default" id="bread_and_categories">
<div class="panel-heading"> <div class="panel-heading">
<div class="pull-left" ng-repeat="b in breadcrumbs"> <div class="pull-left" ng-repeat="b in breadcrumbs">
<a ng-click="open_category_from_bc(b.id)"> <a ng-click="open_category_from_bc(b.id)">
...@@ -43,85 +44,51 @@ ...@@ -43,85 +44,51 @@
<alert ng-show="alert.show" ng-model="alert" type="{{alert.type}}" close="closeAlert()">{{alert.msg | translate}}</alert> <alert ng-show="alert.show" ng-model="alert" type="{{alert.type}}" close="closeAlert()">{{alert.msg | translate}}</alert>
</div> </div>
<div class="row" ng-show="source != 'newfile'" > <div id="collections" class="col-md-12 category-collection"
<div id="collections" class="col-md-12 category-collection" ng-class="{ 'category-collection-loading': loadingCatPictos }"
ng-class="{ 'category-collection-loading': loadingCatPictos }" data-loading="{{ 'loading_pictos' | translate }}">
data-loading="{{ 'loading_pictos' | translate }}"> <form ng-submit="search()">
<form ng-submit="search()"> <div class="input-group" id="search_pictos_box">
<div class="input-group" id="search_pictos_box"> <input type="text" class="form-control" placeholder="{{ 'filter' | translate }}"
<input type="text" class="form-control" placeholder="{{ 'filter' | translate }}" id="srch_term_picto" name="srch_term_picto" ng-model="srch_term_picto">
id="srch_term_picto" name="srch_term_picto" ng-model="srch_term_picto"> <span class="input-group-btn">
<span class="input-group-btn"> <button type="submit" class="btn btn-primary">
<button type="submit" class="btn btn-primary"> <i class="fa fa-search" aria-hidden="true"> {{ 'search' | translate }}</i>
<i class="fa fa-search" aria-hidden="true"> {{ 'search' | translate }}</i> </button>
</button> </span>
</span>
</div>
</form>
<div ng-show="source == 'ownpictos'" class="input-group">
<button class="btn btn-success" ngf-select ng-model="picFile" accept="image/*" ngf-change="addOwnPicto()">
<span class="glyphicon glyphicon-folder-open"></span> {{ 'new_img' | translate }}
</label>
</div>
<!-- Galería de pictos -->
<div id="clearfix-infiniteScroll-parent" infinite-scroll="scroll()"
infinite-scroll-container="'#collections'">
<div
class="picto_peq pull-left"
ng-repeat="p in pictos" >
<img ng-src="{{p.uri}}" popover="{{p.expressions[0].text}}" popover-trigger="mouseenter" />
<!-- Options to remove picto (Only for own pictos) -->
<div class="picto_options" ng-show="source == 'ownpictos'">
<a ng-click="remove_own_picto(p.id)" class="picto_remove" title="{{ 'delete' | translate}}">
<span class="color_red glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
</a>
</div>
<div class="picto_options">
<a ng-click="remove_own_picto(p.id)" class="picto_remove" title="{{ 'delete' | translate}}">
<a
ng-click="close(p.id)"
class="picto_add"
title="{{ 'add_picto' | translate}}">
<i class="color_green glyphicon glyphicon-plus-sign" aria-hidden="true"></i>
</a>
</a>
</div>
</div>
</div> </div>
<div class="clearfix"></div> </form>
<div ng-show="source == 'ownpictos'" class="input-group">
<button class="btn btn-success" ngf-select ng-model="picFile" accept="image/*" ngf-change="addOwnPicto()">
<span class="glyphicon glyphicon-folder-open"></span> {{ 'new_img' | translate }}
</label>
</div> </div>
</div> <!-- Galería de pictos -->
<div id="clearfix-infiniteScroll-parent" infinite-scroll="scroll()"
<!-- crop view --> infinite-scroll-container="'#collections'">
<div id="crop_area" ng-show="source == 'newfile'"> <div
<div class="row"> class="picto_peq pull-left"
<div class="col-md-8"> ng-repeat="p in pictos" >
<div ngf-drop ng-model="picFile" ngf-pattern="image/*" class="cropArea"> <img ng-src="{{p.uri}}" popover="{{p.expressions[0].text}}" popover-trigger="mouseenter" />
<img-crop <!-- Options to remove picto (Only for own pictos) -->
image="picFile | ngfDataUrl" <div class="picto_options" ng-show="source == 'ownpictos'">
result-image="croppedDataUrl" ng-init="croppedDataUrl=''" <a ng-click="remove_own_picto(p.id)" class="picto_remove" title="{{ 'delete' | translate}}">
area-type="square" <span class="color_red glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
result-image-size="200" </a>
>
</img-crop>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<img ng-src="{{ croppedDataUrl }}" />
</div> </div>
<div class="form-group"> <div class="picto_options">
<button class="btn btn-default" ng-click="upload(croppedDataUrl, picFile.name)" ng-model="picFile" accept="image/*"> <a ng-click="remove_own_picto(p.id)" class="picto_remove" title="{{ 'delete' | translate}}">
<span class="glyphicon glyphicon-upload"></span> {{ 'upload_image' | translate }} <a
</button> ng-click="close(p.id)"
</div> class="picto_add"
<div class="form-group"> title="{{ 'add_picto' | translate}}">
<span class="progress" ng-show="progress >= 0"> <i class="color_green glyphicon glyphicon-plus-sign" aria-hidden="true"></i>
<div style="width:{{progress}}%" ng-bind="progress + '%'"></div> </a>
</span> </a>
</div> </div>
</div> </div>
</div> </div>
<div class="clearfix"></div>
</div> </div>
</div> <!-- /modal-body --> </div> <!-- /modal-body -->
......
sails/src/assets/scripts/modules/supervisor/controllers/own_pictos.js deleted 100644 → 0
/* global dashboardControllers */
'use strict';
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
dashboardControllers.controller('OwnPictosCtrl', function (
$scope,
$http,
config,
$window,
$location,
$modal,
$modalInstance,
$translate,
supervisor,
student
) {
//Data
$scope.studentData = student;
$scope.supervisor = supervisor;
$scope.source = 'ownpictos';
//Supervisor pictos
$http.get(config.backend + '/sup/' + $scope.supervisor.id + '/pictos')
.success(function (data) {
if (data) {
$scope.pictos = data;
} else {
$scope.pictos = [];
}
})
.error(function () {
$translate('error_loading_pictos').then(function (translation) {
ngToast.danger({ content: translation });
});
});
//Add own picto
$scope.addOwnPicto = function () {
$scope.progress = 0;
var modalInstance = $modal.open({
animation: true,
templateUrl: 'modules/common/views/cropimg.html',
controller: 'CropImgCtrl',
size: 'lg',
resolve: {
picFile: () => {return $scope.picFile;},
uploadFunc: () => {return $scope.upload;},
progress: () => {return $scope.progress;}
}
});
modalInstance.result.then(function () {});
};
// Delete own picto
$scope.removeOwnPicto = function (pictoId) {
$translate('confirmation').then(t => {
if ($window.confirm(t))
$http.delete(config.backend + '/picto/' + pictoId)
.success(function () {
var i;
for (i = 0; i < $scope.pictos.length; i++) {
if (pictoId === $scope.pictos[i].id) {
$scope.pictos.splice(i, 1);
}
}
// websocket emit vocabulary delete action
io.socket.post('/stu/vocabulary', {
action: 'delete',
attributes: {
stu_picto: pictoId
}
}, function () {});
})
.error(function () {});
});
};
//Modal interaction
$scope.close = function (pictoId) {
$modalInstance.close(pictoId);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
sails/src/assets/scripts/modules/supervisor/controllers/supervisor.js
...@@ -50,18 +50,22 @@ dashboardControllers.controller('SupervisorCtrl', function SupervisorCtrl( ...@@ -50,18 +50,22 @@ dashboardControllers.controller('SupervisorCtrl', function SupervisorCtrl(
$scope.own_pictos = function () { $scope.own_pictos = function () {
var modalInstance = $modal.open({ var modalInstance = $modal.open({
animation: true, animation: true,
templateUrl: 'modules/supervisor/views/own_pictos.html', templateUrl: 'modules/student/views/addpicto.html',
controller: 'OwnPictosCtrl', controller: 'AddPictoCtrl',
size: 'lg', size: 'lg',
resolve: { resolve: {
student: function () { student: function () {
return $scope.studentData; return null;
}, },
supervisor: function () { supervisor: function () {
return $scope.user; return $scope.user;
},
onlyOwn: function () {
return true;
} }
} }
}); });
}; }
}); });
sails/src/assets/scripts/modules/supervisor/views/own_pictos.html deleted 100644 → 0
<div>
<div class="modal-header">
<button type="button" class="close" ng-click="close()">
<span aria-hidden="true">&times;</span><span class="sr-only" translate>close</span>
</button>
<h4 class="modal-title" id="myModalLabel" translate>own_pictos</h4>
</div>
<div class="modal-body">
<div>
<alert ng-show="alert.show" ng-model="alert" type="{{alert.type}}" close="closeAlert()">{{alert.msg | translate}}</alert>
</div>
<div class="row" ng-show="source != 'newfile'" >
<div id="collections" class="col-md-12 category-collection"
ng-class="{ 'category-collection-loading': loadingCatPictos }"
data-loading="{{ 'loading_pictos' | translate }}">
<div ng-show="source == 'ownpictos'" class="input-group">
<button class="btn btn-success" ngf-select ng-model="picFile" accept="image/*" ngf-change="addOwnPicto()">
<span class="glyphicon glyphicon-folder-open"></span> {{ 'new_img' | translate }}
</button>
</div>
<hr>
<!-- Galería de pictos -->
<div id="clearfix-infiniteScroll-parent" infinite-scroll="scroll()"
infinite-scroll-container="'#collections'">
<div
class="picto_peq pull-left"
ng-repeat="p in pictos" >
<img ng-src="{{p.uri}}" popover="{{p.expressions[0].text}}" popover-trigger="mouseenter" />
<!-- Options to remove picto (Only for own pictos) -->
<div class="picto_options" ng-show="source == 'ownpictos'">
<a ng-click="removeOwnPicto(p.id)" class="picto_remove" title="{{ 'delete' | translate}}">
<span class="color_red glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- crop view -->
<div id="crop_area" ng-show="source == 'newfile'">
<div class="row">
<div class="col-md-8">
<div ngf-drop ng-model="picFile" ngf-pattern="image/*" class="cropArea">
<img-crop
image="picFile | ngfDataUrl"
result-image="croppedDataUrl" ng-init="croppedDataUrl=''"
area-type="square"
result-image-size="200"
>
</img-crop>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<img ng-src="{{ croppedDataUrl }}" />
</div>
<div class="form-group">
<button class="btn btn-default" ng-click="upload(croppedDataUrl, picFile.name)" ng-model="picFile" accept="image/*">
<span class="glyphicon glyphicon-upload"></span> {{ 'upload_image' | translate }}
</button>
</div>
<div class="form-group">
<span class="progress" ng-show="progress >= 0">
<div style="width:{{progress}}%" ng-bind="progress + '%'"></div>
</span>
</div>
</div>
</div>
</div>
</div> <!-- /modal-body -->
<div class="modal-footer">
<button class="btn btn-primary" ng-click="cancel()">{{ 'close' | translate }}</button>
</div>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment