Gridview with CRUD options (mongodb)
This flow use html template and jsGrid to display, insert, update, delete data.
The grid is accessible at the address:http://<node-red>:<port>/plates.
Like any REST apps, the grid uses ajax POST request to insert, PUT request to update and DELETE request to delete.
It relies on a mongoDB database. The collection is called LicencePlate. The format of each document is as follows:
{
"_id": ObjectID("585a4732ac11400192a60b85"),
"nom": "nameOfUser",
"prenom": "FirstNameOfUser",
"immatriculation": "123456",
"heure": "13",
"minute": "30"
}
The flow also uses the ObjectId node to generate the ObjectId for the _id field.
[{"id":"9568c2b2.ae4098","type":"http in","z":"5025af55.91578","name":"","url":"/update","method":"put","swaggerDoc":"","x":159,"y":261.5834045410156,"wires":[["d36ab408.cd59f8"]]},{"id":"af08effc.5fdca8","type":"mongodb2 in","z":"5025af55.91578","service":"_ext_","configNode":"f6c122ad.621c98","name":"","collection":"LicencePlate","operation":"update","x":935.9998779296875,"y":261.7167053222656,"wires":[["70b86fd6.3ff418"]]},{"id":"80b7d10e.159df","type":"http response","z":"5025af55.91578","name":"","x":1404.9998779296875,"y":260.3166809082031,"wires":[]},{"id":"9197d5cb.7dbb78","type":"function","z":"5025af55.91578","name":"update request","func":"/*\nmsg.result correspond à l'objet mis à jour,\nle delete permet de supprimer la propriété\n_id de l'objet, en effet l'_id est géré directement\npar le noued OjectId\npour la requète update \non doit fournir un tableau \n[\n<query>,\n<valeur mises à jour>\n]\n\nici ce sera de la forme:\n[\n {_id:ObjectId(\"xxx\")},\n {\"nom\": \"toto\", \"prenom\": \"tutu\", \n \"immatriculation\": \"AB123CD\", \n \"heure\": null, \"minute\": null\n }\n]\n*/\nmsg.result=msg.req.body;\ndelete msg.req.body._id;\nmsg.payload=[\n msg.payload,\n msg.req.body\n ];\nreturn msg;\n\n","outputs":"1","noerr":0,"x":695.7666015625,"y":261.9499816894531,"wires":[["af08effc.5fdca8"]]},{"id":"d36ab408.cd59f8","type":"function","z":"5025af55.91578","name":"extract _id","func":"msg._id=msg.payload._id;\nreturn msg;","outputs":1,"noerr":0,"x":346.88336181640625,"y":262.3833312988281,"wires":[["79d55fc7.1ce2f8"]]},{"id":"79d55fc7.1ce2f8","type":"objectid","z":"5025af55.91578","name":"","x":500.8833312988281,"y":262.0500793457031,"wires":[["9197d5cb.7dbb78"]]},{"id":"a8dde467.e5dcd8","type":"template","z":"5025af55.91578","name":"Web Template","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n <title>Licence Plate</title>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css\" />\n <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js\"></script>\n <script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js\"></script>\n <link type=\"text/css\" rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css\" />\n <link type=\"text/css\" rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css\" />\n <script type=\"text/javascript\" src=\"https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js\"></script>\n\n <script type=\"text/javascript\">\n $(function () {\n var db = {{#payload}}{{{.}}}{{/payload}};\n $(\"#jsgrid\").jsGrid({\n width: \"100%\",\n inserting: true,\n editing: true,\n sorting: true,\n paging: true,\n\n data: db,\n\n fields: [\n { title:\"Nom\", name: \"nom\", type: \"text\", width: 50 },\n { title:\"Prénom\", name: \"prenom\", type: \"text\", width: 50 },\n { title:\"Plaque\", name: \"immatriculation\", type: \"text\", width: 50 },\n { title:\"Heure\", name: \"heure\", type:\"number\", width: 25},\n { title:\"Minute\", align:\"left\", name: \"minute\", type:\"number\" , width: 25},\n { type: \"control\" }\n ],\n \n controller: {\n insertItem: function(item) {\n return $.ajax({\n type: \"POST\",\n url: \"/insert\",\n data: item\n });\n },\n updateItem: function(item) {\n return $.ajax({\n type: \"PUT\",\n url: \"/update\",\n data: item\n });\n },\n deleteItem: function(item) {\n return $.ajax({\n type: \"DELETE\",\n url: \"/delete\",\n data: item\n });\n }\n } \n });\n });\n \n </script>\n</head>\n<body class=\"container\">\n <section class=\"row\">\n \n <div class=\"col-md-6\"></div>\n <div class=\"col-md-6\" id=\"jsgrid\">\n </div>\n </section>\n</body>\n</html>\n\n","x":1258.7666015625,"y":135.18333435058594,"wires":[["e4bd0337.229be8"]]},{"id":"3fa8dafa.229966","type":"http in","z":"5025af55.91578","name":"","url":"/plates","method":"get","swaggerDoc":"","x":165.76666259765625,"y":136.18333435058594,"wires":[["22d679eb.c41196"]]},{"id":"e4bd0337.229be8","type":"http response","z":"5025af55.91578","name":"","x":1439.7666015625,"y":136.4166717529297,"wires":[]},{"id":"22d679eb.c41196","type":"mongodb2 in","z":"5025af55.91578","service":"_ext_","configNode":"f6c122ad.621c98","name":"","collection":"LicencePlate","operation":"find.toArray","x":773.88330078125,"y":135.88333129882812,"wires":[["afbe2510.245be8"]]},{"id":"afbe2510.245be8","type":"json","z":"5025af55.91578","name":"","x":1065.7666015625,"y":134.88333129882812,"wires":[["a8dde467.e5dcd8"]]},{"id":"70b86fd6.3ff418","type":"function","z":"5025af55.91578","name":"callback response","func":"/*\npour que la jsGrid soit rafraichie, \nil faut lui envoyer l'objet qui a été mis à jour\n*/\nmsg.payload=msg.result;\nreturn msg;","outputs":1,"noerr":0,"x":1203.7666015625,"y":261.1000061035156,"wires":[["80b7d10e.159df"]]},{"id":"713c7f1e.91be6","type":"mongodb2 in","z":"5025af55.91578","service":"_ext_","configNode":"f6c122ad.621c98","name":"","collection":"LicencePlate","operation":"insert","x":942.8831787109375,"y":358.0166320800781,"wires":[["e53bf9ab.ef35f8"]]},{"id":"66d97ed7.39f1c","type":"http response","z":"5025af55.91578","name":"","x":1413.8831787109375,"y":356.6166076660156,"wires":[]},{"id":"a60ce791.6f5ae8","type":"http in","z":"5025af55.91578","name":"","url":"/insert","method":"post","swaggerDoc":"","x":158.76666259765625,"y":351.8334045410156,"wires":[["713c7f1e.91be6"]]},{"id":"5f79d9fd.25c4f","type":"http in","z":"5025af55.91578","name":"","url":"/delete","method":"delete","swaggerDoc":"","x":171.76666259765625,"y":448.8333740234375,"wires":[["f19e351.734e448"]]},{"id":"6facca77.95617c","type":"mongodb2 in","z":"5025af55.91578","service":"_ext_","configNode":"f6c122ad.621c98","name":"","collection":"LicencePlate","operation":"deleteOne","x":953.88330078125,"y":447.88330078125,"wires":[["17b5b5c4.a8a7b2"]]},{"id":"f19e351.734e448","type":"function","z":"5025af55.91578","name":"extract _id","func":"msg._id=msg.payload._id;\nreturn msg;","outputs":1,"noerr":0,"x":368.8833312988281,"y":448.88330078125,"wires":[["e5efe654.b0a9b8"]]},{"id":"e5efe654.b0a9b8","type":"objectid","z":"5025af55.91578","name":"","x":540.88330078125,"y":448.550048828125,"wires":[["6facca77.95617c"]]},{"id":"17b5b5c4.a8a7b2","type":"http response","z":"5025af55.91578","name":"","x":1413.7666015625,"y":443.4166259765625,"wires":[]},{"id":"e53bf9ab.ef35f8","type":"function","z":"5025af55.91578","name":"callback response","func":"/*\npour que la jsGrid soit rafraichie, \nil faut lui envoyer l'objet qui a été mis à jour\n*/\nmsg.payload=msg.req.body;\nreturn msg;","outputs":1,"noerr":0,"x":1210.88330078125,"y":357.8833312988281,"wires":[["66d97ed7.39f1c"]]},{"id":"ba1ead96.ff6f38","type":"comment","z":"5025af55.91578","name":"database collection information","info":"The collection is named LicensePlate. \nEach document format is :\n```JavaScript\n{\n \"_id\": ObjectID(\"585a4732ac11400192a60b85\"),\n \"nom\": \"riotte\",\n \"prenom\": \"françois\",\n \"immatriculation\": \"123456\",\n \"heure\": \"13\",\n \"minute\": \"30\"\n}\n```","x":915.7666320800781,"y":57.883331298828125,"wires":[]},{"id":"f6c122ad.621c98","type":"mongodb2","z":"","uri":"mongodb://localhost:27017/db","name":"db","options":"","parallelism":"-1"}]
