lijst: Proper delete button

2 files changed, 29 insertions, 19 deletions

diff --git a/modules/lijst/lijst.html b/modules/lijst/lijst.html
index 0c1a3dd..b849720 100644
--- a/modules/lijst/lijst.html
+++ b/modules/lijst/lijst.html
@@ -11,20 +11,28 @@ function addItem() {
 	xhr.open("POST", location.href + "/add");
 	xhr.responseType = "text";
 	xhr.onreadystatechange = function() {
-		if (xhr.readyState == 4 && xhr.status == 200) {
-			location.href = location.href;
+		if (xhr.readyState == 4) {
+			if (xhr.status == 200) {
+				location.href = location.href;
+			} else {
+				alert(xhr.responseText);
+			}
 		}
 	};
 	xhr.send(text);
 }
 
-function removeItem() {
+function removeItem(id) {
 	var xhr = new XMLHttpRequest();
-	xhr.open("POST", location.href + "/remove");
+	xhr.open("POST", location.href + "/remove/" + id);
 	xhr.responseType = "text";
 	xhr.onreadystatechange = function() {
-		if (xhr.readyState == 4 && xhr.status == 200) {
-			location.href = location.href;
+		if (xhr.readyState == 4) {
+			if (xhr.status == 200) {
+				location.href = location.href;
+			} else {
+				alert(xhr.responseText);
+			}
 		}
 	};
 	xhr.send();
@@ -40,7 +48,5 @@ function removeItem() {
 </ol>
 <input type="text" id="text" placeholder="New item text">
 <input type="button" onclick="addItem()" value="Add item"><br>
-<br>
-<input type="button" onclick="removeItem()" value="Remove top item">
 </body>
 </html>
diff --git a/modules/lijst/lijst.js b/modules/lijst/lijst.js
index eccbba7..028e6ce 100644
--- a/modules/lijst/lijst.js
+++ b/modules/lijst/lijst.js
@@ -11,8 +11,8 @@ persist=persist.create({
 persist.initSync();
 
 var lijst=persist.getItemSync("lijst");
-if(!lijst){
-	lijst=[];
+if(!lijst||Array.isArray(lijst)){
+	lijst={lijst:[],nextid:0};
 	persist.setItemSync("lijst",lijst);
 }
 
@@ -21,8 +21,9 @@ var moddir;
 function render(res){
 	var html=fs.readFileSync(moddir+"/lijst.html")+"";
 	var s="";
-	for(var i=0;i<lijst.length;i++){
-		s+="<li>"+lijst[i].replace(/</g,"&lt;")+"</li>\n";
+	for(var i=0;i<lijst.lijst.length;i++){
+		var text=lijst.lijst[i].text.replace(/</g,"&lt;");
+		s+="<li>"+text+" <a href=\"javascript:removeItem("+lijst.lijst[i].id+")\">x</a></li>\n";
 	}
 	html=html.replace("<!--[[LIJST_ITEMS]]-->",s);
 	res.send(html);
@@ -34,16 +35,19 @@ module.exports=function(app,io,_moddir){
 		render(res);
 	});
 	app.post("/lijst/add",function(req,res){
-		lijst.push(req.body.trim());
+		lijst.lijst.push({text:req.body.trim(),id:lijst.nextid++});
 		persist.setItemSync("lijst",lijst);
 		res.status(200).end();
 	});
-	app.post("/lijst/remove",function(req,res){
-		if(lijst.length>0){
-			console.log("Removed item: "+lijst[0]);
-			lijst.shift();
+	app.post("/lijst/remove/:id",function(req,res){
+		var idx=lijst.lijst.findIndex(function(o){return o.id==+req.params.id;});
+		if(idx!=-1){
+			console.log("Removed item: "+lijst.lijst[idx].text);
+			lijst.lijst.splice(idx,1);
+			persist.setItemSync("lijst",lijst);
+			res.status(200).end();
+		} else {
+			res.status(404).end("ID not found");
 		}
-		persist.setItemSync("lijst",lijst);
-		res.status(200).end();
 	});
 };