diff options
| author | tomsmeding <tom.smeding@gmail.com> | 2019-09-18 17:29:27 +0200 |
|---|---|---|
| committer | tomsmeding <tom.smeding@gmail.com> | 2019-09-18 17:31:22 +0200 |
| commit | c4c121cd5460da02db1563ad1118cd0db09ceb69 (patch) | |
| tree | 7e94902e538d03470282b9f34ff9bd3a8ace42b1 /modules/lijst | |
| parent | 2e2f642cf6144cbc84bff0094d34ab40de6a4b11 (diff) | |
lijst: Voting
Diffstat (limited to 'modules/lijst')
| -rw-r--r-- | modules/lijst/lijst.html | 48 | ||||
| -rw-r--r-- | modules/lijst/lijst.js | 42 |
2 files changed, 60 insertions, 30 deletions
diff --git a/modules/lijst/lijst.html b/modules/lijst/lijst.html index b849720..66c33a8 100644 --- a/modules/lijst/lijst.html +++ b/modules/lijst/lijst.html @@ -4,48 +4,52 @@ <meta charset="utf-8"> <title>Lijst</title> <script> -function addItem() { - var text = document.getElementById("text").value; - +function postReq(url, body) { var xhr = new XMLHttpRequest(); - xhr.open("POST", location.href + "/add"); + xhr.open("POST", location.href + url); xhr.responseType = "text"; xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { - location.href = location.href; + document.getElementById("tbody").innerHTML = xhr.responseText; } else { alert(xhr.responseText); } } }; - xhr.send(text); + xhr.send(body); +} + +function addItem() { + postReq("/add", document.getElementById("text").value); + document.getElementById("text").value = ""; } function removeItem(id) { - var xhr = new XMLHttpRequest(); - xhr.open("POST", location.href + "/remove/" + id); - xhr.responseType = "text"; - xhr.onreadystatechange = function() { - if (xhr.readyState == 4) { - if (xhr.status == 200) { - location.href = location.href; - } else { - alert(xhr.responseText); - } - } - }; - xhr.send(); + postReq("/remove/" + id); +} + +function vote(id, num) { + postReq("/vote/" + id + "/" + num); } </script> <style> - +#table { + border-collapse: collapse; +} +#table td { + padding: 2px; + padding-left: 7px; + padding-right: 7px; + border: 1px #eee solid; +} </style> </head> <body> -<ol id="lijst"> +<table id="table"><tbody id="tbody"> <!--[[LIJST_ITEMS]]--> -</ol> +</tbody></table> +<br> <input type="text" id="text" placeholder="New item text"> <input type="button" onclick="addItem()" value="Add item"><br> </body> diff --git a/modules/lijst/lijst.js b/modules/lijst/lijst.js index 028e6ce..ce81bb5 100644 --- a/modules/lijst/lijst.js +++ b/modules/lijst/lijst.js @@ -18,14 +18,30 @@ if(!lijst||Array.isArray(lijst)){ var moddir; -function render(res){ - var html=fs.readFileSync(moddir+"/lijst.html")+""; +function repeatstring(n,s){ + return Array(n+1).join(s); +} + +function renderFragment(){ var s=""; for(var i=0;i<lijst.lijst.length;i++){ var text=lijst.lijst[i].text.replace(/</g,"<"); - s+="<li>"+text+" <a href=\"javascript:removeItem("+lijst.lijst[i].id+")\">x</a></li>\n"; + var id=lijst.lijst[i].id; + var votes=lijst.lijst[i].votes||0; + s+="<tr>"; + s+="<td>"+text+"</td>"; + s+="<td><a href=\"javascript:vote("+id+",1)\">↑</a></td>"; + s+="<td><a href=\"javascript:vote("+id+",-1)\">↓</a></td>"; + s+="<td><a href=\"javascript:removeItem("+id+")\">x</a></td>"; + s+="<td>"+(votes>0?repeatstring(votes,"↑"):repeatstring(-votes,"↓"))+"</td>"; + s+="</tr>\n"; } - html=html.replace("<!--[[LIJST_ITEMS]]-->",s); + return s; +} + +function render(res){ + var html=fs.readFileSync(moddir+"/lijst.html")+""; + html=html.replace("<!--[[LIJST_ITEMS]]-->",renderFragment()); res.send(html); } @@ -35,17 +51,27 @@ module.exports=function(app,io,_moddir){ render(res); }); app.post("/lijst/add",function(req,res){ - lijst.lijst.push({text:req.body.trim(),id:lijst.nextid++}); + lijst.lijst.push({text:req.body.trim(),id:lijst.nextid++,votes:0}); persist.setItemSync("lijst",lijst); - res.status(200).end(); + res.status(200).end(renderFragment()); }); 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(); + res.status(200).end(renderFragment()); + } else { + res.status(404).end("ID not found"); + } + }); + app.post("/lijst/vote/:id/:num",function(req,res){ + var delta=req.params.num>0?1:req.params.num<0?-1:0; + var idx=lijst.lijst.findIndex(function(o){return o.id==+req.params.id;}); + if(idx!=-1){ + lijst.lijst[idx].votes+=delta; + persist.setItemSync("lijst",lijst); + res.status(200).end(renderFragment()); } else { res.status(404).end("ID not found"); } |