Skip to content

yotta / pictogram

Go to a project
Commit 77cf2f21 by Sebastián Collado Montañez
Options

breadcrumbs

parent 5d1cc9b9
Inline Side-by-side
Showing with 86 additions and 52 deletions
sails/src/assets/scripts/modules/student/controllers/collections.js
...@@ -44,6 +44,7 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec ...@@ -44,6 +44,7 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
$scope.viewingGrid = null; $scope.viewingGrid = null;
$scope.gridsList = null; $scope.gridsList = null;
$scope.newGridName = ""; $scope.newGridName = "";
$scope.breadcrumbs = [];
// function to make category colores brighter // function to make category colores brighter
$scope.shadeColor = function (color, percent) { $scope.shadeColor = function (color, percent) {
...@@ -97,13 +98,12 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec ...@@ -97,13 +98,12 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
$http.get(config.backend + '/stu/' + $scope.studentData.id + '/activeGrid') $http.get(config.backend + '/stu/' + $scope.studentData.id + '/activeGrid')
.success(function (activeGrid) { .success(function (activeGrid) {
activeGrid.name = $translate.instant(activeGrid.name); activeGrid.name = $translate.instant(activeGrid.name);
$scope.viewingGrid = activeGrid;
activeGrid.pictos.forEach(placePicto); activeGrid.pictos.forEach(placePicto);
$scope.viewingGrid = activeGrid;
$scope.loadingPictos = false; $scope.loadingPictos = false;
$scope.mainGrid.color = activeGrid.color; $scope.breadcrumbs = []; //clean breadcrumbs
//setTimeout(function () { $scope.$apply(); });
console.log("mostrando " , activeGrid);
}) })
.error(function () { .error(function () {
$translate('error_loading_grid').then(function (translation) { $translate('error_loading_grid').then(function (translation) {
...@@ -114,22 +114,61 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec ...@@ -114,22 +114,61 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
/** /**
* Get a grid and show it * Get a grid and show it
* @param {[type]} idGrid ID from clicked grid
* @param {Boolean} isChild True if clicked for grid child
* @return {[type]} Show clicked grid
*/ */
$scope.showGrid = function (idGrid) { $scope.showGrid = function (idGrid, isChild) {
// Check if idGrid not null
if(idGrid == null) return;
// Save last grid
var objLastGrid = {id:$scope.viewingGrid.id,name:$scope.viewingGrid.name};
$scope.loadingPictos = true; $scope.loadingPictos = true;
$scope.mainGrid = generateGrid(); $scope.mainGrid = generateGrid();
$http.get(config.backend + '/grid/' + idGrid) $http.get(config.backend + '/grid/' + idGrid)
.success(function (grid) { .success(function (grid) {
grid.name = $translate.instant(grid.name); grid.name = $translate.instant(grid.name);
grid.pictos.forEach(placePicto);
$scope.viewingGrid = grid; $scope.viewingGrid = grid;
$scope.loadingPictos = false;
// If clicked for child, add to breadcrumbs
if(isChild){
$scope.breadcrumbs.push(objLastGrid);
}else{
$scope.breadcrumbs = []; //clean breadcrumbs
}
})
.error(function () {
$translate('error_loading_grid').then(function (translation) {
ngToast.danger({ content: translation });
});
});
};
$scope.showLastGrid = function (){
var objGrid = $scope.breadcrumbs.pop();
var idGrid = objGrid.id;
// Check if idGrid not null
if(idGrid == null) return;
$scope.loadingPictos = true;
$scope.mainGrid = generateGrid();
$http.get(config.backend + '/grid/' + idGrid)
.success(function (grid) {
grid.name = $translate.instant(grid.name);
grid.pictos.forEach(placePicto); grid.pictos.forEach(placePicto);
$scope.loadingPictos = false;
$scope.mainGrid.color = grid.color; $scope.viewingGrid = grid;
//setTimeout(function () { $scope.$apply(); }); $scope.loadingPictos = false;
console.log("mostrando " , grid);
}) })
.error(function () { .error(function () {
$translate('error_loading_grid').then(function (translation) { $translate('error_loading_grid').then(function (translation) {
...@@ -460,37 +499,9 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec ...@@ -460,37 +499,9 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
}; };
/** /**
* Climb to child grid clicking on a picto
*/
$scope.child_grid = function(id_child_grid){
// Check if picto have child grid
if(id_child_grid == null) return;
// Show child grid
//$scope.showGrid(id_child_grid);
$scope.loadingPictos = true;
$scope.mainGrid = generateGrid();
$http.get(config.backend + '/grid/' + id_child_grid)
.success(function (grid) {
grid.name = $translate.instant(grid.name);
$scope.viewingGrid = grid;
grid.pictos.forEach(placePicto);
$scope.loadingPictos = false;
})
.error(function () {
$scope.showActiveGrid();
console.log("La escena no existe");
});
};
/**
* Modal window to open picto config * Modal window to open picto config
*/ */
$scope.open_config = function (studentPicto) { $scope.open_config = function (studentPicto) {
console.log(studentPicto);
var modalInstance = $modal.open({ var modalInstance = $modal.open({
animation: true, animation: true,
templateUrl: 'modules/student/views/pictoconfig.html', templateUrl: 'modules/student/views/pictoconfig.html',
......
sails/src/assets/scripts/modules/student/views/collections.html
...@@ -2,16 +2,30 @@ ...@@ -2,16 +2,30 @@
<div class="panel panel-default student_tab_panel"> <div class="panel panel-default student_tab_panel">
<div class="panel-body"> <div class="panel-body">
<!-- Grid header -->
<div class="container-fluid">
<div class="col-xs-8" style="margin-bottom:1em;">
<i class="fa fa-pencil-square-o fa-2x text-muted" aria-hidden="true"style="margin-right:0.25em;"></i>
<input type="text" class="grid-header-name" ng-model="viewingGrid.name" ng-blur="update_grid(viewingGrid)">
</div>
<!-- Grid header -->
<div class="col-xs-2 text-center" style="margin-bottom:1em;">
<button type="button" class="btn btn-danger btn-grid-back" ng-if="breadcrumbs.length != 0" ng-click="showLastGrid()">
<i class="fa fa-arrow-circle-left" aria-hidden="true"></i> Volver atrás
</button>
</div>
</div>
<!-- Grid --> <!-- Grid -->
<div class="col-xs-10"> <div class="col-xs-10">
<div id="student_collection" <div id="student_collection"
class="student-collection" class="student-collection"
ng-style="{ 'background-color': shadeColor(mainGrid.color, 0.3) }"
ng-class="{ 'student-collection-loading': loadingPictos }" ng-class="{ 'student-collection-loading': loadingPictos }"
data-loading="{{ 'loading_pictos' | translate }}"> data-loading="{{ 'loading_pictos' | translate }}">
<!-- Grid pictos --> <!-- Grid pictos -->
<div <div
class="picto-grid picto-free-grid"> class="picto-grid"
ng-style="{ 'background-color': shadeColor(viewingGrid.color, 0.3) }">
<div <div
ng-repeat="studentPictoRow in mainGrid" ng-repeat="studentPictoRow in mainGrid"
ng-init="rowIndex = $index" ng-init="rowIndex = $index"
...@@ -48,7 +62,7 @@ ...@@ -48,7 +62,7 @@
ng-if="studentPicto.attributes.status == 'disabled'"/> ng-if="studentPicto.attributes.status == 'disabled'"/>
<img <img
ng-click="child_grid(studentPicto.id_child_grid)" ng-click="showGrid(studentPicto.id_child_grid,true)"
ng-src="{{studentPicto.picto.uri}}" ng-src="{{studentPicto.picto.uri}}"
class="unselectable" class="unselectable"
ng-class="{ ng-class="{
...@@ -107,27 +121,26 @@ ...@@ -107,27 +121,26 @@
</div><!--/. col-xs-10 --> </div><!--/. col-xs-10 -->
<div class="col-xs-2"> <div class="col-xs-2">
<label>Opciones</label>
<div class="text-center"> <div class="text-center">
<input type="text" class="editable grid-name text-center" ng-model="viewingGrid.name" ng-blur="update_grid(viewingGrid)"> <button type="button" ng-if="!viewingGrid.active" class="btn btn-primary" ng-click="viewingGrid.active=true;activate_grid(viewingGrid)" style="margin-bottom:1em;">Activar tablero</button>
<a style="text-decoration:none" popover="{{ 'grid_already_activated' | translate}}" popover-trigger="mouseenter" ng-if="viewingGrid.active"><span class="label label-success"><i class="fa fa-star" aria-hidden="true"></i> {{ 'grid_active' | translate }}</span></a> <button type="button" ng-if="viewingGrid.active" class="btn btn-success" disabled style="margin-bottom:1em;">Tablero activado</button>
<a style="text-decoration:none" popover="{{ 'grid_activate' | translate}}" popover-trigger="mouseenter" ng-if="!viewingGrid.active" ng-click="viewingGrid.active=true;activate_grid(viewingGrid)"><span class="label label-default"><i class="fa fa-star-o" aria-hidden="true"></i> {{ 'grid_inactive' | translate }}</span></a>
<button type="button" class="btn btn-success" ng-click="open_new_grid()" aria-expanded="false"><i class="fa fa-plus" aria-hidden="true"></i></button>
<button type="button" class="btn btn-primary" ng-click="copy_grid()" title="{{ 'duplicate' | translate}}"><i class="fa fa-files-o" aria-hidden="true"></i></button>
<button type="button" class="btn btn-danger" ng-click="delete_grid(viewingGrid)" title="{{ 'delete' | translate}}"><i class="fa fa-trash" aria-hidden="true"></i></button>
</div> </div>
<hr> <hr>
<label>Tableros</label>
<div class="list-group"> <div class="list-group">
<a class="list-group-item" ng-repeat="grid in gridsList track by $index" ng-click="showGrid(grid.id)" ng-class="(grid.id == viewingGrid.id) ? 'active' : ''"> <a class="list-group-item" ng-repeat="grid in gridsList track by $index" ng-click="showGrid(grid.id,false)" ng-class="(grid.id == viewingGrid.id) ? 'active' : ''">
<i class="fa fa-star" aria-hidden="true" ng-if="grid.active"></i> {{ grid.name }} <i class="fa fa-star" aria-hidden="true" ng-if="grid.active"></i> {{ grid.name }}
</a> </a>
</div> </div>
<hr>
<div class="text-center">
<button type="button" class="btn btn-success" ng-click="open_new_grid()" aria-expanded="false"><i class="fa fa-plus" aria-hidden="true"></i></button>
<button type="button" class="btn btn-primary" ng-click="copy_grid()" title="{{ 'duplicate' | translate}}"><i class="fa fa-files-o" aria-hidden="true"></i></button>
<button type="button" class="btn btn-danger" ng-click="delete_grid(viewingGrid)" title="{{ 'delete' | translate}}"><i class="fa fa-trash" aria-hidden="true"></i></button>
</div>
</div> </div>
</div> </div>
......
sails/src/assets/styles/main.css
...@@ -1128,6 +1128,12 @@ input.editable.grid-name { ...@@ -1128,6 +1128,12 @@ input.editable.grid-name {
float: left; float: left;
} }
.grid-header-name{
font-size: 30px;
font-weight: 600;
border: none;
}
/* Cambiar tamaño imagen */ /* Cambiar tamaño imagen */
.img-200 { .img-200 {
margin-top: 25px; margin-top: 25px;
...@@ -1220,6 +1226,10 @@ input.editable.grid-name { ...@@ -1220,6 +1226,10 @@ input.editable.grid-name {
} }
/* Collections */ /* Collections */
.student-collection{ .picto-grid{
padding: 4px 0px 4px 4px;
border-radius: 5px; border-radius: 5px;
} }
.btn-grid-back{
margin-top:0.5em;
}
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