Skip to content

yotta / pictogram

Go to a project
Commit f809bc90 by Jose Antonio
Options

issue #853 infinite scroll ugly way 

Only fetch one level for subcategories
parent fdf25e81
Inline Side-by-side
Showing with 297 additions and 25 deletions
sails/src/api/controllers/PictoController.js
......@@ -119,6 +119,209 @@ module.exports = {
},
/**
* Return all pictos from a category and subcategoriesusing the language
* of the specified supervisor.
* @param {request} req {} (with supervisorId and categoryId as url parameters)
* @param {response} res
* [
* {
* expressions: [
* // There should be just one expression per picto
* // with the language being used by the supervisor
* {
* id: 1234,
* lang: 'es-es',
* text: 'nacimiento',
* picto: 23
* }
* ],
* source: 1,
* owner: null,
* id: 23,
* uri: 'picto/uri.jpg',
* category: 41
* }
* ]
*/
fromCatSubcat: function (req, res) {
var l = [];
var fs = require('fs');
// return empty for category 0 (that represents category pictos and all custom pictos)
if (req.params.id_cat == 0)
return res.ok(l);
Supervisor.findOne({ id: req.params.id }).then(function (supervisor) {
if (supervisor) {
PictoCat
.find({select: ['id'], id_supercat: req.params.id_cat })
.then(function (categories) {
var filtered = [req.params.id_cat];
for(var i =0; i<categories.length;i++){
filtered.push(categories[i].id);
}
Picto.find({ category: filtered })
.paginate({ page: req.params.page, limit: req.params.limit})
.populate('expressions', { lang: supervisor.lang })
.then(function (pictos) {
async.eachSeries(pictos, function(picto, next_cb) {
// check picto has expressions associated in student language
if (picto.expressions.length == 0 || picto.expressions[0].text.length == 0)
return next_cb();
// check picto image is available
picto.imageFileExists((found) => {
if (found) {
l.push(picto);
next_cb();
}
else
next_cb();
});
},
function (err) { // loop has end
if (err) throw err;
sails.log.debug(pictos.length + " pictos sent for category " + req.params.id_cat + " in language " + supervisor.lang);
return res.ok(l);
}); // end async.eachSeries
})
.catch(() => res.badRequest());
return categories;
})
.catch(function (err) {
throw err;
});
//get all categories under id_cat
// var promise = new Promise(function(resolve, reject){
// var cats = [];
// var catsFiltered = [];
// cats = getCategories(req.params.id_cat);
// while(cats.length > 1){
// var cat = cats.pop().id;
// catsFiltered.push(cat);
// cats = cats.concat(getCategories(cat));
// }
// console.log(catsFiltered);
// resolve(catsFiltered);
// });
//promise.then(function(catsFiltered){
// Picto.find({ category: catsFiltered })
// .paginate({ page: req.params.page, limit: req.params.limit})
// .populate('expressions', { lang: supervisor.lang })
// .then(function (pictos) {
// async.eachSeries(pictos, function(picto, next_cb) {
//
// // check picto has expressions associated in student language
// if (picto.expressions.length == 0 || picto.expressions[0].text.length == 0)
// return next_cb();
//
// // check picto image is available
// picto.imageFileExists((found) => {
// if (found) {
// l.push(picto);
// next_cb();
// }
// else
// next_cb();
// });
// },
// function (err) { // loop has end
// if (err) throw err;
// sails.log.debug(pictos.length + " pictos sent for category " + req.params.id_cat + " in language " + supervisor.lang);
// return res.ok(l);
// }); // end async.eachSeries
// })
// .catch(() => res.badRequest());
//});
} else {
return res.badRequest();
}
})
.catch(() => res.serverError());
function getCategories(id_cat){
PictoCat
.find({select: ['id'], id_supercat: id_cat })
.then(function (categories) {
console.log(categories);
return categories;
})
.catch(function (err) {
throw err;
});
}
},
/**
* Return all pictos from a SymbolStx using the language of the specified supervisor.
* @param {request} req {} (with supervisorId as url parameters)
* @param {response} res
* [
* {
* expressions: [
* // There should be just one expression per picto
* // with the language being used by the supervisor
* {
* id: 1234,
* lang: 'es-es',
* text: 'nacimiento',
* picto: 23
* }
* ],
* source: 1,
* owner: null,
* id: 23,
* uri: 'picto/uri.jpg',
* category: 41
* }
* ]
*/
fromSymbolStx: function (req, res) {
var l = [];
var fs = require('fs');
var cat = req.params.id_cat;
Supervisor.findOne({ id: req.params.id }).then(function (supervisor) {
if (supervisor) {
Picto.find({ source: 1})
.paginate({page: req.params.page, limit:req.params.limit})
.populate('expressions', { lang: supervisor.lang })
.then(function (pictos) {
async.eachSeries(pictos, function(picto, next_cb) {
// check picto has expressions associated in student language
if (picto.expressions.length == 0 || picto.expressions[0].text.length == 0)
return next_cb();
// check picto image is available
picto.imageFileExists((found) => {
if (found) {
l.push(picto);
next_cb();
}
else
next_cb();
});
},
function (err) { // loop has end
if (err) throw err;
sails.log.debug(pictos.length + " pictos sent from SymbolStx in language " + supervisor.lang);
return res.ok(l);
}); // end async.eachSeries
})
.catch(() => res.badRequest());
} else {
return res.badRequest();
}
})
.catch(() => res.serverError());
},
/**
* Add a tag to an existing picto. This tag is associated to the supervisor.
* @param {request} req
* {
......
sails/src/assets/app/bower.json
......@@ -29,7 +29,8 @@
"bootstrap-filestyle": "~1.2.1",
"ngMask": "angular-mask#~3.1.1",
"angular-recaptcha": "^4.0.1",
"ui-bootstrap": "~2.5.0"
"ui-bootstrap": "~2.5.0",
"ngInfiniteScroll": "^1.3.4"
},
"resolutions": {
"angular": ">=1 <1.3.0",
......
sails/src/assets/scripts/app.js
......@@ -19,7 +19,8 @@ var dashboardApp = angular.module('dashboardApp', [
'chart.js',
'ngLodash',
'ngMask',
'vcRecaptcha'
'vcRecaptcha',
'infinite-scroll'
]);
/* Main constants */
......
sails/src/assets/scripts/modules/student/controllers/addpicto.js
......@@ -20,7 +20,9 @@ dashboardControllers.controller('AddPictoCtrl', function (
student) {
$scope.source = 'symbolstx';
$scope.pictos = [];
$scope.pictos = []; // Pictos to show with infinite sroll
$scope.page = 1;
$scope.limit = 99; //pictos per page
$scope.symbolstxCats = [];
$scope.breadcrumbs = [];
$scope.loadingCatPictos = false;
......@@ -44,13 +46,33 @@ dashboardControllers.controller('AddPictoCtrl', function (
});
});
// 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
//
$scope.load_pictos = function (categoryId) {
$scope.loadingCatPictos = true;
$scope.pictos = [];
$http.get(config.backend + '/sup/' + supervisor.id + '/pic_fromcategory/' + categoryId)
var request = "";
if(categoryId == 0){
//Request page X from all pictos (symbolstx)
request = config.backend + '/sup/' + supervisor.id +
'/pic_fromSymbolStx/page/'+$scope.page+'/limit/'+$scope.limit;
}else{
request = config.backend + '/sup/' + supervisor.id +
'/pic_fromCatSubcat/category/'+categoryId+'/page/'+$scope.page+'/limit/'+$scope.limit;
}
$http.get(request)
.success(function (data) {
if (data)
$scope.pictos = data;
......@@ -92,6 +114,7 @@ dashboardControllers.controller('AddPictoCtrl', function (
// Load the folders of a category
//
$scope.load_category = function (categoryId){
$scope.page = 1;
$http.get(config.backend+'/sup/'+ supervisor.id +'/pic_categories/' + categoryId)
.success(function(data, status, headers, config) {
// Add to list
......@@ -262,4 +285,33 @@ dashboardControllers.controller('AddPictoCtrl', function (
if (cb) {cb()};
});
};
//Triggered when scrolling to bottom
$scope.scroll = function(){
$scope.loadingCatPictos = true;
$scope.page += 1;
var request = "";
if($scope.breadcrumbs.length == 1){
//Request page X from all pictos (symbolstx)
request = config.backend + '/sup/' + supervisor.id +
'/pic_fromSymbolStx/page/'+$scope.page+'/limit/'+$scope.limit;
}else{
request = config.backend + '/sup/' + supervisor.id +
'/pic_fromCatSubcat/category/'+$scope.breadcrumbs[$scope.breadcrumbs.length-1].id
+'/page/'+$scope.page+'/limit/'+$scope.limit;
}
$http.get(request)
.success(function (data) {
$scope.pictos = $scope.pictos.concat(data);
$scope.loadingCatPictos = false;
})
.error(function () {
$translate('error_loading_pictos').then(function (translation) {
ngToast.danger({ content: translation });
});
$scope.loadingCatPictos = false;
});
}
});
sails/src/assets/scripts/modules/student/views/addpicto.html
......@@ -43,7 +43,7 @@
<alert ng-show="alert.show" ng-model="alert" type="{{alert.type}}" close="closeAlert()">{{alert.msg}}</alert>
</div>
<div class="row" ng-show="source != 'newfile'">
<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 }}">
......@@ -57,25 +57,28 @@
</label>
</div>
<!-- Galería de pictos -->
<div
class="picto_peq pull-left"
ng-repeat="p in pictos | filter:srch_term_picto">
<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>
<div id="clearfix-infiniteScroll-parent" infinite-scroll="scroll()"
infinite-scroll-container="'#collections'">
<div
class="picto_peq pull-left"
ng-repeat="p in pictos | filter:srch_term_picto" >
<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>
</a>
</div>
</div>
</div>
<div class="clearfix"></div>
......
sails/src/assets/styles/main.css
......@@ -527,7 +527,7 @@ textarea.editable{
/* In addpicto */
#collections{
height: 400px;
height: 300px;
overflow: auto;
}
......@@ -988,3 +988,10 @@ form .progress {
background: orange;
width: 0;
}
#clearfix-infiniteScroll-parent::after {
display: block;
clear: both;
content: " ";
width: 0;
height: 0;
}
sails/src/config/policies.js
......@@ -73,7 +73,9 @@ module.exports.policies = {
destroy: ['tokenAuth'],
del_tag: ['tokenAuth'],
categories: ['tokenAuth'],
fromcategory: ['tokenAuth']
fromcategory: ['tokenAuth'],
fromSymbolStx: ['tokenAuth'],
fromCatSubcat: ['tokenAuth']
},
ServerController: {
......
sails/src/config/routes.js
......@@ -106,6 +106,8 @@ module.exports.routes = {
'GET /sup/:id/pictos': 'SupervisorController.pictos',
'GET /sup/:id/pic_categories/:id_cat': 'PictoController.categories',
'GET /sup/:id/pic_fromcategory/:id_cat': 'PictoController.fromcategory',
'GET /sup/:id/pic_fromSymbolStx/page/:page/limit/:limit': 'PictoController.fromSymbolStx',
'GET /sup/:id/pic_fromCatSubcat/category/:id_cat/page/:page/limit/:limit': 'PictoController.fromCatSubcat',
'GET /sup/email/:email': 'SupervisorController.getByEmail',
'GET /sup/changepass/:email': 'SupervisorController.request_change_password',
'PUT /sup/changepass': 'SupervisorController.change_password',
......
sails/src/tasks/config/concat.js
......@@ -25,6 +25,7 @@ module.exports = function (grunt) {
'assets/app/bower_components/chart.js/dist/Chart.min.js',
'assets/app/bower_components/angular-chart.js/dist/angular-chart.min.js',
'assets/app/bower_components/ng-lodash/build/ng-lodash.js',
'assets/app/bower_components/ngInfiniteScroll/build/ng-infinite-scroll.min.js',
'assets/app/bower_components/ng-file-upload/ng-file-upload-shim.min.js',
'assets/app/bower_components/ng-file-upload/ng-file-upload.min.js',
'assets/app/bower_components/ngImgCrop/compile/minified/ng-img-crop.js',
......
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