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

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

Flow Info

created 9 months, 2 weeks ago

Node Types

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

Tags

  • mongodb2
  • ObjectId
  • CRUD
  • REST
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option