dashboard_2_dialogs.json

[{"id":"185445c997379249","type":"ui-template","z":"0e3249ddee2000e3","group":"","page":"","ui":"cb79bc4520925e32","name":"Dialog Example","order":0,"width":0,"height":0,"head":"","format":"<template>\n    <v-dialog width=\"auto\" v-model=\"dialog\">\n        <v-card color=\"white\" v-click-outside=\"{handler: onClickOutside}\">\n            <v-toolbar color=\"primary\">\n                <v-card-title>\n                    <span>{{dialogData.title}}</span>\n                </v-card-title>\n            </v-toolbar>\n            <v-card-text>\n                <div class=\"text-h2 pa-12\">{{dialogData.content}}</div>\n            </v-card-text>\n            <v-card-actions class=\"justify-end\">\n                <v-btn variant=\"text\" @click=\"closeDialog\">Close</v-btn>\n            </v-card-actions>\n        </v-card>\n    </v-dialog>\n</template>\n\n<script>\n    export default {\n  data() {\n    return {\n        dialogData:null\n    }\n  },\n  watch: {\n      msg: function(){\n          if(this.msg.payload != undefined){                  \n              this.dialogData = this.msg.payload;\n              this.dialogData.shown = false;\n              this.send({payload:undefined});\n          }\n      }\n  },\n  methods:{\n    closeDialog:function(){\n      this.dialogData.shown = true;\n    },\n    onClickOutside () {\n      this.dialogData.shown = true;\n    },\n  },\n  computed : {\n    title: function () {\n      return this.dialogData?.title ?? \"\"\n    },\n    content:function(){\n      return this.dialogData?.content ?? \"\"\n    },\n    dialog: function (){\n      return this.dialogData?.shown == false\n    }        \n  },\n  unmounted () {\n    this.dialogData = null\n  }\n}\n</script>","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"widget:ui","className":"","x":380,"y":2020,"wires":[["42f324c4638ed6b6"]]},{"id":"2c8930c23ad57fad","type":"inject","z":"0e3249ddee2000e3","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"Hello","payload":"{\"title\":\"Delete this file\",\"content\":\"Are you sure you want to do this?\"}","payloadType":"json","x":160,"y":2020,"wires":[["185445c997379249"]]},{"id":"42f324c4638ed6b6","type":"debug","z":"0e3249ddee2000e3","name":"debug 353","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":610,"y":2020,"wires":[]},{"id":"0f05622112dc0d07","type":"ui-template","z":"0e3249ddee2000e3","group":"","page":"","ui":"cb79bc4520925e32","name":"OK/Cancel dialog","order":0,"width":0,"height":0,"head":"","format":"<!-- \n  This pops up an OK/Cancel dialog when sent a payload of the form\n  {\n    title: \"dialog title\",\n    content: \"The text to display in the window\",\n    okText: \"OK\",         // optional, if not present defaults to OK\n    cancelText: \"Cancel\"   // optional, defaults to Cancel\n  }\n  All properties may contain embedded html tags such as <br/>\n  If msg._client is present and contains a socketId (as will be the case if the template is triggered\n  from another widget such as a button) then the popup will only appear on the matching session.\n  For example, if a button widget is fed into the template then the popup will appear only on the browser where the button\n  was clicked.\n  If msg._client is not present then the popup will appear on all connected browsers and will have to be acknowleged on each one.\n\n  When one of the buttons is clicked a message is sent with msg.payload containing the ok or cancel text\n-->\n<template>\n  <v-dialog width=\"auto\" v-model=\"showDialog\">\n    <v-card color=\"white\" v-click-outside=\"{handler: onClickOutside}\">\n      <v-toolbar color=\"primary\">\n        <v-card-title>\n          <span>{{title}}</span>\n        </v-card-title>\n      </v-toolbar>\n      <v-card-text>\n        <div class=\"text-h6\" v-html=\"content\"></div>\n      </v-card-text>\n      <v-card-actions class=\"justify-end\">\n        <v-btn variant=\"elevated\" size=\"large\" @click=\"cancelDialog\" v-html=\"cancelText\"></v-btn>\n        <v-btn variant=\"elevated\" size=\"large\" @click=\"okDialog\" v-html=\"okText\"></v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n        dialogData:null\n    }\n  },\n  watch: {\n      msg: function(){\n          // only show the dialog if msg.payload is an object and the socket id in the message\n          // matches our socket id (which means the popup was initiated from this session) or\n          // there is no _client property present which indicates it should be shown on all sessions.\n          if (typeof this.msg.payload === \"object\" && (!this.msg._client || this.msg._client.socketId === this.$socket.id)) {                  \n              this.dialogData = this.msg.payload;\n              if (!this.dialogData.okText) {\n                this.dialogData.okText = \"OK\"\n              }\n              if (!this.dialogData.cancelText) {\n                this.dialogData.cancelText = \"Cancel\"\n              }\n              this.dialogData.show = true\n          }\n          // prevent redraw on deploy\n          this.msg.payload = null\n      }\n  },\n  methods:{\n    okDialog:function(){\n      this.dialogData.show = false;\n      this.msg.payload = this.dialogData.okText\n      this.send(this.msg);\n    },\n    cancelDialog:function(){\n      this.dialogData.show = false;\n      this.msg.payload = this.dialogData.cancelText\n      this.send(this.msg);\n    },\n    onClickOutside () {\n      this.dialogData.show = false;\n      this.msg.payload = this.dialogData.cancelText\n      this.send(this.msg);\n    },\n  },\n  computed : {\n    title:function(){\n      return this.dialogData?.title ?? \"\"\n    },\n    content:function(){\n      return this.dialogData?.content ?? \"\"\n    },\n    okText:function(){\n      return this.dialogData?.okText ?? \"OK\"\n    },\n    cancelText:function(){\n      return this.dialogData?.cancelText ?? \"Cancel\"\n    },\n    showDialog: function (){\n      return this.dialogData?.show === true\n    }\n  },\n  unmounted () {\n    this.dialogData = null\n  }\n}\n</script>","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"widget:ui","className":"","x":390,"y":2120,"wires":[["64c5c991b3a03353"]]},{"id":"2190cc9325ddbd5d","type":"inject","z":"0e3249ddee2000e3","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"Hello","payload":"{\"title\":\"Are you sure\",\"content\":\"The text to display in the window\",\"okText\":\"OK\",\"cancelText\":\"Cancel\"}","payloadType":"json","x":160,"y":2120,"wires":[["0f05622112dc0d07","f783f5db9e32a440"]]},{"id":"64c5c991b3a03353","type":"debug","z":"0e3249ddee2000e3","name":"debug 359","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":610,"y":2120,"wires":[]},{"id":"f0a88b24f9caecee","type":"comment","z":"0e3249ddee2000e3","name":"Dialogs","info":"","x":80,"y":1940,"wires":[]},{"id":"213a37c61c18e965","type":"ui-template","z":"0e3249ddee2000e3","group":"","page":"","ui":"cb79bc4520925e32","name":"Data Entry dialog","order":0,"width":0,"height":0,"head":"","format":"<!-- \n  This pops up an OK/Cancel dialog when sent a payload of the form\n  {\n    title: \"Kitchen thermostat\",\n    content: \"Enter the target temperature\",\n    okText: \"OK\",         // optional, if not present defaults to OK\n    cancelText: \"Cancel\",   // optional, defaults to Cancel\n    textlabel: \"Target temperature\",\n    textvalue: \"20\"\n  }\n  All properties may contain embedded html tags such as <br/>\n  If msg._client is present and contains a socketId (as will be the case if the template is triggered\n  from another widget such as a button) then the popup will only appear on the matching session.\n  For example, if a button widget is fed into the template then the popup will appear only on the browser where the button\n  was clicked.\n  If msg._client is not present then the popup will appear on all connected browsers and will have to be acknowleged on each one.\n\n  When one of the buttons is clicked a message is sent with msg.payload containing the ok or cancel text\n-->\n<template>\n  <v-dialog width=\"auto\" v-model=\"showDialog\">\n    <v-card color=\"white\" v-click-outside=\"{handler: onClickOutside}\">\n      <v-toolbar color=\"primary\">\n        <v-card-title>\n          <span>{{title}}</span>\n        </v-card-title>\n      </v-toolbar>\n      <v-card-text>\n        <div class=\"text-h6\" v-html=\"content\"></div>\n        <div class=\"d-flex py-2 justify-space-between\"></div>\n        <v-text-field :label=\"textlabel\" v-model=\"textvalue\"></v-text-field>\n      </v-card-text>\n      \n      <v-card-actions class=\"justify-end\">\n        <v-btn variant=\"elevated\" size=\"large\" @click=\"cancelDialog\" v-html=\"cancelText\"></v-btn>\n        <v-btn variant=\"elevated\" size=\"large\" @click=\"okDialog\" v-html=\"okText\"></v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n        dialogData:null,\n        textvalue: 0\n    }\n  },\n  watch: {\n      msg: function(){\n          // only show the dialog if msg.payload is an object and the socket id in the message\n          // matches our socket id (which means the popup was initiated from this session) or\n          // there is no _client property present which indicates it should be shown on all sessions.\n          if (typeof this.msg.payload === \"object\" && (!this.msg._client || this.msg._client.socketId === this.$socket.id)) {                  \n              this.dialogData = this.msg.payload;\n              if (!this.dialogData.okText) {\n                this.dialogData.okText = \"OK\"\n              }\n              if (!this.dialogData.cancelText) {\n                this.dialogData.cancelText = \"Cancel\"\n              }\n              this.dialogData.show = true\n              this.textvalue = this.msg.payload?.textvalue ?? \"\"\n          }\n          // prevent redraw on deploy\n          this.msg.payload = null\n      }\n  },\n  methods:{\n    okDialog:function(){\n      this.dialogData.show = false;\n      this.msg.payload = { action: this.dialogData.okText, textvalue: this.textvalue };\n      this.send(this.msg);\n    },\n    cancelDialog:function(){\n      this.dialogData.show = false;\n      this.msg.payload = { action: this.dialogData.cancelText };\n      this.send(this.msg);\n    },\n    onClickOutside () {\n      this.dialogData.show = false;\n      this.msg.payload = { action: this.dialogData.cancelText };\n      this.send(this.msg);\n    },\n  },\n  computed : {\n    title:function(){\n      return this.dialogData?.title ?? \"\"\n    },\n    content:function(){\n      return this.dialogData?.content ?? \"\"\n    },\n    okText:function(){\n      return this.dialogData?.okText ?? \"OK\"\n    },\n    cancelText:function(){\n      return this.dialogData?.cancelText ?? \"Cancel\"\n    },\n    showDialog: function (){\n      return this.dialogData?.show === true\n    },\n    textlabel: function (){\n      return this.dialogData?.textlabel ?? \"\"\n    }\n  },\n  unmounted () {\n    this.dialogData = null\n  }\n}\n</script>","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"widget:ui","className":"","x":390,"y":2180,"wires":[["d0cbceb7a8d4dcdb"]]},{"id":"31577ab3b5512833","type":"inject","z":"0e3249ddee2000e3","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"Hello","payload":"{\"title\":\"Are you sure\",\"content\":\"The text to display in the window\",\"okText\":\"OK\",\"cancelText\":\"Cancel\",\"textlabel\":\"New set temperature\",\"textvalue\":\"20\"}","payloadType":"json","x":160,"y":2180,"wires":[["213a37c61c18e965"]]},{"id":"d0cbceb7a8d4dcdb","type":"debug","z":"0e3249ddee2000e3","name":"debug 360","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":610,"y":2180,"wires":[]},{"id":"ba23c5db8f9b0c83","type":"ui-template","z":"0e3249ddee2000e3","group":"","page":"","ui":"cb79bc4520925e32","name":"From-To Dates dialog","order":0,"width":0,"height":0,"head":"","format":"<!-- \n  This pops up an OK/Cancel dialog when sent a payload of the form\n  {\n    title: \"Kitchen thermostat\",\n    content: \"Enter the target temperature\",\n    okText: \"OK\",         // optional, if not present defaults to OK\n    cancelText: \"Cancel\",   // optional, defaults to Cancel\n    fromdatelabel: \"From date\",\n    fromdatevalue: \"2024-03-22\",\n    todatelabel: \"To date\",\n    todatevalue: \"2024-04-22\"\n  }\n  All properties may contain embedded html tags such as <br/>\n  If msg._client is present and contains a socketId (as will be the case if the template is triggered\n  from another widget such as a button) then the popup will only appear on the matching session.\n  For example, if a button widget is fed into the template then the popup will appear only on the browser where the button\n  was clicked.\n  If msg._client is not present then the popup will appear on all connected browsers and will have to be acknowleged on each one.\n\n  When one of the buttons is clicked a message is sent with msg.payload containing the ok or cancel text\n-->\n<template>\n  <v-dialog width=\"auto\" v-model=\"showDialog\">\n    <v-card color=\"white\" v-click-outside=\"{handler: onClickOutside}\">\n      <v-toolbar color=\"primary\">\n        <v-card-title>\n          <span>{{title}}</span>\n        </v-card-title>\n      </v-toolbar>\n      <v-card-text>\n        <div class=\"text-h6\" v-html=\"content\"></div>\n        <div class=\"d-flex py-2 justify-space-between\"></div>\n        <v-text-field :label=\"fromdatelabel\" v-model=\"fromdatevalue\" type=\"date\"></v-text-field>\n        <div class=\"d-flex py-2 justify-space-between\"></div>\n        <v-text-field :label=\"todatelabel\" v-model=\"todatevalue\" type=\"date\"></v-text-field>\n      </v-card-text>\n      \n      <v-card-actions class=\"justify-end\">\n        <v-btn variant=\"elevated\" size=\"large\" @click=\"cancelDialog\" v-html=\"cancelText\"></v-btn>\n        <v-btn variant=\"elevated\" size=\"large\" @click=\"okDialog\" v-html=\"okText\"></v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n        dialogData:null,\n        fromdatevalue: Date.now(),\n        todatevalue: Date.now(),\n    }\n  },\n  watch: {\n      msg: function(){\n          // only show the dialog if msg.payload is an object and the socket id in the message\n          // matches our socket id (which means the popup was initiated from this session) or\n          // there is no _client property present which indicates it should be shown on all sessions.\n          if (typeof this.msg.payload === \"object\" && (!this.msg._client || this.msg._client.socketId === this.$socket.id)) {                  \n              this.dialogData = this.msg.payload;\n              if (!this.dialogData.okText) {\n                this.dialogData.okText = \"OK\";\n              }\n              if (!this.dialogData.cancelText) {\n                this.dialogData.cancelText = \"Cancel\";\n              }\n              this.dialogData.show = true;\n              this.fromdatevalue = this.msg.payload?.fromdatevalue ?? \"\";\n              this.todatevalue = this.msg.payload?.todatevalue ?? \"\";\n          }\n          // prevent redraw on deploy\n          this.msg.payload = null\n      }\n  },\n  methods:{\n    okDialog:function(){\n      this.dialogData.show = false;\n      this.msg.payload = { action: this.dialogData.okText, fromdatevalue: this.fromdatevalue, todatevalue: this.todatevalue };\n      this.send(this.msg);\n    },\n    cancelDialog:function(){\n      this.dialogData.show = false;\n      this.msg.payload = { action: this.dialogData.cancelText };\n      this.send(this.msg);\n    },\n    onClickOutside () {\n      this.dialogData.show = false;\n      this.msg.payload = { action: this.dialogData.cancelText };\n      this.send(this.msg);\n    },\n  },\n  computed : {\n    title:function(){\n      return this.dialogData?.title ?? \"\"\n    },\n    content:function(){\n      return this.dialogData?.content ?? \"\"\n    },\n    okText:function(){\n      return this.dialogData?.okText ?? \"OK\"\n    },\n    cancelText:function(){\n      return this.dialogData?.cancelText ?? \"Cancel\"\n    },\n    showDialog: function (){\n      return this.dialogData?.show === true\n    },\n    fromdatelabel: function (){\n      return this.dialogData?.fromdatelabel ?? \"\"\n    },\n    todatelabel: function (){\n      return this.dialogData?.todatelabel ?? \"\"\n    }\n  },\n  unmounted () {\n    this.dialogData = null\n  }\n}\n</script>","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"widget:ui","className":"","x":400,"y":2240,"wires":[["3a4255f2ffce7ddc"]]},{"id":"915ca95b708cb602","type":"inject","z":"0e3249ddee2000e3","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"Hello","payload":"{\"title\":\"Date filter\",\"content\":\"Specify the from and to date for the filter below\",\"okText\":\"OK\",\"cancelText\":\"Cancel\",\"fromdatelabel\":\"From date\",\"fromdatevalue\":\"2024-03-22\",\"todatelabel\":\"To date\",\"todatevalue\":\"2024-04-22\"}","payloadType":"json","x":160,"y":2240,"wires":[["ba23c5db8f9b0c83"]]},{"id":"3a4255f2ffce7ddc","type":"debug","z":"0e3249ddee2000e3","name":"debug 361","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":610,"y":2240,"wires":[]},{"id":"5ef89f81d4f2d761","type":"ui-button","z":"0e3249ddee2000e3","group":"3cfe8b4c394b63c1","name":"","label":"button","order":0,"width":0,"height":0,"passthru":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"{     \"title\": \"Are you sure\",     \"content\": \"The text to display in the window\",     \"okText\": \"OK\",     \"cancelText\": \"Cancel\" }","payloadType":"json","topic":"topic","topicType":"msg","x":150,"y":2080,"wires":[["0f05622112dc0d07","f783f5db9e32a440"]]},{"id":"f783f5db9e32a440","type":"debug","z":"0e3249ddee2000e3","name":"debug 362","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":390,"y":2080,"wires":[]},{"id":"cb79bc4520925e32","type":"ui-base","name":"My UI","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false},{"id":"3cfe8b4c394b63c1","type":"ui-group","name":"Weather Station","page":"2c21edb84dc2257a","width":"6","height":"1","order":-1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"2c21edb84dc2257a","type":"ui-page","name":"Data Visualization","ui":"cb79bc4520925e32","path":"/page1","icon":"database-eye","layout":"grid","theme":"0d92c765bfad87e6","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"0d92c765bfad87e6","type":"ui-theme","name":"Basic Blue Theme","colors":{"surface":"#4d58ff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]