Skip to content

yotta / pictogram

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

working on issue #627

parent db9164d7
Inline Side-by-side
Showing with 117 additions and 315 deletions
sails/src/assets/scripts/modules/login/controllers/login.js
...@@ -50,7 +50,7 @@ function LoginCtrl( ...@@ -50,7 +50,7 @@ function LoginCtrl(
$http $http
.get(config.backend + '/office/' + $stateParams.office) .get(config.backend + '/office/' + $stateParams.office)
.success(function (data) { .success(function (data) {
$scope.office = data; $scope.office = data;
}); });
} }
...@@ -59,6 +59,10 @@ function LoginCtrl( ...@@ -59,6 +59,10 @@ function LoginCtrl(
$http $http
.post(config.backend + '/sup/login', $scope.credentials) .post(config.backend + '/sup/login', $scope.credentials)
.success(function (data) { .success(function (data) {
// default logo to Pictogram logo
if (data.user.office.logo_url.length < 5)
data.user.office.logo_url = 'img/logo_pictogram.png';
$window.sessionStorage.token = data.token; $window.sessionStorage.token = data.token;
// Adapt language en-us to en-gb (the latter is the one supported for 'en') // Adapt language en-us to en-gb (the latter is the one supported for 'en')
......
sails/src/assets/scripts/modules/login/views/login.html
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
</p> </p>
--> -->
<p class="text-center"> <p class="text-center">
<img src="{{office.logo_url}}" alt="{{office.name}}" title="{{office.name}}"> <img ng-src="{{office.logo_url}}" alt="{{office.name}}" title="{{office.name}}">
</p> </p>
<!-- Formulario --> <!-- Formulario -->
<!-- LoginCtrl controls here, see app.js --> <!-- LoginCtrl controls here, see app.js -->
......
sails/src/assets/scripts/modules/student/controllers/addpicto.js
...@@ -16,25 +16,13 @@ dashboardControllers.controller('AddPictoCtrl', function ( ...@@ -16,25 +16,13 @@ dashboardControllers.controller('AddPictoCtrl', function (
$translate, $translate,
ngToast, ngToast,
supervisor, supervisor,
student, student) {
categories,
studentPictos,
freeCategoryPictos,
emptyStudentPicto) {
$scope.source = 'symbolstx'; $scope.source = 'symbolstx';
$scope.categories = categories;
$scope.studentPictos = studentPictos;
$scope.pictos = []; $scope.pictos = [];
$scope.symbolstxCats = []; $scope.symbolstxCats = [];
$scope.breadcrumbs = []; $scope.breadcrumbs = [];
$scope.addedPictos = {};
$scope.freeAddedPictos = [];
$scope.loadingCatPictos = false; $scope.loadingCatPictos = false;
$scope.categories.forEach(function (category) {
$scope.addedPictos[category.picto.id] = [];
});
$scope.breadcrumbs.push({ $scope.breadcrumbs.push({
id: 0, id: 0,
exp: 'Inicio', exp: 'Inicio',
...@@ -61,7 +49,7 @@ dashboardControllers.controller('AddPictoCtrl', function ( ...@@ -61,7 +49,7 @@ dashboardControllers.controller('AddPictoCtrl', function (
$http.get(config.backend + '/sup/' + supervisor.id + '/pic_fromcategory/' + categoryId) $http.get(config.backend + '/sup/' + supervisor.id + '/pic_fromcategory/' + categoryId)
.success(function (data) { .success(function (data) {
if (data) if (data)
$scope.pictos = data; $scope.pictos = data;
$scope.loadingCatPictos = false; $scope.loadingCatPictos = false;
setTimeout(function () { $scope.$apply(); }); setTimeout(function () { $scope.$apply(); });
}) })
...@@ -190,188 +178,6 @@ dashboardControllers.controller('AddPictoCtrl', function ( ...@@ -190,188 +178,6 @@ dashboardControllers.controller('AddPictoCtrl', function (
}; };
// //
// Add a picto to student when it is dropped into a category
//
$scope.handleDropAddPicto = function (addedPictoId, addedCategoryId) {
var pictoId = parseInt(document.getElementById(addedPictoId).dataset.pictoId, 10);
var pictoURI = document.getElementById(addedPictoId).dataset.pictoUri;
var categoryId = parseInt(document.getElementById(addedCategoryId).dataset.categoryId, 10);
var categoryGrid = $scope.studentPictos[categoryId];
var positionX;
var positionY;
// Check if there is space in category
for (positionX = 0; positionX < categoryGrid.length; positionX++) {
for (positionY = 0; positionY < categoryGrid[positionX].length; positionY++) {
if (categoryGrid[positionX][positionY] === emptyStudentPicto) {
break;
}
}
if (categoryGrid[positionX][positionY] === emptyStudentPicto) {
break;
}
}
if (typeof positionX !== 'number' || typeof positionY !== 'number') {
$translate('no_space_in_category').then(function (translation) {
ngToast.danger({ content: translation });
});
return;
}
// Send the picto to the server
$http.post(config.backend + '/stu/' + student.id + '/picto/' + pictoId, {
attributes: {
id_cat: categoryId,
coord_x: positionX,
coord_y: positionY
}
})
.success(function (studentPicto) {
$translate('picto_added').then(function (translation) {
ngToast.success({ content: translation });
});
studentPicto.picto.uri = pictoURI;
categoryGrid[positionX][positionY] = studentPicto;
$scope.addedPictos[categoryId].push(studentPicto);
io.socket.post('/stu/vocabulary', {
action: 'add',
attributes: {
id_stu: student.id,
stu_picto: studentPicto
}
}, function () {});
})
.error(function () {
$translate('error_adding_picto').then(function (translation) {
ngToast.danger({ content: translation });
});
});
};
/**
* A picto is added to the "free" category
*/
$scope.handleDropAddFreePicto = function (addedPictoId) {
var pictoId = parseInt(document.getElementById(addedPictoId).dataset.pictoId, 10);
var pictoURI = document.getElementById(addedPictoId).dataset.pictoUri;
var positionX;
var positionY;
// Check if there is space in category
for (positionX = 0; positionX < freeCategoryPictos.length; positionX++) {
for (positionY = 0; positionY < freeCategoryPictos[positionX].length; positionY++) {
if (freeCategoryPictos[positionX][positionY] === emptyStudentPicto) {
break;
}
}
if (freeCategoryPictos[positionX][positionY] === emptyStudentPicto) {
break;
}
}
if (typeof positionX !== 'number' || typeof positionY !== 'number') {
$translate('no_space_in_category').then(function (translation) {
ngToast.danger({ content: translation });
});
return;
}
// Send the picto to the server
$http.post(config.backend + '/stu/' + student.id + '/picto/' + pictoId, {
attributes: {
free_category_coord_x: positionX,
free_category_coord_y: positionY
}
})
.success(function (studentPicto) {
$translate('picto_added').then(function (translation) {
ngToast.success({ content: translation });
});
studentPicto.picto.uri = pictoURI;
freeCategoryPictos[positionX][positionY] = studentPicto;
$scope.freeAddedPictos.push(studentPicto);
io.socket.post('/stu/vocabulary', {
action: 'add',
attributes: {
id_stu: student.id,
stu_picto: studentPicto
}
}, function () {});
})
.error(function () {
$translate('error_adding_picto').then(function (translation) {
ngToast.danger({ content: translation });
});
});
};
//
// Delete picto added
//
$scope.remove_picto = function (studentPicto, categoryId) {
$http.delete(config.backend + '/stu/' + student.id + '/picto/' + studentPicto.id)
.success(function () {
var i;
$scope.studentPictos
[categoryId]
[studentPicto.attributes.coord_x]
[studentPicto.attributes.coord_y] = emptyStudentPicto;
for (i = 0; i < $scope.addedPictos[categoryId].length; i++) {
if (studentPicto === $scope.addedPictos[categoryId][i]) {
$scope.addedPictos[categoryId].splice(i, 1);
break;
}
}
// websocket emit vocabulary delete action
io.socket.post('/stu/vocabulary', {
action: 'delete',
attributes: {
id_stu: student.id,
stu_picto: studentPicto
}
}, function () {});
})
.error(function () {});
};
//
// Delete picto added to free category
//
$scope.removeFreePicto = function (studentPicto) {
$http.delete(config.backend + '/stu/' + student.id + '/picto/' + studentPicto.id)
.success(function () {
var i;
freeCategoryPictos
[studentPicto.attributes.free_category_coord_x]
[studentPicto.attributes.free_category_coord_y] = emptyStudentPicto;
for (i = 0; i < $scope.freeAddedPictos.length; i++) {
if (studentPicto === $scope.freeAddedPictos[i]) {
$scope.freeAddedPictos.splice(i, 1);
break;
}
}
// websocket emit vocabulary delete action
io.socket.post('/stu/vocabulary', {
action: 'delete',
attributes: {
id_stu: student.id,
stu_picto: studentPicto
}
}, function () {});
})
.error(function () {});
};
//
// Delete own picto // Delete own picto
// //
$scope.remove_own_picto = function (pictoId) { $scope.remove_own_picto = function (pictoId) {
...@@ -400,8 +206,8 @@ dashboardControllers.controller('AddPictoCtrl', function ( ...@@ -400,8 +206,8 @@ dashboardControllers.controller('AddPictoCtrl', function (
}); });
}; };
$scope.close = function () { $scope.close = function (pictoId) {
$modalInstance.close('Ejemplo de elemento devuelto'); $modalInstance.close(pictoId);
}; };
$scope.cancel = function () { $scope.cancel = function () {
......
sails/src/assets/scripts/modules/student/controllers/collections.js
...@@ -67,57 +67,76 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec ...@@ -67,57 +67,76 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
studentPicto.attributes.id_cat; studentPicto.attributes.id_cat;
}; };
// Reload student pictos (back from addpicto) // function to make category colores brighter
$scope.loadPictos = function () { $scope.shadeColor = function (color, percent) {
function generateGrid() { var f=parseInt(color.slice(1),16),t=percent<0?0:255,p=percent<0?percent*-1:percent,R=f>>16,G=f>>8&0x00FF,B=f&0x0000FF;
var i; return "#"+(0x1000000+(Math.round((t-R)*p)+R)*0x10000+(Math.round((t-G)*p)+G)*0x100+(Math.round((t-B)*p)+B)).toString(16).slice(1);
var j; };
var gridWidth = 10;
var gridHeight = 5; /*
var grid = []; * Generates the grid of pictos with empty ones
for (i = 0; i < gridHeight; i++) { */
grid[i] = []; function generateGrid() {
for (j = 0; j < gridWidth; j++) { var i;
grid[i][j] = $scope.emptyStudentPicto; var j;
grid[i][j].attributes.coord_x = j; var gridWidth = 10;
grid[i][j].attributes.coord_y = i; var gridHeight = 5;
} var grid = [];
for (i = 0; i < gridHeight; i++) {
grid[i] = [];
for (j = 0; j < gridWidth; j++) {
grid[i][j] = $scope.emptyStudentPicto;
grid[i][j].attributes.coord_x = j;
grid[i][j].attributes.coord_y = i;
} }
return grid; }
return grid;
}
/*
* Places a picto in the grid
*/
function placePicto(picto) {
var positionX = picto.attributes.coord_x;
var positionY = picto.attributes.coord_y;
var freeCategoryPositionX = picto.attributes.free_category_coord_x;
var freeCategoryPositionY = picto.attributes.free_category_coord_y;
var category;
if ($scope.isCategory(picto)) {
$scope.categories.push(picto);
}
// Categories disabled
if (typeof freeCategoryPositionX === 'number' &&
typeof freeCategoryPositionY === 'number') {
$scope.freeCategoryPictos[freeCategoryPositionX][freeCategoryPositionY] = picto;
} }
// Categories enabled
if (positionX !== null && positionY !== null) {
category = $scope.isCategory(picto) ?
$scope.getCategoryId($scope.emptyStudentPicto) :
$scope.getCategoryId(picto);
$scope.studentPictos[category] = $scope.studentPictos[category] || generateGrid();
$scope.studentPictos[category][positionX][positionY] = picto;
}
};
// Reload student pictos (back from addpicto)
$scope.loadPictos = function () {
// Fill with grid (if not done before)
$scope.freeCategoryPictos = $scope.freeCategoryPictos || generateGrid(); $scope.freeCategoryPictos = $scope.freeCategoryPictos || generateGrid();
$scope.studentPictos[$scope.getCategoryId($scope.selectedCategory)] = $scope.studentPictos[$scope.getCategoryId($scope.selectedCategory)] =
$scope.studentPictos[$scope.getCategoryId($scope.selectedCategory)] || generateGrid(); $scope.studentPictos[$scope.getCategoryId($scope.selectedCategory)] || generateGrid();
// Get user's pictos
$http.get(config.backend + '/stu/' + $scope.studentData.id + '/pictos') $http.get(config.backend + '/stu/' + $scope.studentData.id + '/pictos')
.success(function (studentPictos) { .success(function (studentPictos) {
$scope.categories = []; $scope.categories = [];
$scope.showFreeCategory = !$scope.studentData.attributes.categories; $scope.showFreeCategory = !$scope.studentData.attributes.categories;
studentPictos.forEach(function (studentPicto) { studentPictos.forEach(placePicto);
var positionX = studentPicto.attributes.coord_x;
var positionY = studentPicto.attributes.coord_y;
var freeCategoryPositionX = studentPicto.attributes.free_category_coord_x;
var freeCategoryPositionY = studentPicto.attributes.free_category_coord_y;
var category;
if ($scope.isCategory(studentPicto)) {
$scope.categories.push(studentPicto);
}
if (typeof freeCategoryPositionX === 'number' &&
typeof freeCategoryPositionY === 'number') {
$scope.freeCategoryPictos[freeCategoryPositionX][freeCategoryPositionY] = studentPicto;
}
if (positionX !== null && positionY !== null) {
category = $scope.isCategory(studentPicto) ?
$scope.getCategoryId($scope.emptyStudentPicto) :
$scope.getCategoryId(studentPicto);
$scope.studentPictos[category] = $scope.studentPictos[category] || generateGrid();
$scope.studentPictos[category][positionX][positionY] = studentPicto;
}
});
$scope.loadingPictos = false; $scope.loadingPictos = false;
setTimeout(function () { $scope.$apply(); }); setTimeout(function () { $scope.$apply(); });
...@@ -286,7 +305,7 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec ...@@ -286,7 +305,7 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
}; };
// Modal window to add pictos // Modal window to add pictos
$scope.open_add = function (studentPicto) { $scope.open_add = function (selectedPictoCell) {
var modalInstance = $modal.open({ var modalInstance = $modal.open({
animation: true, animation: true,
templateUrl: 'modules/student/views/addpicto.html', templateUrl: 'modules/student/views/addpicto.html',
...@@ -298,29 +317,43 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec ...@@ -298,29 +317,43 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
}, },
supervisor: function () { supervisor: function () {
return $scope.user; return $scope.user;
},
categories: function () {
return $scope.categories;
},
freeCategoryPictos: function () {
return $scope.freeCategoryPictos;
},
studentPictos: function () {
return $scope.studentPictos;
},
emptyStudentPicto: function () {
return $scope.emptyStudentPicto;
},
studentPicto: function () {
return studentPicto;
},
studentCategory: function () {
return $scope.selectedCategory;
} }
} }
}); });
// Returned data from the modal window // Returned data from the modal window
modalInstance.result.then(function () { modalInstance.result.then(function (pictoId) {
// Send the picto to the server
$http.post(config.backend + '/stu/' + student.id + '/picto/' + pictoId, {
attributes: {
id_cat: $scope.selectedCategory.id,
coord_x: selectedPictoCell.attributes.coord_x,
coord_y: selectedPictoCell.attributes.coord_y,
free_category_coord_x: selectedPictoCell.attributes.free_category_coord_x,
free_category_coord_y: selectedPictoCell.attributes.free_category_coord_y
}
})
.success(function (studentPicto) {
$translate('picto_added').then(function (translation) {
ngToast.success({ content: translation });
});
placePicto(studentPicto);
io.socket.post('/stu/vocabulary', {
action: 'add',
attributes: {
id_stu: student.id,
stu_picto: studentPicto
}
}, function () {});
})
.error(function () {
$translate('error_adding_picto').then(function (translation) {
ngToast.danger({ content: translation });
});
});
$scope.loadPictos(); $scope.loadPictos();
}); });
}; };
......
sails/src/assets/scripts/modules/student/views/addpicto.html
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
<alert ng-show="alert.show" ng-model="alert" type="{{alert.type}}" close="closeAlert()">{{alert.msg}}</alert> <alert ng-show="alert.show" ng-model="alert" type="{{alert.type}}" close="closeAlert()">{{alert.msg}}</alert>
</div> </div>
<div class="row"> <div class="row">
<div id="collections" class="col-md-9 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 }}">
<div class="input-group" id="search_pictos_box"> <div class="input-group" id="search_pictos_box">
...@@ -44,12 +44,14 @@ ...@@ -44,12 +44,14 @@
<!-- Galería de pictos --> <!-- Galería de pictos -->
<div <div
class="picto_peq pull-left" class="picto_peq pull-left"
ng-repeat="p in pictos | filter:srch_term_picto" ng-repeat="p in pictos | filter:srch_term_picto">
draggable
id="added-picto-{{p.id}}"
data-picto-id="{{p.id}}"
data-picto-uri="{{p.uri}}">
<img ng-src="{{p.uri}}" popover="{{p.expressions[0].text}}" popover-trigger="mouseenter" /> <img ng-src="{{p.uri}}" popover="{{p.expressions[0].text}}" popover-trigger="mouseenter" />
<a
ng-click="close(p.id)"
class="picto_add"
title="{{ 'add_picto' | translate}}">
<i class="color_white glyphicon glyphicon-plus-sign" aria-hidden="true"></i>
</a>
<!-- Options to remove picto (Only for own pictos) --> <!-- Options to remove picto (Only for own pictos) -->
<div class="picto_options" ng-show="source == 'ownpictos'"> <div class="picto_options" ng-show="source == 'ownpictos'">
<a ng-click="remove_own_picto(p.id)" class="picto_remove" title="{{ 'delete' | translate}}"> <a ng-click="remove_own_picto(p.id)" class="picto_remove" title="{{ 'delete' | translate}}">
...@@ -59,53 +61,9 @@ ...@@ -59,53 +61,9 @@
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="col-md-3">
<div id="pictos_to_add">
<h4 class="text-center">Para añadir</h4>
<div class="panel panel-default" droppableadd drop="handleDropAddFreePicto">
<div class="panel-heading"><span translate>free_category</span></div>
<div class="panel-body">
<div
class="picto_peq pull-left"
ng-repeat="pa in freeAddedPictos"
id="{{pa.picto.id}}">
<img ng-src="{{pa.picto.uri}}" class="unselectable" popover="{{pa.expressions[0].text}}" popover-trigger="mouseenter" />
<div class="picto_options">
<a ng-click="removeFreePicto(pa, c.picto.id)" class="picto_remove" title="{{ 'delete' | translate}}">
<span class="color_red glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<div class="picto_cat" ng-repeat="c in categories">
<div
class="panel panel-default"
id="added-category-{{c.picto.id}}"
data-category-id="{{ c.picto.id }}"
droppableadd drop="handleDropAddPicto">
<div class="panel-heading">
<img ng-src="{{c.picto.uri}}" class="unselectable" />
<span>{{c.expression.text}}</span>
</div>
<div class="panel-body" >
<div class="picto_peq pull-left" ng-repeat="pa in addedPictos[c.picto.id]" id="{{pa.picto.id}}">
<img ng-src="{{pa.picto.uri}}" class="unselectable" popover="{{pa.expressions[0].text}}" popover-trigger="mouseenter" />
<div class="picto_options">
<a ng-click="remove_picto(pa, c.picto.id)" class="picto_remove" title="{{ 'delete' | translate}}">
<span class="color_red glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button class="btn btn-primary" ng-click="close()">{{ 'close' | translate }}</button> <button class="btn btn-primary" ng-click="cancel()">{{ 'close' | translate }}</button>
</div> </div>
</div> </div>
sails/src/assets/scripts/modules/student/views/collections.html
...@@ -136,7 +136,7 @@ ...@@ -136,7 +136,7 @@
id="picto-category-grid" id="picto-category-grid"
class="picto-grid picto-category-grid" class="picto-grid picto-category-grid"
ng-if="selectedCategory !== emptyStudentPicto && !showFreeCategory" ng-if="selectedCategory !== emptyStudentPicto && !showFreeCategory"
ng-style="{ 'background-color': selectedCategory.attributes.color }"> ng-style="{ 'background-color': shadeColor(selectedCategory.attributes.color, 0.3) }">
<h3 class="picto-category-grid__title">{{ selectedCategory.expression.text }}</h3> <h3 class="picto-category-grid__title">{{ selectedCategory.expression.text }}</h3>
<div <div
ng-repeat="studentPictoRow in studentPictos[getCategoryId(selectedCategory)]" ng-repeat="studentPictoRow in studentPictos[getCategoryId(selectedCategory)]"
...@@ -166,7 +166,8 @@ ...@@ -166,7 +166,8 @@
}" }"
ng-style="{ ng-style="{
'background-color': studentPicto.attributes.color 'background-color': studentPicto.attributes.color
}"/> }"
/>
<div <div
class="picto_options" class="picto_options"
ng-if="studentPicto == emptyStudentPicto"> ng-if="studentPicto == emptyStudentPicto">
......
sails/src/assets/scripts/modules/supervisor/views/header.html
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
href="/app/#/students"> href="/app/#/students">
<img <img
class="topbar__logo__image" class="topbar__logo__image"
src="{{user.office.logo_url}}" ng-src="{{user.office.logo_url}}"
alt="{{user.office.name}}" alt="{{user.office.name}}"
title="{{user.office.name}}" /> title="{{user.office.name}}" />
</a> </a>
......
sails/src/assets/styles/main.css
...@@ -438,7 +438,7 @@ textarea.editable{ ...@@ -438,7 +438,7 @@ textarea.editable{
.picto_cat .picto_peq .picto_options .picto_remove{ position: absolute; top: 4px; left: 7px; } .picto_cat .picto_peq .picto_options .picto_remove{ position: absolute; top: 4px; left: 7px; }
/* Picto options in student collection */ /* Picto options in student collection */
.picto .picto_options .picto_remove{ position: absolute; top: 2px; left: 2px; } .picto .picto_options .picto_remove{ position: absolute; top: 2px; left: 2px; }
.picto .picto_options .picto_add{ position: absolute; top: 18px; left: 20px; } .picto .picto_options .picto_add{ position: absolute; top: 28px; left: 28px; }
.picto .picto_options .picto_ok{ position: absolute; top: 2px; right: 2px; } .picto .picto_options .picto_ok{ position: absolute; top: 2px; right: 2px; }
.picto .picto_options .picto_tags{ position: absolute; bottom: 2px; left: 2px; } .picto .picto_options .picto_tags{ position: absolute; bottom: 2px; left: 2px; }
.picto .picto_options .picto_config{ position: absolute; bottom: 2px; right: 2px; } .picto .picto_options .picto_config{ position: absolute; bottom: 2px; right: 2px; }
......
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