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 97 additions and 295 deletions
sails/src/assets/scripts/modules/login/controllers/login.js
......@@ -59,6 +59,10 @@ function LoginCtrl(
$http
.post(config.backend + '/sup/login', $scope.credentials)
.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;
// 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 @@
</p>
-->
<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>
<!-- Formulario -->
<!-- LoginCtrl controls here, see app.js -->
......
sails/src/assets/scripts/modules/student/controllers/addpicto.js
......@@ -16,25 +16,13 @@ dashboardControllers.controller('AddPictoCtrl', function (
$translate,
ngToast,
supervisor,
student,
categories,
studentPictos,
freeCategoryPictos,
emptyStudentPicto) {
student) {
$scope.source = 'symbolstx';
$scope.categories = categories;
$scope.studentPictos = studentPictos;
$scope.pictos = [];
$scope.symbolstxCats = [];
$scope.breadcrumbs = [];
$scope.addedPictos = {};
$scope.freeAddedPictos = [];
$scope.loadingCatPictos = false;
$scope.categories.forEach(function (category) {
$scope.addedPictos[category.picto.id] = [];
});
$scope.breadcrumbs.push({
id: 0,
exp: 'Inicio',
......@@ -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
//
$scope.remove_own_picto = function (pictoId) {
......@@ -400,8 +206,8 @@ dashboardControllers.controller('AddPictoCtrl', function (
});
};
$scope.close = function () {
$modalInstance.close('Ejemplo de elemento devuelto');
$scope.close = function (pictoId) {
$modalInstance.close(pictoId);
};
$scope.cancel = function () {
......
sails/src/assets/scripts/modules/student/controllers/collections.js
......@@ -67,8 +67,15 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
studentPicto.attributes.id_cat;
};
// Reload student pictos (back from addpicto)
$scope.loadPictos = function () {
// function to make category colores brighter
$scope.shadeColor = function (color, percent) {
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;
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);
};
/*
* Generates the grid of pictos with empty ones
*/
function generateGrid() {
var i;
var j;
......@@ -86,38 +93,50 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
return grid;
}
$scope.freeCategoryPictos = $scope.freeCategoryPictos || generateGrid();
$scope.studentPictos[$scope.getCategoryId($scope.selectedCategory)] =
$scope.studentPictos[$scope.getCategoryId($scope.selectedCategory)] || generateGrid();
$http.get(config.backend + '/stu/' + $scope.studentData.id + '/pictos')
.success(function (studentPictos) {
$scope.categories = [];
$scope.showFreeCategory = !$scope.studentData.attributes.categories;
studentPictos.forEach(function (studentPicto) {
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;
/*
* 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(studentPicto)) {
$scope.categories.push(studentPicto);
if ($scope.isCategory(picto)) {
$scope.categories.push(picto);
}
// Categories disabled
if (typeof freeCategoryPositionX === 'number' &&
typeof freeCategoryPositionY === 'number') {
$scope.freeCategoryPictos[freeCategoryPositionX][freeCategoryPositionY] = studentPicto;
$scope.freeCategoryPictos[freeCategoryPositionX][freeCategoryPositionY] = picto;
}
// Categories enabled
if (positionX !== null && positionY !== null) {
category = $scope.isCategory(studentPicto) ?
category = $scope.isCategory(picto) ?
$scope.getCategoryId($scope.emptyStudentPicto) :
$scope.getCategoryId(studentPicto);
$scope.getCategoryId(picto);
$scope.studentPictos[category] = $scope.studentPictos[category] || generateGrid();
$scope.studentPictos[category][positionX][positionY] = studentPicto;
$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.studentPictos[$scope.getCategoryId($scope.selectedCategory)] =
$scope.studentPictos[$scope.getCategoryId($scope.selectedCategory)] || generateGrid();
// Get user's pictos
$http.get(config.backend + '/stu/' + $scope.studentData.id + '/pictos')
.success(function (studentPictos) {
$scope.categories = [];
$scope.showFreeCategory = !$scope.studentData.attributes.categories;
studentPictos.forEach(placePicto);
$scope.loadingPictos = false;
setTimeout(function () { $scope.$apply(); });
......@@ -286,7 +305,7 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
};
// Modal window to add pictos
$scope.open_add = function (studentPicto) {
$scope.open_add = function (selectedPictoCell) {
var modalInstance = $modal.open({
animation: true,
templateUrl: 'modules/student/views/addpicto.html',
......@@ -298,29 +317,43 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
},
supervisor: function () {
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
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();
});
};
......
sails/src/assets/scripts/modules/student/views/addpicto.html
......@@ -34,7 +34,7 @@
<alert ng-show="alert.show" ng-model="alert" type="{{alert.type}}" close="closeAlert()">{{alert.msg}}</alert>
</div>
<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 }"
data-loading="{{ 'loading_pictos' | translate }}">
<div class="input-group" id="search_pictos_box">
......@@ -44,12 +44,14 @@
<!-- Galería de pictos -->
<div
class="picto_peq pull-left"
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}}">
ng-repeat="p in pictos | filter:srch_term_picto">
<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) -->
<div class="picto_options" ng-show="source == 'ownpictos'">
<a ng-click="remove_own_picto(p.id)" class="picto_remove" title="{{ 'delete' | translate}}">
......@@ -59,53 +61,9 @@
</div>
<div class="clearfix"></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 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>
sails/src/assets/scripts/modules/student/views/collections.html
......@@ -136,7 +136,7 @@
id="picto-category-grid"
class="picto-grid picto-category-grid"
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>
<div
ng-repeat="studentPictoRow in studentPictos[getCategoryId(selectedCategory)]"
......@@ -166,7 +166,8 @@
}"
ng-style="{
'background-color': studentPicto.attributes.color
}"/>
}"
/>
<div
class="picto_options"
ng-if="studentPicto == emptyStudentPicto">
......
sails/src/assets/scripts/modules/supervisor/views/header.html
......@@ -8,7 +8,7 @@
href="/app/#/students">
<img
class="topbar__logo__image"
src="{{user.office.logo_url}}"
ng-src="{{user.office.logo_url}}"
alt="{{user.office.name}}"
title="{{user.office.name}}" />
</a>
......
sails/src/assets/styles/main.css
......@@ -438,7 +438,7 @@ textarea.editable{
.picto_cat .picto_peq .picto_options .picto_remove{ position: absolute; top: 4px; left: 7px; }
/* Picto options in student collection */
.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_tags{ position: absolute; bottom: 2px; left: 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