pebie · pebie · Mar 22, 2015 · Mar 22, 2015 · Mar 22, 2015 · Mar 22, 2015
diff --git a/README.md b/README.md
@@ -1,6 +1,5 @@
 # Angular formation for beginners 
 
-
 - 1.Introduction
 - 2.Initialisation
 - 3.Les expressions

diff --git a/src/images/america.png b/src/images/america.png
diff --git a/src/images/giant.png b/src/images/giant.png
diff --git a/src/images/hulk.png b/src/images/hulk.png
diff --git a/src/images/iron.png b/src/images/iron.png
diff --git a/src/images/thor.png b/src/images/thor.png
diff --git a/src/images/veuve.png b/src/images/veuve.png
diff --git a/src/index.html b/src/index.html
@@ -1,10 +1,65 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" ng-app="avengersApp" ng-controller="RootCtrl">
 <head>
   <meta charset="utf-8">
-  <title>AngularJs Formation</title>
+  <title>{{title}}</title>
+
+  <link rel="stylesheet" type="text/css" href="styles/app.css">
+
 </head>
 <body>
- Hello HTML
+
+<header ng-controller="HeaderCtrl">
+    <h1>{{model.title | capitalize}}</h1>
+
+    <h2>{{getTitle()}} : {{currentDate | date:'fullDate'}}</h2>
+</header>
+
+<section ng-controller="HeroesCtrl">
+
+    <div class="filter">
+        Filtrer par:
+        <select ng-model="orderProp">
+            <option value="name">Ordre Alphabétique</option>
+            <option value="age">Age</option>
+            <option value="status">Status</option>
+        </select>
+        <hr/>
+        <div ng-if="selectedHero">
+            Changer le status de {{selectedHero.name}} :
+            <select ng-model="selectedHero.status">
+                <option value="0">Disponible</option>
+                <option value="1">Occupé</option>
+                <option value="2">Indisponible</option>
+            </select>
+        <hr/>
+        </div>
+    </div>
+
+    <ul class="heroes-list">
+        <li ng-repeat="hero in heroes | orderBy:orderProp" class="ng-class-even:'even';ng-class-odd:'odd'"
+            ng-click="click(hero)"
+            ng-class="{isSelected:hero.name==selectedHero.name}"
+            class="hero-block">
+            <span class="hero-name">{{hero.name}}</span>
+            <span>{{hero.description}}</span>
+            <span>Age : {{hero.age}}</span>
+            <img ng-src="{{hero.image}}">
+
+            <div status-info status="hero.status"></div>
+        </li>
+    </ul>
+</section>
+
+<script src="vendor/angular.js"></script>
+<script src="vendor/angular-route.js"></script>
+<script src="vendor/moment.js"></script>
+
+<script src="scripts/app.js"></script>
+<script src="scripts/filter/capitalize.js"></script>
+<script src="scripts/controller/root.js"></script>
+<script src="scripts/controller/heroes.js"></script>
+<script src="scripts/controller/header.js"></script>
+<script src="scripts/directives/statusInfo.js"></script>
 </body>
 </html>
