[feature] details public page for a training

app/assets/javascripts/controllers/admin/trainings.coffee.erb

@@ -139,9 +139,9 @@ Application.Controllers.controller "EditTrainingController", [ '$scope', '$state
 
 
 ##
-# Controller used in the public listing page, allowing logged users to see the list of trainings
+# Controller used in the trainings management page, allowing admins users to see and manage the list of trainings and reservations.
 ##
-Application.Controllers.controller "TrainingsController", ["$scope", "$state", "$uibModal", 'Training', 'trainingsPromise', 'machinesPromise', '_t', 'growl', 'dialogs'
+Application.Controllers.controller "TrainingsAdminController", ["$scope", "$state", "$uibModal", 'Training', 'trainingsPromise', 'machinesPromise', '_t', 'growl', 'dialogs'
 , ($scope, $state, $uibModal, Training, trainingsPromise, machinesPromise, _t, growl, dialogs) ->
 
 

app/assets/javascripts/controllers/trainings.coffee.erb

@@ -1,15 +1,44 @@
 'use strict'
 
+##
+# Public listing of the trainings
+##
 Application.Controllers.controller "TrainingsController", ['$scope', '$state', 'trainingsPromise', ($scope, $state, trainingsPromise) ->
+
+  ## List of trainings
   $scope.trainings = trainingsPromise
 
+  ##
+  # Callback for the 'reserve' button
+  ##
   $scope.reserveTraining = (training, event) ->
-    $state.go('app.logged.trainings_reserve')
+    $state.go('app.logged.trainings_reserve', {id: training.id})
 
+  ##
+  # Callback for the 'show' button
+  ##
   $scope.showTraining = (training) ->
-    $state.go('app.logged.trainings_reserve')
+    $state.go('app.public.training_show', {id: training.id})
 ]
 
+
+
+##
+# Public view of a specific training
+##
+Application.Controllers.controller "ShowTrainingController", ['$scope', '$state', 'trainingPromise', ($scope, $state, trainingPromise) ->
+
+  ## Current training
+  $scope.training = trainingPromise
+
+  ##
+  # Callback for the 'reserve' button
+  ##
+  $scope.reserveTraining = (training, event) ->
+    $state.go('app.logged.trainings_reserve', {id: training.id})
+]
+
+
 ##
 # Controller used in the training reservation agenda page.
 # This controller is very similar to the machine reservation controller with one major difference: here, ONLY ONE

app/assets/javascripts/router.coffee.erb

@@ -377,6 +377,19 @@ angular.module('application.router', ['ui.router']).
           translations: [ 'Translations', (Translations) ->
             Translations.query(['app.public.trainings_list']).$promise
           ]
+      .state 'app.public.training_show',
+        url: '/trainings/:id'
+        views:
+          'main@':
+            templateUrl: '<%= asset_path "trainings/show.html" %>'
+            controller: 'ShowTrainingController'
+        resolve:
+          trainingPromise: ['Training', '$stateParams', (Training, $stateParams)->
+            Training.get({id: $stateParams.id}).$promise
+          ]
+          translations: [ 'Translations', (Translations) ->
+            Translations.query(['app.public.training_show']).$promise
+          ]
       .state 'app.logged.trainings_reserve',
         url: '/trainings/reserve'
         views:
@@ -525,7 +538,7 @@ angular.module('application.router', ['ui.router']).
         views:
           'main@':
             templateUrl: '<%= asset_path "admin/trainings/index.html" %>'
-            controller: 'TrainingsController'
+            controller: 'TrainingsAdminController'
         resolve:
           trainingsPromise: ['Training', (Training)->
             Training.query().$promise

app/assets/templates/trainings/show.html.erb

@@ -0,0 +1,42 @@
+<div>
+
+  <section class="heading b-b">
+    <div class="row no-gutter">
+      <div class="col-xs-2 col-sm-2 col-md-1">
+        <section class="heading-btn">
+          <a href="#" ng-click="backPrevLocation($event)"><i class="fa fa-long-arrow-left "></i></a>
+        </section>
+      </div>
+      <div class="col-xs-10 col-sm-10 col-md-7 b-l b-r-md">
+        <section class="heading-title">
+          <h1>{{ training.name }}</h1>
+        </section>
+      </div>
+
+      <div class="col-xs-12 col-sm-12 col-md-4 b-t hide-b-md">
+        <section class="heading-actions wrapper">
+          <a ng-click="reserveTraining(training, $event)" class="btn btn-lg btn-warning bg-white b-2x rounded m-t-xs" translate>{{ 'book_this_training' }}</a>
+        </section>
+      </div>
+    </div>
+  </section>
+
+  <div class="row no-gutter">
+    <div class="col-sm-12 col-md-12 col-lg-8 b-r-lg">
+
+      <div class="article wrapper-lg" >
+
+        <div class="article-thumbnail" ng-if="training.training_image">
+          <img ng-src="{{training.training_image}}" alt="{{training.name}}" class="img-responsive">
+        </div>
+
+        <p class="intro" ng-bind-html="training.description | breakFilter"></p>
+
+      </div>
+
+    </div>
+
+
+  </div>
+
+</div>

config/locales/app.public.en.yml

@@ -171,6 +171,14 @@ en:
         unauthorized_operation: "Unauthoried operation"
         the_machine_cant_be_deleted_because_it_is_already_reserved_by_some_users: "The machine can't be deleted because it's already reserved by some users."
 
+      trainings_list:
+        # list of trainings
+        the_trainings: "The trainings"
+
+      training_show:
+        # details of a training
+        book_this_training: "Book this training"
+
       plans:
         # summary of the subscriptions
         subcriptions: "Subscriptions"

config/locales/app.public.fr.yml

@@ -176,6 +176,11 @@ fr:
         # liste des formations
         the_trainings: "Les formations"
 
+      training_show:
+        # détails d'une formation
+        book_this_training: "Réserver cette formation"
+
+
       plans:
         # page récapitulative des abonnements
         subcriptions: "Les abonnements"