monnerat/web_2025
2
2
Fork 2
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

tp2mvc

Browse Source
This commit is contained in:
Denis Monnerat
2026-02-02 13:56:42 +01:00
parent 9b8aed62a7
commit 186b3839f0
8 changed files with 478 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
R4.01_R4.A.10/README.md
View File

@@ -3,3 +3,7 @@
#### Semaine 1
[Compléments de javascript](cours/jscomp.pdf) javascript, [tp1](./td_tp/tp1)
#### Semaine 2
[DOM](cours/dom.pdf), [tp2](./td_tp/tp2), [tpmvc](td_tp/tp2mvc)

163
R4.01_R4.A.10/td_tp/tp2mvc/README.md Normal file
View File

@@ -0,0 +1,163 @@
#### 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.

BIN
R4.01_R4.A.10/td_tp/tp2mvc/img/todo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

63
R4.01_R4.A.10/td_tp/tp2mvc/src/css/style.css Normal file
View File

@@ -0,0 +1,63 @@
:focus-visible {outline:none;}
.is-active {
color : #8EB901;
}
#add_form > div {
display : flex;
justify-content:space-between;
}
.todo {
display : flex;
align-items: center;
}
.todo checkbox,.todo i {
flex-grow : 0;
flex-shrink : 0;
flex-basis : auto;
}
.todo span {
flex-grow : 1;
flex-shrink : 1;
flex-basis : auto;
}
.todolist {
padding-left: 0;
}
.todolist li {
list-style: none;
padding: var(--pico-form-element-spacing-vertical) 0;
display: flex;
justify-content: space-between;
align-items: center;
}
#todos_filter {
display:flex;
justify-content : center;
}
#todos_filter a {
margin:1em;
}
.todolist i {
cursor: pointer;
}
.todolist li:not(:last-child) {
border-bottom: 1.5px solid var(--pico-form-element-border-color);
}
.todolist > li > label:has(input:checked) {
text-decoration: line-through;
}
footer {
text-align: center;
}

53
R4.01_R4.A.10/td_tp/tp2mvc/src/index.html Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Todo</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha512-q3eWabyZPc1XTCmF+8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC+FGSYxtk2oiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<h1>To Do List</h1>
</header>
<main>
<article>
<header>
<form id='add_form'>
<fieldset role="group">
<input id="input_todo" type="text" placeholder="Buy milk and eggs...">
<button><i class="fas fa-plus"></i></button>
</fieldset>
<div>
<span>
<a id="active" href="#/active"><i class="far fa-circle"></i></a>
<a id="done" href="#/done"><i class="fas fa-circle"></i></a>
<a id="all" href="#/all"><i class="fas fa-adjust"></i></a>
</span>
<small><span id="count">0</span>/50 characters</small>
</div>
</form>
</header>
<!-- Render todos -->
<ul id="todos_list" class="todolist"></ul>
</article>
</main>
</body>
<script src="js/model.js"></script>
<script src="js/view.js"></script>
<script src="js/controller.js"></script>
</html>

64
R4.01_R4.A.10/td_tp/tp2mvc/src/js/controller.js Normal file
View File

@@ -0,0 +1,64 @@
class Controller {
constructor(model, view) {
this.model = model;
this.view = view;
this.filter = "all";
/** Abonnements à la vue **/
this.view.bindAddTodo(this.addTodo.bind(this));
this.view.bindDeleteTodo(this.deleteTodo.bind(this));
this.view.bindToggleTodo(this.toggleTodo.bind(this));
this.view.bindEditTodo(this.editTodo.bind(this));
/** filtrages par url **/
this.routes = ['all','active','done'];
/** Routage **/
window.addEventListener("load",this.routeChanged.bind(this));
window.addEventListener("hashchange",this.routeChanged.bind(this));
}
routeChanged(){
let route = window.location.hash.replace(/^#\//,'');
this.filter = this.routes.find( r => r === route) || 'all';
this.filterTodoList();
}
filterTodoList () {
let todos = this.model.getTodos(this.filter)
this.view.renderTodoList(todos)
this.view.setFilterTabs(this.filter)
}
addTodo(text) {
this.model.add(text)
this.filterTodoList()
}
deleteTodo(id) {
this.model.delete(parseInt(id))
this.filterTodoList()
}
toggleTodo(id) {
this.model.toggle(parseInt(id))
this.filterTodoList()
}
editTodo(id, text) {
this.model.edit(parseInt(id),text)
this.filterTodoList()
}
}
const model = new Model()
const view = new View()
const app = new Controller(model, view)

48
R4.01_R4.A.10/td_tp/tp2mvc/src/js/model.js Normal file
View File

@@ -0,0 +1,48 @@
class Model {
constructor() {
this.todos = JSON.parse(localStorage.getItem('todos')) || []
}
#commit(todos) {
localStorage.setItem('todos', JSON.stringify(todos))
}
getTodos(filter){
if (filter === "active")
return this.todos.filter(todo => !todo.done)
if (filter === "done")
return this.todos.filter(todo => todo.done)
return this.todos
}
add(todoText) {
const todo = {
id: this.todos.length > 0 ? this.todos[this.todos.length - 1].id + 1 : 1,
text: todoText,
done : false,
}
this.todos.push(todo)
this.#commit(this.todos)
}
edit(id, updatedText) {
this.todos = this.todos.map(todo =>
todo.id === id ? { id: todo.id, text: updatedText, done: todo.done} : todo
)
this.#commit(this.todos)
}
delete(id) {
this.todos = this.todos.filter(todo => todo.id !== id)
this.#commit(this.todos)
}
toggle(id) {
this.todos = this.todos.map(todo =>
todo.id === id ? { id: todo.id, text: todo.text, done: !todo.done } : todo
)
this.#commit(this.todos)
}
}

83
R4.01_R4.A.10/td_tp/tp2mvc/src/js/view.js Normal file
View File

@@ -0,0 +1,83 @@
class View {
charLimit = 70;
constructor() {
this.form = document.querySelector("#add_form")
this.input = document.querySelector("#input_todo")
this.list = document.querySelector("#todos_list")
this.tabs = document.querySelectorAll("#add_form span a")
this.loader = document.querySelector("#loader")
this.count = document.querySelector("#count")
this.input.addEventListener("input", (e) => {
if (e.target.value.length >= this.charLimit) {
e.target.value = e.target.value.substring(0,this.charLimit);
}
count.textContent = e.target.value.length;
});
count.nextSibling.textContent = `/${this.charLimit} characters`
}
#getTodo() {
return this.input.value
}
#resetInput() {
this.input.value = ''
count.textContent = 0
}
#createNewTodoElement(todo){
let li = document.createElement("li")
// TODO
return li
}
setFilterTabs(filter){
this.tabs.forEach( tab => {
if (filter === tab.id)
tab.classList.add("is-active")
else
tab.classList.remove("is-active")
})
}
renderTodoList(todos) {
let list = new DocumentFragment()
for (let todo of todos){
list.appendChild(this.#createNewTodoElement(todo))
}
this.list.replaceChildren(list)
}
/** Abonnements événements **/
bindAddTodo(handler) {
this.form.addEventListener("submit", (e=>{
e.preventDefault()
let text = this.#getTodo()
handler(text)
this.#resetInput()
}))
}
bindDeleteTodo(handler) {
// TODO
}
bindEditTodo(handler) {
// TODO
}
bindToggleTodo(handler) {
// TODO
}
}