MVC cards

Signed-off-by: fpumir <[email protected]>

board/js/UI.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var UI={
+
+	render:function(card){
+		var div=document.createElement('div');
+		div.classList.add('card');
+		var d=new Date(card.date);
+		var date=d.getFullYear()+'/'+('0'+(d.getMonth()+1)).slice(-2)+'/'+('0'+d.getDate()).slice(-2);
+		var dateSpan=document.createElement('span');
+		dateSpan.classList.add('date');
+		var dateText=document.createTextNode(date);
+		dateSpan.appendChild(dateText);
+		var textSpan=document.createElement('span');
+		textSpan.classList.add('text');
+		var text=document.createTextNode(card.name);
+		textSpan.appendChild(text);
+		var deleteButton=document.createElement('a');
+		deleteButton.classList.add('deleteButton');
+		deleteButton.setAttribute('href','');
+		deleteButton.setAttribute('data-key',card.date);
+		var deleteText=document.createTextNode('[delete]');
+		deleteButton.appendChild(deleteText);
+		div.appendChild(dateSpan);
+		div.appendChild(textSpan);
+		div.appendChild(deleteButton);
+		var board=document.getElementById('board');
+		board.appendChild(div);
+		deleteButton.addEventListener('click',deleteCard,false);
+	},
+
+	delete:function(elmt){
+		elmt.parentNode.remove();
+	}
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+

board/js/cards - copie.js

@@ -0,0 +1,65 @@
+"use strict";
+
+
+var card={};
+var addCard=document.getElementById('addCard');
+addCard.addEventListener('submit',getCard,false);
+
+function getCard (e) {
+	e.preventDefault();
+  var name=document.querySelector("input[name='name']").value;
+  var date=document.querySelector("input[name='date']").value;
+  if(!name){return;}
+	var cardDate=!date?new Date().getTime():new Date(date).getTime();
+	/*if(!date){
+		var cardDate=new Date().getTime();
+	}
+	else{
+		var cardDate=new Date(date).getTime();
+	}*/
+	card.name=name;
+	card.date=cardDate;
+	localStorage.setItem(card.date,JSON.stringify(card));
+	// création des nodes dans le DOM
+	var div=document.createElement('div');
+	div.classList.add('card');
+	var d=new Date(card.date);
+	var date=d.getFullYear()+'/'+('0'+(d.getMonth()+1)).slice(-2)+'/'+('0'+d.getDate()).slice(-2);
+	var dateSpan=document.createElement('span');
+	dateSpan.classList.add('date');
+	var dateText=document.createTextNode(date);
+	dateSpan.appendChild(dateText);
+	var textSpan=document.createElement('span');
+	textSpan.classList.add('text');
+	var text=document.createTextNode(card.name);
+	textSpan.appendChild(text);
+	var deleteButton=document.createElement('a');
+	deleteButton.classList.add('deleteButton');
+	deleteButton.setAttribute('href','');
+	deleteButton.setAttribute('data-key',card.date);
+	var deleteText=document.createTextNode('[delete]');
+	deleteButton.appendChild(deleteText);
+	div.appendChild(dateSpan);
+	div.appendChild(textSpan);
+	div.appendChild(deleteButton);
+	var board=document.getElementById('board');
+	board.appendChild(div);
+	deleteButton.addEventListener('click',deleteCard,false);
+}
+
+function deleteCard (e) {
+	e.preventDefault();
+	var key=this.getAttribute('data-key');
+	if(!key){return;}
+	localStorage.removeItem(key);
+	this.parentNode.remove();
+}
+
+
+
+
+
+
+
+
+

board/js/cards.js

@@ -1,5 +1,6 @@
 "use strict";
 
+
 var card={};
 var addCard=document.getElementById('addCard');
 addCard.addEventListener('submit',getCard,false);
@@ -10,37 +11,23 @@ function getCard (e) {
   var date=document.querySelector("input[name='date']").value;
   if(!name){return;}
 	var cardDate=!date?new Date().getTime():new Date(date).getTime();
-	/*if(!date){
-		var cardDate=new Date().getTime();
-	}
-	else{
-		var cardDate=new Date(date).getTime();
-	}*/
 	card.name=name;
 	card.date=cardDate;
-	localStorage.setItem(card.date,JSON.stringify(card));
-	var div=document.createElement('div');
-	div.classList.add('card');
-	var d=new Date(card.date);
-	var date=d.getFullYear()+'/'+('0'+(d.getMonth()+1)).slice(-2)+'/'+('0'+d.getDate()).slice(-2);
-	var dateSpan=document.createElement('span');
-	dateSpan.classList.add('date');
-	var dateText=document.createTextNode(date);
-	dateSpan.appendChild(dateText);
-	var textSpan=document.createElement('span');
-	textSpan.classList.add('text');
-	var text=document.createTextNode(card.name);
-	textSpan.appendChild(text);
-	var deleteButton=document.createElement('a');
-	deleteButton.classList.add('deleteButton');
-	deleteButton.setAttribute('href','');
-	var deleteText=document.createTextNode('[delete]');
-	deleteButton.appendChild(deleteText);
-	div.appendChild(dateSpan);
-	div.appendChild(textSpan);
-	div.appendChild(deleteButton);
-	var board=document.getElementById('board');
-	board.appendChild(div);
+	model.add(card,function(){
+		console.log('item recorded');
+		UI.render(card);
+	});
+}
+
+function deleteCard (e) {
+	e.preventDefault();
+	var self=this;
+	var key=self.getAttribute('data-key');
+	if(!key){return;}
+	model.delete(key,function(){
+		UI.delete(self);
+	});
+
 }
 
 
@@ -51,3 +38,4 @@ function getCard (e) {
 
 
 
+

board/js/model.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var model={
+
+	add : function(card,callback){
+		localStorage.setItem(card.date,JSON.stringify(card));
+		var key=localStorage.getItem(card.date);
+		if(key){  
+			callback.call(this);
+		}
+	},
+	delete : function(key,callback){
+		localStorage.removeItem(key);
+		if(!localStorage.getItem(key)){
+			callback.call(this);
+		}
+	}
+
+
+}
+
+
+
+
+
+
+
+
+