Fixed #431, error al subir fotos desde el dashboard

- Corregida función toJSON del modelo Picto - Corregida tabulación de student/views/addpicto.html - Actualizada función de subida de pictos desde la web

Fixed #431, error al subir fotos desde el dashboard
- Corregida función toJSON del modelo Picto - Corregida tabulación de student/views/addpicto.html - Actualizada función de subida de pictos desde la web
557ace5c · Pablo Molina · f257d092 · 557ace5c · 557ace5c · 557ace5c
Commit 557ace5c authored May 23, 2016 by Pablo Molina
Showing with 36 additions and 79 deletions
sails/src/api/models/Picto.js
sails/src/assets/app/i18n/en-gb.json
sails/src/assets/app/i18n/es-es.json
sails/src/assets/scripts/modules/student/controllers/addpicto.js
sails/src/assets/scripts/modules/student/views/addpicto.html
--- a/sails/src/api/models/Picto.js
+++ b/sails/src/api/models/Picto.js
@@ -62,7 +62,6 @@ module.exports = {
    stusPicto: {
      collection: 'StuPicto',
      via: 'picto'
-    }
    },
    toJSON: function () {
@@ -72,4 +71,5 @@ module.exports = {
      }
      return picto;
    }
+  }
 };
--- a/sails/src/assets/app/i18n/en-gb.json
+++ b/sails/src/assets/app/i18n/en-gb.json
@@ -103,6 +103,7 @@
    "instruction_end": "End instruction",
    "instructions": "Instructions",
    "invalid_fields": "Invalid values. Please, check fields introduced.",
+    "invalid_file_type": "Invalid file type",
    "invisible": "Invisible. Clic for enable",
    "January": "January",
    "July": "July",
@@ -171,6 +172,8 @@
    "phrase_tape": "Phrase tape",
    "picto_behavior": "Behavior of a pictogram when it is selected (without phrase tape)",
    "picto_labels": "Pictogram labels",
+    "picto_upload_error": "Error uploading picto",
+    "picto_upload_success": "Picto uploaded successfully",
    "pictogram": "Pictogram",
    "pictogram_setup": "Pictogram setup",
    "pictograms": "Pictograms",

--- a/sails/src/assets/app/i18n/es-es.json
+++ b/sails/src/assets/app/i18n/es-es.json
@@ -104,6 +104,7 @@
    "instruction_end": "Último intento",
    "instructions": "Instrucciones",
    "invalid_fields": "Valores inválidos. Compruebe los datos introducidos.",
+    "invalid_file_type": "Tipo de archivo no válido",
    "invisible": "Invisible. Clic para activar",
    "January": "Enero",
    "July": "Julio",
@@ -172,6 +173,8 @@
    "phrase_tape": "Cinta de frase",
    "picto_behavior": "Comportamiento de un pictograma al seleccionarlo (sin cinta de frase)",
    "picto_labels": "Etiquetas del pictograma",
+    "picto_upload_error": "Hubo un error al guardar el picto",
+    "picto_upload_success": "Picto almacenado correctamente",
    "pictogram": "Pictograma",
    "pictogram_setup": "Configuración del pictograma",
    "pictograms": "Pictogramas",

