ajout

2022-04-12 12:34:07 +02:00
parent d41feeffe8
commit e3c07b83d4
11 changed files with 333 additions and 0 deletions
--- a/WIM4.1/tp/tp2/ex2/contacts.html
+++ b/WIM4.1/tp/tp2/ex2/contacts.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<title>tp dom</title>
+		<link rel="stylesheet" href="http://www.iut-fbleau.fr/css/tacit.css">
+
+		<script src="./js/contacts.js"></script>
+		<style>
+		#contacts {
+	/*				width:100%;*/
+		}
+		#contacts tbody{
+			cursor:pointer;
+		}
+		#contacts td{
+			/*	width:33%;*/
+		}
+		#contacts tbody tr:hover{
+			background-color:#eeeeee;
+		}
+		</style>
+		<script>
+		</script>
+	</head>
+	<body container>
+
+		<h1>TP DOM</h1>
+		<div grid>
+			<div column="8">
+				<h4>Contacts</h4>
+				<table id="contacts">
+					<thead>
+						<tr>
+							<th>Nom</th>
+							<th>Prénom</th>
+							<th>Email</th>
+						</tr>
+					</thead>
+					<tbody>
+					</tbody>
+				</table>
+				<button type="submit" id="sauver">Sauver</button>
+			</div>
+			<div column="4">
+				<h4>Saisie</h4>
+				<form id="form" method="POST">
+					<fieldset>
+						<div>
+							<label  for="prenom">Prénom</label><br>
+							<input id="prenom" name="prenom" placeholder="Prénom"  type="text" required>
+						</div>
+						<div>
+							<!-- Text input-->
+							<label  for="nom">Nom</label><br>
+							<input id="nom" name="nom" placeholder="Nom"  type="text" required>
+						</div>
+						<div>
+							<!-- Text input-->
+							<label  for="email">Email</label><br>
+							<input id="email" name="email" placeholder="Email"  type="email" required>
+						</div>
+						<!-- Button -->
+						<div>
+							<button type="submit" id="ajouter" >Ajouter</button>
+						</div>
+					</fieldset>
+				</form>
+				<div>Cliquez sur une ligne pour la supprimer.</div>
+			</div>
+		</div>
+	</body>
+</html>
--- a/WIM4.1/tp/tp2/ex2/js/contacts.js
+++ b/WIM4.1/tp/tp2/ex2/js/contacts.js
@@ -0,0 +1,77 @@
+window.addEventListener(
+	"load",
+	()=>{
+		let Model = {
+			getContacts(){ 
+				return JSON.parse(localStorage.getItem('ct')) || []
+			},
+			saveContacts(arr){
+				return localStorage.setItem('ct',JSON.stringify(arr))
+			}
+		}
+
+		let View ={
+
+			tableContact : document.querySelector("#contacts"),
+			formContact  : document.getElementById("form"),
+			saveButton : document.getElementById("sauver"),
+
+			getContactForm(){
+				let data = new FormData(this.formContact)
+				return {
+					"nom" : data.get('nom'),
+					"prenom" : data.get('prenom'),
+					"email" : data.get("email")
+				}
+			},
+			updateTable(cts){
+				let fg = document.createElement("tbody")
+				cts.forEach((ct)=>{	
+					let tr = document.createElement("tr")
+					for (p in ct){
+						let td = document.createElement("td")
+						let txt = document.createTextNode(ct[p])
+						td.appendChild(txt)
+						tr.appendChild(td)
+					}
+					fg.appendChild(tr)
+				})
+				this.tableContact.replaceChild(fg,this.tableContact.querySelector('tbody'))
+			},
+			suscribeSubmitForm(f){
+			this.formContact.addEventListener("submit",(ev)=>{
+				ev.preventDefault()
+				f(this.getContactForm())
+			})
+			},
+			suscribeSaveTable(f){
+				// TODO
+			},
+			suscribeClickTable(f){
+				// TODO	
+			}
+		}
+
+
+		let Controller  = {
+			cts : [], // les contacts
+			init(){
+				View.suscribeSubmitForm((ct)=>{
+					if (this.cts.find(x=>x.email == ct.email) !== undefined){
+					this.cts.push(ct)
+					View.updateTable(this.cts)
+					}
+				})
+
+				View.suscribeSaveTable(() => Model.saveContacts(this.cts))
+
+				View.suscribeClickTable( (ct)=> {
+					// TODO
+				})
+
+				this.cts = Model.getContacts()
+				View.updateTable(this.cts)
+			}
+		}
+		Controller.init()
+	})