TP01, TP02 & TP03EX01
This commit is contained in:
32
TP02/EX02/css/style.css
Normal file
32
TP02/EX02/css/style.css
Normal file
@@ -0,0 +1,32 @@
|
||||
:focus-visible {outline:none;}
|
||||
|
||||
.strike {
|
||||
text-decoration-line : line-through;
|
||||
}
|
||||
|
||||
#loader.is-loading {
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
overflow: show;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#loader.is-loading:after {
|
||||
animation: spinAround 500ms infinite linear;
|
||||
border: 2px solid hsl(0deg, 0%, 86%);
|
||||
border-radius: 9999px;
|
||||
border-right-color: transparent;
|
||||
border-top-color: transparent;
|
||||
content: "";
|
||||
display: block;
|
||||
position: relative;
|
||||
top: calc(50% - 5em);
|
||||
left: calc(50% - 5em);
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
border-width: 0.25em;
|
||||
}
|
||||
48
TP02/EX02/index.html
Normal file
48
TP02/EX02/index.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!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/bulma@0.9.4/css/bulma.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>
|
||||
<div class="container content is-max-desktop p-4">
|
||||
|
||||
<div id="loader"></div>
|
||||
<div class="has-text-centered">
|
||||
</div>
|
||||
|
||||
<!-- formulaire pour la saisie -->
|
||||
|
||||
<form id="add_form" class="block">
|
||||
<p class="control has-icons-left is-expanded">
|
||||
<input autocomplete="off" id="input_todo" class="input is-large is-expanded" type="text" placeholder="Enter Todo">
|
||||
<span class="icon is-left">
|
||||
<i class="fas fa-plus" aria-hidden="true"></i>
|
||||
</span>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<!-- filtrage de l'affichage -->
|
||||
|
||||
<div id="todos_filter" class="tabs is-small is-centered">
|
||||
<ul>
|
||||
<li class="is-active"><a href="#/" id="all">All</a></li>
|
||||
<li><a href="#/active" id="active">Active</a></li>
|
||||
<li><a href="#/done" id="done">Done</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Affichage des todos -->
|
||||
<section id="todos_list">
|
||||
</section>
|
||||
|
||||
</body>
|
||||
<script type="module" src="./js/app.js"></script>
|
||||
|
||||
</html>
|
||||
6
TP02/EX02/js/app.js
Normal file
6
TP02/EX02/js/app.js
Normal file
@@ -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())
|
||||
54
TP02/EX02/js/controller.js
Normal file
54
TP02/EX02/js/controller.js
Normal file
@@ -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()
|
||||
}
|
||||
}
|
||||
|
||||
71
TP02/EX02/js/model.js
Normal file
71
TP02/EX02/js/model.js
Normal file
@@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
115
TP02/EX02/js/view.js
Normal file
115
TP02/EX02/js/view.js
Normal file
@@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user