Technical Test 2016 : Le pot commun

by Hassen Charef

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<infinite-scroll>
  <div class="page-container">
    <div class="column" data-ng-repeat="pot in pots" data-ng-if="pots && pots.length">
      <div class="pot-element-container" data-background-loader="pot.imageUrl">
        <span class="name">{{pot.name}}</span>
      </div>
    </div>
    <div class="error-message" data-ng-if="!pots || !pots.length">
      Erreur lors du chargement des pots
    </div>
  </div>
</infinite-scroll>

CSS

/* font imports */

@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i';

/* Variables de declaration*/

body {
  font-family: 'Open Sans';
}

.page-container {
  max-width: 1000px;
  margin: 0 auto;
}

.column {
  vertical-align: top;
  float: left;
  width: 50%;
}

.error-message {
  text-align: center;
  font-weight: bold;
  color: red;
}

@media only screen and (max-width: 768px) {
  .column {
    width: 100%;
  }
}

.pot-element-container {
  position: relative;
  margin: 5px;
  height: 150px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.pot-element-container > .name {
  color: white;
  left: 7px;
  bottom: 5px;
  font: bold;
  position: absolute;
  z-index: 101;
}

.pot-element-container:after {
  width: 100%;
  height: 100%;
  position: absolute;
  content: "";
  top: 0px;
  left: 0px;
  content: "";
  z-index: 100;
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.8)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000', GradientType=0);
  /* IE6-9 */
}

JavaScript

var lpcTechnicalTest = angular.module('lpcTechnicalTest', []);

/**
	Contient un fonction permettant de générer l'url du web service de chargement de pots tout en spécifiant un offset.
*/
lpcTechnicalTest.constant('RESOURCES', (function() {
  var BASE_URL = 'https://recrutement.lepotcommuntest.fr/recruting/'
  return {
    GET_POTS_URL_WITH_OFFSET: function(offset) {
      return (BASE_URL + "get-pots/{offset}").replace(/{offset}/g, offset);
    }
  }
})());


/**
	Le service angular qui permet d'effectuer des appels http au web service de chargement de pots selon un offset bien défini.
	Notez bien qu'on injecte deux resources dont "RESOURCES" pour extraire l'url du web service.
*/
lpcTechnicalTest.service("PotsLoaderService", ['RESOURCES', '$http', function(RESOURCES, $http) {
  //This function will return a promise to the controller 
  return {
    load: function(offset) {
      return $http.get(RESOURCES.GET_POTS_URL_WITH_OFFSET(offset))
        .then(function(response) {
          return response.data;
        })
    }
  }
}]);

/**
	Le controlleur principal de notre application
  La partie à compléter doit extraire la liste des pots depuis l'API avec un offset n et la joindre la laliste de pots 		  actuelle.
*/
lpcTechnicalTest.controller("MainController", ['$scope', 'PotsLoaderService', function($scope, PotsLoaderService) {
  $scope.pots = [];
  $scope.offset = 0;
  var busy = false;

  var onComplete = function(data) {
    $scope.pots = $scope.pots.concat(data);
    busy = false;
  }

  $scope.loadData = function() {
    if (!busy) {
      busy = true;
      PotsLoaderService.load($scope.offset).then(onComplete, function() {
        $scope.error = "Could not load data"
      });
      $scope.offset++;
    }
  }

  $scope.$on('load-more-data-event', $scope.loadData);

  $scope.loadData();
}]);

/**
	La directive qui va s'occuper de mettre un background le temps que l'image du pot se charge
	Recommendation: utilisation de l'API Image fournie par javascript...