#### Ex3 : modele MVC
Le but est d'écrire une todolist en javascript, en respectant le pattern MVC. Il est important de mener à bout cet exercice, car il nous servira
de fil rouge notamment en ajoutant une api rest et ajax pour la communication avec le service.

<div align="center">
<img src="./img/todo.png">
</div>

Le contrôleur a accès à la vue et au modèle.

##### Le modèle

Cette "classe" (rien à compléter) utilise 
l'objet [localStorage](https://developer.mozilla.org/fr/docs/Web/API/Window/localStorage) 
pour sauvegarder la todolist.

Chaque todo est un objet json de la forme 

```js
{ id : 1 , text : "apprendre le js", done : false }
```

La liste des méthodes publiques de cette classe

```js
/** @brief return the todolist
 *  @param filter "all" or "active" or "done"
 *  @return  array of todos
 */
getTodos(filter)

/** @brief add (and save) a new todo with todoText
 *  @param todoText : text of the new todo
 */
add(todoText)

/** @brief delete a todo 
 *  @param id id of the todo 
 */
delete(id)

/** @brief update a todo 
 *  @param id id of the todo 
 */
edit(id,updatedText)

/** @brief toggle  a todo (done<->active)
 *  @param id id of the todo 
 *  @param updatedText  text of the todo
 */
toggle(id)
```

##### La vue
Cette "classe" permet au contrôleur de gérer la vue. 


Liste des méthodes publiques

```js
/** @brief change the active tab (all,active or done)
 *  @param filter the active tab (all, active or done)
 */
setFilterTabs(filter)

/** @brief update the todo list with todos
 *  @param todos array of todo
 */ 
renderTodoList(todos)
```

Le contrôleur peut s'abonner (notification de la vue au acontrôleur) 
aux événements suivants :

add/delete/edit/toggle   todo : avec `bind{Add|Delete|Edit|Toggle}Todo`

Ces méthodes d'abonnement prennent en paramètre une fonction du contrôleur qui est appelé par la vue pour lui notifier
une requête.

```js
/** @brief subscribe to add event 
 *  @param handler function(text)
 */
bindAddTodo(handler)

/** @brief suscribe to delete event 
 *  @param handler function(id) 
 */
bindDeleteTodo(handler)

/** @brief suscribe to edit event
 *  @param handler function(id,text)
 */ 
bindEditTodo(handler)

/** @brief suscribe to toggle event
 *  @param handler function(id)
 */ 
bindToggleTodo(handler)
```

##### Le contrôleur
C'est lui qui gére le routage. Il y a trois urls possibles `index.html/#/{all|active|done}` (listener sur l'évenement 
		dom `hashchange`.

Liste des méthodes 
```js
/** @brief get the todolist from the model
 *         and use the view to render 
 */ 
filterTodoList()

/** @brief binding function called by the view
 *         to add a new todo
 *  @param text text of the new todo
 */
addTodo(text)

/** @brief binding function called by the view
 *         to delete a todo
 *  @param id id of the todo
*/
deleteTodo(id)

/** @brief binding function to toggle the state
 *         of a todo
 *  @param id id of the todo
 */
toggleTodo(id)

/** @brief binding function to change the text
 *         of a todo
 *  @param id id of the todo
 *  @param changedText new text for the todo
*/
editTodo(id,changedText)
```

Par exemple, lorsque l'utilisateur ajoute une todo :

1. la vue est sensible à l'événement de soumission du formulaire,
2. la fonction reflexe récupére le texte saisie,
3. elle appelle la fonction avec laquelle le contrôleur s'est abonné, en lui passant le texte,
4. la fonction du contrôleur `addTodo` récupére le texte,
5. le contrôleur demande au modèle la création d'une nouvelle todo,
6. le contrôleur demande un rafraichissement de la vue.


#### Travail à faire
- Commpléter la méthode privée dans la vue `#createNewTodoElement` qui permet de créer un
  nouvel élément dom représentant une todo. Ce qui est attendu est de la forme
  ```html
  <li class="todo" data-id="1">
   <label>
    <input type="checkbox">
    <span>apprendre un peu de javascript</span>
   </label>
   <i class="fas fa-trash"></i>
  </li>
  ```
- Compléter la méthode `bindDeleteTodo` de la vue.
- Compléter la méthode `bindToggleTodo` de la vue.
- Compléter la méthode `bindEditTodo` de la vue.