I need help once more.
I need 2 buttons in one tab.
both buttons should popup a modalwindow with, let's say, 3 sub-buttons.
These sub-buttons are different for both buttons.
Each sub-button sends some data and closes the modalwindow
I solved it by using NEARLY the same js programm in two templates.
I can out source the js into an external file in httpstatic-path - works, if the 2 js-files are different by name and all functions in it....
But the two js files are so similar, it would be nice, to have just ONE file.
Is this possible?
The original idea comes "Steve-Mcl" and "Daniel Lando" ? but I'm not shure, where I found it in the net.
[
{
"id": "01218e22469390c8",
"type": "tab",
"label": "Flow 10",
"disabled": false,
"info": "",
"env": []
},
{
"id": "b8bc3686ce3e335b",
"type": "ui_button",
"z": "01218e22469390c8",
"name": "Button2",
"group": "55a665e8b8a0780e",
"order": 6,
"width": 4,
"height": 4,
"passthru": false,
"label": "Button2",
"tooltip": "",
"color": "{{msg.textcolor}}",
"bgcolor": "{{msg.bgcolor}}",
"className": "",
"icon": "",
"payload": "",
"payloadType": "str",
"topic": "show",
"topicType": "str",
"x": 360,
"y": 220,
"wires": [
[
"4c55e3b9a98768cc"
]
]
},
{
"id": "b949e2c6a6490d32",
"type": "ui_button",
"z": "01218e22469390c8",
"name": "Button1",
"group": "55a665e8b8a0780e",
"order": 1,
"width": 4,
"height": 4,
"passthru": false,
"label": "Button1",
"tooltip": "",
"color": "{{msg.textcolor}}",
"bgcolor": "{{msg.bgcolor}}",
"className": "",
"icon": "",
"payload": "",
"payloadType": "str",
"topic": "show",
"topicType": "str",
"x": 360,
"y": 120,
"wires": [
[
"428ed858b869c152"
]
]
},
{
"id": "428ed858b869c152",
"type": "ui_template",
"z": "01218e22469390c8",
"group": "97820d38b93906c6",
"name": "pupup1",
"order": 1,
"width": 0,
"height": 0,
"format": "<div ng-init=\"init()\" id=\"popup_dialog\" class=\"dialog\">\n <div class=\"dialog_content\">\n <div class=\"dialog_header\">\n <span ng-click=\"closeDialog()\" class=\"close\">×</span>\n <h2 class=\"title\">{{payload.tile}}</h2>\n </div>\n <div class=\"dialog_body\">\n <div layout=\"column\" layout-align=\"center\" style=\"margin-top: 10px\">\n <div layout=\"row\" layout-align=\"center\">\n <div class=\"btn_box\">\n <md-button class=\"btn\" ng-click=\"pos1_1()\">\n <ng-md-icon icon=\"done\" style=\"color:#fff;\"></ng-md-icon> pos1_1\n </md-button>\n </div>\n <div class=\"btn_box\">\n <md-button class=\"btn\" ng-click=\"pos1_2()\">\n <ng-md-icon icon=\"done\" style=\"color:#fff;\"></ng-md-icon> pos1_2\n </md-button>\n </div>\n \n <div class=\"btn_box\">\n <md-button class=\"btn\" ng-click=\"cancel()\">\n <ng-md-icon icon=\"close\" style=\"color:#fff;\"></ng-md-icon> cancel\n </md-button>\n </div>\n </div>\n </div> \n \n </div> <!--dialog_body-->\n </div> <!--dialog_content-->\n</div> <!--dialog-->\n\n\n<style>\n/* The Dialog (background) */\n.dialog {\n display: none; /* Hidden by default */\n position: fixed; /* Stay in place */\n z-index: 9999; /* Sit on top */\n left: 0;\n top: 0;\n width: 100%; /* Full width */\n height: 100%; /* Full height */\n overflow: auto; /* Enable scroll if needed */\n background-color: rgb(0,0,0); /* Fallback color */\n background-color: rgba(0,0,0,0.4); /* Black w/ opacity */\n -webkit-transform: translateZ(0px);\n -webkit-transform: translate3d(0,0,0);\n -webkit-perspective: 1000;\n}\n\n.dialog_content {\n position: absolute;\n background-color: #fff;\n left: calc(50% - 170px);\n top: 30px;\n border-radius: 10px;\n padding: 0;\n width: 340px;\n box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);\n -webkit-animation-name: animatetop;\n animation-name: animatetop;\n animation-duration: 0.4s;\n}\nh2.title {\n margin:10px;\n font-size: 20px;\n}\n/* Media query for smartphones (to Fix?) */\n@media only screen and (min-device-width : 375px) and (max-device-width : 667px) { \n .dialog_content {\n margin-top: 5%;\n margin-left: 5%;\n}\n}\n\n/* Add Animation */\n@-webkit-keyframes animatetop {\n from {top: -300px; opacity: 0} \n to {top: 0; opacity: 1}\n}\n\n@keyframes animatetop {\n from {top: -300px; opacity: 0}\n to {top: 0; opacity: 1}\n}\n\n/* Dialog Header */\n.dialog_header {\n padding: 2px 16px;\n background-color: #03A9F4;\n border-radius: 10px 10px 0 0;\n color: white;\n}\n\n/* Dialog Body */\n.dialog_body {padding: 5px;}\n\n/* The Close Button */\n.close {\n color: #fff;\n float: right;\n font-size: 28px;\n font-weight: bold;\n cursor: pointer;\n}\n\n.close:hover,\n.close:focus {\n color: #1565C0;\n text-decoration: none;\n cursor: pointer;\n}\n\n/* Number container */\n.btn_box{\n margin: 0px;\n}\n\n/* Buttons style */\n.btn {\n border-radius: 12px;\n min-height: 40px;\n min-width: 80px;\n font-weight: bold;\n margin: 10px 10px 10px 10px;\n box-shadow: 4px 4px 6px 0 #dadada;\n background-color: #29B6F6;\n color: #fff;\n}\n\n.btn:not([disabled]):hover {\n background-color: #03A9F4;\n}\n</style>\n\n<script>\n var dialog;\nvar count = 0;\n\n/* ==== */\n(function(scope) {\n\t//console.log([\"START\",scope]);\n\tscope.userInput = \"\";\n scope.payload = \"\";\n scope.topic = \"\";\n scope.inited = false;\n\t\n\tscope.init = function() {\n\t\tconsole.log([\"init\"]);\n scope.userInput = \"\";\n //Hide the md-panel\n $('#popup_dialog').parent().parent().css(\"display\", \"none\");\n dialog = $('#popup_dialog').detach();\n }\n \n scope.showDialog = function() {\n\t\tconsole.log([\"showDialog\"]);\n dialog.appendTo(document.body); // better to add the body only when the numpad is displayed (seams to be removed automatically)\n dialog.css(\"display\", \"block\");\n\t\tconsole.log([\"showDialog end\"]);\n }\n \n scope.closeDialog = function(){\n\t\tconsole.log([\"closeDialog\"]);\n scope.userInput = \"\";\n scope.payload = \"\";\n scope.topic = \"\";\n dialog.css(\"display\", \"none\");\n }\n \n\n scope.cancel = function() {\n scope.closeDialog();\n }\n scope.reset = function() {\n scope.send({topic: scope.payload.topic || scope.topic, userInput: scope.userInput,payload: \"0\"});\n scope.closeDialog();\n }\n scope.on = function() {\n scope.send({topic: scope.payload.topic || scope.topic, userInput: scope.userInput,payload: \"ON\"});\n scope.closeDialog();\n }\n scope.off = function() {\n scope.send({topic: scope.payload.topic || scope.topic, userInput: scope.userInput,payload: \"OFF\"});\n scope.closeDialog();\n }\n scope.pos1_1 = function() {\n scope.send({topic: scope.payload.topic || scope.topic, userInput: scope.userInput,payload: \"pos1_1\"});\n scope.closeDialog();\n }\n scope.pos1_2 = function() {\n scope.send({topic: scope.payload.topic || scope.topic, userInput: scope.userInput,payload: \"pos1_2\"});\n scope.closeDialog();\n }\n\n scope.$watch('msg', function(data) {\n if(data.topic){\n switch(data.topic){\n case \"show\":\n if(scope.inited){\n scope.topic = data.topic;\n scope.payload = data.payload;\n scope.showDialog();\n }\n else\n scope.inited = true;\n break;\n case \"close\": \n scope.closeDialog(); \n break;\n }\n }\n });\n})(scope);\n\n\n \n</script>\n\n",
"storeOutMessages": false,
"fwdInMessages": false,
"resendOnRefresh": false,
"templateScope": "local",
"className": "",
"x": 540,
"y": 120,
"wires": [
[
"89c36588cdb9662e"
]
]
},
{
"id": "4c55e3b9a98768cc",
"type": "ui_template",
"z": "01218e22469390c8",
"group": "97820d38b93906c6",
"name": "popup2",
"order": 2,
"width": 0,
"height": 0,
"format": "<div ng-init=\"init2()\" id=\"popup_dialog2\" class=\"dialog\">\n <div class=\"dialog_content\">\n <div class=\"dialog_header\">\n <span ng-click=\"closeDialog2()\" class=\"close\">×</span>\n <h2 class=\"title\">{{payload.tile}}</h2>\n </div>\n <div class=\"dialog_body\">\n <div layout=\"column\" layout-align=\"center\" style=\"margin-top: 10px\">\n <div layout=\"row\" layout-align=\"center\">\n <div class=\"btn_box\">\n <md-button class=\"btn\" ng-click=\"pos2_1()\">\n <ng-md-icon icon=\"done\" style=\"color:#fff;\"></ng-md-icon> pos2_1\n </md-button>\n </div>\n <div class=\"btn_box\">\n <md-button class=\"btn\" ng-click=\"pos2_2()\">\n <ng-md-icon icon=\"done\" style=\"color:#fff;\"></ng-md-icon> pos2_2\n </md-button>\n </div>\n \n <div class=\"btn_box\">\n <md-button class=\"btn\" ng-click=\"closeDialog2()\">\n <ng-md-icon icon=\"close\" style=\"color:#fff;\"></ng-md-icon> cancel\n </md-button>\n </div>\n </div>\n </div> \n \n </div> <!--dialog_body-->\n </div> <!--dialog_content-->\n</div> <!--dialog-->\n\n\n<style>\n/* The Dialog (background) */\n.dialog {\n display: none; /* Hidden by default */\n position: fixed; /* Stay in place */\n z-index: 9999; /* Sit on top */\n left: 0;\n top: 0;\n width: 100%; /* Full width */\n height: 100%; /* Full height */\n overflow: auto; /* Enable scroll if needed */\n background-color: rgb(0,0,0); /* Fallback color */\n background-color: rgba(0,0,0,0.4); /* Black w/ opacity */\n -webkit-transform: translateZ(0px);\n -webkit-transform: translate3d(0,0,0);\n -webkit-perspective: 1000;\n}\n\n.dialog_content {\n position: absolute;\n background-color: #fff;\n left: calc(50% - 170px);\n top: 30px;\n border-radius: 10px;\n padding: 0;\n width: 340px;\n box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);\n -webkit-animation-name: animatetop;\n animation-name: animatetop;\n animation-duration: 0.4s;\n}\nh2.title {\n margin:10px;\n font-size: 20px;\n}\n/* Media query for smartphones (to Fix?) */\n@media only screen and (min-device-width : 375px) and (max-device-width : 667px) { \n .dialog_content {\n margin-top: 5%;\n margin-left: 5%;\n}\n}\n\n/* Add Animation */\n@-webkit-keyframes animatetop {\n from {top: -300px; opacity: 0} \n to {top: 0; opacity: 1}\n}\n\n@keyframes animatetop {\n from {top: -300px; opacity: 0}\n to {top: 0; opacity: 1}\n}\n\n/* Dialog Header */\n.dialog_header {\n padding: 2px 16px;\n background-color: #03A9F4;\n border-radius: 10px 10px 0 0;\n color: white;\n}\n\n/* Dialog Body */\n.dialog_body {padding: 5px;}\n\n/* The Close Button */\n.close {\n color: #fff;\n float: right;\n font-size: 28px;\n font-weight: bold;\n cursor: pointer;\n}\n\n.close:hover,\n.close:focus {\n color: #1565C0;\n text-decoration: none;\n cursor: pointer;\n}\n\n/* Number container */\n.btn_box{\n margin: 0px;\n}\n\n/* Buttons style */\n.btn {\n border-radius: 12px;\n min-height: 40px;\n min-width: 80px;\n font-weight: bold;\n margin: 10px 10px 10px 10px;\n box-shadow: 4px 4px 6px 0 #dadada;\n background-color: #29B6F6;\n color: #fff;\n}\n\n.btn:not([disabled]):hover {\n background-color: #03A9F4;\n}\n</style>\n\n<script>\n var dialog;\nvar count = 0;\n\n/* ==== */\n(function(scope) {\n\t//console.log([\"START\",scope]);\n\tscope.userInput = \"\";\n scope.payload = \"\";\n scope.topic = \"\";\n scope.inited = false;\n\t\n\tscope.init2 = function() {\n\t\tconsole.log([\"init\"]);\n scope.userInput = \"\";\n //Hide the md-panel\n $('#popup_dialog2').parent().parent().css(\"display\", \"none\");\n dialog2 = $('#popup_dialog2').detach();\n }\n \n scope.showDialog2 = function() {\n\t\tconsole.log([\"showDialog\"]);\n dialog2.appendTo(document.body); // better to add the body only when the numpad is displayed (seams to be removed automatically)\n dialog2.css(\"display\", \"block\");\n\t\tconsole.log([\"showDialog end\"]);\n }\n \n scope.closeDialog2 = function(){\n\t\tconsole.log([\"closeDialog\"]);\n scope.userInput = \"\";\n scope.payload = \"\";\n scope.topic = \"\";\n dialog2.css(\"display\", \"none\");\n }\n \n\n scope.cancel = function() {\n scope.closeDialog2();\n }\n scope.reset = function() {\n scope.send({topic: scope.payload.topic || scope.topic, userInput: scope.userInput,payload: \"0\"});\n scope.closeDialog2();\n }\n scope.on = function() {\n scope.send({topic: scope.payload.topic || scope.topic, userInput: scope.userInput,payload: \"ON\"});\n scope.closeDialog2();\n }\n scope.off = function() {\n scope.send({topic: scope.payload.topic || scope.topic, userInput: scope.userInput,payload: \"OFF\"});\n scope.closeDialog2();\n }\n scope.pos2_1 = function() {\n scope.send({topic: scope.payload.topic || scope.topic, userInput: scope.userInput,payload: \"pos2_1\"});\n scope.closeDialog2();\n }\n scope.pos2_2 = function() {\n scope.send({topic: scope.payload.topic || scope.topic, userInput: scope.userInput,payload: \"pos2_2\"});\n scope.closeDialog2();\n }\n\n scope.$watch('msg', function(data) {\n if(data.topic){\n switch(data.topic){\n case \"show\":\n if(scope.inited){\n scope.topic = data.topic;\n scope.payload = data.payload;\n scope.showDialog2();\n }\n else\n scope.inited = true;\n break;\n case \"close\": \n scope.closeDialog2(); \n break;\n }\n }\n });\n})(scope);\n\n \n \n \n \n</script>\n\n",
"storeOutMessages": false,
"fwdInMessages": false,
"resendOnRefresh": false,
"templateScope": "local",
"className": "",
"x": 540,
"y": 220,
"wires": [
[
"9e482040035af11b"
]
]
},
{
"id": "9e482040035af11b",
"type": "debug",
"z": "01218e22469390c8",
"name": "",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 850,
"y": 220,
"wires": []
},
{
"id": "89c36588cdb9662e",
"type": "debug",
"z": "01218e22469390c8",
"name": "",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 850,
"y": 120,
"wires": []
},
{
"id": "d594acda0709f08f",
"type": "ui_spacer",
"z": "01218e22469390c8",
"name": "spacer",
"group": "55a665e8b8a0780e",
"order": 2,
"width": 2,
"height": 1
},
{
"id": "6630385b7e1b4ee0",
"type": "ui_spacer",
"z": "01218e22469390c8",
"name": "spacer",
"group": "55a665e8b8a0780e",
"order": 3,
"width": 2,
"height": 1
},
{
"id": "f4f6c12358fd9461",
"type": "ui_spacer",
"z": "01218e22469390c8",
"name": "spacer",
"group": "55a665e8b8a0780e",
"order": 4,
"width": 2,
"height": 1
},
{
"id": "e6a5098e7d03ba17",
"type": "ui_spacer",
"z": "01218e22469390c8",
"name": "spacer",
"group": "55a665e8b8a0780e",
"order": 5,
"width": 2,
"height": 1
},
{
"id": "0dbef1aee397fc6c",
"type": "ui_spacer",
"z": "01218e22469390c8",
"name": "spacer",
"group": "55a665e8b8a0780e",
"order": 7,
"width": 2,
"height": 1
},
{
"id": "69aef9bf4f4730f0",
"type": "ui_spacer",
"z": "01218e22469390c8",
"name": "spacer",
"group": "55a665e8b8a0780e",
"order": 8,
"width": 2,
"height": 1
},
{
"id": "40233b0653946721",
"type": "ui_spacer",
"z": "01218e22469390c8",
"name": "spacer",
"group": "55a665e8b8a0780e",
"order": 9,
"width": 2,
"height": 1
},
{
"id": "b55e91c99ee6f01f",
"type": "ui_spacer",
"z": "01218e22469390c8",
"name": "spacer",
"group": "55a665e8b8a0780e",
"order": 10,
"width": 2,
"height": 1
},
{
"id": "55a665e8b8a0780e",
"type": "ui_group",
"name": "Default",
"tab": "8e397f05576f1e46",
"order": 1,
"disp": true,
"width": "6",
"collapse": false,
"className": ""
},
{
"id": "97820d38b93906c6",
"type": "ui_group",
"name": "Group 2",
"tab": "8e397f05576f1e46",
"order": 2,
"disp": true,
"width": 6
},
{
"id": "8e397f05576f1e46",
"type": "ui_tab",
"name": "Home",
"icon": "dashboard",
"disabled": false,
"hidden": false
}
]
p.s.
how can I reduce the code window to just 1 row?
