tp2mvc

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)
+

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)
+	}
+}
+

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
+	}
+}