--- a/sails/src/assets/scripts/modules/student/controllers/addpicto.js
+++ b/sails/src/assets/scripts/modules/student/controllers/addpicto.js
@@ -156,53 +156,38 @@ dashboardControllers.controller('AddPictoCtrl', function (
    $scope.alert.show = false;
  };
-  //
+  /**
-  // Upload to own supervisor collection when a picto is selected from file
+   * When a image file is selected it tries to upload it as custom picto (making a
-  //
+   * POST request to /picto/upload).
-  $scope.onPictoSelect = function($files) {
+   * @param  {Array of Objects} $files Array of pictos to be uploaded the file
-    //$files: an array of files selected, each file has name, size, and type.
+   *  itself (as binary data) will be sent.
-    for (var i = 0; i < $files.length; i++) {
+   */
-      var file = $files[i];
+  $scope.onPictoSelect = function ($files) {
+    $files.forEach(function (file) {
-      // Check accepted file types
+      if (file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif') {
-      if(file.type == "image/jpeg" || file.type == "image/png" || file.type == "image/gif"){
-        // Get the file extension
-        var extension = file.name.split('.').pop();
-        var filename = sup.id + file.name;
-        console.log("Archivo: " + filename);
-        //file.extra="{'filename': filename, 'extension': extension, 'folder': 'custompictos', 'owner': $scope.sup.id, 'source': '2'}";
        $upload.upload({
-          url: '/picto/upload', //upload.php script, node.js route, or servlet url
+          url: '/picto/upload',
-          method: 'POST', // or 'PUT',
+          method: 'POST',
-          // Fields to be sent in the body of the request
+          fields: { owner: $scope.sup.id },
-          fields: {'filename': filename, 'extension': extension, 'folder': 'custompictos', 'owner': $scope.sup.id, 'source': '2'},
+          file: file
-          // or ['1.jpg', '2.jpg', ...] // to modify the name of the file(s)
+        }).success(function (picto) {
-          file: file, // or list of files ($files) for html5 only
+          $translate('picto_upload_success').then(function (translation) {
-        }).progress(function(evt) {
+            ngToast.success(translation);
-          console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
+          });
-        }).success(function(data, status, headers, config) {
+          picto.expressions = [];
-          // file is uploaded successfully
+          $scope.pictos.push(picto);
-          console.log("Data:");
+          $scope.open_exp(picto);
-          console.log(JSON.stringify(data));
+        }).error(function () {
+          $translate('picto_upload_error').then(function (translation) {
-          // Add empty objetc for expressions
+            ngToast.danger(translation);
-          data.picto.expressions = [];
+          });
-          $scope.pictos.push(data.picto);
+        });
+      } else {
-          // Open modal window to add expression
+        $translate('invalid_file_type').then(function (translation) {
-          $scope.open_exp(data.picto);
+          ngToast.danger(translation);
-        }).error(function(data, status, headers, config) {
-        console.log("Error uploading: " + data.error);
-        window.location.replace(window.location.pathname);
        });
-      }else{
-        alert("It's only supported JPG, PNG and GIF files");
-      }
      }
+    });
  };
  //

--- a/sails/src/assets/scripts/modules/student/views/addpicto.html
+++ b/sails/src/assets/scripts/modules/student/views/addpicto.html
@@ -6,10 +6,7 @@
    </div>
  </div>
  <div class="modal-body">
-      <!-- Panel migas de pan y categorías -->
    <div ng-show="source == 'symbolstx'" class="panel panel-default" id="bread_and_categories">
-        <!-- Migas de pan -->
      <div class="panel-heading">
        <div class="pull-left" ng-repeat="b in breadcrumbs">
          <a ng-click="open_category_from_bc(b.id)">
@@ -18,47 +15,30 @@
        </div>
        <div class="clearfix"></div>
      </div>
-        <!-- Categorías -->
      <div class="panel-body">
        <div class="row">
          <div class="col-md-3 col-xs-4" ng-repeat="c in symbolstxCats | orderBy: 'exps[0].exp'">
            <a ng-click="open_category(c)"><span class="glyphicon glyphicon-folder-close"></span> {{ c.exps[0].exp }}</a>
          </div>
        </div>
-          <!-- Fin de categorías -->
      </div>
    </div>
-      <!-- Fin del panel migas de pan y categorías -->
-      <!-- Botones para añadir picto nuevo -->
    <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>
-      <!-- Fin de columna vistas por categorías -->
-      <!-- Alert panel -->
    <div>
      <alert ng-show="alert.show" ng-model="alert" type="{{alert.type}}" close="closeAlert()">{{alert.msg}}</alert>
    </div>
-      <!-- Panel de pictogramas -->
    <div class="row">
-        <!-- Pictogramas de la categoría actual -->
      <div id="collections" class="col-md-9">
-          <!-- Buscador pictos -->
        <div class="input-group" id="search_pictos_box">
          <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>
-          <!-- Fin buscador pictos -->
        <!-- Galería de pictos -->
        <div class="picto_peq pull-left" ng-repeat="p in pictos | filter:srch_term_picto" draggable id="{{p.id}}">
          <img ng-src="{{p.uri}}" popover="{{p.expressions[0].text}}" popover-trigger="mouseenter"   />
@@ -69,28 +49,20 @@
            </a>
          </div>
        </div>
        <div class="clearfix"></div>
-          <!-- Fin galería de imágenes -->
      </div>
-        <!-- Fin de collections -->
-        <!-- Columna derecha para añadir pictos en categorías -->
      <div class="col-md-3">
        <div id="pictos_to_add">
          <h4 class="text-center">Para añadir</h4>
          <div class="picto_cat" ng-repeat="c in categories">
            <div class="panel panel-default" id="{{c.picto.id}}_{{c.attributes.coord_x}}_{{c.attributes.coord_y}}" droppableadd drop="handleDropAddPicto">
              <div class="panel-heading">
                <img ng-src="{{c.picto.uri}}" class="unselectable" />
                <span>{{c.expression.text}}</span>
              </div>
-                  <!-- To append pictos to add -->
              <div class="panel-body" >
                <div class="picto_peq pull-left" ng-repeat="pa in pictos_in_category['cat'+c.picto.id]" id="{{pa.picto.id}}">
                  <img ng-src="{{pa.picto.uri}}" class="unselectable" popover="{{pa.expressions[0].text}}" popover-trigger="mouseenter" />
-                      <!-- Options to remove picto -->
                  <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>
@@ -100,17 +72,11 @@
              </div>
            </div>
          </div>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
  </div>
-      <!-- Fin de row -->
-    </div>
-    <!-- End modal-body -->
  <div class="modal-footer">
      <button class="btn btn-primary" ng-click="close()">{{ 'close' | translate }}</button>
  </div>