2017-chu-kmgs4524

entry.js

@@ -1,15 +1,65 @@
 import $ from 'jquery';
 import getForm from "./lib/form.data.js";
 import insertData from "./lib/insertData.js";
+import deleteData from "./lib/deleteData.js";
+import updateData from "./lib/updateData.js";
+import getTodo from "./lib/todo.data.js";
+import submitUpdate from "./lib/submitUpdate.js";
+import cancel from "./lib/cancel.js";
 
 let form = $("form");
+let todo = $("ul.todo");	//Todo List
 
-form.on('submit', function (e) {
+
+form.on('submit', function (e) {	
+	//console.log('form.on: ', $(this));
 	e.preventDefault();
 	var value = getForm(e);
-	insertData(value);
-	alert(`Add item: ${value}`);
+	if(value === undefined){
+		alert("請輸入內容");
+	} else{
+		insertData(value);
+		alert(`Add item: ${value}`);
+		console.log("submit");
+	}
+});
+
+//監聽Delete button
+todo.on('click', ".btnDel",function(e) {	//e: EventObject
+	//$(this).parent().remove();
+	deleteData($(this));
+	console.log($(this));
 });
 
+//監聽Update button
+todo.on('click', '.btnUpd', function(e) {
+	updateData($(this));
+	console.log("onClick:", $(this));
+});
+
+//監聽按下Updata後出現的button Decide 
+todo.on('click', '.btnDeci', function(e) {
+	e.preventDefault();
+	console.log("onClick: ", $(this));
+
+	var value = getTodo(e);
+	console.log('getTodo: ', value);
+	if(value === undefined){
+		alert("請輸入");
+	} else{
+		submitUpdate(e, value);
+	}
+	//console.log($(this));
+
+
+});
+
+//監聽按下Updata後出現的Cancel button
+todo.on('click', '.btnCancel', function(e){
+	console.log("onClick: ", $(this));
+	cancel($(this));
+});
+
+
 
 

index.html

@@ -6,7 +6,7 @@
     	<h1>This is my todo</h1>
     	<form action="#">
     		<input type="text" name='item' value="hello">
-    		<input type="submit" value="submit">
+			<input type="submit" value="submit">
     	</form>
 
     	<h2>My todo list</h2>

lib/cancel.js

@@ -0,0 +1,7 @@
+var $ = require('jquery');
+
+module.exports = function(target, value){
+    console.log('cancel() receive target:', target, value);
+    // ($(target).parent())[0].innerHTML = `<li>${data}<button class="btnDel">Delete</button>
+	// <button class="btnUpd">Update</button></li>`;
+};

lib/deleteData.js

@@ -0,0 +1,8 @@
+var $ = require('jquery');
+
+module.exports = function(target){
+    //$(this).parent().remove();
+    target.parent().remove();
+	console.log("deleteData");
+    return true;
+};

lib/form.data.js

@@ -2,8 +2,9 @@ import $ from 'jquery';
 
 module.exports = function (e) {
 	var target = e.currentTarget;
+	console.log(`currentTarget:${target}`);
 	var inputNode = $(target).find('input[name=item]');
 	var inputValue = inputNode.val();
-	inputNode.val('').focus();
+	inputNode.val('').focus();	//?
 	return inputValue;
 };

lib/insertData.js

@@ -1,6 +1,7 @@
 var $ = require('jquery');
 
 module.exports = function (data) {
-	$("ul.todo").append(`<li>${data}</li>`);
+	$("ul.todo").append(`<li>${data}<button class="btnDel">Delete</button>
+	<button class="btnUpd">Update</button></li>`);
 	return true;
 }

lib/submitUpdate.js

@@ -0,0 +1,9 @@
+var $ = require('jquery');
+
+module.exports = function(e, value) {
+    var target = e.currentTarget;
+
+    //console.log("submitUpdate() receive target.parent, value:", $(target).parent()[0].innerHTML, value);
+    $(target).parent()[0].innerHTML = `${value}<button class="btnDel">Delete</button>
+    <button class="btnUpd">Update</button>`;
+};

lib/todo.data.js

@@ -0,0 +1,14 @@
+import $ from 'jquery';
+
+module.exports = function (e) {
+	var target = e.currentTarget;
+	console.log(`currentTarget:${target}`);	//currentTarget === this
+	var inputValue = $(target).parent().find('input').val();
+	//inputNode.val('').focus();
+	//console.log("inputValue:", inputValue);
+	return inputValue;
+	// var inputNode = $(target).find('input[name=item]');
+	// var inputValue = inputNode.val();
+	// inputNode.val('').focus();	//?
+	// return inputValue;
+};

lib/updateData.js

@@ -0,0 +1,16 @@
+var $ = require('jquery');
+
+module.exports = function(target){
+    // var text = target.parent().text();
+    // console.log(text);
+
+    // $(this).parent().html() = `Changed<button class="btnDel">Delete</button>
+	// <button class="btnUpd">Update</button>`;
+
+    (target.parent())[0].innerHTML = `<input type="text" name="item">
+    <button class="btnCancel">Cancel</button>
+	<button class="btnDeci">Decide</button>`;
+	// ($(this).parent())[0].innerHTML = `<input type="text"><button class="btnCncel">Cancel</button>
+    // <button class="btnSubmit">Submit</button>`;
+
+};