student setup view rearranged

ae2c93b7 · Arturo Montejo Ráez · be65fb8e · ae2c93b7 · ae2c93b7 · ae2c93b7
Commit ae2c93b7 authored Dec 17, 2016 by Arturo Montejo Ráez
Showing with 164 additions and 108 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/modules/student/controllers/setup.js
sails/src/assets/scripts/modules/student/views/setup.html
sails/src/tasks/config/concat.js
--- a/sails/src/assets/app/bower.json
+++ b/sails/src/assets/app/bower.json
@@ -27,7 +27,8 @@
    "angular-animate": "~1.4.1",
    "angular-sanitize": "~1.4.1",
    "angular-chart.js": "latest",
-    "ng-lodash": "~0.3.0"
+    "ng-lodash": "~0.3.0",
+    "bootstrap-filestyle": "~1.2.1"
  },
  "resolutions": {
    "angular": ">=1 <1.3.0",

--- a/sails/src/assets/app/i18n/en-gb.json
+++ b/sails/src/assets/app/i18n/en-gb.json
@@ -56,6 +56,7 @@
    "country": "Country",
    "create_account": "Create account",
    "create_an_account": "Create an account",
+    "credentials": "Credentials",
    "crop_image": "Crop image",
    "data_no_saved": "Data can't be saved",
    "data_saved": "Data saved",
@@ -97,7 +98,7 @@
    "expand_navigation": "Expand navigation",
    "expression": "Expression:",
    "February": "February",
-    "feedback_picto": "Feedback when a pictogram is placed",
+    "feedback_picto": "Selection feedback",
    "filter": "Filter",
    "finish_session": "Finish session",
    "finished": "Finished",
@@ -125,6 +126,7 @@
    "June": "June",
    "language": "Language",
    "large": "Large",
+    "large_picto": "Large pictograms",
    "last_session": "Last session",
    "legend": "Legend",
    "legend_size": "Legend size",
@@ -217,6 +219,7 @@
    "press": "Long press",
    "previous_actions": "Previous actions",
    "previous_sessions": "Previous sessions",
+    "profile_picture": "Profile picture",
    "read_picto": "Read picto",
    "register": "Sign in",
    "remember": "Remember me",
@@ -248,6 +251,7 @@
    "show": "Show",
    "size": "Size",
    "small": "Small",
+    "small_picto": "Small pictograms",
    "sound_setup": "Sound setup",
    "spanish": "Spanish",
    "started": "Started",

--- a/sails/src/assets/app/i18n/es-es.json
+++ b/sails/src/assets/app/i18n/es-es.json
@@ -56,6 +56,7 @@
    "country": "País",
    "create_account": "Crear cuenta",
    "create_an_account": "Crear una cuenta",
+    "credentials": "Credenciales",
    "crop_image": "Recortar imagen",
    "data_no_saved": "Los datos no se han podido guardar",
    "data_saved": "Datos guardados",
@@ -97,7 +98,7 @@
    "error_loading_pictos": "Error cargando información de los pictos",
    "error_general": "Se ha producido un error",
    "February": "Febrero",
-    "feedback_picto": "Feedback al colocar un pictograma",
+    "feedback_picto": "Efecto de selección",
    "filter": "Filtrar",
    "finish_session": "Terminar sesión",
    "finished": "Completada",
@@ -125,6 +126,7 @@
    "June": "Junio",
    "language": "Idioma",
    "large": "Grande",
+    "large_picto": "Pictograms grandes",
    "last_session": "Última sesión",
    "legend": "Leyenda",
    "legend_size": "Tamaño de la leyenda",
@@ -217,6 +219,7 @@
    "press": "Pulsación larga",
    "previous_actions": "Acciones anteriores",
    "previous_sessions": "Sesiones anteriores",
+    "profile_picture": "Foto del perfil",
    "read_picto": "Leer picto",
    "register": "Regístrate",
    "register_button": "Registrar",
@@ -249,6 +252,7 @@
    "show": "Mostrar",
    "size": "Tamaño",
    "small": "Pequeño",
+    "small_picto": "Pictogramas pequeños",
    "sound_setup": "Ajustes de sonido",
    "spanish": "Español",
    "started": "Iniciada",

--- a/sails/src/assets/scripts/modules/student/controllers/setup.js
+++ b/sails/src/assets/scripts/modules/student/controllers/setup.js
@@ -17,6 +17,12 @@ dashboardControllers.controller('StudentSetupCtrl', function StudentSetupCtrl(
  // For tab navigation (here too, if the user refresh the page...)
  $scope.nav.tab = 'setup';
+  // Set upload button to filestyle
+  $(":file").filestyle({
+    buttonText: "&nbsp;" + $translate.instant('change_picture'),
+    input: false
+  });
  /**
   * Updates the student picture
   * @param  {Angular file array} $files Image to be uploaded

--- a/sails/src/assets/scripts/modules/student/views/setup.html
+++ b/sails/src/assets/scripts/modules/student/views/setup.html
@@ -5,19 +5,25 @@
      <div class="col-md-6">
        <div id="student_personal_edit">
          <form role="form" ng-submit="updateStudent()">
-            <!-- Cambiar imagen de perfil -->
-            <div class="form-group">
-              <h4><span class="glyphicon glyphicon-picture" aria-hidden="true"></span> {{ 'change_picture' | translate }}: </h4>
-              <!-- Input oculto para cargar la redimensión de la imagen (awesome-cropper) -->
-              <input type="file" ng-file-select="onFileSelect($files)" ng-model="picFile" accept="image/*">
-            </div>
+            <h3>{{ 'account' | translate }}</h3>
+            <div class="row">
+              <div class="col-md-6">
+                <legend translate>profile_picture</legend>
                <!-- Preview -->
                <img class="thumbnail preview" ng-src="{{studentData.pic}}" />
                <!-- Fin Cambiar imagen de perfil -->
+                <div class="form-group">
+                  <input type="file" class="filestyle">
+                </div>
+              </div>
+              <div class="col-md-6">
                <fieldset>
-              <legend translate>account</legend>
+                  <legend translate>credentials</legend>
                  <div class="form-group">
                    <input type="username" class="form-control" id="setup_username" placeholder="{{ 'username' | translate }}" required ng-model="formUser.username" readonly/>
                  </div>
@@ -28,7 +34,18 @@
                  <div class="form-group">
                    <input type="password" class="form-control" id="setup_password2" placeholder="{{ 'password_confirm' | translate }}" ng-model="formUser.password_confirm"/>
                  </div>
+                </fieldset>
+              </div>
+          </div>
+            <fieldset>
              <legend translate>personal_data</legend>
+              <div class="row">
+                <div class="col-md-6">
                  <div class="form-group">
                    <input type="text" class="form-control" id="student_personal_edit_name" placeholder="{{ 'name' | translate }}" ng-model="formUser.name" required />
                  </div>
@@ -43,6 +60,11 @@
                      </span>
                    </p>
                  </div>
+                </div>
+                <div class="col-md-6">
+                  <fieldset>
                    <div class="form-group">
                      <select class="form-control" name="student_gender" id="student_gender" ng-model="formUser.gender" required>
                        <option value=" ">&nsp;</option>
@@ -58,18 +80,9 @@
                        <option value="IE">Ireland</option>
                      </select>
                    </div>
-            </fieldset>
-            <fieldset ng-if="studentData.supervision != 1">
-              <legend translate>notes</legend>
-              <div class="form-group">
-                <textarea class="form-control" name="student_notes" id="student_notes" ng-model="formUser.notes" rows="5"></textarea>
-              </div>
-            </fieldset>
-            <fieldset>
-              <legend translate>language</legend>
                    <div class="form-group">
+                      <span translate>language</span>:
                      <select class="form-control" name="supervisor_language" id="supervisor_language" ng-model="formUser.lang">
                        <option value="es-es">Español</option>
                        <option value="en-gb">English</option>
@@ -77,102 +90,34 @@
                    </div>
                  </fieldset>
-            <div class="form-group text-center">
-              <button type="submit" class="btn btn-primary" translate>save</button>
-            </div>
-          </form>
-        </div>
-        <!-- Fin de student_personal_edit -->
-      </div>
-      <!-- Parte derecha: Tutores y dispositivos -->
-      <div class="col-md-6">
-        <!-- Supervisores (terapeutas) del alumno -->
-        <div id="student_sups" ng-if="studentData.supervision != 1">
-          <h3 translate>supervisors</h3>
-          <!-- Buscador de supervisores -->
-          <p>
-            <form role="search" ng-submit="search_sup()">
-              <div class="input-group">
-                <input type="email" class="form-control" placeholder="{{ 'search_sup_email' | translate }}" name="email_sup" id="email_sup" ng-model="email_sup" required>
-                <div class="input-group-btn">
-                  <button class="btn btn-default" type="submit">
-                    <span class="glyphicon glyphicon-search"></span>
-                  </button>
                </div>
              </div>
-            </form>
-          </p>
-          <!-- Alert and success messages for supervisor found -->
+            <fieldset ng-if="studentData.supervision != 1">
-          <div ng-show="{{ 'showmessagesupfound' }}" class="alert alert-info">
+              <legend translate>notes</legend>
-            <!-- Imagen de perfil del tutor -->
+              <div class="form-group">
-            <img ng-src="{{supToAdd.pic}}" class="profile" alt="" title="" /> {{ supToAdd.name }} {{ supToAdd.surname }}
+                <textarea class="form-control" name="student_notes" id="student_notes" ng-model="formUser.notes" rows="5"></textarea>
-            <a class="btn btn-default btn-lg pull-right" role="button" ng-click="add_sup()" translate>add</a>
              </div>
-          <!-- Fin de buscador de supervisores -->
+            </fieldset>
-          <!-- Supervisores asignados -->
+            <div class="form-group text-center">
-          <ul class="list-group" id="user_sups">
+              <button type="submit" class="btn btn-primary" translate>save</button>
-            <li class="list-group-item" ng-repeat="sup in studentSupervisors">
-              <!-- Imagen de perfil del supervisor -->
-              <img ng-src="{{sup.pic}}" class="profile" alt="" title="" />
-              {{sup.name}} {{sup.surname}}
-              <a ng-click="delete_sup(sup.id)" class="delete_sup" title="{{ 'unlink' | translate}}">
-                <span class="color_red glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
-              </a>
-            </li>
-          </ul>
-          <!-- Fin de Supervisores asignados -->
            </div>
-        <!-- Fin de id student-sups -->
+          </form>
-        <!-- Tutores (Padres) -->
-        <div id="student_tutors" ng-if="studentData.supervision != 1">
-          <h3>{{ 'tutors' | translate }}</h3>
-          <!-- Buscador de tutores -->
-          <p>
-            <form role="search" ng-submit="search_tutor()">
-              <div class="input-group">
-                <input type="email" class="form-control" placeholder="{{ 'search_tutor_email' | translate }}" name="email_tutor" id="email_tutor" ng-model="email_tutor" required>
-                <div class="input-group-btn">
-                  <button class="btn btn-default" type="submit">
-                    <span class="glyphicon glyphicon-search"></span>
-                  </button>
        </div>
+        <!-- Fin de student_personal_edit -->
      </div>
-            </form>
-          </p>
-          <!-- Alert and success messages for tutor found -->
-          <div ng-show="{{ 'showmessagetutorfound' }}" class="alert alert-info">
-            <!-- Imagen de perfil del tutor -->
-            <img ng-src="{{tutorToAdd.pic}}" class="profile" alt="" title="" />
-            {{ tutorToAdd.name }} {{ tutorToAdd.surname }}
-            <a class="btn btn-default btn-sm pull-right" role="button" ng-click="add_tutor()" translate>add</a>
-          </div>
-          <!-- Fin de buscador de tutores -->
-          <!-- Tutores asignados -->
+      <!-- Configuración dispositivo -->
-          <ul class="list-group" id="user_tutors">
+      <div class="col-md-6">
-            <li class="list-group-item" ng-repeat="tutor in studentTutors">
-              <!-- Imagen de perfil del tutor -->
-              <img ng-src="{{tutor.pic}}" class="profile" alt="" title="" />
-              {{tutor.name}} {{tutor.surname}}
-              <a ng-click="delete_tutor(tutor.id)" class="delete_tutor" title="{{ 'unlink' | translate}}">
-                <span class="color_red glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
-              </a>
-            </li>
-          </ul>
-          <!-- Fin de Tutores asignados -->
-          <!-- Info message -->
-          <div class="alert alert-info">{{ 'supervisor_note' | translate }}</div>
-        </div>
-        <!-- Fin de id student-tutors -->
      <div id="device_setup">
        <h3>{{ 'device_setup' | translate }}</h3>
+        <div class="row">
+          <div class="col-md-6">
        <form role="form" class="form">
          <fieldset>
            <legend>{{ 'categories' | translate }}</legend>
@@ -185,9 +130,8 @@
              </span>
              <label class="form-control" for="studentSetupUseCategories">{{ 'use_categories' | translate }}</label>
            </div>
-              <legend>{{ 'picto_style' | translate }}</legend>
+            <legend>{{ 'picto_size' | translate }}</legend>
            <div class="form-group">
-                <h4>{{ 'size' | translate }}</h4>
              <div class="input-group">
                <span class="input-group-addon">
                  <input type="radio"
@@ -197,7 +141,7 @@
                    ng-change="update_attributes()">
                </span>
                <label class="form-control" for="studentSetupPictoSizeSmall">
-                    {{ 'small' | translate }}
+                  {{ 'small_picto' | translate }}
                </label>
              </div>
              <div class="input-group">
@@ -209,11 +153,15 @@
                    ng-change="update_attributes()">
              </span>
                <label class="form-control" for="studentSetupPictoSizeLarge">
-                    {{ 'large' | translate }}
+                  {{ 'large_picto' | translate }}
                </label>
              </div>
            </div>
          </fieldset>
+        </div>
+        <div class="col-md-6">
          <fieldset>
            <legend>{{ 'feedback_picto' | translate }}</legend>
            <div class="input-group">
@@ -383,6 +331,99 @@
        -->
        </form>
      </div>
+    </div>
+  </div>
+      <!-- /configuración dispositivo -->
+        <!-- Parte derecha: Tutores y dispositivos -->
+        <!-- Supervisores (terapeutas) del alumno -->
+        <div id="student_sups" ng-if="studentData.supervision != 1">
+          <legend translate>supervisors</legend>
+          <!-- Buscador de supervisores -->
+          <p>
+            <form role="search" ng-submit="search_sup()">
+              <div class="input-group">
+                <input type="email" class="form-control" placeholder="{{ 'search_sup_email' | translate }}" name="email_sup" id="email_sup" ng-model="email_sup" required>
+                <div class="input-group-btn">
+                  <button class="btn btn-default" type="submit">
+                    <span class="glyphicon glyphicon-search"></span>
+                  </button>
+                </div>
+              </div>
+            </form>
+          </p>
+          <!-- Alert and success messages for supervisor found -->
+          <div ng-show="{{ 'showmessagesupfound' }}" class="alert alert-info">
+            <!-- Imagen de perfil del tutor -->
+            <img ng-src="{{supToAdd.pic}}" class="profile" alt="" title="" /> {{ supToAdd.name }} {{ supToAdd.surname }}
+            <a class="btn btn-default btn-lg pull-right" role="button" ng-click="add_sup()" translate>add</a>
+          </div>
+          <!-- Fin de buscador de supervisores -->
+          <!-- Supervisores asignados -->
+          <ul class="list-group" id="user_sups">
+            <li class="list-group-item" ng-repeat="sup in studentSupervisors">
+              <!-- Imagen de perfil del supervisor -->
+              <img ng-src="{{sup.pic}}" class="profile" alt="" title="" />
+              {{sup.name}} {{sup.surname}}
+              <a ng-click="delete_sup(sup.id)" class="delete_sup" title="{{ 'unlink' | translate}}">
+                <span class="color_red glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
+              </a>
+            </li>
+          </ul>
+          <!-- Fin de Supervisores asignados -->
+        </div>
+        <!-- Fin de id student-sups -->
+        <!-- Tutores (Padres) -->
+        <div id="student_tutors" ng-if="studentData.supervision != 1">
+          <legend translate>tutors</legend>
+          <!-- Buscador de tutores -->
+          <p>
+            <form role="search" ng-submit="search_tutor()">
+              <div class="input-group">
+                <input type="email" class="form-control" placeholder="{{ 'search_tutor_email' | translate }}" name="email_tutor" id="email_tutor" ng-model="email_tutor" required>
+                <div class="input-group-btn">
+                  <button class="btn btn-default" type="submit">
+                    <span class="glyphicon glyphicon-search"></span>
+                  </button>
+                </div>
+              </div>
+            </form>
+          </p>
+          <!-- Alert and success messages for tutor found -->
+          <div ng-show="{{ 'showmessagetutorfound' }}" class="alert alert-info">
+            <!-- Imagen de perfil del tutor -->
+            <img ng-src="{{tutorToAdd.pic}}" class="profile" alt="" title="" />
+            {{ tutorToAdd.name }} {{ tutorToAdd.surname }}
+            <a class="btn btn-default btn-sm pull-right" role="button" ng-click="add_tutor()" translate>add</a>
+          </div>
+          <!-- Fin de buscador de tutores -->
+          <!-- Tutores asignados -->
+          <ul class="list-group" id="user_tutors">
+            <li class="list-group-item" ng-repeat="tutor in studentTutors">
+              <!-- Imagen de perfil del tutor -->
+              <img ng-src="{{tutor.pic}}" class="profile" alt="" title="" />
+              {{tutor.name}} {{tutor.surname}}
+              <a ng-click="delete_tutor(tutor.id)" class="delete_tutor" title="{{ 'unlink' | translate}}">
+                <span class="color_red glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
+              </a>
+            </li>
+          </ul>
+          <!-- Fin de Tutores asignados -->
+          <!-- Info message -->
+          <div class="alert alert-info">{{ 'supervisor_note' | translate }}</div>
+        </div>
+        <!-- Fin de id student-tutors -->
      </div>
    </div>
    <!-- Fin de row -->

--- a/sails/src/tasks/config/concat.js
+++ b/sails/src/tasks/config/concat.js
@@ -25,7 +25,7 @@ module.exports = function (grunt) {
    '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/bootstrap-filestyle/src/bootstrap-filestyle.min.js',
    'assets/scripts/lib/sails.io.js'
  ];
  var jsFiles = [