From c9c7fe00c5677cbfbe3dbbb5324372ad020f4998 Mon Sep 17 00:00:00 2001
From: Sylvain <bond.never.die@gmail.com>
Date: Wed, 11 Oct 2017 12:54:13 +0200
Subject: [PATCH] filter disabled machines in list + improve responsiveness

---
 .../controllers/machines.coffee.erb           | 12 ++-
 app/assets/stylesheets/app.components.scss    | 10 +++
 app/assets/templates/machines/index.html.erb  | 74 ++++++++++---------
 config/locales/app.public.en.yml              | 11 ++-
 config/locales/app.public.fr.yml              | 11 ++-
 config/locales/app.public.pt.yml              | 11 ++-
 6 files changed, 84 insertions(+), 45 deletions(-)

diff --git a/app/assets/javascripts/controllers/machines.coffee.erb b/app/assets/javascripts/controllers/machines.coffee.erb
index 5a3a5c768..ad85cf6fe 100644
--- a/app/assets/javascripts/controllers/machines.coffee.erb
+++ b/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',
+  ]
 ]
 
 
diff --git a/app/assets/stylesheets/app.components.scss b/app/assets/stylesheets/app.components.scss
index 6a5026ba7..faf71e911 100644
--- a/app/assets/stylesheets/app.components.scss
+++ b/app/assets/stylesheets/app.components.scss
@@ -597,4 +597,14 @@ padding: 10px;
     border-bottom: 1px dashed #00b3ee;
     cursor: help;
   }
+}
+
+.machine-card {
+  @media only screen and (min-width: 768px) {
+    height: 24em;
+  }
+}
+
+.disabled-machine {
+  opacity: 0.5 !important;
 }
\ No newline at end of file
diff --git a/app/assets/templates/machines/index.html.erb b/app/assets/templates/machines/index.html.erb
index ffa7cbfac..f31626084 100644
--- a/app/assets/templates/machines/index.html.erb
+++ b/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,42 +22,46 @@
 
 <section class="m-lg">
 
-    <div class="row" ng-repeat="machine in (machines.length/3 | array)">
-
-      <div class="col-xs-12 col-sm-6 col-md-4" ng-repeat="machine in machines.slice(3*$index, 3*$index + 3)">
-
-
-          <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">
-            </div>
-            <div class="panel-heading picture" style="background-image:url({{machine.machine_image}})" ng-if="machine.machine_image" ng-click="showMachine(machine)">
-            </div>
-            <div class="panel-body">
-              <h1 class="text-center m-b">{{machine.name}}</h1>
-            </div>
-            <div class="panel-footer no-padder">
-
-              <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)">
-                     <i class="fa fa-bookmark"></i> {{ 'book' | translate }}
-                   </div>
-                </div>
-                <div class="col-sm-6 no-padder">
-                    <div class="btn btn-default btn-block padder-v no-b red" ng-click="showMachine(machine)">
-                      <i class="fa fa-eye"></i> {{ 'consult' | translate }}
-                    </div>
-                </div>
-              </div>
-
-            </div>
-          </div>
-
-
+    <div class="form-group row">
+      <div class="input-group col-md-3 m-l-lg m-b">
+        <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">
+        </div>
+        <div class="panel-heading picture" style="background-image:url({{machine.machine_image}})" ng-if="machine.machine_image" ng-click="showMachine(machine)">
+        </div>
+        <div class="panel-body">
+          <h1 class="text-center m-b">{{machine.name}}</h1>
+        </div>
+        <div class="panel-footer no-padder">
+
+          <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)" ng-hide="machine.disabled">
+                 <i class="fa fa-bookmark m-r-xs"></i>
+                 <span class="hidden-sm" translate>{{ 'machines_list.book' }}</span>
+               </div>
+            </div>
+            <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 m-r-xs"></i>
+                  <span class="hidden-sm" translate>{{ 'consult' }}</span>
+                </div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
 
 </section>
diff --git a/config/locales/app.public.en.yml b/config/locales/app.public.en.yml
index 5a92099cb..383e624cd 100644
--- a/config/locales/app.public.en.yml
+++ b/config/locales/app.public.en.yml
@@ -175,9 +175,14 @@ en:
 
       machines_list:
         # list of machines
-        the_fablab_s_machines: "The FabLab's machines"
-        add_a_machine: "Add a machine"
-        _or_the_: " or the "
+        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
diff --git a/config/locales/app.public.fr.yml b/config/locales/app.public.fr.yml
index 22d7b1843..086483b09 100644
--- a/config/locales/app.public.fr.yml
+++ b/config/locales/app.public.fr.yml
@@ -175,9 +175,14 @@ fr:
 
       machines_list:
         # liste des machines
-        the_fablab_s_machines: "Les machines du FabLab"
-        add_a_machine: "Ajouter une machine"
-        _or_the_: " ou la "
+        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
diff --git a/config/locales/app.public.pt.yml b/config/locales/app.public.pt.yml
index 71896dccd..3daf0c58a 100755
--- a/config/locales/app.public.pt.yml
+++ b/config/locales/app.public.pt.yml
@@ -175,9 +175,14 @@ pt:
 
         machines_list:
           # list of machines
-          the_fablab_s_machines: "Lista de máquinas no FabLab"
-          add_a_machine: "Adicionar uma máquina"
-          _or_the_: " ou o "
+          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