Skip to content

Instantly share code, notes, and snippets.

@FRiotte

FRiotte/README.md

Last active December 8, 2021 19:21
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save FRiotte/e32f2b942bce77ef6079c0642b93c036 to your computer and use it in GitHub Desktop.
Save FRiotte/e32f2b942bce77ef6079c0642b93c036 to your computer and use it in GitHub Desktop.
Download ZIP
Gridview with CRUD options (mongodb)
Raw
README.md

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

Raw
flow.json
[{"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"}]
@Nickray3108
Copy link

Can I get the source code of this?

@edwardpassagi
Copy link

can I get the source code of this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment