TP01, TP02 & TP03EX01

TP02/EX02/js/app.js

@@ -0,0 +1,6 @@
+import Controller from './controller.js'
+import Model from './model.js'
+import View from './view.js'
+
+
+const app = new Controller(new Model(),new View())

TP02/EX02/js/controller.js

@@ -0,0 +1,54 @@
+export default class Controller {
+	constructor(model, view) {
+		this.model = model
+		this.view = view
+		this.filter = "all"
+		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))
+
+		/** Routage **/
+		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)  {
+		let todo = 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()
+	}
+}
+

TP02/EX02/js/model.js

@@ -0,0 +1,71 @@
+const todos = [ 
+	{ 
+		id : 1, 
+		text : "apprendre le javascript",
+		done : false
+
+	},
+	{ 
+		id : 2, 
+		text : "Faire des maths",
+		done : false
+
+	}]
+
+export default class Model {
+	constructor() {
+		//this.todos = JSON.parse(localStorage.getItem('todos')) || []
+		this.todos = JSON.parse(localStorage.getItem('todos')) || 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)
+		return todo 
+	}
+
+	edit(id, updatedText) {
+	let todo = this.todos.find(t => t.id === id)
+	todo.text = 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) {
+		let todo = this.todos.find(t => t.id === id)
+		todo.done = !todo.done
+		//this.todos = this.todos.map(todo =>
+		//	todo.id === id ? { id: todo.id, text: todo.text, done: !todo.done } : todo
+		//)
+		this._commit(this.todos)
+	}
+}
+

TP02/EX02/js/view.js

@@ -0,0 +1,115 @@
+export default class View {
+	constructor() {
+		this.form   = document.querySelector("#add_form")
+		this.input  = document.querySelector("#input_todo")
+		this.list   = document.querySelector("#todos_list")
+		this.tabs   = document.querySelector("#todos_filter")
+		this.loader = document.querySelector("#loader")
+	}
+
+	_getTodo() {
+		return this.input.value
+	}
+
+	_resetInput() {
+		this.input.value = ''
+	}
+
+	_getNewTodoElement(todo){
+		let div = document.createElement("div")
+		div.classList.add("box","is-flex","is-align-items-center","m-2")
+		div.dataset.id = todo.id
+
+		let input = document.createElement("input")
+		input.type = "checkbox"
+		input.classList.add("mr-3")
+
+		let span = document.createElement("p")
+		span.classList.add("mb-0","is-size-3","mr-auto")
+		span.textContent = todo.text
+		span.setAttribute("contenteditable",true)
+
+
+		let button = document.createElement("button")
+		button.classList.add("delete","is-large")
+
+
+		if (todo.done){
+			span.classList.add("strike")
+			input.checked = true
+		}
+
+		div.append(input,span,button)
+
+		return div
+
+	}
+
+	setLoader(){
+		this.loader.classList.add("is-loading")
+	}
+	unsetLoader(){
+		this.loader.classList.remove("is-loading")
+	}
+
+	setFilterTabs(filter){
+		let li = this.tabs.querySelectorAll("li")
+		li.forEach( tab => {
+			tab.classList.remove("is-active")
+		})
+		let active = this.tabs.querySelector(`#${filter}`)
+		active.parentNode.classList.add("is-active")
+	}
+
+	renderTodoList(todos) {
+		let list = new DocumentFragment()
+		for (let todo of todos){
+			list.appendChild(this._getNewTodoElement(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
+		this.list.addEventListener("click", (e) => {
+			let selection = e.target;
+			if (selection.tagName === "BUTTON"){
+				let id = selection.parentNode.dataset.id;
+				handler(id);
+			}
+		});
+	}
+
+	bindEditTodo(handler) {
+		this.list.addEventListener("keydown", (e) => {
+			let selection = e.target;
+			if (selection.tagName === "P" && e.key === "Enter"){
+				let id = selection.parentNode.dataset.id;
+				let texte = selection.textContent;
+				handler(id, texte);
+			}
+		});
+	}
+
+	bindToggleTodo(handler) {
+		this.list.addEventListener("change", (e) => {
+			let selection = e.target;
+			if (selection.tagName === "INPUT"){
+				let id = selection.parentNode.dataset.id;
+				handler(id);
+			}
+		});
+	}
+}