Dopo aver messo le basi del funzionamento interno dell'applicazione nella gestione della lista di attività, possiamo creare l'interfaccia grafica e connetterla con il codice che abbiamo prodotto finora.
Innanzitutto definiamo il markup come nel seguente esempio:
<!DOCTYPE html>
<html>
<head>
<title>To Do</title>
</head>
<body>
<div>
<h1>TODO List</h1>
<div>
<button id="btnAggiungi">Aggiungi</button>
</div>
<div id="divTaskName">
<input type="text" id="txtTaskname">
<button id="btnOK">OK</button>
</div>
<div>
<ul id="ulTodoList">
</ul>
</div>
</div>
<script src="todo.js"></script>
</body>
</html>Nel file todo.js andremo ad inserire la logica di funzionamento della nostra applicazione.
In particolare, avremo l'inizializzazione dell'interfaccia grafica e della gestione del pulsante btnAggiungi:
var btnAggiungi = document.getElementById("btnAggiungi");
var divTaskName = document.getElementById("divTaskName");
divTaskName.style.visibility = "hidden";
btnAggiungi.addEventListener("click", mostraInput);
function mostraInput() {
divTaskName.style.visibility = "visible";
}
Al clic sul pulsante btnAggiungi, quindi, viene mostrata la casella per specificare la nuova attività ed il pulsante per aggiungere effettivamente l'attività allo stato corrente:
var btnOK = document.getElementById("btnOK");
btnOK.addEventListener("click", aggiungi);
function aggiungi() {
let taskName = txtTaskname.value;
if (taskName) {
store.dispatch(addAction(taskName));
}
txtTaskname.value = "";
divTaskName.style.visibility = "hidden";
}
Notiamo come per aggiungere la nuova attività abbiamo inviato l'opportuna azione allo Store tramite dispatch().
Per visualizzare l'elenco delle attività attualmente presenti nello stato dell'applicazione dobbiamo effettuare la registrazione di un listener
sullo Store. L'istruzione fa sì che in corrispondenza dei cambiamenti di stato venga invocata la funzione showTasks()
con lo stato corrente come parametro:
store.subscribe(() => showTasks(store.getState()));
La funzione showTasks() genera gli elementi del DOM che mostrano l'elenco delle attività presenti nello stato corrente:
function showTasks(state) {
var ulTodoList = document.getElementById("ulTodoList");
ulTodoList.innerHTML = "";
state.todoList.forEach((task) => {
let liNode = document.createElement("li");
liNode.setAttribute("id", task.id);
let textNode = document.createTextNode(task.task);
liNode.appendChild(textNode);
let btnNode = document.createElement("button");
btnNode.innerText = "Rimuovi";
btnNode.addEventListener("click", () => store.dispatch(removeAction(task.id));
liNode.appendChild(btnNode);
ulTodoList.appendChild(liNode)
});
}Evidenziamo il codice eseguito al clic sul pulsante di rimozione della singola attività:
btnNode.addEventListener("click", () => store.dispatch(removeAction(task.id));
Come possiamo vedere, anche in questo caso ci limitiamo ad inviare allo Store l'azione di rimozione dell'attività identificata tramite l'id.