filter disabled machines in list + improve responsiveness

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

@@ -126,7 +126,7 @@ _reserveMachine = (machine, e) ->
                   text = ''
                   angular.forEach $scope.machine.trainings, (training) ->
                     if text.length > 0
-                      text += _this._t('_or_the_')
+                      text += _this._t('machines_list._or_the_')
                     text += training.name.substr(0,1).toLowerCase() + training.name.substr(1)
                   text
 
@@ -172,6 +172,16 @@ Application.Controllers.controller "MachinesController", ["$scope", "$state", '_
     _t: _t
     $uibModal: $uibModal
     Machine: Machine
+
+  ## Default: we show only enabled machines
+  $scope.machineFiltering = 'enabled'
+
+  ## Available options for filtering machines by status
+  $scope.filterDisabled = [
+    'enabled',
+    'disabled',
+    'all',
+  ]
 ]
 
 

app/assets/stylesheets/app.components.scss

@@ -598,3 +598,13 @@ padding: 10px;
     cursor: help;
   }
 }
+
+.machine-card {
+  @media only screen and (min-width: 768px) {
+    height: 24em;
+  }
+}
+
+.disabled-machine {
+  opacity: 0.5 !important;
+}

app/assets/templates/machines/index.html.erb

@@ -7,13 +7,13 @@
     </div>
     <div class="col-xs-10 col-sm-10 col-md-8 b-l b-r-md">
       <section class="heading-title">
-        <h1 translate>{{ 'the_fablab_s_machines' }}</h1>
+        <h1 translate>{{ 'machines_list.the_fablab_s_machines' }}</h1>
       </section>
     </div>
 
     <div class="col-xs-12 col-sm-12 col-md-3 b-t hide-b-md" ng-if="isAuthorized('admin')">
       <section class="heading-actions wrapper">
-       <a class="btn btn-lg btn-warning bg-white b-2x rounded m-t-xs" ui-sref="app.admin.machines_new" role="button" translate>{{ 'add_a_machine' }}</a>
+       <a class="btn btn-lg btn-warning bg-white b-2x rounded m-t-xs" ui-sref="app.admin.machines_new" role="button" translate>{{ 'machines_list.add_a_machine' }}</a>
       </section>
     </div>
   </div>
@@ -22,11 +22,17 @@
 
 <section class="m-lg">
 
-    <div class="row" ng-repeat="machine in (machines.length/3 | array)">
+    <div class="form-group row">
-
+      <div class="input-group col-md-3 m-l-lg m-b">
-      <div class="col-xs-12 col-sm-6 col-md-4" ng-repeat="machine in machines.slice(3*$index, 3*$index + 3)">
+        <span class="input-group-addon"><i class="fa fa-filter"></i></span>
+        <select ng-model="machineFiltering" class="form-control">
+          <option ng-repeat="status in filterDisabled" value="{{status}}" translate>{{ 'machines_list.status_'+status }}</option>
+        </select>
+      </div>
+    </div>
 
 
+    <div class="col-xs-12 col-sm-6 col-lg-4 machine-card" ng-class="{'disabled-machine' : machine.disabled && machineFiltering === 'all'}" ng-repeat="machine in machines | filterDisabled:machineFiltering">
       <div class="widget panel panel-default">
         <div class="panel-heading picture" ng-if="!machine.machine_image" ng-click="showMachine(machine)">
           <img src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:FontAwesome/icon" bs-holder class="img-responsive">
@@ -40,24 +46,22 @@
 
           <div class="text-center clearfix">
             <div class="col-sm-6 b-r no-padder">
-                   <div class="btn btn-default btn-block no-b padder-v red" ng-click="reserveMachine(machine, $event)">
+               <div class="btn btn-default btn-block no-b padder-v red" ng-click="reserveMachine(machine, $event)" ng-hide="machine.disabled">
-                     <i class="fa fa-bookmark"></i> {{ 'book' | translate }}
+                 <i class="fa fa-bookmark m-r-xs"></i>
+                 <span class="hidden-sm" translate>{{ 'machines_list.book' }}</span>
                </div>
             </div>
-                <div class="col-sm-6 no-padder">
+            <div class="no-padder" ng-class="{'col-sm-6': !machine.disabled}">
                 <div class="btn btn-default btn-block padder-v no-b red" ng-click="showMachine(machine)">
-                      <i class="fa fa-eye"></i> {{ 'consult' | translate }}
+                  <i class="fa fa-eye m-r-xs"></i>
+                  <span class="hidden-sm" translate>{{ 'consult' }}</span>
                 </div>
             </div>
           </div>
 
         </div>
       </div>
-
-
     </div>
-    </div>
-
 
 
 </section>

config/locales/app.public.en.yml

@@ -175,9 +175,14 @@ en:
 
       machines_list:
         # list of machines
+        machines_list:
           the_fablab_s_machines: "The FabLab's machines"
           add_a_machine: "Add a machine"
+          book: "Book"
           _or_the_: " or the "
+          status_enabled: "Enabled"
+          status_disabled: "Disabled"
+          status_all: "All"
 
       machines_show:
         # details of a machine

config/locales/app.public.fr.yml

@@ -175,9 +175,14 @@ fr:
 
       machines_list:
         # liste des machines
+        machines_list:
           the_fablab_s_machines: "Les machines du FabLab"
           add_a_machine: "Ajouter une machine"
+          book: "Réserver"
           _or_the_: " ou la "
+          status_enabled: "Actives"
+          status_disabled: "Désactivées"
+          status_all: "Toutes"
 
       machines_show:
         # détail d'une machine

config/locales/app.public.pt.yml

@@ -175,9 +175,14 @@ pt:
 
         machines_list:
           # list of machines
+          machines_list:
             the_fablab_s_machines: "Lista de máquinas no FabLab"
             add_a_machine: "Adicionar uma máquina"
+            book: "Reservar"
             _or_the_: " ou o "
+            status_enabled: "Ativos" # TODO
+            status_disabled: "Desabilitados" # TODO
+            status_all: "Todos" # TODO
 
         machines_show:
           # details of a machine