own pictos image cropping working

17c926dd · Arturo Montejo Ráez · 53fac9d4 · 17c926dd · 17c926dd · 17c926dd
Commit 17c926dd authored Jan 31, 2017 by Arturo Montejo Ráez
Showing with 131 additions and 57 deletions
sails/src/assets/app/bower.json
sails/src/assets/app/i18n/en-gb.json
sails/src/assets/app/i18n/es-es.json
sails/src/assets/scripts/app.js
sails/src/assets/scripts/modules/student/controllers/addpicto.js
sails/src/assets/scripts/modules/student/views/addpicto.html
sails/src/assets/styles/main.css
sails/src/assets/styles/main.less
sails/src/tasks/config/concat.js
--- a/sails/src/assets/app/bower.json
+++ b/sails/src/assets/app/bower.json
@@ -14,8 +14,7 @@
    "angular-translate": "~2.6.0",
    "angular-translate-loader-static-files": "~2.6.1",
    "angular-bootstrap": "~0.12.1",
-    "angular-file-upload": "~1.1.5",
+    "ng-file-upload": "12.2.x",
-    "ng-file-upload": "~3.2.4",
    "ngImgCrop": "~0.3.2",
    "angular-ui-router": "~0.2.13",
    "angular-filter": "~0.5.4",

--- a/sails/src/assets/app/i18n/en-gb.json
+++ b/sails/src/assets/app/i18n/en-gb.json
@@ -188,6 +188,7 @@
    "msg_change_password": "Please enter a new password for your account:",
    "msg_request_change_password": "Enter your email to request for a password change. An e-mail will be sent to access password change form.",
    "name": "Name",
+    "new_img": "New image",
    "new_instruction": "New instruction",
    "new_method": "New method",
    "new_objective": "New objective",
@@ -271,6 +272,7 @@
    "select_a_method": "-- Select a method --",
    "select_method": "-- Select a method or create it --",
    "select_office": "Select an office from the list",
+    "select_file": "Select file",
    "send": "Send",
    "September": "September",
    "serial": "Serial number",

--- a/sails/src/assets/app/i18n/es-es.json
+++ b/sails/src/assets/app/i18n/es-es.json
@@ -188,6 +188,7 @@
    "msg_change_password": "Por favor, introduzca la nueva clave para su cuenta:",
    "msg_request_change_password": "Introduzca su correo electrónico para solicitar el cambio de clave. Recibirá un correo con la dirección de acceso al formulario de cambio de clave.",
    "name": "Nombre",
+    "new_img": "Nueva imagen",
    "new_instruction": "Nueva instrucción",
    "new_method": "Nuevo método",
    "new_objective": "Nuevo objetivo",
@@ -273,6 +274,7 @@
    "select_a_method": "-- Selecciona un método --",
    "select_method": "-- Selecciona un método o créalo --",
    "select_office": "Seleccione una oficina/centro de la lista",
+    "select_file": "Seleccionar imagen",
    "send": "Enviar",
    "September": "Septiembre",
    "serial": "Número de serie",

