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.

capture

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. capture

Note: some third-party nodes may appear with blank styling, and not as they appear in the Node-RED Editor.

[{"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"}]

Flow Info

Created 8 years, 8 months ago

Updated 6 years, 9 months ago

Rating: not yet rated

view on github

Owner

FRiotte

Actions

share flow

Node Types

Core

comment (x1)
function (x5)
http in (x4)
http response (x4)
json (x1)
template (x1)

Other

mongodb2 (x1)
mongodb2 in (x4)
objectid (x2)