tp2mvc

2026-02-02 13:56:42 +01:00
parent 9b8aed62a7
commit 186b3839f0
8 changed files with 478 additions and 0 deletions
--- a/R4.01_R4.A.10/td_tp/tp2mvc/src/css/style.css
+++ b/R4.01_R4.A.10/td_tp/tp2mvc/src/css/style.css
@@ -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;
+}
+
--- a/R4.01_R4.A.10/td_tp/tp2mvc/src/index.html
+++ b/R4.01_R4.A.10/td_tp/tp2mvc/src/index.html
@@ -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>
--- a/R4.01_R4.A.10/td_tp/tp2mvc/src/js/controller.js
+++ b/R4.01_R4.A.10/td_tp/tp2mvc/src/js/controller.js
@@ -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)
+
--- a/R4.01_R4.A.10/td_tp/tp2mvc/src/js/model.js
+++ b/R4.01_R4.A.10/td_tp/tp2mvc/src/js/model.js
@@ -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)
+	}
+}
+
--- a/R4.01_R4.A.10/td_tp/tp2mvc/src/js/view.js
+++ b/R4.01_R4.A.10/td_tp/tp2mvc/src/js/view.js
@@ -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
+	}
+}