working on grid color

sails/src/CHANGES.md

@@ -10,3 +10,6 @@ ALTER TABLE `stu_picto` ADD `id_child_grid` int(11) NULL;
 
 -- Drop column 'categories'
 ALTER TABLE `grid` DROP COLUMN `categories`;
+
+-- Add color to grid column
+ALTER TABLE `grid`ADD `color` varchar(7) NULL;

sails/src/api/models/Grid.js

@@ -37,10 +37,14 @@ module.exports = {
       type: "integer",
       model: "student"
     },
-  // Relacion con Stu_picto
-    stuPictos:{
+    stuPictos:{ // Relacion con Stu_picto
       collection: "stupicto",
       via: "grid"
+    },
+    color:{
+      columnName: "color",
+      required: false,
+      type: "string"
     }
  },
 

sails/src/assets/scripts/modules/student/controllers/collections.js

@@ -46,12 +46,12 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
   $scope.newGridName = "";
 
   // function to make category colores brighter
-  /*$scope.shadeColor = function (color, percent) {
+  $scope.shadeColor = function (color, percent) {
     if (!color)
       return;
     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
@@ -100,7 +100,10 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
       $scope.viewingGrid = activeGrid;
       activeGrid.pictos.forEach(placePicto);
       $scope.loadingPictos = false;
+
+      $scope.mainGrid.color = activeGrid.color;
       //setTimeout(function () { $scope.$apply(); });
+      console.log("mostrando " , activeGrid);
     })
     .error(function () {
       $translate('error_loading_grid').then(function (translation) {
@@ -123,7 +126,10 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
 
       grid.pictos.forEach(placePicto);
       $scope.loadingPictos = false;
+
+      $scope.mainGrid.color = grid.color;
       //setTimeout(function () { $scope.$apply(); });
+      console.log("mostrando " , grid);
     })
     .error(function () {
       $translate('error_loading_grid').then(function (translation) {

sails/src/assets/scripts/modules/student/views/collections.html

@@ -2,20 +2,18 @@
 <div class="panel panel-default student_tab_panel">
   <div class="panel-body">
 
-    <!-- Switch panel body -->
-    <div class="" ng-switch="slide.state">
-
-      <!-- Slides -->
-      <div class="col-xs-10 switch-animation">
+    <!-- Grid -->
+    <div class="col-xs-10">
       <div id="student_collection"
         class="student-collection"
+        ng-style="{ 'background-color': shadeColor(mainGrid.color, 0.3) }"
         ng-class="{ 'student-collection-loading': loadingPictos }"
         data-loading="{{ 'loading_pictos' | translate }}">
-          <!-- No categories grid -->
+        <!-- Grid pictos -->
         <div
           class="picto-grid picto-free-grid">
           <div
-              ng-repeat="studentPictoRow in freeCategoryPictos"
+            ng-repeat="studentPictoRow in mainGrid"
             ng-init="rowIndex = $index"
             class="picto-grid__row">
             <div
@@ -108,8 +106,6 @@
       </div>
     </div><!--/. col-xs-10 -->
 
-    </div><!--/. Switch panel body -->
-
     <div class="col-xs-2">
       <div class="text-center">
         <input type="text" class="editable grid-name text-center" ng-model="viewingGrid.name" ng-blur="update_grid(viewingGrid)">

sails/src/assets/styles/main.css

@@ -1215,7 +1215,11 @@ input.editable.grid-name {
 }
 
 /* Estilos TPV */
-
 .tpv-price {
   font-size: xx-large;
 }
+
+/* Collections */
+.student-collection{
+  border-radius: 5px;
+}