--- a/sails/src/assets/scripts/app.js
+++ b/sails/src/assets/scripts/app.js
@@ -9,7 +9,8 @@ var dashboardApp = angular.module('dashboardApp', [
  'dashboardDirectives',
  'pascalprecht.translate',
  'ui.bootstrap',
-  'angularFileUpload',
+  'ngFileUpload',
+  'ngImgCrop',
  'angular.filter',
  'timer',
  'ngAnimate',

--- a/sails/src/assets/scripts/modules/student/controllers/addpicto.js
+++ b/sails/src/assets/scripts/modules/student/controllers/addpicto.js
@@ -11,17 +11,22 @@ dashboardControllers.controller('AddPictoCtrl', function (
  config,
  $window,
  $filter,
-  $upload,
+  Upload,
+  $timeout,
  $modal,
  $translate,
  ngToast,
  supervisor,
  student) {
  $scope.source = 'symbolstx';
  $scope.pictos = [];
  $scope.symbolstxCats = [];
  $scope.breadcrumbs = [];
  $scope.loadingCatPictos = false;
+  $scope.croppedImg = null;
+  $scope.radioModel = 'Middle';
  $scope.breadcrumbs.push({
    id: 0,
@@ -66,6 +71,9 @@ dashboardControllers.controller('AddPictoCtrl', function (
  //
  $scope.load_own_pictos = function () {
    $scope.source = 'ownpictos';
+    $('#own_group').fadeIn();
    $http.get(config.backend + '/sup/' + supervisor.id + '/pictos')
    .success(function (data) {
      if (data) {
@@ -116,6 +124,7 @@ dashboardControllers.controller('AddPictoCtrl', function (
  //
  $scope.open_category_from_bc = function (categoryId) {
    $scope.source = 'symbolstx';
    // Delete from breadcrumbs
    for(var i=($scope.breadcrumbs.length-1); i>=0; i--){
      if($scope.breadcrumbs[i].id == categoryId){
@@ -143,37 +152,38 @@ dashboardControllers.controller('AddPictoCtrl', function (
   * @param  {Array of Objects} $files Array of pictos to be uploaded the file
   *  itself (as binary data) will be sent.
   */
-  $scope.onPictoSelect = function ($files) {
+  $scope.upload = function (dataUrl, name) {
-    $files.forEach(function (file) {
-      if (file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif') {
+    // Show own pictos
-        $upload.upload({
+    $scope.source = 'newfile';
-          url: '/picto/upload',
+    $scope.progress = 0;
-          method: 'POST',
-          fields: { owner: supervisor.id },
+    Upload.upload({
-          file: file
+      url: '/picto/upload',
-        }).success(function (picto) {
+      method: 'POST',
-          $translate('picto_upload_success').then(function (translation) {
+      data: {
-            ngToast.success(translation);
+        owner: supervisor.id,
-          });
+        file: Upload.dataUrltoBlob(dataUrl, name)
+      }
+    })
+    .then(
+      function (res) {
+        var picto = res.data;
+        $timeout(function () {
          picto.expressions = [];
-          $scope.pictos.push(picto);
+          $scope.open_exp(picto, () => {
-          $scope.open_exp(picto);
+            $scope.pictos.push(picto);
-        }).error(function (err) {
+            $scope.load_own_pictos();
-          if (err.code == "E_EXCEEDS_UPLOAD_LIMIT")
+          });
-            $translate('picto_upload_limit').then(function (translation) {
-              ngToast.danger(translation);
-            });
-          else
-            $translate('picto_upload_error').then(function (translation) {
-              ngToast.danger(translation);
-            });
-        });
-      } else {
-        $translate('invalid_file_type').then(function (translation) {
-          ngToast.danger(translation);
        });
-      }
+      },
-    });
+      function (res) {
+        if (res.status < 0)
+          ngToast.danger($translate.instant('picto_upload_error'));
+      },
+      function (evt) {
+          $scope.progress = parseInt(100.0 * evt.loaded / evt.total);
+      });
  };
  //
@@ -216,7 +226,7 @@ dashboardControllers.controller('AddPictoCtrl', function (
  //
  // Modal window to open picto expression
  //
-  $scope.open_exp = function (picto) {
+  $scope.open_exp = function (picto, cb) {
    var modalInstance = $modal.open({
      animation: true,
      templateUrl: 'modules/student/views/pictoexp.html',
@@ -235,6 +245,7 @@ dashboardControllers.controller('AddPictoCtrl', function (
    // Returned data from the modal window
    modalInstance.result.then((exp) => {
      picto.expressions.push(exp);
+      if (cb) {cb()};
    });
  };
 });
--- a/sails/src/assets/scripts/modules/student/views/addpicto.html
+++ b/sails/src/assets/scripts/modules/student/views/addpicto.html
 <div>
  <div class="modal-header">
    <div class="btn-group">
-      <button class="btn btn-default" ng-model="source" uib-btn-radio="'symbolstx'" ng-click="open_category_from_bc('0')">SymbolStix</button>
+      <label class="btn btn-default" ng-model="source" uib-btn-radio="'symbolstx'" ng-click="open_category_from_bc('0')">
-      <button class="btn btn-default" ng-model="source" uib-btn-radio="'ownpictos'" ng-click="load_own_pictos()" translate>own_pictos</button>
+          <span class="glyphicon glyphicon-th"></span> SymbolStix
+      </label>
+      <label class="btn btn-default" ng-model="source" uib-btn-radio="'ownpictos'" ng-click="load_own_pictos()">
+        <span class="glyphicon glyphicon-picture"></span> {{ 'own_pictos' | translate }}
+      </label>
    </div>
  </div>
  <div class="modal-body">
    <div ng-show="source == 'symbolstx'" class="panel panel-default" id="bread_and_categories">
      <div class="panel-heading">
@@ -23,17 +29,12 @@
        </div>
      </div>
    </div>
-    <div ng-show="source == 'ownpictos'" id="upload_pictos">
-      <button style="border:none" class="glyphicon glyphicon-picture" type="file" ng-file-select="onPictoSelect($files)" ng-model="picFile" accept="image/*" popover="{{ 'upload_image' | translate }}" popover-trigger="mouseenter"></button>
-      <button style="border:none" class="btn btn-md glyphicon glyphicon-camera" disabled="disabled"></button>
-      <button class="btn btn-md" disabled="disabled">
-        <span class="glyphicon glyphicon-pencil"></span>
-      </button>
-    </div>
    <div>
      <alert ng-show="alert.show" ng-model="alert" type="{{alert.type}}" close="closeAlert()">{{alert.msg}}</alert>
    </div>
-    <div class="row">
+    <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 }}">
@@ -41,6 +42,11 @@
          <input type="text" class="form-control" placeholder="{{ 'filter' | translate }}" ng-model="srch_term_picto" id="srch_term_picto">
            <span class="input-group-addon glyphicon glyphicon-search" id="basic-addon2" aria-hidden="true"></span>
        </div>
+        <div ng-show="source == 'ownpictos'" class="input-group">
+          <button class="btn btn-success" ngf-select ng-model="picFile" accept="image/*" ng-click="source = 'newfile'">
+            <span class="glyphicon glyphicon-folder-open"></span> {{ 'new_img' | translate }}
+          </label>
+        </div>
        <!-- Galería de pictos -->
        <div
          class="picto_peq pull-left"
@@ -66,7 +72,41 @@
        <div class="clearfix"></div>
      </div>
    </div>
-  </div>
+    <!-- crop view -->
+    <div id="crop_area" ng-show="source == 'newfile'">
+      <div class="row">
+        <div class="col-md-8">
+          <div ngf-drop ng-model="picFile" ngf-pattern="image/*" class="cropArea">
+            <img-crop
+              image="picFile  | ngfDataUrl"
+              result-image="croppedDataUrl" ng-init="croppedDataUrl=''"
+              area-type="square"
+              result-image-size="200"
+              >
+            </img-crop>
+          </div>
+        </div>
+        <div class="col-md-4">
+          <div class="form-group">
+            <img ng-src="{{ croppedDataUrl }}" />
+          </div>
+          <div class="form-group">
+            <button class="btn btn-default" ng-click="upload(croppedDataUrl, picFile.name)" ng-model="picFile" accept="image/*">
+              <span class="glyphicon glyphicon-upload"></span> {{ 'upload_image' | translate }}
+            </button>
+          </div>
+          <div class="form-group">
+            <span class="progress" ng-show="progress >= 0">
+              <div style="width:{{progress}}%" ng-bind="progress + '%'"></div>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div> <!-- /modal-body -->
  <div class="modal-footer">
      <button class="btn btn-primary" ng-click="cancel()">{{ 'close' | translate }}</button>
  </div>

--- a/sails/src/assets/styles/main.css
+++ b/sails/src/assets/styles/main.css
@@ -916,13 +916,6 @@ input[type=range]:focus::-ms-fill-upper {
 	margin-top: 10px;
 }
-.cropArea {
-      background: #E4E4E4;
-      overflow: hidden;
-      width:300px;
-      height:240px;
-    }
 /* Se aplica de Dispositivos medianos en adelante
   (tablets, ordenadores, anchura mayor o igual a 768px) */
 @media (min-width: 768px) {
@@ -962,3 +955,26 @@ input[type=range]:focus::-ms-fill-upper {
 .input-group-addon:first-child{
 		top: 0px;
 }
+/*
+  ng-file-upload and ngImgCrop
+*/
+.cropArea {
+    background: #E4E4E4;
+    overflow: hidden;
+    width:500px;
+    height:350px;
+}
+form .progress {
+    line-height: 15px;
+}
+.progress {
+    display: inline-block;
+    width: 100px;
+    border: 3px groove #CCC;
+}
+.progress div {
+    font-size: smaller;
+    background: orange;
+    width: 0;
+}
--- a/sails/src/assets/styles/main.less
+++ b/sails/src/assets/styles/main.less
@@ -2,6 +2,7 @@
 @import (less) '../app/bower_components/bootstrap/dist/css/bootstrap-theme.css';
 @import (less) '../app/bower_components/ngtoast/dist/ngToast.css';
 @import (less) '../app/bower_components/ngtoast/dist/ngToast-animations.css';
+@import (less) '../app/bower_components/ngImgCrop/compile/minified/ng-img-crop.css';
 @import (less) 'cropper.css';
 @import (less) 'main.css';
 @import (less) 'font-awesome.min.css';

--- a/sails/src/tasks/config/concat.js
+++ b/sails/src/tasks/config/concat.js
@@ -2,13 +2,12 @@ module.exports = function (grunt) {
  /* eslint-disable max-len */
  var jsLibs = [
    'assets/app/bower_components/jquery/dist/jquery.min.js',
-    'assets/app/bower_components/angular/angular.js',
+    'assets/app/bower_components/angular/angular.min.js',
-    'assets/app/bower_components/angular-bootstrap/ui-bootstrap.js',
+    'assets/app/bower_components/angular-bootstrap/ui-bootstrap.min.js',
-    'assets/app/bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
+    'assets/app/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js',
    'assets/app/bower_components/angular-ui-router/release/angular-ui-router.js',
    'assets/app/bower_components/angular-translate/angular-translate.js',
    'assets/app/bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js',
-    'assets/app/bower_components/ng-file-upload/angular-file-upload.js',
    'assets/app/bower_components/angular-filter/dist/angular-filter.js',
    'assets/app/bower_components/angular-timer/dist/assets/js/angular-timer-bower.js',
@@ -25,7 +24,9 @@ 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/ng-file-upload/angular-file-upload-shim.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',
    'assets/app/bower_components/bootstrap-filestyle/src/bootstrap-filestyle.min.js',
    'assets/app/bower_components/ngMask/dist/ngMask.min.js',
@@ -60,6 +61,7 @@ module.exports = function (grunt) {
    'assets/scripts/modules/student/controllers/pictoconfig.js',
    'assets/scripts/modules/student/controllers/pictoexp.js',
    'assets/scripts/modules/student/controllers/instructiondetail.js',
+    'assets/scripts/modules/student/controllers/imgcrop.js',
    'assets/scripts/modules/translate/controllers/translate.js',
    'assets/scripts/services/services.js',