diff --git a/src/mocks/heroes.json b/src/mocks/heroes.json
@@ -0,0 +1,50 @@
+[
+  {
+    "name": "Captain America",
+    "description": "Sénile et grabataire",
+    "status": "0",
+    "lastActivity": "30-03-1999",
+    "image": "/images/america.png",
+    "age": 90
+  },
+  {
+    "name": "Iron Man",
+    "description": "Riche et célèbre",
+    "status": "1",
+    "lastActivity": "31-03-2015",
+    "image": "/images/iron.png",
+    "age": 35
+  },
+  {
+    "name": "Giant Man",
+    "description": "Complètement perché",
+    "status": "2",
+    "lastActivity": "24-09-2013",
+    "image": "/images/giant.png",
+    "age": 40
+  },
+  {
+    "name": "Hulk",
+    "description": "Géant vert, vendeur de maïs",
+    "status": "0",
+    "lastActivity": "03-10-2014",
+    "image": "/images/hulk.png",
+    "age": 39
+  },
+  {
+    "name": "La veuve noire",
+    "description": "Gorgeous",
+    "status": "1",
+    "lastActivity": "10-02-2015",
+    "image": "/images/veuve.png",
+    "age": 24
+  },
+  {
+    "name": "Thor",
+    "description": "Viking body buildé",
+    "status": "2",
+    "lastActivity": "07-06-2014",
+    "image": "/images/thor.png",
+    "age": 46
+  }
+]
diff --git a/src/scripts/app.js b/src/scripts/app.js
@@ -0,0 +1,9 @@
+'use strict';
+
+var app = angular.module("avengersApp", ['ngRoute']);
+
+//app.config()
+//app.controller()
+//app.filter() etc...
+
+
diff --git a/src/scripts/controller/header.js b/src/scripts/controller/header.js
@@ -0,0 +1,13 @@
+angular.module("avengersApp").controller("HeaderCtrl", function ($scope, $filter) {
+
+    $scope.currentDate = new Date().getTime();
+
+    $scope.model = {
+        title: "hello avengers !"
+    };
+
+    $scope.getTitle = function () {
+        return $filter('capitalize')("my first Application");
+    };
+
+});
diff --git a/src/scripts/controller/heroes.js b/src/scripts/controller/heroes.js
@@ -0,0 +1,60 @@
+angular.module("avengersApp").controller("HeroesCtrl", function ($scope) {
+    $scope.orderProp = "status";
+    $scope.heroes = [
+        {
+            name: "Captain America",
+            description: "Sénile et grabataire",
+            status:"0",
+            lastActivity:'30-03-1999',
+            image:"/images/america.png",
+            age:90
+        },
+        {
+            name: "Iron Man",
+            description: "Riche et célèbre",
+            status:"1",
+            lastActivity:'31-03-2015',
+            image:"/images/iron.png",
+            age:35
+        },
+        {
+            name: "Giant Man",
+            description: "Complètement perché",
+            status:"2",
+            lastActivity:'24-09-2013',
+            image:"/images/giant.png",
+            age:40
+        },
+        {
+            name: "Hulk",
+            description: "Géant vert, vendeur de maïs",
+            status:"0",
+            lastActivity:'03-10-2014',
+            image:"/images/hulk.png",
+            age:39
+        },
+        {
+            name: "La veuve noire",
+            description: "Gorgeous",
+            status:"1",
+            lastActivity:'10-02-2015',
+            image:"/images/veuve.png",
+            age:24
+        },
+        {
+            name: "Thor",
+            description: "Viking body buildé",
+            status:"2",
+            lastActivity:'07-06-2014',
+            image:"/images/thor.png",
+            age:46
+        }
+    ];
+
+
+    $scope.click = function(hero){
+
+        $scope.selectedHero = hero;
+    }
+
+});
diff --git a/src/scripts/controller/root.js b/src/scripts/controller/root.js
@@ -0,0 +1,5 @@
+angular.module("avengersApp").controller("RootCtrl", function ($scope, $filter) {
+
+    $scope.title = "AngularJs Formation";
+
+});
diff --git a/src/scripts/directives/statusInfo.html b/src/scripts/directives/statusInfo.html
@@ -0,0 +1,5 @@
+<div ng-switch on="status" class="status">
+    <span ng-switch-when="0" class="available">Disponible <span>{{date}}</span> </span>
+    <span ng-switch-when="1" class="busy">Occupé <span>{{date}}</span></span>
+    <span ng-switch-when="2" class="unavailable">Blessé <span>{{date}}</span></span>
+</div>
diff --git a/src/scripts/directives/statusInfo.js b/src/scripts/directives/statusInfo.js
@@ -0,0 +1,31 @@
+/**
+ * Created by Pebie on 18/06/15.
+ */
+angular.module('avengersApp').directive('status', function($interval,dateFilter){
+    return {
+        templateUrl:'/scripts/directives/statusInfo.html',
+        restrict:'A',
+        scope:{
+            status:'='
+        },
+        link:link
+    };
+
+    function link(scope, element){
+        var timeoutId;
+        updateTime();
+        function updateTime(){
+            var date = dateFilter(new Date(),'h:mm:ss');
+            scope.date = date;
+        }
+
+        element.on('$destroy', function(){
+            $interval.cancel(timeoutId);
+        })
+
+        timeoutId = $interval(function(){
+            updateTime();
+        },1000);
+    }
+
+});
diff --git a/src/scripts/filter/capitalize.js b/src/scripts/filter/capitalize.js
@@ -0,0 +1,5 @@
+angular.module("avengersApp").filter("capitalize", function () {
+    return function (input) {
+        return input.charAt(0).toUpperCase() + input.slice(1);
+    }
+});
diff --git a/src/styles/app.css b/src/styles/app.css
@@ -0,0 +1,78 @@
+body {
+    margin: 0;
+}
+
+header {
+    background: #000;
+    margin: 0;
+    color: #FFF;
+    padding: 10px 40px;
+}
+
+h4 {
+    margin: 20px 0px 0px 0px;
+}
+
+ul {
+    margin-right: 40px;
+}
+
+li {
+    padding: 5px 20px;
+    position: relative;
+    height: 65px;
+    border-bottom: solid 1px #000;
+    list-style: none;
+}
+
+li img {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+li.odd {
+    background: #f2f2f2;
+}
+
+li .status {
+    position: absolute;
+    top: 50%;
+    right: 90px;
+    transform: translateY(-50%);
+}
+
+li .available {
+    color: #57c300;
+}
+
+li .unavailable {
+    color: #ff0000;
+}
+
+li .busy {
+    color: #ff941e;
+}
+
+li.isSelected {
+    color: #8b0f0e;
+}
+
+.filter {
+    margin: 20px 0px 0px 40px;
+}
+
+.heroes-list span {
+    display: block;
+}
+
+.hero-name {
+    font-weight: bold;
+}
+
+.hero{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+}